はじめに
- インディゴ株式会社さんが公開してくださっているPLATEAU（3D都市モデル）の建築物 (bldg:Building)のデータをdeck.glで表示してみました。
- deck.glの表示部分は、下記のブログの記事を参考にさせていただきました。
インディゴ株式会社さんが公開してくださっているPLATEAU（3D都市モデル）のデータ
アウトプットイメージ
こちらのサイト（https://t.co/7xR3m0I7V4）を参考にさせていただきながら、インディゴ株式会社さんが #PLATEAU のデータをMVT（Mapbox Vector Tile）形式に変換し、公開しているデータをhttps://t.co/j5x1odcLvTのMVTLayerで表示してみた😀
— shi_works🌕 (@syanseto) June 17, 2021
↓データの出典はこちらhttps://t.co/aTqlAGKOyB pic.twitter.com/K5jYZHPNR5
前提条件
- 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();