Ajouter une couche d’images à une carte

Cet article vous montre comment superposer une image à un ensemble fixe de coordonnées. Voici quelques exemples de différents types d’images qui peuvent être superposées sur des cartes :

• Images capturées à l’aide de drones
• Plans au sol d’un immeuble
• Images de carte historiques ou autrement spécialisées
• Plans d’un lieu de travail
• Images de radar météo

Conseil

ImageLayer permet de superposer une image à une carte. Notez que les navigateurs peuvent avoir des difficultés à charger une grande image. Dans ce cas, vous pouvez diviser votre image en plusieurs mosaïques et les charger sur la carte en tant que TileLayer.

Le calque d’images prend en charge les formats d’image suivants :

• JPEG
• PNG
• BMP
• GIF (sans animation)

Ajouter un calque d’images

Le code suivant montre comment superposer l’image d’une carte de Newark dans le New Jersey datant de 1922 à la carte principale. Un ImageLayer est créé en passant une URL à une image ainsi que les coordonnées des quatre angles, au format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner].

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

Pour obtenir un exemple entièrement fonctionnel qui montre comment superposer une image d’une carte de Newark New Jersey de 1922 en tant que calque d’image, consultez Calque d’images simple dans les Exemples d’Azure Maps. Pour obtenir le code source de cet exemple, consultez Code source de couche d’images simples.

Importer un fichier KML en tant que calque de relief

Cet exemple montre comment ajouter des informations de calque de relief KML comme couche d’image sur la carte. Les calques de relief KML fournissent les coordonnées des points cardinaux et une rotation dans le sens inverse des aiguilles d’une montre. Toutefois, la couche d’image attend des coordonnées pour chaque coin de l’image. Le calque de relief KML de cet exemple est celui de la cathédrale de Chartres et provient de Wikimedia.

Le code utilise la fonction statique getCoordinatesFromEdges de la classe ImageLayer. Il calcule les quatre coins de l’image à partir des informations relatives aux points cardinaux et à la rotation issues du calque de relief KML.

Pour obtenir un exemple entièrement fonctionnel qui montre comment utiliser un calque de relief KML en tant que calque d’image, consultez Calque de relief KML en tant que calque d’image dans les Exemples Azure Maps. Pour obtenir le code source de cet exemple, consultez Superposition de reliefs KML en tant que code source de couche d’images.

Conseil

Utilisez les fonctions getPixels et getPositions de la classe de calque d’image pour convertir les coordonnées géographiques du calque d’image positionné et les coordonnées en pixels de l’image locale.

Personnaliser une couche d’images

La couche d’images dispose de nombreuses options de style. Pour obtenir un exemple entièrement fonctionnel qui montre comment les différentes options du calque d’image affectent le rendu, consultez Options de calque d’image dans les Exemples Azure Maps. Pour obtenir le code source de cet exemple, consultez Code source d’options de couche d’images.

Étapes suivantes

En savoir plus sur les classes et les méthodes utilisées dans cet article :

ImageLayer

ImageLayerOptions

Pour obtenir plus d’exemples de code à ajouter à vos cartes, consultez les articles suivants :

Ajouter une couche de mosaïques