MapboxとTurf.jsでポイントデータの3D地図を作る

ポイントデータの3D地図表現が、Mapboxにあるようで無かったので作りました。

どんな時に使うの

棒グラフに地理情報を付けたい時に使えます。

例えば、「全国の展望台付きタワーの高さ」を比較する場合。

全国の主要な展望台付きタワーの高さ（棒グラフ）

↓
↓　比較する各地を、地図上に載せる時に使えます。
↓

全国の主要な展望台付きタワーの高さ（地図）

実装例

今回はシンプルに、１層の棒グラフを地図に載せる方法を紹介します。

シンプル表現

デモとソースコード

デモとソースコードは、こちらのリンク先に掲載しています。

bl.ocks.org

要点の解説

今回の要点は、ポイントデータから3Dポリゴンデータを作る点です。
Mapboxにはポイントを直接3Dで表現するメソッドは無いのですが、3Dポリゴンを描画するメソッド自体はあります。
そこで、3Dポリゴンデータを作って描画しよう、という考えです。

なお、MapboxはGeoJSON形式であれば大概のデータをビジュアライズできるので、今回はGeoJSONで用意しました。

上記リンクに載せたソースコード内で該当するのは、次の部分です。

const qfs = mapObj.queryRenderedFeatures({
  layers: ['tower_points']
});
const data = {
  "type": "FeatureCollection",
  "features": []
};
const radiusPX = 3;

qfs.forEach(function (object) {

  const center = object.geometry.coordinates;

  let xy = mapObj.project(center);
  xy.x += radiusPX;

  let LL = mapObj.unproject(xy);
  LL = turf.point([LL.lng, LL.lat]);

  const radius = turf.distance(center, LL, {
    units: 'meters'
  }) + 0.00000001;

  object.properties.height = object.properties.full_value * 600;
  object.properties.base = 0;

  const options = {
    steps: 16,
    units: 'meters',
    properties: object.properties
  };

  data.features.push(turf.circle(center, radius, options));
})