DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#3

前回に引き続き、DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第３弾の記事です。

前回は基本的なReactのコードが動くことをブラウザで確認できました。
今回は実際にDECK.GLを組み込んでいきたいと思います。

目次

本記事は全５回に渡り説明していきます。

1. ReactとDECK.GLの環境構築
2. 基本的なReactのコードをブラウザで確認
3. DECK.GLを使った簡単なデータの表示 ←今回はコレ
4. マップコンポーネントの表示
5. GoogleMapタイムラインデータ表示

前回のおさらい

前回は、App.jsx にReactの基本的なコードを書きました。

App.jsx

import React from "react";

export default class App extends React.Component {
  render() {
    return <div>Hello, DECK.GL!!</div>;
  }
}

これにDECK.GLを加えていきましょう。

レイヤー

DECK.GLにはいろんな種類の「レイヤー」が用意されています。
これを使うことで、様々なビジュアライズを行うことができるのです！

※レイヤーについての詳しい説明は今回は割愛します。
本家のサイトに詳しく載っているので、興味がある方はそちらをご覧ください。

コンポーネントのimport

今回は PathLayer というレイヤーを使ってビジュアライズしたいと思います。
まずはじめにApp.jsxに必要なコンポーネントをimportしましょう。
importするのは、DECK.GLとPathLayerのコンポーネントです。

App.jsx（一部）

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";

初期設定

次に画面に表示する際の初期設定を書いていきます。

viewStateでは、初期表示時に「どの位置で」「どのくらいズームさせて」表示するかを指定します。

dataでは、DECK.GLを使って描画する地理データを指定します。
PathLayerでは、[緯度,経度]の配列データが必要です。これらのデータをパスで繋いでレンダリングしてくれます。

今回はpathオブジェクトに[緯度,経度]のデータを代入しておきましょう。

App.jsx（一部）

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [{
  path: [
    [-122.45, 37.7],
    [-122.5, 37.8],
    [-122.6, 37.7]
  ]
}];

レンダリング

最後に画面にレンダリングする部分を書いていきましょう。

引数としてviewState（描画情報） と layers（レイヤー情報）を指定し、DeckGLコンポーネントをリターンします。

viewStateには、上記で指定した変数をそのままセットすればOK。
layersには、下記のようなオブジェクトをセットします。今回はPathLayerを利用する際に最低限必要な定義を指定しています。

App.jsx（一部）

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",     // PathLayerを使う場合、"path-layer"を指定
        data,                 // 描画したい地理データセットを指定
        getPath: d => d.path, // データセットから地理データを取得
        getWidth: 30          // 描画する際の線の太さを指定
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}

それぞれのレイヤーで指定する内容は異なるので、レイヤーを使う際には何を指定すべきかしっかり確認しましょう！

※レイヤーについての詳しい説明は今回は割愛します。
本家のサイトに詳しく載っているので、興味がある方はそちらをご覧ください。

ブラウザで表示

それでは今書いたコードをブラウザで表示してみましょう！
前回同様、動作確認はyarn startのコマンドでしたね。

こんな感じで表示されるはずです。
今回はDECK.GLのPathLayerを使って、３つの座標を線で繋いでみました。
簡単ですね！

次回予告

まだ地図情報が何もないので、あまりパッとしませんよね。
次回はマップコンポーネントを組み込んで表示させてみたいと思います。

GoogleMapタイムラインの表示までもう少々お待ちください〜

App.jsxの全体像

App.jsx

import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";

// Viewport 初期設定
const viewState = {
  longitude: -122.5,
  latitude: 37.75,
  zoom: 11
};

// 描画する地理データ
const data = [
  {
    path: [
      [-122.45, 37.7],
      [-122.5, 37.8],
      [-122.6, 37.7]
    ]
  }
];

export default class App extends React.Component {
  render() {
    const layer = [
      new PathLayer({
        id: "path-layer",
        data,
        getPath: d => d.path,
        getWidth: 30
      })
    ];
    return <DeckGL viewState={viewState} layers={layer}></DeckGL>;
  }
}