Aggiungere PMTiles di protocollo personalizzato

L'SDK Web di Mappe di Azure supporta protocolli personalizzati, ad esempio PMTiles. Il pmtiles:// protocollo viene usato per fare riferimento agli archivi PMTiles, ovvero formati a file singolo per l'archiviazione di dati affiancati, ad esempio mappe vettoriali e raster. Questo protocollo consente Mappe di Azure di accedere a riquadri specifici all'interno di un archivio PMTiles usando una richiesta HTTP, recuperando solo i dati necessari su richiesta.

Aggiungere un protocollo personalizzato

Usando la addProtocol funzione , che registra un callback attivato prima di qualsiasi richiesta AJAX effettuata dalla libreria, è possibile intercettare, modificare e restituire la richiesta per un'ulteriore elaborazione e rendering. Ciò consente all'implementazione di una funzione di callback personalizzata di caricare le risorse quando un URL inizia con lo schema personalizzato designato.

Il primo passaggio consiste nell'aggiungere un riferimento al protocollo. L'esempio seguente fa riferimento alla pmtiles libreria:

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

Inizializzare quindi il protocollo MapLibre PMTiles.

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

Aggiungere PMTiles come origine mappa

Nell'esempio seguente viene usato il set di dati di compilazione Overture per aggiungere dati di compilazione sulla mappa di base.

PMTiles viene aggiunto come origine mappa durante l'evento della mappa. Una volta aggiunto, lo schema URI specificato è disponibile per Mappe di Azure Web SDK. Nell'esempio seguente l'URL PMTiles viene aggiunto come .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}`,
  })
);

Migliorare la mappa con i dati overture

L'overture offre uno schema di dati unificato e completo progettato per organizzare e strutturare i dati geospaziali in modo efficace. Questo schema è suddiviso in temi diversi, ognuno dei quali rappresenta un tipo specifico di informazioni geospaziali.

Nell'esempio seguente vengono usate le proprietà del tema dell'edificio (ad esempio, il tipo di compilazione e l'altezza) per illustrare l'estrusione della compilazione e distinguere le categorie di compilazione sulla mappa di base, invece di mostrare solo i footprint degli edifici.

//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']]
  }
);

La figura seguente mostra uno screenshot che mostra l'estrusione di edifici di diversi tipi vicino a Central Park a New York City.

Per un esempio completamente funzionale con il codice sorgente, vedere Mappe di Azure Repository GitHub di esempi.

Passaggi successivi

Gli articoli seguenti sono correlati al protocollo personalizzato PMTiles: