Skapa en karta
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:
- CameraOptions och CameraBoundOptions används för att ange vilket område kartan ska visa.
- 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 setCamera
funktionerna , setServiceOptions
, setStyle
och 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.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
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.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
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 .
transformRequest: (url: string, resourceType: string) => RequestParameters
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. |
WebMapService | En begäran från modulen OgcMapLayer i Spatial IO till en WMS- eller WMTS-tjänst. Mer information finns i Lägga till ett kartskikt från Open Geospatial Consortium (OGC). |
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:
Se kodexempel för att lägga till funktioner i din app: