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

[前回](https://qiita.com/koeri3/items/a245f7cb50e77ebf3167)に引き続き、DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第３弾の記事です。

[前回](https://qiita.com/koeri3/items/a245f7cb50e77ebf3167)は基本的なReactのコードが動くことをブラウザで確認できました。
今回は実際にDECK.GLを組み込んでいきたいと思います。

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

1. [ReactとDECK.GLの環境構築](https://qiita.com/koeri3/items/8dc468ad9f910bdf244b)
2. [基本的なReactのコードをブラウザで確認](https://qiita.com/koeri3/items/a245f7cb50e77ebf3167)
3. DECK.GLを使った簡単なデータの表示   **←今回はコレ**
4. [マップコンポーネントの表示](https://qiita.com/koeri3/items/b1ff402f356a4821f637)
5. [GoogleMapタイムラインデータ表示](https://qiita.com/koeri3/items/3578f1b9269721f27733)


## 前回のおさらい
[前回](https://qiita.com/koeri3/items/a245f7cb50e77ebf3167)は、App.jsx にReactの基本的なコードを書きました。

```jsx:App.jsx
import React from "react";

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

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

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

※レイヤーについての詳しい説明は今回は割愛します。
[本家のサイト](https://deck.gl/#/documentation/deckgl-api-reference/layers/overview)に詳しく載っているので、興味がある方はそちらをご覧ください。

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

```jsx:App.jsx（一部）
import React from "react";
import DeckGL from "@deck.gl/react";
import { PathLayer } from "@deck.gl/layers";
```

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

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

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

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


```jsx: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`を利用する際に最低限必要な定義を指定しています。

```jsx: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>;
  }
}
```

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

※レイヤーについての詳しい説明は今回は割愛します。
[本家のサイト](https://deck.gl/#/documentation/deckgl-api-reference/layers/overview)に詳しく載っているので、興味がある方はそちらをご覧ください。

## ブラウザで表示

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

  :point_down_tone2::point_down_tone2::point_down_tone2:
![Screen Shot 2019-12-16 at 3.17.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/c239395f-13e6-c12d-aebc-a2ac8264cd3d.png)


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


## 次回予告
まだ地図情報が何もないので、あまりパッとしませんよね。
[次回](https://qiita.com/koeri3/items/b1ff402f356a4821f637)はマップコンポーネントを組み込んで表示させてみたいと思います。

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



## App.jsxの全体像

```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>;
  }
}

```