[deck.gl]React x TypeScript x DeckGL Part2

13384 ワード
mapbox deckgl React TypeScript TypeScript テキストリンク

Nx(React)ワークスペースにdeck.glの環境構築を行った際の備忘録その2

前回の記事はこちら
[deck.gl]React x TypeScript x DeckGL Part1

事前準備

Mapboxにアカウント登録し、アクセストークンを取得する
https://account.mapbox.com/

トークンはgit管理下に置かないように注意

react-map-glを使って地図を表示する

react-map-glのhooksサンプルに沿ってシンプルな地図を表示する

  • MAPBOX_ACCESS_TOKENにはMapboxアカウントで取得したトークンを記述する
  • useStateに型パラメータが渡せるのでreact-map-glからimportしたMapboxProps型を渡した
my-map.tsx
import React, { useState } from 'react';
import ReactMapGL, { MapboxProps } from 'react-map-gl';

import './my-map.scss';

export const MyMap = () => {
  const MAP_STYLE = 'mapbox://styles/mapbox/streets-v10';
  const MAPBOX_ACCESS_TOKEN = 'pk.xxxxxxxxxxxxxx' // 取得したAPIトークン

  const [viewport, setViewport] = useState<MapboxProps>({
    width: '100vw',
    height: '100vw',
    latitude: 34.704048,
    longitude: 135.494883,
    zoom: 15,
  });

  return (
    <ReactMapGL
      {...viewport}
      mapStyle={MAP_STYLE}
      mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
      onViewportChange={setViewport}
    />
  );
};

export default MyMap;

表示結果

http://localhost:4200を開くと地図が表示される

deck.glのレイヤーを表示する

deck.glを使ってレイヤーを使ったレイヤーの利用。
シンプルな例として地図上にScatterplotLayer(散布図)を表示する

変更点
* ベースの地図はStaticMapに変更し、アクセストークンとスタイルのみを定義する
* 緯度経度の情報はDeckGLのコンポーネントに渡す

my-map.tsx
import React from 'react';
import DeckGL from '@deck.gl/react';
import { ScatterplotLayer } from '@deck.gl/layers';
import { StaticMap } from 'react-map-gl';

import './my-map.scss';

export const MyMap = () => {
  const MAP_STYLE = 'mapbox://styles/mapbox/streets-v10';
  const MAPBOX_ACCESS_TOKEN = 'pk.xxxxxxxxxxxxxx' // 取得したAPIトークン
  const initialViewState = {
    longitude: 135.495734,
    latitude: 34.700559,
    zoom: 14,
  };

  const layers = [
    new ScatterplotLayer({
      id: 'example',
      data: [
        {
          name: '梅田',
          radius: 12000,
          coordinates: [135.495734, 34.700559],
        },
        {
          name: '淀屋橋',
          radius: 12000,
          coordinates: [135.501413, 34.692552],
        },
      ],
      stroked: false,
      filled: true,
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      getPosition: (d) => d.coordinates as any,
      getRadius: (d) => Math.sqrt(d.radius),
      getFillColor: [0,204,102],
    }),
  ];

  return (
    <DeckGL
      initialViewState={initialViewState}
      controller={true}
      layers={layers}
      effects={[]}
      width="100%"
      height="100%"
    >
      <StaticMap
        width="100%"
        height="100%"
        mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
        mapStyle={MAP_STYLE}
      />
    </DeckGL>
  );
};

export default MyMap;

表示結果

指定した緯度・経度に緑の円が表示された

所感

  • 環境構築から導入までは比較的簡単
  • 実際に導入する際はDeckGLの初期値に渡すオブジェクトの型定義を丁寧に行いたい

参考資料