WMTS tiles ontsluiten vanuit Openlayers 2.10

Datasets
1

Voor een bestaand systeem wil ik gebruik maken van de WMTS tiles (brtachtergrondkaart). Hierbij ben ik gebonden aan Openlayers 2.10 en het is geen optie om naar een recentere versie te gaan (ook al zou ik dat heel graag willen). Het systeem maakt ook gebruik van het RD coördinaatstelsel (EPSG:28992).
In een kleine POC kan ik wel een kaart tevoorschijn toveren, echter, de coordinaten lijken niet te kloppen.
Nadat de pagina geladen is, wordt de kaart getoond ergens in het midden van ons land, maar de coordinaten zouden Rotterdam moeten laten zien…
Met Openlayers 4, vanuit een voorbeeld dat hier op het forum is gepost, werkt het wel zoals verwacht.

Misschien zie ik iets over het hoofd of … begrijp ik er helemaal niets van :wink: ?

Ik ben me ervan bewust dat in de “map” een andere projection staat. Echter, als ik deze vervang door “EPSG:28992” treedt er een fout op. Ik kan me iets herinneren over een custom projection maken… Maar ik ben toch niet de eerste die dit wil doen?

De gebruikte code:

                var map;

        function init() {

            map = new OpenLayers.Map({
                div: 'map',
                projection: 'EPSG:900913'
            });

            var osm = new OpenLayers.Layer.OSM();

            var matrixIds = new Array(15);
            for (var i = 0; i < matrixIds.length; ++i) {
                matrixIds[i] = "EPSG:28992:" + i;
            }

            var wmts = new OpenLayers.Layer.WMTS({
                name: 'PDOK WMTS OL2',
                url: 'http://geodata.nationaalgeoregister.nl/tiles/service/wmts?',
                layer: 'brtachtergrondkaart',
                matrixSet: 'EPSG:28992',
                matrixIds: matrixIds,
                format: 'image/png',
                style: '_null',
                isBaseLayer: true
            });

            map.addLayers([wmts, osm]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.setCenter(new OpenLayers.LonLat(91836, 440066), 10);
        }
2

Dit werkt bij mij:

var map

function initMap(){
  var resolutions = [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, 0.0525]
  var serverresolutions = [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 restrictedExtent = new OpenLayers.Bounds(-50000,200000,400000,700000);
  var maxExtent = new OpenLayers.Bounds(-285401.92, 22598.08, 595401.92, 903401.92);
  var topLeft = OpenLayers.LonLat(-285401.92, 903401.92)

  //map object
  options = {'projection': 'EPSG:28992',
    'displayProjection': new OpenLayers.Projection("EPSG:4326"),
    'resolutions': resolutions,
    'units': 'm',
    'restrictedExtent' : restrictedExtent,
    'maxExtent': maxExtent,
    'controls':[new OpenLayers.Control.Navigation(), new OpenLayers.Control.Attribution()]
  }
  map = new OpenLayers.Map('map', options);
  //PDOK Luchtfoto
  var luchtfotoActueel = new OpenLayers.Layer.WMTS({
    name: 'LuchtfotoActueel', 
    url: 'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/',
    layer: 'Actueel_ortho25',
    matrixSet: 'EPSG:28992',
    resolutions: resolutions,
    style: 'default',
    projection: 'EPSG:28992',
    format: 'image/jpeg',
    maxExtent: maxExtent,
    tileOrigin: topLeft,
    serverResolutions : serverresolutions,
    formatSuffix: 'jpg',
    attribution: "pdok"
  });	
  
  //add baselayer
  map.addLayers([luchtfotoActueel]);

}
3

@anneb, ik merk dat in de code de oude luchtfoto URL (‘https://geodata.nationaalgeoregister.nl/luchtfoto/rgb/wmts/’) nog gebruikt wordt. Deze vervalt per 1 juni 2021. Advies is om z.s.m. gebruik te maken van de nieuwe URL.
Zie het bericht hierover via de link Nieuwe URL’s voor de PDOK luchtfoto - PDOK

2 likes
4

Bedankt voor de tip! Ik heb de URL in bovenstaande code aangepast (en ook in mijn project).