-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
129 lines (124 loc) · 3.93 KB
/
index.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>地理院ベクトルタイル提供実験（基盤地図情報（数値標高モデル））</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@0.7.3/dist/leaflet.js"></script>
<script src="./leaflet-hash.js"></script>
<script src="./TileLayer.GeoJSON.js"></script>
<style>
body {padding: 0; margin: 0}
html, body, #mapdiv {height: 100%; width: 100%;}
.leaflet-container {background: #fff;}
.data {
width: 40px;
margin-left: -20px;
line-height: 10px;
height: 10px;
margin-top: -5px;
text-align: center;
font-size: 10px;
border: 1px solid #ccc;
background-color: rgba(255, 255, 255, 0.5);
}
.dem10b {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
fill: #0f0; color: #f00;
}
.dem5a {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
fill: #0f0; color: #00f;
}
</style>
</head>
<body>
<div id="mapdiv">
<script>
var std = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
maxZoom: 24, maxNativeZoom: 18,
attribution: '地理院タイル（標準地図）'});
var ort = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
maxZoom: 24, maxNativeZoom: 18,
attribution: '地理院タイル（写真）'});
var dem10b = new L.TileLayer.GeoJSON(
'https://cyberjapandata.gsi.go.jp/xyz/experimental_dem10b/{z}/{x}/{y}.geojson', {
minZoom: 18, maxNativeZoom: 18, maxZoom: 24,
attribution: '10mDEM（地形図の等高線）'
}, {
pointToLayer: function(feat, latlng) {
return L.marker(latlng, {
icon: L.divIcon({
html: '<div class="data dem10b">' +
feat.properties.alti.toFixed(2) + '</div>',
className: null, iconSize: null
})
});
},
onEachFeature: function(feat, layer) {
var popupString = '<div class="popup">';
for (var k in feat.properties) {
var v = feat.properties[k];
// if(k == 'alti') {v = v.toFixed(2);}
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString);
}
});
var dem5a = new L.TileLayer.GeoJSON(
'https://cyberjapandata.gsi.go.jp/xyz/experimental_dem5a/{z}/{x}/{y}.geojson', {
minZoom: 19, maxNativeZoom: 18, maxZoom: 24,
attribution: '5mDEM（航空レーザ測量）'
}, {
pointToLayer: function(feat, latlng) {
return L.marker(latlng, {
icon: L.divIcon({
html: '<div class="data dem5a">' +
feat.properties.alti.toFixed(2) + '</div>',
className: null, iconSize: null
})
});
},
onEachFeature: function(feat, layer) {
var popupString = '<div class="popup">';
for (var k in feat.properties) {
var v = feat.properties[k];
// if(k == 'alti') {v = v.toFixed(2);}
popupString += k + ': ' + v + '<br />';
}
popupString += '</div>';
layer.bindPopup(popupString);
}
});
var canvas = L.tileLayer.canvas();
canvas.drawTile = function(canvas, tilePoint, zoom) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 255, 255);
ctx.textAlign = 'center';
ctx.font = '22px sans-serif';
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#fff'
ctx.fillText(zoom + '/' + tilePoint.x + '/' + tilePoint.y, 128, 128);
}
map = L.map('mapdiv', {
center: [36.10306, 140.08967], zoom: 20,
layers: [std,dem5a,dem10b]});
var hash = L.hash(map);
L.control.layers({}, {
'地理院タイル（標準地図）': std,
'地理院タイル（写真）': ort,
'5mDEM（航空レーザ測量）': dem5a,
'10mDEM（地形図の等高線）': dem10b,
'タイル座標':canvas
},{position:'topright',collapsed:false}).addTo(map);
</script>
</body>
</html>