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
| import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileJSON from 'ol/source/TileJSON.js';
import View from 'ol/View.js';
import {Group as LayerGroup, Tile as TileLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';
const key =
'Your Mapbox access token from https://mapbox.com/ here';
const map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
new LayerGroup({
layers: [
new TileLayer({
source: new TileJSON({
url:
'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
}),
new TileLayer({
source: new TileJSON({
url:
'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
}),
],
}),
],
target: 'map',
view: new View({
center: fromLonLat([37.4057, 8.81566]),
zoom: 4,
}),
});
function bindInputs(layerid, layer) {
const visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
const opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
function setup(id, group) {
group.getLayers().forEach(function (layer, i) {
const layerid = id + i;
bindInputs(layerid, layer);
if (layer instanceof LayerGroup) {
setup(layerid, layer);
}
});
}
setup('#layer', map.getLayerGroup());
$('#layertree li > span')
.click(function () {
$(this).siblings('fieldset').toggle();
})
.siblings('fieldset')
.hide();
|
)
