Mapbox GL JS で都道府県別人口のビジュアライゼーション

デモ: https://kozy4324.github.io/population_3d_demo/demo.html
ソース: https://github.com/kozy4324/population_3d_demo

Transcript

1. Mapbox GL JS で 都道府県別人口の ビジュアライゼーション 2016/11/28 株式会社マピオン 中村浩士
2. こんな感じのやつを作ってみました
3. 実装を解説します！
4. 初期化
5. データ ソース 追加 (GeoJSON)
6. レイヤ 定義の 追加
7. 高さ付きのポリゴン
8. 塗りの色 データソースの Color属性値を 適用している
9. 高さ （メートル）
10. 透明度
11. GeoJSONの中身はこんな感じ
12. 1 都道府県で 1 Feature が Mul3Polygon として格納
13. 属性値の中に人口の 分布に則した色と高さ を保持
14. 都道府県は Natural Earth から取得
15. 人口は e-Stat から拝借しまして、
16. 50行ほどのスクリプトでマージ！
17. 詳細は GitHub のほうで！
18. ハマったポイント！
19. データソースの属性値 経由で高さを設定する 場合、65536以上だと レンダリングされない！ （unsigned short int っぽい）
20. type: fill-extrusion の Paint ProperEes •  fill-extrusion-opacity •  fill-extrusion-color •  fill-extrusion-translate •  fill-extrusion-translate-anchor •  fill-extrusion-paGern •  fill-extrusion-height •  fill-extrusion-base
21. 上記のようなオブジェクトも描画可能
22. 参考リンク •  デモソース hGps://github.com/kozy4324/populaEon_3d_demo •  Mapbox Example - 3D Extrusion hGps://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/ •  Mapbox Style Spec - Fill-Extrusion hGps://www.mapbox.com/mapbox-gl-style-spec/#layers-fill-extrusion
23. まとめ •  Mapbox GL JS の Fill-Extrusion 利用できそう！ •  ただし新しめのブラウザ版だけなので注意！ – Mapbox GL JS •  0.27.0 以上 – iOS SDK •  Not yet supported – Android SDK •  Not yet supported