Aangepast protocol PMTiles toevoegen

De Azure Maps Web SDK ondersteunt aangepaste protocollen zoals PMTiles. Het pmtiles:// protocol wordt gebruikt om te verwijzen naar PMTiles-archieven, die bestaan uit één bestandsindeling voor het opslaan van betegelde gegevens, zoals vector- en rasterkaarten. Met dit protocol kan Azure Maps toegang krijgen tot specifieke tegels in een PMTiles-archief met behulp van een HTTP-aanvraag, waarbij alleen de benodigde gegevens op aanvraag worden opgehaald.

Aangepast protocol toevoegen

Door de addProtocol functie te gebruiken, waarmee een callback wordt geregistreerd die wordt geactiveerd vóór een AJAX-aanvraag die door de bibliotheek is ingediend, kunt u de aanvraag voor verdere verwerking en rendering onderscheppen, wijzigen en retourneren. Hierdoor kan de implementatie van een aangepaste callback-functie resources laden wanneer een URL begint met het aangewezen aangepaste schema.

De eerste stap is het toevoegen van een verwijzing naar het protocol. In het volgende voorbeeld wordt verwezen naar de pmtiles bibliotheek:

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

Initialiseer vervolgens het MapLibre PMTiles-protocol.

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

PMTiles toevoegen als een kaartbron

In het volgende voorbeeld wordt de gegevensset Overture building gebruikt om bouwgegevens toe te voegen via de basemap.

PMTiles worden toegevoegd als een kaartbron tijdens de kaart-gebeurtenis. Zodra het is toegevoegd, is het opgegeven URI-schema beschikbaar voor de Azure Maps Web SDK. In het volgende voorbeeld wordt de PMTiles-URL toegevoegd als een 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}`,
  })
);

Kaart verbeteren met gegevens overture

Overture biedt een geïntegreerd en uitgebreid gegevensschema dat is ontworpen om georuimtelijke gegevens effectief te organiseren en te structuren. Dit schema is onderverdeeld in verschillende thema's, die elk een specifiek type georuimtelijke informatie vertegenwoordigen.

In het volgende voorbeeld worden de eigenschappen van het gebouwthema (bijvoorbeeld bouwtype en hoogte) gebruikt om gebouwextrusie te demonstreren en onderscheid te maken tussen gebouwcategorieën op de basiskaart, in plaats van alleen de bouwvoetafdrukken weer te geven.

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

In de volgende afbeelding ziet u een schermopname van de extrusie van gebouwen van verschillende typen in de buurt van Central Park in New York City.

Zie Azure Maps Samples GitHub-opslagplaats voor een volledig functioneel voorbeeld met broncode.

Volgende stappen

De volgende artikelen zijn gerelateerd aan aangepaste protocol PMTiles: