Tangram で国土地理院ベクトルタイル提供実験のデータを見る

Tangram で国土地理院ベクトルタイル提供実験のデータ（基盤地図情報）を見るコードを作成してみました。

f:id:hfu:20150520053831p:plain

下記 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