Skip to content

Instantly share code, notes, and snippets.

@RaymondKroon

RaymondKroon/gist:60f74ae45b2b67b79c45

Created November 6, 2014 17:03
Show Gist options
  • Save RaymondKroon/60f74ae45b2b67b79c45 to your computer and use it in GitHub Desktop.
Save RaymondKroon/60f74ae45b2b67b79c45 to your computer and use it in GitHub Desktop.
Download ZIP
Openlayers 3 WMTS voorbeeld
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>PDOK Download App</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js" type="text/javascript"></script>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
<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 +units=m +no_defs";
var projection = new ol.proj.Projection('EPSG:28992');
var projectionExtent = [-285401.92,22598.08,595401.9199999999,903401.9199999999];
var size = ol.extent.getWidth(projectionExtent) / 256;
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]
var matrixIds = new Array(14);
for (var z = 0; z < 15; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
matrixIds[z] = 'EPSG:28992:' + z;
}
console.log(resolutions);
console.log(matrixIds);
var EPSG28992 = new ol.proj.Projection('EPSG:28992');
var layers = [
new ol.layer.Tile({
extent: projectionExtent,
source: new ol.source.WMTS({
//http://geodata.nationaalgeoregister.nl/tiles/service/wmts/aan?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=aan&STYLE=_null&TILEMATRIXSET=EPSG%3A28992&TILEMATRIX=EPSG%3A28992%3A8&TILEROW=129&TILECOL=127&FORMAT=image%2Fpng
//http://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart?Layer=brtachtergrondkaart&style=default&Style=default&TileMatrixSet=EPSG%3A28992&Service=WMTS&Request=GetTile&Version=1.0.0&Format=png8&TileMatrix=0&TileCol=0&TileRow=0
//http://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart?SERVICE=WMTS&Request=GetTile&VERSION=1.0.0&LAYER=brtachtergrondkaart&STYLE=default&TILEMATRIXSET=EPSG%3A28992&TILEMATRIX=EPSG%3A28992%3A8&TILEROW=0&TILECOL=0&FORMAT=image%2Fpng8
//http://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart?Layer=brtachtergrondkaart&style=default&Style=default&TileMatrixSet=EPSG%3A28992&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A28992%3A2&TileCol=2&TileRow=4
url: 'http://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaart',
layer: 'brtachtergrondkaart',
matrixSet: 'EPSG:28992',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
})
];
var map = new ol.Map({
maxExtent: projectionExtent,
layers: layers,
target: 'map',
theme: null,
maxResolution: 860.16,
numZoomLevels: 12,
units: 'm',
displayProjection: EPSG28992,
view: new ol.View({
center: ol.extent.getCenter(projectionExtent),
zoom: 8
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment