Den här artikeln visar hur du skapar en karta och animerar en karta.
Läser in en karta
Om du vill läsa in en karta skapar du en ny instans av klassen Map. När du initierar kartan skickar du ett DIV-element-ID för att återge kartan och skicka en uppsättning alternativ som ska användas vid inläsning av kartan. Om standardautentiseringsinformation inte anges i atlas namnområdet måste den här informationen anges i kartalternativen när kartan läses in. Kartan läser in flera resurser asynkront för prestanda. När du har skapat kartinstansen bifogar du en ready eller load -händelse till kartan och lägger sedan till mer kod som interagerar med kartan till händelsehanteraren. Händelsen ready utlöses så snart kartan har tillräckligt med resurser inlästa för att interagera med programmatiskt. Händelsen load utlöses när den första kartvyn har lästs in helt.
Du kan också läsa in flera kartor på samma sida. Exempelkod som visar inläsning av flera kartor på samma sida finns i Flera kartor i Azure Maps Exempel. Källkoden för det här exemplet finns i Källkod för flera kartor.
Tips
Du kan använda samma eller olika inställningar för autentisering och språk när du använder flera kartor på samma sida.
Visa en enda kopia av världen
När kartan zoomas ut på en bred skärm visas flera kopior av världen vågrätt. Det här alternativet är bra för vissa scenarier, men för andra program är det önskvärt att se en enda kopia av världen. Det här beteendet implementeras genom att alternativet maps renderWorldCopies anges till false.
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
Kartalternativ
När du skapar en karta där finns det flera olika typer av alternativ som kan skickas in för att anpassa hur kartan fungerar:
ServiceOptions används för att ange hur kartan ska interagera med tjänster som driver kartan.
StyleOptions används för att ange att kartan ska formateras och återges.
UserInteractionOptions används för att ange hur kartan ska nå när användaren interagerar med kartan.
Dessa alternativ kan också uppdateras när kartan har lästs in med hjälp av setCamerafunktionerna , setServiceOptions, setStyleoch setUserInteraction .
Kontrollera kartkameran
Det finns två sätt att ange det visade området på kartan med hjälp av kameran på en karta. Du kan ställa in kameraalternativen när du läser in kartan. Eller så kan du anropa setCamera alternativet när som helst när kartan har lästs in för att programmatiskt uppdatera kartvyn.
Ställ in kameran
Kartkameran styr vad som visas i kartarbetsytans visningsvy. Kameraalternativ kan skickas till kartalternativen när de initieras eller skickas till kartfunktionen 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
});
Kartegenskaper, till exempel center- och zoomnivå, är en del av egenskaperna CameraOptions .
Ställ in kameragränsarna
En avgränsningsruta kan användas för att uppdatera kartkameran. Om avgränsningsrutan beräknades utifrån punktdata är det ofta användbart att ange ett utfyllnadsvärde för bildpunkter i kameraalternativen för att ta hänsyn till ikonstorleken. Den här pixelutfyllnaden hjälper till att säkerställa att punkter inte hamnar utanför kartvyportens kant.
I följande kod skapas ett Map-objekt via new atlas.Map(). Kartegenskaper som CameraBoundsOptions kan definieras via setCamera-funktionen i map-klassen. Egenskaper för gränser och utfyllnad anges med hjälp av setCamera.
Animera kartvy
När du ställer in kameraalternativen för kartan kan animeringsalternativ också anges. Dessa alternativ anger vilken typ av animering och varaktighet det ska ta att flytta kameran.
I följande kod skapar det första kodblocket en karta och anger formaten för retur- och zoomningskarta. I det andra kodblocket skapas en klickhändelsehanterare för animera-knappen. När den här knappen väljs setCamera anropas funktionen med några slumpmässiga värden för CameraOptions och 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>
Begär transformeringar
Ibland är det bra att kunna ändra HTTP-begäranden som görs av kartkontrollen. Exempel:
Lägg till fler rubriker i panelbegäranden för lösenordsskyddade tjänster.
Ändra URL:er för att köra begäranden via en proxytjänst.
Tjänstalternativen för kartan har en transformRequest som kan användas för att ändra alla begäranden som görs av kartan innan de görs. Alternativet transformRequest är en funktion som tar in två parametrar: en sträng-URL och en resurstypsträng som anger vad begäran används till. Den här funktionen måste returnera ett RequestParameters-resultat .
När du använder en begärandetransformering måste du returnera ett RequestParameters objekt som innehåller en url egenskap som minst. Följande är de egenskaper som kan ingå i ett RequestParameters -objekt.
Alternativ
Typ
Description
body
sträng
En POST-begärandetext.
autentiseringsuppgifter
'same-origin' | 'include'
Används för att ange inställningen för autentiseringsuppgifter för begäran om korsande ursprung (COR). Använd "include" för att skicka cookies med begäranden om korsande ursprung.
Headers
objekt
Rubrikerna som ska skickas med begäran. Objektet är ett nyckel/värde-par med strängvärden.
metod
'GET' | 'POST' | 'PUT'
Den typ av begäran som ska göras. Standardvärdet är 'GET'.
typ
'string' | 'json' | 'arrayBuffer'
Formatet för POST-svarstexten.
url
sträng
Url:en som ska begäras.
De resurstyper som är mest relevanta för innehåll som du lägger till på kartan visas i följande tabell:
Resurstyp
Description
Bild
En begäran om en bild för användning med antingen en SymbolLayer eller ImageLayer.
Källa
En begäran om källinformation, till exempel en TileJSON-begäran. Vissa begäranden från baskartformaten använder också den här resurstypen vid inläsning av källinformation.
Panel
En begäran från ett panelskikt (raster eller vektor).
WFS
En begäran från en WfsClient i modulen Spatial IO till en OGC-webbfunktionstjänst. Mer information finns i Ansluta till en WFS-tjänst.
Här följer några resurstyper som vanligtvis ignoreras och som skickas via begärandetransformeringen och som är relaterade till baskartformaten: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs och Attribution.
I följande exempel visas hur du ändrar alla begäranden till storleken https://example.com genom att lägga till ett användarnamn och lösenord som rubriker i begäran.
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>'
}
});
Nästa steg
Läs mer om de klasser och metoder som används i den här artikeln:
Lär dig mer om att skriva kod för att interagera med Azure Maps. Utveckla och testa en rolig app med JavaScript och Visual Studio Code för att hitta den bästa rutten för en lastbil, bil eller cykel. Rutten går från västra kusten i USA till östra kusten. Du kan se hur vägar ändras baserat på fordon. Och för lastbilar även hur rutterna ändras om innehållet är farligt. Du får chansen att lägga till på dina egna platser.
Lär dig hur du ändrar format och alternativ för en karta. Se hur du lägger till en formatväljare i en karta i Azure Maps så att användarna kan växla mellan olika format.