Hello DECK.GL 2017-11-15 20-01-52

Uber社製、ジオビジュアライゼーションフレームワーク「deck.gl」を触ってみた。

Hello DECK.GL 2017-11-15 20-01-52

demo
sample code

deck.glとは?

deck.gl

Uber社がオープンソースとして公開しているWebGLベースの地理情報視覚化フレームワークです。webGLを利用しているため、比較的データ量の多い地理情報もフロントエンドに表示することができます。

Reactのコンポーネントとして作成されているため、いままで手を出して来なかったのですが、最近Reactを勉強し始めたついでに弄ってみました。

今回は、とりあえず開発環境の構築と、サンプルにあるgeojsonデータを読み込んで表示するコンポーネントを作ってみます。


この記事は内容が古くなっています。
最新のDeck.glについては、以下の記事を参照してください。

React Hooks とdeck.gl v.7を使ってweb地図を作ってみた。


deck.glのインストール

github/deck.gl

deck.glリポジトリをcloneして開発を始めることもできますが、個人的にcreate-react-appコマンドを使いたかったので、生成したテンプレートにdeck.glを読み込んでカスタムコンポーネントを作成します。

まず、テンプレートを生成します。

続いて、deck.glをインストールします。

deck.glは単体で利用できるコンポーネントですが、公式のサンプルではUber社が公開している他のコンポーネントも利用しているので、それら必要なもの全てをインストールします。

それぞれ以下の機能が実装されています。

  • deck.gl
    地理情報を視覚化するコンポーネント
  • luma.gl
    webGL APIをreactから使いやすくしたwrapper
  • react-map-gl
    MapboxGLをreactで利用するためのコンポーネント

他、geoJSONサンプルではD3.jsのrequestモジュールが利用されているので、こちらもインストールします。

今回のサンプルでは、deck.gl & luma.gl で読み込んだGeoJSONデータを視覚化し、react-map-glでベースマップを表示します。
d3-requestはデータの読み込みに使います。
react-map-glを利用するには、Mapboxで開発者トークンを取得しておく必要があります。

カスタムコンポーネントを作る

今回は、deck.glを利用してgeoJSONデータを元に3Dポリゴンを表示するMapsコンポーネントを作成します。

カスタムコンポーネント構成

作成するカスタムコンポーネントは、src フォルダ配下にcomponentsフォルダを作成し、そこに収納します。

最終的なファイル構成は以下。

地理データを用意する

次にpubulicフォルダの中に、dataフォルダを作成し今回視覚化するgeoJSONを保存します。
今回はOSMから大阪のビルディングデータ(ポリゴン)を一部切り出して、テストデータを作成しました。

data

コーディング開始

ここから、コーティング(コピペ)に入っていきます。

components/Maps/index.js

まず、はじめにindex.jsを作成します。

これ自体は、たんなるエントリー用のスクリプトです。

components/Maps/Maps.js

次に、コンポーネントの本体であるMaps.jsを作成します。

基本は、上記example内のApp.jsをコピペしただけのものです。

Maps.jsでは主にベースマップ (Mapbox)のコンフィグレーションをおこなっています。
GeoJSONのデータを実際に出力しているのは DeckGLOverlay コンポーネントになります。

DeckGLOverlay コンポーネントの設定はdeckgl-overlay.jsの中に記載されています。

components/Maps/deckgl-overlay.js

最後に、deckgl-overlay.jsをコピペします。

サンプルでは、元のgeojsonデータの中に高さの値がありましたが、今回用意した大阪のデータには存在しなかったので、ランダムに高さを割り当てるようにサンプルコートを修正しています。また、3Dモデルの配色もブルーを基準にランダムに塗るように変更しました。

主にデフォルトの表示領域や3Dモデルのライティングなどの設定が記載されています。

カスタムコンポーネントをApp.jsに追加する

最後に、作成したカスタムコンポーネントをApp.jsに追加して終了です。