deck.gl×React×TypeScript 環境構築 #React

はじめに

deck.gl をさくっと試してみたいと思います。
deck.glの環境構築はWeb記事が少なかったので記録してみました。

deck.gl とは

deck.glは、大規模なデータセットの高性能なWebGLベースの視覚化を簡素化するために設計されています。
ユーザーは、既存のレイヤーを合成することにより、最小限の労力で印象的な視覚的結果を素早く得ることができます。

環境構築手順

Reactプロジェクト作成

deck.glはReactとの親和性がよさそうなので、Reactを使います。

一から開発サーバの起動やらビルドやらの設定をするのは面倒なので、create-react-app を使います。
sample には適当なフォルダ名をいれてください。
--template typescript を指定することでcreate-react-appにTypeScriptを導入できます。

npx create-react-app sample --template typescript

以下のコマンドを実行すると、開発サーバが起動します。
http://localhost:3000/ にアクセスすると、テンプレートのWebサイトが表示されます。

npm start

deck.glインストール

上で作成したプロジェクトにdeck.glをインストールします。

cd sample
npm install deck.gl --save

サンプルコード作成

Using deck.gl with Reactと、Using deck.gl with TypeScriptを参考に、src/App.tsx を以下のように書き換えます。

import React from 'react';
import DeckGL from '@deck.gl/react/typed';
import { LineLayer } from '@deck.gl/layers/typed';

// Viewport settings
const INITIAL_VIEW_STATE = {
    longitude: -122.41669,
    latitude: 37.7853,
    zoom: 13,
    pitch: 0,
    bearing: 0,
};

// Data to be used by the LineLayer
const data = [{ sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781] }];

function App() {
    const layers = [new LineLayer({ id: 'line-layer', data })];

    return (
        <div className="App">
            <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} layers={layers} />
        </div>
    );
}

export default App;

~~達成感薄めですが~~ ラインを表示することができました！

おわりに

deck.glで3D Tilesも読めるのはいいですよね。
deck.glを使ってGISデータをインパクトのある見た目にしてみたいです！

deck.gl×React×TypeScript 環境構築