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
| import KML from 'ol/format/KML.js';
import Map from 'ol/Map.js';
import Stamen from 'ol/source/Stamen.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
const styleCache = {};
const styleFunction = function (feature) {
const name = feature.get('name');
const magnitude = parseFloat(name.substr(2));
const radius = 5 + 20 * (magnitude - 5);
let style = styleCache[radius];
if (!style) {
style = new Style({
image: new CircleStyle({
radius: radius,
fill: new Fill({
color: 'rgba(255, 153, 0, 0.4)',
}),
stroke: new Stroke({
color: 'rgba(255, 204, 0, 0.2)',
width: 1,
}),
}),
});
styleCache[radius] = style;
}
return style;
};
const vector = new VectorLayer({
source: new VectorSource({
url: 'data/kml/2012_Earthquakes_Mag5.kml',
format: new KML({
extractStyles: false,
}),
}),
style: styleFunction,
});
const raster = new TileLayer({
source: new Stamen({
layer: 'toner',
}),
});
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const info = document.getElementById('info');
info.style.pointerEvents = 'none';
const tooltip = new bootstrap.Tooltip(info, {
animation: false,
customClass: 'pe-none',
offset: [0, 5],
title: '-',
trigger: 'manual',
});
let currentFeature;
const displayFeatureInfo = function (pixel, target) {
const feature = target.closest('.ol-control')
? undefined
: map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
info.style.left = pixel[0] + 'px';
info.style.top = pixel[1] + 'px';
if (feature !== currentFeature) {
tooltip.setContent({'.tooltip-inner': feature.get('name')});
}
if (currentFeature) {
tooltip.update();
} else {
tooltip.show();
}
} else {
tooltip.hide();
}
currentFeature = feature;
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
tooltip.hide();
currentFeature = undefined;
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel, evt.originalEvent.target);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel, evt.originalEvent.target);
});
map.getTargetElement().addEventListener('pointerleave', function () {
tooltip.hide();
currentFeature = undefined;
});
|
)
