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
| import Draw from 'ol/interaction/Draw.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
const raster = new TileLayer({
source: new OSM(),
});
const source = new VectorSource({wrapX: false});
const vector = new VectorLayer({
source: source,
});
const map = new Map({
layers: [raster, vector],
target: 'map',
view: new View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
const styles = {
Point: {
'circle-radius': 5,
'circle-fill-color': 'red',
},
LineString: {
'circle-radius': 5,
'circle-fill-color': 'red',
'stroke-color': 'yellow',
'stroke-width': 2,
},
Polygon: {
'circle-radius': 5,
'circle-fill-color': 'red',
'stroke-color': 'yellow',
'stroke-width': 2,
'fill-color': 'blue',
},
Circle: {
'circle-radius': 5,
'circle-fill-color': 'red',
'stroke-color': 'blue',
'stroke-width': 2,
'fill-color': 'yellow',
},
};
const typeSelect = document.getElementById('type');
let draw;
function addInteraction() {
const value = typeSelect.value;
if (value !== 'None') {
draw = new Draw({
source: source,
type: typeSelect.value,
style: styles[value],
});
map.addInteraction(draw);
}
}
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
|
)
