Last active
February 27, 2018 19:48
-
-
Save emacgillavry/9ceac5a3d1de1e4a105475625094241e to your computer and use it in GitHub Desktop.
BRT-Achtergrondkaart (RD) in OpenLayers 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="nl"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>BRT-Achtergrondkaart (WMTS) in OpenLayers</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width"> | |
| <meta name="author" content="Edward Mac Gillavry"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> | |
| </head> | |
| <body> | |
| <div id="map-canvas" class="map"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body, #map-canvas { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| #map-canvas { | |
| width: 100%; | |
| background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Geldigheidsgebied van het tiling schema in RD-coördinaten: | |
| var projectionExtent = [-285401.92, 22598.08, 595401.9199999999, 903401.9199999999]; | |
| var projection = new ol.proj.Projection({ code: 'EPSG:28992', units: 'm', extent: projectionExtent }); | |
| // Resoluties (pixels per meter) van de zoomniveaus: | |
| var resolutions = [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210]; | |
| var size = ol.extent.getWidth(projectionExtent) / 256; | |
| // Er zijn 15 (0 tot 14) zoomniveaus beschikbaar van de WMTS-service voor de BRT-Achtergrondkaart: | |
| var matrixIds = new Array(15); | |
| for (var z = 0; z < 15; ++z) { | |
| matrixIds[z] = 'EPSG:28992:' + z; | |
| } | |
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| opacity: 0.7, | |
| source: new ol.source.WMTS({ | |
| attributions: 'Kaartgegevens: © <a href="https://www.kadaster.nl">Kadaster</a>', | |
| url: 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts?', | |
| layer: 'brtachtergrondkaart', | |
| matrixSet: 'EPSG:28992', | |
| format: 'image/png', | |
| projection: projection, | |
| tileGrid: new ol.tilegrid.WMTS({ | |
| origin: ol.extent.getTopLeft(projectionExtent), | |
| resolutions: resolutions, | |
| matrixIds: matrixIds | |
| }), | |
| style: 'default', | |
| wrapX: false | |
| }) | |
| }) | |
| ], | |
| target: 'map-canvas', | |
| controls: ol.control.defaults({ | |
| attributionOptions: { | |
| collapsible: false | |
| } | |
| }), | |
| view: new ol.View({ | |
| minZoom: 0, | |
| maxZoom: 15, | |
| projection: projection, | |
| center: [150000, 450000], | |
| zoom: 3 | |
| }) | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment