-
Notifications
You must be signed in to change notification settings - Fork 0
/
gsi_vector_tiles_with_ol3.html
70 lines (57 loc) · 2.15 KB
/
gsi_vector_tiles_with_ol3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<style>
body {padding: 0; margin: 0}
#mapdiv {height: 100%; width: 100%;}
</style>
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<title>Experimental GSI Vector Tiles via OpenLayers 3 (shift+drag to rotate)</title>
<script>
function init(){
var map = new ol.Map({target: 'mapdiv',
interactions: ol.interaction.defaults().extend([
new ol.interaction.DragRotateAndZoom()
]),
fractionalZoom: true,
layers: [
// ベース地図レイヤ 透明度を変えれば消せる
new ol.layer.Tile({opacity: 0.0, source: new ol.source.XYZ({url:
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'})}),
// 触地図レイヤ
new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.GeoJSON({defaultProjection: 'EPSG:4326'}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({minZoom: 15, maxZoom: 16}),
url: 'http://cyberjapandata.gsi.go.jp/xyz/experimental_rdcl/' +
'{z}/{x}/{y}.geojson'}),
style: function(feature, resolution) {
return [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000', // 線の色
// 描画に関するオプション ここでは線種（太さと破線）
width: (feature.get('rnkWidth') == '19.5m以上') ? 20 : 8, // 19.5m以上ならば，太さ20．それ以外は太さ8
lineDash: (feature.get('type') == '庭園路') ? [10] : undefined // 庭園路（構内道路のこと？）は破線
})
})];
}
})
],
// デフォルトの表示場所（中心の座標値，拡大率，回転角度を指定）
view: new ol.View({
center: ol.proj.transform([139.8977, 36.5594], 'EPSG:4326', 'EPSG:3857'),
zoom: 18, rotation: 10.7975
})
});
}
</script>
</head>
<!-- ロード時にinit()を呼び出して地図を描画 -->
<body onload="init()">
<!-- 地図の埋め込み場所 -->
<div id="mapdiv"></div>
</body>
</html>