兵庫県の地表形状（建物等含む）を地図上に可視化【DSM】 #JavaScript

1. 背景

兵庫県の1m精度の地表面（建物等含む）点群データを3D地図上に表示する。
詳しい方法は個人ブログに公開するが、JSXのシンタックスハイライトが失敗したため、ソースコードのみQiitaに記載する。

前処理等の詳細
兵庫県土の1m精度3次元データをWeb地図上に3D可視化【DSM】

2. 実装

2.1. 注意点

定数

コード内の YOUR_MAPBOX_TOKEN, YOUR_MAP_STYLE には値を埋める必要がある。

YOUR_MAPBOX_TOKEN: Mapboxのアカウントを取得してTOKENを発行する
- => JavaScriptの中に書くことになるため、悪用防止のためドメイン制限をかける
YOUR_MAP_STYLE: Mapboxの用意しているデフォルトスタイルから選択
- => 例えばmapbox://styles/mapbox/dark-v10のような文字列
- => Mapboxアカウントを取得し、Mapbox Studioでオリジナルスタイルを作成しても良い

useAsyncEffect()

ソースコード中のuseAsyncEffect()は、「Reactで非同期処理が可能な副作用フックを作成する」に記載してあるものを用いる。importするなりして補う。

2.2. ソースコード

DsmKobe.jsx

import React, { useEffect, useState } from "react";
import DeckGL from "@deck.gl/react";
import { PointCloudLayer } from "@deck.gl/layers";
import { StaticMap } from "react-map-gl";
import { COORDINATE_SYSTEM } from "@deck.gl/core";
import * as d3 from "d3";
import GL from "@luma.gl/constants";

import data from "../data/nada_latlon.csv";

// Constants
const MAPBOX_TOKEN = "YOU_MAPBOX_TOKEN"
const initialViewState = {
  longitude: 135.2177,
  latitude: 34.719,
  zoom: 13,
  pitch: 0,
  bearing: 0
};


// Main Component
const DsmKobe = () => {
  const [layers, setLayers] = useState([]);

  useAsyncEffect(async () => {
    const csv = await d3.csv(data);

    setLayers([
      new PointCloudLayer({
        id: "pointcloud",
        data: csv,
        coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
        pointSize: 2,
        getPosition: d => [parseFloat(d.lon), parseFloat(d.lat), parseFloat(d.h)],
        getNormal: [0, 0, 1],
        getColor: d => Object.values(d3.color(d3.interpolateSinebow((parseFloat(d.h)) / 500))).slice(0, 3),
      }),
    ]);
  }, []);

  return (
    <DeckGL
      initialViewState={initialViewState}
      controller={true}
      layers={layers}
      parameters={{
        // Additive blending
        blendFunc: [GL.SRC_ALPHA, GL.ONE, GL.ONE_MINUS_DST_ALPHA, GL.ONE],
        blendEquation: GL.FUNC_ADD
      }}
    >
      <StaticMap
        mapboxApiAccessToken={MAPBOX_TOKEN}
        mapStyle="YOUR_MAP_STYLE"
      />
    </DeckGL>
  );
};

export default DsmKobe;

2.3. 補足

blendFunc, blendEquationでAdditive blendingとすることにより、点群が光っているような見た目になる
カラースケール関数を用いて標高に応じた点群の色分けを行っている
- 色に対応する標高の範囲は決め打ちになっているので改善の余地あり
データ出典：兵庫県全域数値地形図ポータル（2010年度～2018年度）