Ajouter un calque d’image à une carte (Android SDK)
Remarque
Mise hors service d’Android SDK Azure Maps
Le kit de développement logiciel (SDK) natif Azure Maps pour Android est désormais déconseillé et va être mis hors service le 31 mars 2025. Pour éviter toute interruption de service, nous vous recommandons de migrer vers le kit de développement logiciel (SDK) web Azure Maps avant le 31 mars 2025. Pour plus d’informations, consultez le Guide de migration Android SDK Azure Maps.
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
Conseil
Un calque d’image permet de superposer facilement une image sur une carte. Notez que les images de grande taille peuvent consommer beaucoup de mémoire et occasionner des problèmes de performances. Dans ce cas, vous pouvez diviser votre image en mosaïque et charger celle-ci sur la carte en tant que vignette de mosaïque.
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. Cette image est ajoutée au dossier drawable du projet. Un calque d’image est créé en définissant l’image et les coordonnées de ses quatre angles au format [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner]. L’ajout de calques d’image sous le calque label est souvent souhaitable.
//Create an image layer.
ImageLayer layer = new ImageLayer(
imageCoordinates(
new Position[] {
new Position(-74.22655, 40.773941), //Top Left Corner
new Position(-74.12544, 40.773941), //Top Right Corner
new Position(-74.12544, 40.712216), //Bottom Right Corner
new Position(-74.22655, 40.712216) //Bottom Left Corner
}
),
setImage(R.drawable.newark_nj_1922)
);
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");
//Create an image layer.
val layer = ImageLayer(
imageCoordinates(
arrayOf<Position>(
Position(-74.22655, 40.773941), //Top Left Corner
Position(-74.12544, 40.773941), //Top Right Corner
Position(-74.12544, 40.712216), //Bottom Right Corner
Position(-74.22655, 40.712216) //Bottom Left Corner
)
),
setImage(R.drawable.newark_nj_1922)
)
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")
Vous pouvez également spécifier l’URL d’une image hébergée en ligne. Toutefois, si votre scénario le permet, ajoutez l’image au dossier drawable de votre projet, qui se charge plus rapidement puisque l’image est disponible localement et ne nécessite pas de téléchargement.
//Create an image layer.
ImageLayer layer = new ImageLayer(
imageCoordinates(
new Position[] {
new Position(-74.22655, 40.773941), //Top Left Corner
new Position(-74.12544, 40.773941), //Top Right Corner
new Position(-74.12544, 40.712216), //Bottom Right Corner
new Position(-74.22655, 40.712216) //Bottom Left Corner
}
),
setUrl("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg")
);
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");
//Create an image layer.
val layer = ImageLayer(
imageCoordinates(
arrayOf<Position>(
Position(-74.22655, 40.773941), //Top Left Corner
Position(-74.12544, 40.773941), //Top Right Corner
Position(-74.12544, 40.712216), //Bottom Right Corner
Position(-74.22655, 40.712216) //Bottom Left Corner
)
),
setUrl("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg")
)
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")
La capture d’écran suivante montre une carte de Newark, New Jersey, de 1922, sur laquelle un calque d’image est superposé.
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.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
<name>Map of Chartres cathedral</name>
<Icon>
<href>https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png</href>
<viewBoundScale>0.75</viewBoundScale>
</Icon>
<LatLonBox>
<north>48.44820923628113</north>
<south>48.44737203258976</south>
<east>1.488833825534365</east>
<west>1.486788581643038</west>
<rotation>46.44067597839695</rotation>
</LatLonBox>
</GroundOverlay>
</kml>
Le code utilise la méthode statique getCoordinatesFromEdges de la classe ImageLayer. Cette méthode calcule les quatre angles de l’image à partir des informations relatives aux points cardinaux et à la rotation issues de la superposition de sol de KML.
//Calculate the corner coordinates of the ground overlay.
Position[] corners = ImageLayer.getCoordinatesFromEdges(
//North, south, east, west
48.44820923628113, 48.44737203258976, 1.488833825534365, 1.486788581643038,
//KML rotations are counter-clockwise, subtract from 360 to make them clockwise.
360 - 46.44067597839695
);
//Create an image layer.
ImageLayer layer = new ImageLayer(
imageCoordinates(corners),
setUrl("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png")
);
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels");
//Calculate the corner coordinates of the ground overlay.
val corners: Array<Position> =
ImageLayer.getCoordinatesFromEdges( //North, south, east, west
48.44820923628113,
48.44737203258976,
1.488833825534365,
1.486788581643038, //KML rotations are counter-clockwise, subtract from 360 to make them clockwise.
360 - 46.44067597839695
)
//Create an image layer.
val layer = ImageLayer(
imageCoordinates(corners),
setUrl("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Chartres.svg/1600px-Chartres.svg.png")
)
//Add the image layer to the map, below the label layer.
map.layers.add(layer, "labels")
La capture d’écran suivante montre une carte avec une superposition de sol de KML effectuée à l’aide d’un calque d’image.
Conseil
Utilisez les méthodes 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.
Étapes suivantes
Pour plus d’informations sur les différentes manières de superposer des images sur une carte, consultez l’article suivant.