Ajouter un protocole PMTiles personnalisé

Le Kit de développement logiciel (SDK) Web d’Azure Maps prend en charge les protocoles personnalisés tels que PMTiles. Le protocole pmtiles:// est utilisé pour référencer des archives PMTiles qui sont des formats à fichier unique pour stocker des données allouées dynamiquement telles que des cartes raster ou vectorielles. Ce protocole permet à Azure Maps d’accéder à des mosaïques spécifiques au sein d’une archive PMTiles en utilisant une requête HTTP, en extrayant uniquement les données nécessaires à la demande.

Ajouter un protocole personnalisé

L’utilisation de la fonction addProtocol, qui enregistre un rappel déclenché avant toute requête AJAX effectuée par la bibliothèque, vous permet d’intercepter, de modifier et de retourner la requête pour un traitement et un rendu supplémentaires. Cette opération permet l’implémentation d’une fonction de rappel personnalisée pour charger des ressources lorsqu’une URL commence par le schéma personnalisé désigné.

La première étape consiste à ajouter une référence au protocole. L’exemple suivant fait référence à la bibliothèque pmtiles :

  <script src="https://unpkg.com/pmtiles@3.2.0/dist/pmtiles.js"></script>

Initialisez ensuite le protocole MapLibre PMTiles.

  //Initialize the plugin.
  const protocol = new pmtiles.Protocol();
  atlas.addProtocol("pmtiles", protocol.tile);

Ajouter PMTiles comme source de carte

L’exemple suivant utilise le jeu de données de bâtiment Overture pour ajouter des données de bâtiment sur la basemap (carte de base).

Les PMTiles sont ajoutés comme source de carte lors de l’événement de carte. Une fois ajoutés, le schéma d’URI spécifié est disponible dans le Kit de développement logiciel (SDK) Web d’Azure Maps. Dans l’exemple suivant, l’URL PMTiles est ajoutée en tant que VectorTileSource.

const PMTILES_URL = "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2024-07-22/buildings.pmtiles";
//Add the source to the map.
map.sources.add(
  new atlas.source.VectorTileSource("my_source", {
    type: "vector",
    url: `pmtiles://${PMTILES_URL}`,
  })
);

Améliorer une carte avec des données Overture

Overture offre un schéma de données complet et unifié conçu pour organiser et structurer efficacement des données géospatiales. Ce schéma est divisé en différents thèmes, chacun représentant un type spécifique d’information géospatiale.

L’exemple suivant utilise les propriétés du thème de bâtiment (par exemple, la hauteur et le type de bâtiment) pour montrer l’extrusion du bâtiment et différencier les catégories de bâtiment sur la basemap, plutôt que de montrer simplement les empreintes du bâtiment.

//Create a polygon extrusion layer.
layer = new atlas.layer.PolygonExtrusionLayer(
  "my_source",
  "building",
  {
    sourceLayer: "building",
    height: ["get", "height"],
    fillOpacity: 0.5,
    fillColor: [
      "case",
      ['==', ['get', 'subtype'], 'agricultural'],
      "wheat",
      ['==', ['get', 'subtype'], 'civic'],
      "teal",
      ['==', ['get', 'subtype'], 'commercial'],
      "blue",
      ['==', ['get', 'subtype'], 'education'],
      "aqua",
      ['==', ['get', 'subtype'], 'entertainment'],
      "pink",
      ['==', ['get', 'subtype'], 'industrial'],
      "yellow",
      ['==', ['get', 'subtype'], 'medical'],
      "red",
      ['==', ['get', 'subtype'], 'military'],
      "darkgreen",
      ['==', ['get', 'subtype'], 'outbuilding'],
      "white",
      ['==', ['get', 'subtype'], 'religious'],
      "khaki",
      ['==', ['get', 'subtype'], 'residential'],
      "green",
      ['==', ['get', 'subtype'], 'service'],
      "gold",
      ['==', ['get', 'subtype'], 'transportation'],
      "orange",
      "grey",
    ],
    filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']]
  }
);

L’image suivante montre une capture d’écran affichant l’extrusion de bâtiments de différents types près de Central Park à New York City.

Pour obtenir un exemple entièrement fonctionnel avec du code source, consultez Référentiel GitHub d’exemples Azure Maps.

Étapes suivantes

Les articles suivants sont associés à au protocole PMTiles personnalisé :