Tworzenie mapy
W tym artykule przedstawiono sposoby tworzenia mapy i animowania mapy.
Ładowanie mapy
Aby załadować mapę, utwórz nowe wystąpienie klasy Map. Podczas inicjowania mapy przekaż identyfikator elementu DIV, aby renderować mapę i przekazać zestaw opcji do użycia podczas ładowania mapy. Jeśli domyślne informacje dotyczące uwierzytelniania nie są określone w atlas
przestrzeni nazw, te informacje należy określić w opcjach mapy podczas ładowania mapy. Mapa ładuje kilka zasobów asynchronicznie na potrzeby wydajności. W związku z tym po utworzeniu wystąpienia mapy dołącz ready
zdarzenie lub load
do mapy, a następnie dodaj więcej kodu, który wchodzi w interakcję z mapą do programu obsługi zdarzeń. Zdarzenie ready
jest uruchamiane tak szybko, jak mapa ma wystarczającą ilość zasobów załadowanych do interakcji programowo. Zdarzenie load
jest uruchamiane po zakończeniu ładowania początkowego widoku mapy.
Możesz również załadować wiele map na tej samej stronie, aby uzyskać przykładowy kod, który pokazuje ładowanie wielu map na tej samej stronie, zobacz Wiele map w Azure Maps Przykłady. Aby zapoznać się z kodem źródłowym dla tego przykładu, zobacz Wiele map kodu źródłowego.
Porada
W przypadku korzystania z wielu map na tej samej stronie można użyć tych samych lub różnych ustawień uwierzytelniania i języka.
Pokaż jedną kopię świata
Gdy mapa jest pomniejszana na szerokim ekranie, wiele kopii świata jest wyświetlanych w poziomie. Ta opcja jest świetna w przypadku niektórych scenariuszy, ale w przypadku innych aplikacji pożądane jest, aby zobaczyć jedną kopię świata. To zachowanie jest implementowane przez ustawienie opcji mapy renderWorldCopies
na false
wartość .
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
Opcje mapy
Podczas tworzenia mapy istnieje kilka różnych typów opcji, które można przekazać, aby dostosować sposób działania mapy:
- Aparaty CameraOptions i CameraBoundOptions służą do określania obszaru, w ramach którego powinna być wyświetlana mapa.
- Usługa ServiceOptions służy do określania sposobu interakcji mapy z usługami, które zasilają mapę.
- StyleOptions służą do określania mapy powinny być stylizowane i renderowane.
- Funkcja UserInteractionOptions służy do określania sposobu osiągnięcia mapy, gdy użytkownik wchodzi w interakcję z mapą.
Te opcje można również zaktualizować po załadowaniu mapy przy użyciu setCamera
funkcji , setServiceOptions
, setStyle
i setUserInteraction
.
Sterowanie kamerą mapy
Istnieją dwa sposoby ustawiania wyświetlanego obszaru mapy przy użyciu aparatu mapy. Opcje aparatu można ustawić podczas ładowania mapy. Możesz też wywołać setCamera
tę opcję w dowolnym momencie po załadowaniu mapy, aby programowo zaktualizować widok mapy.
Ustawianie aparatu
Aparat mapy kontroluje, co jest wyświetlane w widoku kanwy mapy. Opcje aparatu można przekazać do opcji mapy podczas inicjowania lub przekazywania do funkcji mapy setCamera
.
// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
center: [-122.33, 47.6],
zoom: 12
//Additional map options.
};
//Update the map camera at anytime using setCamera function.
map.setCamera({
center: [-110, 45],
zoom: 5
});
Właściwości mapy, takie jak środek i poziom powiększenia, są częścią właściwości CameraOptions .
Ustawianie granic aparatu
Pole ograniczenia może służyć do aktualizowania aparatu mapy. Jeśli pole ograniczenia zostało obliczone na podstawie danych punktów, często przydaje się określenie wartości dopełniania pikseli w opcjach aparatu do uwzględnienia rozmiaru ikony. To wypełnienie pikseli pomaga zagwarantować, że punkty nie spadną z krawędzi ekranu mapy.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
W poniższym kodzie obiekt Map jest konstruowany za pomocą metody new atlas.Map()
. Właściwości mapy, takie jak CameraBoundsOptions
można zdefiniować za pomocą funkcji setCamera klasy Map. Właściwości granic i wypełniania są ustawiane przy użyciu polecenia setCamera
.
Animowanie widoku mapy
Podczas ustawiania opcji aparatu mapy można również ustawić opcje animacji . Te opcje określają typ animacji i czas trwania, który powinien potrwać, aby przenieść kamerę.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
W poniższym kodzie pierwszy blok kodu tworzy mapę i ustawia style map enter i zoom. W drugim bloku kodu zostanie utworzona procedura obsługi zdarzeń kliknięcia dla przycisku animowania. Po wybraniu tego przycisku funkcja jest wywoływana setCamera
z kilkoma wartościami losowymi dla opcji CameraOptions i AnimationOptions.
<!DOCTYPE html>
<html>
<head>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script type="text/javascript">
var map;
function InitMap()
{
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
style: 'road',
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Get an Azure Maps key at https://azuremaps.com/.
authType: 'subscriptionKey',
subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
}
});
}
/* Animate map view to set camera location
to random points on the map*/
function animateMap() {
map.setCamera({
zoom: Math.random() *2 + 12,
duration: 1000,
type: 'fly'
});
}
</script>
<style>
button {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<html style='width:100%;height:100%;'>
<body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'>
<div id='myMap' style='position:relative;width:100%;height:100%;'></div>
<button onclick="animateMap()">Animate Maps</button>
<div id="my-text-box"></div>
</body>
</html>
Przekształcenia żądań
Czasami przydaje się możliwość modyfikowania żądań HTTP wysyłanych przez kontrolkę mapy. Na przykład:
- Dodaj więcej nagłówków do żądań kafelków dla usług chronionych hasłem.
- Zmodyfikuj adresy URL, aby uruchamiać żądania za pośrednictwem usługi serwera proxy.
Opcje usługi mapy mają transformRequest
wartość , która może służyć do modyfikowania wszystkich żądań wysyłanych przez mapę przed ich wykonaniem. Opcja transformRequest
jest funkcją, która przyjmuje dwa parametry; adres URL ciągu i ciąg typu zasobu, który wskazuje, do czego służy żądanie. Ta funkcja musi zwrócić wynik RequestParameters .
transformRequest: (url: string, resourceType: string) => RequestParameters
W przypadku korzystania z przekształcenia żądania należy zwrócić RequestParameters
obiekt, który zawiera url
właściwość co najmniej. Poniżej przedstawiono właściwości, które można uwzględnić w RequestParameters
obiekcie.
Opcja | Typ | Opis |
---|---|---|
body | ciąg | Treść żądania POST. |
poświadczenia | 'same-origin' | 'include' |
Służy do określania ustawienia poświadczeń żądania między źródłami (CORs). Użyj polecenia "include", aby wysyłać pliki cookie z żądaniami między źródłami. |
Nagłówki | object | Nagłówki, które mają być wysyłane za pomocą żądania. Obiekt jest parą klucz wartości ciągu. |
method | 'GET' | 'POST' | 'PUT' |
Typ żądania do złożenia. Wartość domyślna to 'GET' . |
typ | 'string' | 'json' | 'arrayBuffer' |
Format treści odpowiedzi POST. |
url | ciąg | Adres URL, który ma zostać żądany. |
Typy zasobów najbardziej istotne dla zawartości dodawanej do mapy są wymienione w poniższej tabeli:
Typ zasobu | Opis |
---|---|
Obraz | Żądanie obrazu do użycia z elementem SymbolLayer lub ImageLayer. |
Element źródłowy | Żądanie informacji źródłowych, takich jak żądanie TileJSON. Niektóre żądania ze stylów mapy podstawowej używają również tego typu zasobu podczas ładowania informacji źródłowych. |
Kafelek | Żądanie z warstwy kafelka (raster lub wektor). |
WFS | Żądanie z WfsClient modułu Spatial IO do usługi funkcji internetowej OGC. Aby uzyskać więcej informacji, zobacz Nawiązywanie połączenia z usługą WFS. |
WebMapService | Żądanie z modułu OgcMapLayer Spatial IO do usługi WMS lub WMTS. Aby uzyskać więcej informacji, zobacz Dodawanie warstwy mapy z open Geospatial Consortium (OGC). |
Poniżej przedstawiono niektóre typy zasobów, które są zwykle ignorowane, przekazywane przez przekształcenie żądania i są powiązane z stylami mapy podstawowej: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Uznanie autorstwa.
W poniższym przykładzie pokazano, jak zmodyfikować wszystkie żądania do rozmiaru https://example.com
, dodając nazwę użytkownika i hasło jako nagłówki do żądania.
var map = new atlas.Map('myMap', {
transformRequest: function (url, resourceType) {
//Check to see if the request is to the specified endpoint.
if (url.indexOf('https://examples.com') > -1) {
//Add custom headers to the request.
return {
url: url,
header: {
username: 'myUsername',
password: 'myPassword'
}
};
}
//Return the URL unchanged by default.
return { url: url };
},
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
Następne kroki
Dowiedz się więcej o klasach i metodach używanych w tym artykule:
Zobacz przykłady kodu, aby dodać funkcje do aplikacji: