Tangram で国土地理院ベクトルタイル提供実験のデータを見る
Tangram で国土地理院ベクトルタイル提供実験のデータ(基盤地図情報)を見るコードを作成してみました。
下記 gsi.html と gsi.yaml からなっています。ファイルは、GitHub レポジトリ https://github.com/handygeospatial/simple-demo においています。
なお、ローカルのファイルシステムにあるものをブラウザでそのまま開いても動作しないかもしれません。python -m SimpleHTTPServer するなどして、HTTPでサーブししたものを開く必要があります。
なお、完成品を http://handygeospatial.github.io/simple-demo/gsi.html にも置いています。
gsi.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Minimalist Tangram</title> <link rel="stylesheet" href="lib/leaflet/leaflet.css" /> <style> body {margin: 0px; border: 0px; padding: 0px;} #map {height: 100%; width: 100%; position: absolute;} </style> </head> <body> <div id="map"></div> <script src="lib/leaflet/leaflet.js"></script> <script src="lib/leaflet-hash.js"></script> <script src="https://mapzen.com/tangram/0.1/tangram.min.js"></script> <script> var map = L.map('map', {maxZoom: 18, minZoom: 18}); var layer = Tangram.leafletLayer({ scene: 'gsi.yaml', attribution: '国土地理院ベクトルタイル提供実験' }); layer.addTo(map); map.setView([36.08600, 140.11373], 18); var hash = new L.Hash(map); </script> </body> </html>
gsi.yaml
こちらでデータの処理(スタイルなど)を指定します。文法は https://github.com/tangrams/tangram/wiki が参考になると思います。
cameras: camera1: type: isometric lights: light1: type: point direction: [0, 0, -10800] origin: camera diffuse: 1. ambient: .3 specular: .2 sources: gsi: type: GeoJSONTiles url: //cyberjapandata.gsi.go.jp/xyz/experimental_fgd/{z}/{x}/{y}.geojson max-zoom: 18 layers: blda: data: {source: gsi} filter: class: BldA draw: polygons: order: 2 color: '#ffe6be' 3d-buildings: draw: polygons: extrude: function() {return true;} xray: data: {source: gsi} draw: lines: order: 0 color: '#040' width: .5
今後
yaml ファイルをさらにカスタマイズしていくことで、地図表現は改善していくことができます。