/
maprenderer.js
125 lines (120 loc) · 3.6 KB
/
maprenderer.js
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
//震源地と各震度のアイコンの定義
var styles = {
'epicenter': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.9,
src: 'images/epicenter.png'
}))
})],
'1': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int1.png'
}))
})],
'2': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int2.png'
}))
})],
'3': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int3.png'
}))
})],
'4': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int4.png'
}))
})],
'5-': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int5l.png'
}))
})],
'5+': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int5h.png'
}))
})],
'6-': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int6l.png'
}))
})],
'6+': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int6h.png'
}))
})],
'7': [new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
scale: 0.5,
src: 'images/int7.png'
}))
})],
};
//GeoJSONのproperties->titleに応じてstyleを反映
var styleFunction = function(feature, resolution) {
return styles[feature.get('class')];
};
//広域ポイント(細分区域)レイヤーの定義
var smallScalePoints = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'smallScalePoints.json',
format: new ol.format.GeoJSON()
}),
style: styleFunction,
//表示する解像度(縮尺)
minResolution: 1000,
maxResolution: 20000
});
//詳細ポイント(市町村等)レイヤーの定義
var largeScalePoints = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'largeScalePoints.json',
format: new ol.format.GeoJSON()
}),
style: styleFunction,
//表示する解像度(縮尺)
minResolution: 20,
maxResolution: 1000
});
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
//マップのレイヤー
new ol.layer.Tile({
source: new ol.source.OSM
}),
//ポイント(細分区域)
smallScalePoints,
//ポイント(市町村等)
largeScalePoints
],
view: new ol.View({
//中心座標(仮指定)
center: ol.proj.transform([134.15, 35.27], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
//広域ポイント(細分区分)から最適なズームレベルと中心座標を設定
var source = smallScalePoints.getSource();
var onChangeKey = source.on('change', function() {
if (source.getState() == 'ready') {
ol.Observable.unByKey(onChangeKey);
map.getView().fit(source.getExtent(), {
size: map.getSize(),
padding: [10, 10, 10, 10],
maxZoom: 8
});
}
});