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
| import GeoJSON from 'ol/format/GeoJSON.js';
import Layer from 'ol/layer/Layer.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import WebGLVectorLayerRenderer from 'ol/renderer/webgl/VectorLayer.js';
import {Draw, Modify, Snap} from 'ol/interaction.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';
const style = {
variables: {
width: 12,
offset: 0,
capType: 'butt',
joinType: 'miter',
miterLimit: 10,
dashLength1: 25,
dashLength2: 15,
dashLength3: 15,
dashLength4: 15,
dashOffset: 0,
},
'stroke-width': ['var', 'width'],
'stroke-color': 'rgba(24,86,34,0.7)',
'stroke-line-dash': [
['var', 'dashLength1'],
['var', 'dashLength2'],
['var', 'dashLength3'],
['var', 'dashLength4'],
],
'stroke-line-dash-offset': ['var', 'dashOffset'],
'stroke-offset': ['var', 'offset'],
'stroke-line-cap': ['var', 'capType'],
'stroke-line-join': ['var', 'joinType'],
'stroke-miter-limit': ['var', 'miterLimit'],
};
class WebGLLayer extends Layer {
createRenderer() {
return new WebGLVectorLayerRenderer(this, {
className: this.getClassName(),
style,
});
}
}
const osm = new TileLayer({
source: new OSM(),
});
const source = new VectorSource({
url: 'data/geojson/switzerland.geojson',
format: new GeoJSON(),
});
const vector = new WebGLLayer({
source: source,
});
const map = new Map({
layers: [osm, vector],
target: 'map',
view: new View({
center: fromLonLat([8.43, 46.82]),
zoom: 7,
}),
});
const modify = new Modify({source: source});
map.addInteraction(modify);
let draw, snap;
function addInteractions() {
draw = new Draw({
source: source,
type: 'LineString',
});
map.addInteraction(draw);
snap = new Snap({source: source});
map.addInteraction(snap);
}
addInteractions();
const inputListener = (event) => {
const variables = style.variables;
const variableName = event.target.name;
if (event.target.type === 'radio') {
variables[variableName] = event.target.value;
} else {
variables[variableName] = parseFloat(event.target.value);
}
const valueSpan = document.getElementById(`value-${variableName}`);
if (valueSpan) {
valueSpan.textContent = variables[variableName];
}
map.render();
};
document
.querySelectorAll('input.uniform')
.forEach((input) => input.addEventListener('input', inputListener));
|
)
