PLATEAU（3D都市モデル）のデータをdeck.glで表示してみました

16643 ワード
PLATEAU HTML deckgl CSS JavaScript HTML テキストリンク

はじめに

インディゴ株式会社さんが公開してくださっているPLATEAU（3D都市モデル）のデータ

アウトプットイメージ

前提条件

  • Mapboxのアクセストークンが必要になります。
  • MVT（Mapbox Vector Tile）形式のデータの表示には、deck.glのMVTLayerを用いています。
  • また、国土数値情報の鉄道データ（令和元年）から鉄道路線のラインデータ（N02-19_RailroadSection.geojson）を読み込んでいます。

html

plateau-tokyo23ku-building-mvt-2020.html
<html>
  <head>
    <title>3D都市モデル（PLATEAU）/MVT/建物（東京23区）</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div id="tooltip"></div>
    <script  src="script.js"></script>
  </body>
</html>

CSS

style.css
html,body {
  font-family: Helvetica, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.deck-tooltip {
  font-family: Helvetica, Arial, sans-serif;
  padding: 6px !important;
  margin: 8px;
  max-width: 300px;
  font-size: 20px;
}

#control-panel {
  position: absolute;
  top: 0;
  left: 0;
  margin: 12px;
  padding: 20px;
  font-size: 12px;
  line-height: 1.5;
  z-index: 1;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

label {
  display: inline-block;
  width: 140px;
}

JavaScript

script.js

const deckgl = new deck.DeckGL({
  mapboxApiAccessToken: 'Mapboxのアクセストークンを入力してください',
  mapStyle: 'mapbox://styles/mapbox/dark-v9',
  initialViewState: {
    latitude: 35.6896067,
    longitude: 139.7005713,
    zoom: 14,
    maxZoom: 16,
    pitch: 45,
    bearing: 15
  },
  controller: true,
  });

const railway = d3.json('data/N02-19_RailroadSection.geojson');

const renderLayer = () => {

    const mtvLayer = new deck.MVTLayer({
      id: 'plateau-building-mtv',
      data: `https://indigo-lab.github.io/plateau-tokyo23ku-building-mvt-2020/{z}/{x}/{y}.pbf`,
      minZoom: 0,
      maxZoom: 23,
      getFillColor: [0, 255, 0, 255],
      lineWidthMinPixels: 1,
      pickable: true,
      extruded: true,
      //押出をonにする
      autoHighlight: true,
      highlightColor: [255, 0, 0],
      getElevation: d => d.properties.measuredHeight,
      wireframe: true,
      //lineを有効にする
      lineWidthMinPixels: 1,
      getLineColor: [0, 0, 0],
      material: {
        //立体ポリゴンのマテリアルを設定
        ambient: 0.1,
        diffuse: 0.9,
        shininess: 32,
        specularColor: [30, 30, 30]
      }
    });

    const geoJsonLayer = new deck.GeoJsonLayer({
      id: 'geojson',
      data: railway,
      stroked: false,
      filled: false,
      lineWidthMinPixels: 2,
      parameters: {
        depthTest: false
      },
      opacity: 0.5,
      getLineColor: [240,240,240],
      getLineWidth: 2,

      pickable: false,
    });

     deckgl.setProps({
       layers:[geoJsonLayer, mtvLayer],
       getTooltip: ({object}) => object && `measuredHeight: ${object.properties.measuredHeight}m`
      });

    }

renderLayer();

参考文献

Android NDKはc++を使用
OpenCV C++常用機能紹介