-
Notifications
You must be signed in to change notification settings - Fork 0
/
extendedstyle.html
71 lines (66 loc) · 2.44 KB
/
extendedstyle.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
<!doctype html>
<meta charset="UTF-8">
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="js/proj4.js"></script>
<script src="js/ol.js"></script>
<script src="js/mapbox-streets-v6-style.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
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 map = new ol.Map({
layers: [
/* new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://doedag.opengeogroep.nl/geoserver/wms',
params: {
'LAYERS': 'doedag:osm_new_admin',
'FORMAT': 'image/png'
},
serverType: 'geoserver'
}),
opacity: 0.5
}),*/
new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: new ol.tilegrid.TileGrid({
extent:extentAr,
resolutions: resolutions,
tileSize: 256
}),
projection:projection,
url: 'https://doedag.opengeogroep.nl/geoserver/gwc/service/tms/1.0.0/doedag:osm_new_admin@nlgrid@pbf/{z}/{x}/{-y}.pbf'
}),
//style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [135752,442876],
resolutions: resolutions,
resolution: 860
})
});
</script>
</body>
</html>