6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-09-21

はじめに

インディゴ株式会社さんが公開してくださっている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();

参考文献

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?