Hinzufügen von benutzerdefinierten Protokoll-PMTiles

Das Web SDK von Azure Maps unterstützt benutzerdefinierte Protokolle wie PMTiles. Das pmtiles://-Protokoll dient dazu, auf PMTiles-Archive zu verweisen. Dabei handelt es sich um Einzeldateiformate zum Speichern von gekachelter Daten wie Vektor- und Rasterkarten. Dieses Protokoll ermöglicht Azure Maps den Zugriff auf bestimmte Kacheln innerhalb eines PMTiles-Archivs mithilfe einer HTTP-Anforderung, die nur die erforderlichen Daten nach Bedarf abruft.

Hinzufügen eines benutzerdefinierten Protokolls

Mithilfe der addProtocol-Funktion, die einen Rückruf registriert, der vor jeder AJAX-Anforderung von der Bibliothek ausgelöst wird, können Sie die Anforderung abfangen, ändern und für die weitere Verarbeitung und das Rendern zurückgeben. Dadurch kann die Implementierung einer benutzerdefinierten Rückruffunktion Ressourcen laden, wenn eine URL mit dem angegebenen benutzerdefinierten Schema beginnt.

Der erste Schritt besteht darin, einen Verweis auf das Protokoll einzufügen. Im folgenden Beispiel wird auf die pmtiles-Bibliothek verwiesen:

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

Initialisieren Sie als Nächstes das MapLibre PMTiles-Protokoll.

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

Hinzufügen von PMTiles als Kartenquelle

Im folgenden Beispiel wird das Overture-Dataset mit Gebäuden verwendet, um Gebäudedaten über der Basiskarte hinzuzufügen.

PMTiles werden während des Kartenereignisses als Kartenquelle hinzugefügt. Nach dem Hinzufügen ist das angegebene URI-Schema für das Web SDK von Azure Maps verfügbar. Im folgenden Beispiel wird die PMTiles-URL als eine VectorTileSource hinzugefügt.

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}`,
  })
);

Verbessern einer Karte mit Overture-Daten

Overture bietet ein einheitliches und umfassendes Datenschema zum effektiven Organisieren und Strukturieren von räumlichen Daten. Dieses Schema ist in verschiedene Designs unterteilt, die jeweils einen bestimmten Typ von räumlichen Informationen darstellen.

Im folgenden Beispiel werden die Eigenschaften des Gebäudedesigns (z. B. Gebäudetyp und -höhe) verwendet, um die Gebäudeextrusion zu veranschaulichen und zwischen Gebäudekategorien auf der Basiskarte zu unterscheiden anstatt nur Gebäudegrundrisse anzuzeigen.

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

Die folgende Abbildung zeigt einen Screenshot mit einer Extrusion von Gebäuden verschiedener Typen in der Nähe des Central Parks in New York City.

Ein voll funktionsfähiges Beispiel mit Quellcode finden Sie im GitHub-Repository mit Azure Maps-Beispielen.

Nächste Schritte

Die folgenden Artikel beziehen sich auf das benutzerdefinierte PMTiles-Protokoll: