Last active
October 18, 2021 09:49
-
-
Save emacgillavry/20bc989eb0145be902e8d5b2c303568b to your computer and use it in GitHub Desktop.
Luchtfoto (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>Luchtfoto (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 luchtfoto: | |
| var matrixIds = new Array(15); | |
| for (var z = 0; z < 15; ++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://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/2020_ortho25/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.jpeg', | |
| layer: '2020_ortho25', | |
| matrixSet: 'EPSG:28992', | |
| format: 'image/jpeg', | |
| projection: projection, | |
| requestEncoding: "REST", | |
| 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
Using XYZ-template for REST interface of WMTS