Lägga till PMTiles för anpassat protokoll

Azure Maps Web SDK stöder anpassade protokoll som PMTiles. Protokollet pmtiles:// används för att referera till PMTiles-arkiv, som är enfilsformat för lagring av tillagda data, till exempel vektor- och rasterkartor. Med det här protokollet kan Azure Maps komma åt specifika paneler i ett PMTiles-arkiv med hjälp av en HTTP-begäran och endast hämta nödvändiga data på begäran.

Lägga till anpassat protokoll

Genom att använda addProtocol funktionen, som registrerar en motringning som utlöses innan en AJAX-begäran som görs av biblioteket, kan du fånga upp, ändra och returnera begäran om vidare bearbetning och återgivning. På så sätt kan implementeringen av en anpassad återanropsfunktion läsa in resurser när en URL börjar med det avsedda anpassade schemat.

Det första steget är att lägga till en referens till protokollet. Följande exempel refererar till pmtiles biblioteket:

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

Initiera sedan MapLibre PMTiles-protokollet.

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

Lägga till PMTiles som en kartkälla

I följande exempel används datauppsättningen Overture building för att lägga till byggdata över baskartan.

PMTiles läggs till som en kartkälla under karthändelsen. När det har lagts till är det angivna URI-schemat tillgängligt för Azure Maps Web SDK. I följande exempel läggs PMTiles-URL:en till som en 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}`,
  })
);

Kommentar

Med hjälp av pmtiles:// protokollet skapas minzoom automatiskt egenskaperna och maxzoom för källan.

Förbättra karta med overture-data

Overture tillhandahåller ett enhetligt och omfattande dataschema som utformats för att organisera och strukturera geospatiala data effektivt. Det här schemat är indelat i olika teman, som var och en representerar en viss typ av geospatial information.

I följande exempel används byggnadstemats egenskaper (till exempel byggnadstyp och höjd) för att demonstrera byggextrudering och skilja mellan byggnadskategorier i baskartan, i stället för att bara visa fotavtryck.

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

Följande bild visar en skärmbild som visar utsöndring av byggnader av olika typer nära Central Park i New York City.

Ett fullständigt funktionellt exempel med källkod finns i GitHub-lagringsplatsen för Azure Maps-exempel.

Nästa steg

Följande artiklar är relaterade till PMTiles för anpassade protokoll:

Skapa datakälla

Datadrivna formatuttryck