Partager via


Ajouter une couche de mosaïques à une carte

Cet article vous montre comment superposer une couche de mosaïques sur une carte. Les couches de mosaïques vous permettent de superposer des images à des mosaïques de carte de base Azure Maps. Pour plus d’informations sur le système de mosaïques Azure Maps, consultez Niveaux de zoom et grille mosaïque.

Un calque de mosaïques charge des mosaïques à partir d’un serveur. Ces images peuvent être pré-rendues ou rendues dynamiquement. Les images pré-rendues sont stockées comme toute autre image sur un serveur à l’aide d’une convention d’affectation de noms compréhensible par la couche de mosaïques. Les images rendues dynamiquement utilisent un service pour charger les images presque en temps réel. Trois conventions de nommage de service de mosaïques sont prises en charge par la classe TileLayer d’Azure Maps :

  • X, Y et notation de zoom : X correspond à la position de colonne et Y à la position de ligne de la mosaïque dans la grille mosaïque, et la valeur de la notation de zoom est basée sur le niveau de zoom.
  • Notation Quadkey : combine les informations x, y et de zoom en une valeur de chaîne unique. Cette valeur de chaîne devient un identificateur unique pour une seule mosaïque.
  • Cadre englobant : spécifiez une image au format de coordonnées du cadre englobant : {west},{south},{east},{north}. Ce format est couramment utilisé par les services de cartographie web (WMS).

Conseil

Une couche de mosaïques est un excellent moyen de visualiser des jeux de données volumineux sur une carte. Non seulement elle peut être générée à partir d’une image, mais les données vectorielles peuvent également être affichées sous la forme d’une couche de mosaïques. En affichant des données vectorielles sous forme de couche de mosaïques, le contrôle de carte doit uniquement charger les mosaïques dont la taille de fichier est inférieure à celle des données vectorielles qu’elles représentent. Cette technique est couramment utilisée pour afficher des millions de lignes de données sur une carte.

L’URL de la mosaïque transmise à une couche de mosaïques doit être l’URL http ou https d’une ressource TileJSON ou d’un modèle d’URL de mosaïque qui utilise les paramètres suivants :

  • {x} - position X de la mosaïque. Nécessite également {y} et {z}.
  • {y} - position Y de la mosaïque. Nécessite également {x} et {z}.
  • {z} - niveau de zoom de la mosaïque. Nécessite également {x} et {y}.
  • {quadkey} - identificateur quadkey de la mosaïque basé sur la convention de nommage du système de mosaïques de Bing Maps.
  • {bbox-epsg-3857} - chaîne de rectangle englobant au format {west},{south},{east},{north} du système SRID EPSG 3857.
  • {subdomain} – espace réservé pour les valeurs de sous-domaine ; si spécifié, le subdomain est ajouté.
  • {azMapsDomain} - espace réservé pour aligner le domaine et l’authentification des demandes de vignette avec les mêmes valeurs que celles utilisées par la carte.

Ajouter un calque de vignettes

Cet exemple montre comment créer une couche de mosaïques qui pointe vers un ensemble de mosaïques. Cet exemple utilise le système de mosaïques x, y et zoom. La source de cette couche de mosaïques est le projet OpenSeaMap, qui contient des cartes marines crowdsourcées. L’idéal serait que les utilisateurs voient clairement les étiquettes des villes lorsqu’ils naviguent sur la carte lors de la visualisation des données radar. Ce comportement peut être implémenté en insérant la couche de mosaïques sous la couche labels.

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

Pour obtenir un exemple entièrement fonctionnel qui montre comment créer une couche de vignettes qui pointe vers un ensemble de vignettes à l’aide du système de mosaïques x, y et zoom, consultez l’exemple Couche de mosaïques utilisant X, Y et Z dans les exemples Azure Maps. La source de la couche de mosaïques de cet exemple est une carte nautique du projet OpenSeaMap, un projet OpenStreetMaps sous licence ODbL. Pour obtenir le code source de cet exemple, consultez Code source de couche de mosaïques utilisant X, Y et Z.

A screenshot of map with a tile layer that points to a set of tiles using the x, y, zoom tiling system. The source of this tile layer is the OpenSeaMap project.

Ajouter un service de cartographie web (WMS) OGC

Un service de cartographie web (WMS) est une norme de l’Open Geospatial Consortium (OGC), qui permet de proposer des images de données cartographiques. Il existe de nombreux jeux de données ouverts disponibles dans ce format, que vous pouvez utiliser avec Azure Maps. Ce type de service peut être utilisé avec un calque de vignette, si le service prend en charge le système de référence de coordonnées (CRS) EPSG:3857. Quand vous utilisez un service WMS, définissez les paramètres de largeur et de hauteur en utilisant des valeurs prises en charge par le service. Veillez à définir cette valeur dans l’option tileSize. Dans l’URL mise en forme, définissez le paramètre BBOX du service avec l’espace réservé {bbox-epsg-3857}.

Pour obtenir un exemple entièrement fonctionnel qui montre comment créer une couche de mosaïques qui pointe vers un service de mappage Web (WMS), consultez l’exemple de couche de mosaïques WMS dans les exemples Azure Maps. Pour obtenir le code source de cet exemple, consultez Code source de couche de mosaïques WMS.

La capture d’écran suivante montre l’exemple Couche de mosaïques WMS superposé sur un service de cartographie Web de données géologiques provenant de l’U.S. Geological Survey (USGS) au-dessus d’une carte, sous les étiquettes.

A screenshot of a world map with a tile layer that points to a Web Mapping Service (WMS).

Ajouter un service de vignette de cartographie web (WMTS) OGC

Un service de calque de cartographie web (WMTS) est une norme de l’Open Geospatial Consortium (OGC), qui permet de proposer des superpositions de vignettes sur des cartes. Il existe de nombreux jeux de données ouverts disponibles dans ce format, que vous pouvez utiliser avec Azure Maps. Ce type de service peut être utilisé avec un calque de vignette, si le service prend en charge le système de référence de coordonnées (CRS) EPSG:3857 ou GoogleMapsCompatible. Quand vous utilisez un service WMTS, définissez les paramètres de largeur et de hauteur en utilisant les mêmes valeurs que celles prises en charge par le service. Veillez à définir cette valeur dans l’option tileSize. Dans l’URL mise en forme, remplacez les espaces réservés suivants de manière appropriée :

  • {TileMatrix} =>{z}
  • {TileRow} =>{y}
  • {TileCol} =>{x}

Pour obtenir un exemple entièrement fonctionnel qui montre comment créer une couche de mosaïques qui pointe vers un service de mosaïques de mappage Web (WMTS), consultez l’exemple de couche de mosaïques WMTS dans les exemples Azure Maps. Pour obtenir le code source de cet exemple, consultez Code source de couche de mosaïques WMTS.

La capture d’écran suivante montre l’exemple de couche de mosaïques WMTS superposé sur un service de mosaïques de cartographie Web pour des données d’imagerie provenant de l’U.S. Geological Survey (USGS) National Map au-dessus d’une carte, sous les routes et les étiquettes.

A screenshot of a map with a tile layer that points to a Web Mapping Tile Service (WMTS) overlay.

Personnaliser une couche de mosaïques

La classe de calque de mosaïques dispose de nombreuses options de style. L’exemple Options de couche de mosaïques est un outil permettant de les essayer. Pour obtenir le code source de cet exemple, consultez Code source des options de couche de mosaïques.

A screenshot of Tile Layer Options sample.

Étapes suivantes

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

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