Dodawanie niestandardowych protokołów PMTiles

Internetowy zestaw SDK usługi Azure Maps obsługuje niestandardowe protokoły, takie jak PMTiles. Protokół pmtiles:// służy do odwołowania się do archiwów PMTiles, które są formatami pojedynczego pliku do przechowywania danych kafelków, takich jak mapy wektorowe i rastrowe. Ten protokół umożliwia usłudze Azure Maps dostęp do określonych kafelków w archiwum PMTiles przy użyciu żądania HTTP, pobierając tylko niezbędne dane na żądanie.

Dodawanie protokołu niestandardowego

Korzystając z addProtocol funkcji, która rejestruje wywołanie zwrotne wyzwalane przed każdym żądaniem AJAX wykonanym przez bibliotekę, można przechwycić, zmodyfikować i zwrócić żądanie dalszego przetwarzania i renderowania. Dzięki temu implementacja niestandardowej funkcji wywołania zwrotnego umożliwia ładowanie zasobów, gdy adres URL rozpoczyna się od wyznaczonego schematu niestandardowego.

Pierwszym krokiem jest dodanie odwołania do protokołu. Poniższy przykład odwołuje się do pmtiles biblioteki:

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

Następnie zainicjuj protokół MapLibre PMTiles.

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

Dodawanie pmTiles jako źródła mapy

W poniższym przykładzie użyto zestawu danych kompilowania overture w celu dodania danych konstrukcyjnych na mapie podstawowej.

PmTiles są dodawane jako źródło mapy podczas zdarzenia mapy. Po dodaniu określony schemat identyfikatora URI jest dostępny dla zestawu Web SDK usługi Azure Maps. W poniższym przykładzie adres URL PMTiles jest dodawany jako 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}`,
  })
);

Ulepszanie mapy za pomocą danych overture

Funkcja overture udostępnia ujednolicony i kompleksowy schemat danych zaprojektowany do efektywnego organizowania i tworzenia struktury danych geoprzestrzennych. Ten schemat jest podzielony na różne motywy, z których każdy reprezentuje określony typ informacji geoprzestrzennych.

W poniższym przykładzie użyto właściwości motywu budynku (na przykład typu budynku i wysokości), aby zademonstrować ekstruzję budynku i rozróżnić kategorie budynków na mapie bazowej, a nie tylko pokazywać ślady budynku.

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

Na poniższej ilustracji przedstawiono zrzut ekranu przedstawiający ekstruzję budynków różnych typów w pobliżu Central Park w Nowym Jorku.

Aby zapoznać się z w pełni funkcjonalnym przykładem kodu źródłowego, zobacz Repozytorium GitHub przykłady usługi Azure Maps.

Następne kroki

Następujące artykuły są związane z niestandardowymi pmTiles protokołu: