Een kaart maken
In dit artikel worden manieren beschreven om een kaart te maken en een kaart van animatie te voorzien.
Een kaart laden
Als u een kaart wilt laden, maakt u een nieuw exemplaar van de kaartklasse. Geef bij het initialiseren van de kaart een DIV-element-id door om de kaart weer te geven en een set opties door te geven die moeten worden gebruikt bij het laden van de kaart. Als standaardverificatiegegevens niet zijn opgegeven in de atlas naamruimte, moet deze informatie worden opgegeven in de kaartopties bij het laden van de kaart. De kaart laadt verschillende resources asynchroon voor prestaties. Als zodanig voegt u na het maken van het kaartexemplaren een ready gebeurtenis of load toe aan de kaart en voegt u vervolgens meer code toe die met de kaart communiceert aan de gebeurtenis-handler. De ready gebeurtenis wordt geactiveerd zodra de kaart voldoende resources heeft geladen om programmatisch te communiceren. De load gebeurtenis wordt geactiveerd nadat de eerste kaartweergave volledig is geladen.
U kunt ook meerdere kaarten op dezelfde pagina laden. Zie Meerdere kaarten in de Azure Maps Voorbeelden voor voorbeeldcode die het laden van meerdere kaarten op dezelfde pagina laat zien. Zie Broncode van meerdere kaarten voor de broncode voor dit voorbeeld.
Tip
U kunt dezelfde of andere verificatie- en taalinstellingen gebruiken wanneer u meerdere kaarten op dezelfde pagina gebruikt.
Eén exemplaar van de wereld weergeven
Wanneer de kaart wordt uitgezoomd op een breed scherm, worden meerdere exemplaren van de wereld horizontaal weergegeven. Deze optie is ideaal voor sommige scenario's, maar voor andere toepassingen is het wenselijk om één kopie van de wereld te zien. Dit gedrag wordt geïmplementeerd door de toewijzingsoptie renderWorldCopies in te stellen op false.
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
Kaartopties
Wanneer u daar een kaart maakt, zijn er verschillende typen opties die kunnen worden doorgegeven om de werking van de kaart aan te passen:
- CameraOptions en CameraBoundOptions worden gebruikt om het gebied op te geven dat op de kaart moet worden weergegeven.
- ServiceOptions worden gebruikt om op te geven hoe de kaart moet communiceren met services die de kaart mogelijk maken.
- StyleOptions worden gebruikt om op te geven dat de kaart moet worden gestijld en weergegeven.
- UserInteractionOptions worden gebruikt om op te geven hoe de kaart moet worden bereikt wanneer de gebruiker met de kaart communiceert.
Deze opties kunnen ook worden bijgewerkt nadat de kaart is geladen met de setCamerafuncties , setServiceOptions, setStyleen setUserInteraction .
De kaartcamera bedienen
Er zijn twee manieren om het weergegeven gebied van de kaart in te stellen met behulp van de camera van een kaart. U kunt de cameraopties instellen bij het laden van de kaart. U kunt de setCamera optie ook op elk gewenst moment aanroepen nadat de kaart is geladen om de kaartweergave programmatisch bij te werken.
De camera instellen
De kaartcamera bepaalt wat er wordt weergegeven in de viewport van het kaartcanvas. Camera-opties kunnen worden doorgegeven aan de kaartopties wanneer ze worden geïnitialiseerd of doorgegeven aan de kaartfunctie 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
});
Kaarteigenschappen, zoals midden en zoomniveau, maken deel uit van de eigenschappen van CameraOptions .
De cameragrenzen instellen
U kunt een begrenzingsvak gebruiken om de kaartcamera bij te werken. Als het begrenzingsvak is berekend op basis van puntgegevens, is het vaak handig om een pixelopvullingswaarde op te geven in de cameraopties om rekening te houden met de pictogramgrootte. Deze pixelopvulling zorgt ervoor dat punten niet van de rand van de kaart-viewport vallen.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
In de volgende code wordt een toewijzingsobject gemaakt via new atlas.Map(). Kaarteigenschappen zoals CameraBoundsOptions kunnen worden gedefinieerd via de functie setCamera van de klasse Map. De eigenschappen voor grenzen en opvulling worden ingesteld met behulp van setCamera.
Kaartweergave van animatie voorzien
Bij het instellen van de camera-opties van de kaart kunnen ook animatie-opties worden ingesteld. Deze opties specificeren het type animatie en de duur die nodig is om de camera te verplaatsen.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
In de volgende code maakt het eerste codeblok een kaart en stelt het de kaartstijlen enter en zoom in. In het tweede codeblok wordt een klikgebeurtenis-handler gemaakt voor de knop Animatie. Wanneer deze knop is geselecteerd, wordt de setCamera functie aangeroepen met een aantal willekeurige waarden voor de CameraOptions en 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>
Transformaties aanvragen
Soms is het handig om HTTP-aanvragen van het kaartbeheer te kunnen wijzigen. Bijvoorbeeld:
- Voeg meer headers toe aan tegelaanvragen voor met een wachtwoord beveiligde services.
- URL's wijzigen om aanvragen uit te voeren via een proxyservice.
De serviceopties van de kaart hebben een transformRequest die kan worden gebruikt om alle aanvragen van de kaart te wijzigen voordat ze worden gedaan. De transformRequest optie is een functie die gebruikmaakt van twee parameters: een tekenreeks-URL en een resourcetypetekenreeks die aangeeft waarvoor de aanvraag wordt gebruikt. Deze functie moet het resultaat RequestParameters retourneren.
transformRequest: (url: string, resourceType: string) => RequestParameters
Wanneer u een aanvraagtransformatie gebruikt, moet u minimaal een RequestParameters object retourneren dat een url eigenschap bevat. Hier volgen de eigenschappen die in een RequestParameters object kunnen worden opgenomen.
| Optie | Type | Description |
|---|---|---|
| body | tekenreeks | Een POST-aanvraagbody. |
| referenties | 'same-origin' | 'include' |
Wordt gebruikt om de instelling voor referenties voor cross-origin-aanvragen (COR's) op te geven. Gebruik opnemen om cookies te verzenden met cross-origin-aanvragen. |
| Headers | object | De headers die moeten worden verzonden met de aanvraag. Het object is een sleutelwaardepaar van tekenreekswaarden. |
| method | 'GET' | 'POST' | 'PUT' |
Het type aanvraag dat moet worden ingediend. De standaardinstelling is 'GET'. |
| type | 'string' | 'json' | 'arrayBuffer' |
De indeling van de hoofdtekst van het POST-antwoord. |
| url | tekenreeks | De URL die moet worden aangevraagd. |
De resourcetypen die het meest relevant zijn voor inhoud die u aan de kaart toevoegt, worden weergegeven in de volgende tabel:
| Resourcetype | Description |
|---|---|
| Installatiekopie | Een aanvraag voor een afbeelding voor gebruik met een SymbolLayer of ImageLayer. |
| Bron | Een aanvraag voor brongegevens, zoals een TileJSON-aanvraag. Sommige aanvragen van de basistoewijzingsstijlen gebruiken dit resourcetype ook bij het laden van brongegevens. |
| Tegel | Een aanvraag van een tegellaag (raster of vector). |
| WFS | Een aanvraag van een WfsClient in de Spatial IO-module naar een OGC-webfunctieservice. Zie Verbinding maken met een WFS-service voor meer informatie. |
| WebMapService | Een aanvraag van de OgcMapLayer in de ruimtelijke IO-module naar een WMS- of WMTS-service. Zie Een kaartlaag van het Open Geospatial Consortium (OGC) toevoegen voor meer informatie. |
Hier volgen enkele resourcetypen, die doorgaans worden genegeerd, die worden doorgegeven via de aanvraagtransformatie en zijn gerelateerd aan de basistoewijzingsstijlen: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.
In het volgende voorbeeld ziet u hoe u alle aanvragen kunt wijzigen in de grootte https://example.com door een gebruikersnaam en wachtwoord als headers toe te voegen aan de aanvraag.
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>'
}
});
Volgende stappen
Meer informatie over de klassen en methoden die worden gebruikt in dit artikel:
Bekijk codevoorbeelden om functionaliteit toe te voegen aan uw app: