Créer une carte
Cet article vous montre comment créer et animer une carte.
Chargement d’une carte
Pour charger une carte, créez une nouvelle instance de la classe Map. Lors de l’initialisation de la carte, transmettez un ID d’élément DIV pour afficher la carte et transmettez un ensemble d’options à utiliser lors du chargement de la carte. Si les informations d’authentification par défaut ne sont pas spécifiées sur l’espace de noms atlas, vous devez les spécifier dans les options de carte lors du chargement de la carte. Pour de meilleures performances, la carte charge plusieurs ressources de manière asynchrone. Ainsi, après avoir créé l’instance de carte, attachez un événement ready ou load à la carte, puis ajoutez tout autre code qui interagit avec la carte dans le gestionnaire d’événements. L’événement ready est déclenché dès qu’un nombre suffisant de ressources avec lesquelles interagir de manière programmatique est chargé sur la carte. L’événement load est déclenché après la fin du chargement complet de la vue de carte initiale.
Vous pouvez également charger plusieurs cartes sur la même page. Pour obtenir un exemple de code illustrant le chargement de plusieurs cartes sur la même page, consultez Cartes multiples dans les exemples Azure Maps. Pour obtenir le code source de cet exemple, consultez Code source de plusieurs cartes.
Conseil
Vous pouvez utiliser des paramètres d’authentification et de langue identiques ou différents lorsque vous utilisez plusieurs cartes sur la même page.
Afficher une copie unique du monde
Lorsque vous effectuez un zoom arrière sur la carte sur grand écran, plusieurs copies du monde s’affichent horizontalement. Cette option est idéale pour certains scénarios, mais pour certaines applications, il est souhaitable de voir une seule copie du monde. Ce comportement est implémenté en définissant l’option renderWorldCopies de la carte sur false.
//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false
Options de carte
Lors de la création d’une carte, plusieurs types d’options peuvent être transmis pour personnaliser le fonctionnement de la carte :
- Les options CameraOptions et CameraBoundOptions sont utilisées pour spécifier la zone que la carte doit s’afficher.
- L’option ServiceOptions permet de spécifier la façon dont la carte doit interagir avec les services qui l’alimentent.
- L’option StyleOptions permet de spécifier qu’un style et un rendu doivent être appliqués à la carte.
- L’option UserInteractionOptions permet de spécifier la façon dont la carte doit s’afficher lorsque l’utilisateur interagit avec elle.
Ces options peuvent également être mises à jour après le chargement de la carte à l’aide des fonctions setCamera, setServiceOptions, setStyle et setUserInteraction.
Contrôle de la caméra de carte
Vous pouvez définir la zone affichée de la carte à l’aide de la caméra de deux manières différentes. Vous pouvez définir les options de la caméra lors du chargement de la carte. Vous pouvez également appeler l’option setCamera à tout moment après le chargement de la carte pour mettre à jour l’affichage cartographique par programmation.
Définir la caméra
La caméra de la carte contrôle ce qui est affiché dans la fenêtre d’affichage du canevas de la carte. Les options de la caméra peuvent être transmises lorsqu’elles sont initialisées ou passées dans la fonction 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
});
Les propriétés de la carte, comme le centre et le niveau de zoom, font partie des propriétés CameraOptions.
Définir les limites de la caméra
Un cadre englobant peut être utilisé pour mettre à jour la caméra de la carte. Si le cadre englobant a été calculé à partir de données de point, il est souvent utile de spécifier une valeur de remplissage des pixels dans les options de la caméra pour tenir compte de la taille de l’icône. Ce remplissage de pixel permet de s’assurer que les points n’apparaissent pas en dehors du bord du point de vue de la carte.
map.setCamera({
bounds: [-122.4, 47.6, -122.3, 47.7],
padding: 10
});
Dans le code suivant, un objet de carte est construit via new atlas.Map(). Des propriétés de carte, telles que CameraBoundsOptions, peuvent être définies avec la fonction setCamera de la classe Map. Les propriétés des marges intérieures et des limites sont définies au moyen de setCamera.
Animer la vue cartographique
Lorsque vous définissez les options de caméra de la carte, des options d’animation peuvent également être définies. Ces options spécifient le type d’animation et la durée nécessaire pour déplacer la caméra.
map.setCamera({
center: [-122.33, 47.6],
zoom: 12,
duration: 1000,
type: 'fly'
});
Dans le code suivant, le premier bloc de code crée une carte et définit les styles d’entrée et de zoom de la carte. Dans le deuxième bloc de code, un gestionnaire d’événements de clics est créé pour le bouton d’animation. Lorsque vous sélectionnez ce bouton, la fonction setCamera est appelée avec des valeurs aléatoires pour CameraOptions et 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>
Demander des transformations
Il est parfois utile de pouvoir modifier les requêtes HTTP effectuées par le contrôle de carte. Par exemple :
- Ajoutez d’autres en-têtes aux demandes de vignette pour les services protégés par mot de passe.
- Modifier les URL pour exécuter les requêtes via un service proxy.
Les options de service de la carte ont un paramètre transformRequest qui peut être utilisé pour modifier toutes les requêtes de la carte avant qu’elles ne soient effectuées. L’option transformRequest est une fonction qui accepte deux paramètres : une URL de chaîne et une chaîne de type de ressource qui indique à quoi sert la requête. Cette fonction doit retourner un résultat RequestParameters.
transformRequest: (url: string, resourceType: string) => RequestParameters
Lorsque vous utilisez une transformation de requête, vous devez retourner au minimum un objet RequestParameters qui contient une propriété url. Voici les propriétés qui peuvent être incluses dans un RequestParameters objet.
| Option | Type | Description |
|---|---|---|
| body | string | Un corps de requête POST. |
| credentials | 'same-origin' | 'include' |
Utilisé pour spécifier le paramètre d’informations d’identification de la demande d’origine croisée (COR). Utilisez « include » pour envoyer des cookies avec des demandes d’origine croisée. |
| headers | object | En-têtes à envoyer avec la demande. L’objet est une paire clé-valeur de valeurs de chaîne. |
| method | 'GET' | 'POST' | 'PUT' |
Type de demande à effectuer. La valeur par défaut est 'GET'. |
| type | 'string' | 'json' | 'arrayBuffer' |
Format du corps de la réponse POST. |
| url | string | URL à demander. |
Les types de ressources les plus pertinents pour le contenu que vous ajoutez à la carte sont répertoriés dans le tableau suivant :
| Type de ressource | Description |
|---|---|
| Image | Demande d’une image à utiliser avec SymbolLayer ou ImageLayer. |
| Source | Demande d’informations sources, telles qu’une demande TileJSON. Certaines requêtes provenant des styles de carte de base utilisent également ce type de ressource lors du chargement des informations sources. |
| Tile | Requête provenant d’une couche de mosaïques (raster ou vecteur). |
| WFS | Requête d’un WfsClient dans le module d’E/S spatiales à un service de fonctionnalités web OGC. Pour plus d’informations, consultez Se connecter à un service WFS. |
| WebMapService | Requête du OgcMapLayer dans le module d’E/S spatial vers un service WMS ou WMTS. Pour plus d’informations, consultez Ajouter une couche de carte à partir de l’OGC (Open Geospatial Consortium). |
Voici quelques types de ressources, généralement ignorés, qui sont transmis via la transformation de requête qui sont liés aux styles de carte de base : StyleDefinitions, Style, SpriteImage, SpriteJSON, Glyphs, Attribution.
L’exemple suivant montre comment modifier toutes les requêtes en taille https://example.com en ajoutant un nom d’utilisateur et un mot de passe comme en-têtes à la requête.
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>'
}
});
Étapes suivantes
En savoir plus sur les classes et les méthodes utilisées dans cet article :
Consultez les exemples de code pour ajouter la fonctionnalité à votre application :