-
Notifications
You must be signed in to change notification settings - Fork 0
/
bag.html
131 lines (110 loc) · 4.88 KB
/
bag.html
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
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Vector Tile Selection</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script type="text/javascript" src="js/ol.js"></script>
<script type="text/javascript" src="js/proj4.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Selectie type </label>
<select id="type" class="form-control">
<option value="singleselect" selected>Single Select</option>
<option value="multiselect">Multi Select</option>
</select>
</form>
<p/>
<textarea id="beschrijving" name="beschrijving" rows="16" cols="80"></textarea>
<script>
// lookup for selection objects
var selection = {};
// feature property to act as identifier
var idProp = 'identificatie';
var imageLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://openbasiskaart.nl/mapcache/?',
params: {
'LAYERS':'osm-nb',
'FORMAT': 'image/png'
},
serverType: 'geoserver'
})
});
proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.237,50.0087,465.658,-0.406857,0.350733,-1.87035,4.0812 +units=m +no_defs ");
ol.proj.proj4.register(proj4);
var projection = ol.proj.get('EPSG:28992');
var resolutions = [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21, 0.105];
var extentAr = [-285401.0, 22598.0, 595401.0, 903401.0];
var maxExtent = [7700, 304000, 280000, 6200000];
projection.setExtent(extentAr);
var vtLayer = new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: new ol.tilegrid.TileGrid({
extent: projection.getExtent(),
resolutions: resolutions,
tileSize: 256
}),
url: 'https://doedag.opengeogroep.nl/geoserver/gwc/service/tms/1.0.0/' +
'doedag:pandactueelbestaand@nlgrid@pbf/{z}/{x}/{-y}.pbf',
}),
style: function (feature) {
var selected = !!selection[feature.get(idProp)];
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: selected ? 2 : 1
}),
fill: new ol.style.Fill({
color: selected ? 'rgba(253,106,2,0.2)' : 'rgba(253,106,2,0.9)'
})
});
}
});
var map = new ol.Map({
layers: [
imageLayer,vtLayer
],
target: 'map',
view: new ol.View({
center: [135629, 454682],
//zoom:2,
resolution: 3.36,
resolutions: resolutions,
projection: projection
})
});
var selectElement = document.getElementById('type');
map.on('click', function (event) {
var features = map.getFeaturesAtPixel(event.pixel);
if (!features) {
selection = {};
// force redraw of layer style
vtLayer.setStyle(vtLayer.getStyle());
return;
}
var feature = features[0];
var fid = feature.get(idProp);
if (selectElement.value === 'singleselect') {
selection = {};
}
// add selected feature to lookup
selection[fid] = feature;
// force redraw of layer style
vtLayer.setStyle(vtLayer.getStyle());
var props = feature.getProperties();
var s = '';
for (var key in props) {
if (props.hasOwnProperty(key)) {
s+= key + ': ' + props[key] + '\n';
}
}
document.getElementById('beschrijving').value = s;
});
</script>
</body>
</html>