-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathsample1.html
104 lines (92 loc) · 2.85 KB
/
sample1.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
<!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>スタイルつき GeoJSON 表示サンプル</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
body {padding: 0; margin: 0}
html, body, #mapdiv {height: 100%; width: 100%;}
.leaflet-container {background: #fff;}
.leaflet-div-icon {background: none;white-space: nowrap;border:none;}
</style>
</head>
<body>
<div id="mapdiv">
<script>
function geojson_style(prop) {
var s = {};
for(name in prop) {
if(name.match(/^_/) && !name.match(/_markerType/)){
if( prop['_markerType']=='Circle' && name =='_radius'){continue;}
s[name.substr(1)]=prop[name];
}
}
return s;
}
function popup_properties(prop) {
var s = ''
for(name in prop) {
if(!name.match(/^_/)){
s += name + "：" + prop[name] + "<br>";
}
}
return s;
}
// スタイルつき GeoJSON読み込み
// 「./sample1.geojson」の部分を適宜変更してください。
var xhr = new XMLHttpRequest();
xhr.open('GET', './sample1.geojson', false);
xhr.send(null);
var sampledata = JSON.parse(xhr.responseText);
var sampleLayer = L.geoJson(sampledata, {
pointToLayer: function (feature, latlng) {
var s = geojson_style(feature.properties);
if(feature.properties['_markerType']=='Icon'){
var myIcon = L.icon(s);
return L.marker(latlng, {icon: myIcon});
}
if(feature.properties['_markerType']=='DivIcon'){
var myIcon = L.divIcon(s);
return L.marker(latlng, {icon: myIcon});
}
if(feature.properties['_markerType']=='Circle'){
return L.circle(latlng,feature.properties['_radius'],s);
}
if(feature.properties['_markerType']=='CircleMarker'){
return L.circleMarker(latlng,s);
}
},
style: function (feature) {
if(!feature.properties['_markerType']){
var s = geojson_style(feature.properties);
return s;
}
},
onEachFeature: function (feature, layer) {
layer.bindPopup(popup_properties(feature.properties));
}
});
// 背景地図設定
var std = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル（標準地図）</a>",
maxNativeZoom: 18,
maxZoom: 18,
opacity:1
}
);
// 中心位置設定
var map = L.map('mapdiv', {
center: [36.102099,140.082239], zoom: 16, layers: [std,sampleLayer]
});
L.control.scale({imperial: false}).addTo(map);
var baseLayers = {"地理院タイル（標準地図）": std};
var overlays = {'サンプル': sampleLayer };
L.control.layers(baseLayers, overlays,{position:'topright',collapsed:false}).addTo(map);
</script>
</body>
</html>