カスタム プロトコル PMTiles を追加する

Azure Maps Web SDK では、PMTiles などのカスタム プロトコルがサポートされています。 pmtiles:// プロトコルは、PMTiles アーカイブを参照するために使用されます。これは、ベクター マップやラスター マップなどのタイル データを格納するための単一ファイル形式です。 このプロトコルにより、Azure Maps は HTTP 要求を使用して PMTiles アーカイブ内の特定のタイルにアクセスし、必要なデータのみをオンデマンドでフェッチできます。

カスタム プロトコルを追加する

ライブラリによって行われた AJAX 要求の前にトリガーされるコールバックを登録する addProtocol 関数を使用すると、さらに処理とレンダリングのために要求をインターセプト、変更、および返すことができます。 これにより、URL が指定されたカスタム スキーマで始まるときにリソースを読み込むカスタム コールバック関数の実装が可能になります。

最初の手順では、プロトコルへの参照を追加します。 次の例では、pmtiles ライブラリを参照しています:

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

次に、MapLibre PMTiles プロトコルを初期化します。

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

マップ ソースとして PMTiles を追加する

次の例では、 Overture 構築データセットを使用して、ベースマップに建物データを追加します。

PMTiles は、マップ イベント中にマップ ソースとして追加されます。 追加すると、指定された URI スキームが Azure Maps Web SDK で使用できるようになります。 次の例では、PMTiles URL が 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}`,
  })
);

Overture データを使用してマップを強化する

Overture は、統合された包括的な データ スキーマ を提供します。これは地理空間データを効果的に整理して構造化するように設計されています。 このスキーマは、それぞれ特定の種類の地理空間情報を表すさまざまなテーマに分かれています。

次の例では、建物のテーマのプロパティ (建物の種類や高さなど) を使用して、建物のフットプリントを表示するのではなく、建物の浮き出しを示し、ベースマップ上の建物カテゴリを区別します。

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

次の図は、ニューヨーク市のセントラル パーク付近にあるさまざまな種類の建物の浮き出しを示すスクリーンショットです。

ソース コードを含む完全に機能するサンプルについては、「Azure Maps サンプル GitHub Repo」を参照してください。

次のステップ

次の記事は、カスタム プロトコル PMTiles に関連しています: