deck.glの新機能「MaskExtension」

概要

2/25に公開されたdeck.gl v8.7にて、クリッピングマスク機能が追加されました。

MaskExtensionを使うと既存のレイヤーにGeoJSON(ポリゴン)などでマスク(切り抜き)効果をつけることができます。

サンプルコード

クリックした県のポリゴンでタイルレイヤーを切り抜くサンプルです。

解説

地理院タイルの全国写真を表示したタイルレイヤーの上に都道府県のGeojsonを重ね、クリックされた都道府県のポリゴンデータを使ってマスクレイヤーを生成するようにしています。

  //マスク効果を適用するレイヤー
  const tileLayer = new TileLayer({
    data: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",

    //マスク指定
    extensions: [new MaskExtension()],
    maskId: "geofence", //マスクレイヤーのレイヤーIDを指定する
  });

  //マスクレイヤーを生成
  const mask = new GeoJsonLayer({
    id: "geofence",
    data: maskGeo || "data/tokyo.geojson", //maskGeoデータが無いときは東京のポリゴンでマスクをかける
    operation: "mask"
  });

//マスク効果を適用するレイヤー

const tileLayer = new TileLayer({

data: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",

//マスク指定

extensions: [new MaskExtension()],

maskId: "geofence", //マスクレイヤーのレイヤーIDを指定する

});

//マスクレイヤーを生成

const mask = new GeoJsonLayer({

id: "geofence",

data: maskGeo || "data/tokyo.geojson", //maskGeoデータが無いときは東京のポリゴンでマスクをかける

operation: "mask"

});

特定のデータにフォーカスさせたいときなど、余計な情報を切り落とすのに便利な機能です。ぜひ活用してみてください。

※ただし、マスク効果はすべてのレイヤーに適用できるわけではないのでご注意ください。

概要

サンプルコード

解説

投稿者: shimizu