deckglとD3.jsを組み合わせて、地図上にボロノイ図を描画する

最終更新日

DEMO

概要

deck.glを使ってWebGLで描画した地図の上に、D3.jsを使ってsvgをオーバーレイしボロノイ図を描画します。

ソースコード

解説

deck.glでは、緯度経度と画面上の座標の投影変換をViewportクラスが担っています。
Viewportクラスは通常外部から利用できるような形でインタンス化されていませんが、サブクラスであるWebMercatorViewportを利用することで、投影変換を行うためのprojectメソッドを外部から利用することができます。

WebMercatorViewport Class

projectメソッドを使って母点の画面上の座標を取得し、それらを基にd3-voronoiモジュールを用いてボロノイ図を描画するための座標を算出しています。
あとは、webGL上にオーバーレイしたSVG要素にPathエレメントを設置してボロノイを描画しています。

おまけ

今回はsvgを使ってボロノイを描画しましたが、d3-voronoiの計算結果をdeck.glのPathLayerに渡してwebGL上に描画する方がスマートかもしれません。