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

# はじめに
- インディゴ株式会社さんが公開してくださっている[PLATEAU（3D都市モデル）](https://www.geospatial.jp/ckan/dataset/plateau)の[建築物 (bldg:Building)のデータ](https://github.com/indigo-lab/plateau-tokyo23ku-building-mvt-2020)を[deck.gl](https://deck.gl/)で表示してみました。
- deck.glの表示部分は、下記のブログの記事を参考にさせていただきました。

https://gunmagisgeek.com/blog/deck-gl/7303

### インディゴ株式会社さんが公開してくださっているPLATEAU（3D都市モデル）のデータ
https://github.com/indigo-lab/plateau-tokyo23ku-building-mvt-2020

# アウトプットイメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こちらのサイト（<a href="https://t.co/7xR3m0I7V4">https://t.co/7xR3m0I7V4</a>）を参考にさせていただきながら、インディゴ株式会社さんが <a href="https://twitter.com/hashtag/PLATEAU?src=hash&amp;ref_src=twsrc%5Etfw">#PLATEAU</a> のデータをMVT（Mapbox Vector Tile）形式に変換し、公開しているデータを<a href="https://t.co/j5x1odcLvT">https://t.co/j5x1odcLvT</a>のMVTLayerで表示してみた😀<br><br>↓データの出典はこちら<a href="https://t.co/aTqlAGKOyB">https://t.co/aTqlAGKOyB</a> <a href="https://t.co/K5jYZHPNR5">pic.twitter.com/K5jYZHPNR5</a></p>&mdash; shi_works🌕 (@syanseto) <a href="https://twitter.com/syanseto/status/1405508823469551628?ref_src=twsrc%5Etfw">June 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 前提条件
- Mapboxのアクセストークンが必要になります。
- MVT（Mapbox Vector Tile）形式のデータの表示には、deck.glの[MVTLayer](https://deck.gl/docs/api-reference/geo-layers/mvt-layer)を用いています。
- また、[国土数値情報の鉄道データ（令和元年）](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v2_3.html)から鉄道路線のラインデータ（N02-19_RailroadSection.geojson）を読み込んでいます。

# html
```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
```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
```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();
```
# 参考文献
https://deck.gl/docs/api-reference/geo-layers/mvt-layer

https://gunmagisgeek.com/blog/deck-gl/7303