Created
March 8, 2018 11:36
-
-
Save emacgillavry/3dee6bccdaed3421595bffacb8e3d845 to your computer and use it in GitHub Desktop.
BRT-Achtergrondkaart (Web Mercator) 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 (Web Mercator) 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
| var projection = ol.proj.get('EPSG:3857'); | |
| var projectionExtent = projection.getExtent(); | |
| var size = ol.extent.getWidth(projectionExtent) / 256; | |
| var resolutions = new Array(20); | |
| var matrixIds = new Array(20); | |
| for (var z = 0; z < 20; ++z) { | |
| resolutions[z] = size / Math.pow(2, z); | |
| matrixIds[z] = ("0" + z).slice(-2); | |
| } | |
| 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:3857', | |
| 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: 6, | |
| maxZoom: 20, | |
| projection: projection, | |
| // These coordinates (meters) are in Web Mercator too! | |
| center: [631711.827985, 6856275.890632], | |
| zoom: 8 | |
| }) | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment