OpenLayers 2 WMTS KVP/REST PDOK/Openbasiskaart

by matthijsln

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>OpenLayers 2 WMTS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    </head>
    <body onload="init()">
        <div id="map"></div>
        <script src="https://openlayers.org/api/OpenLayers.js"></script>
    </body>
</html>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

.olImageLoadError {
  opacity: 0 !important;
  filter: alpha(opacity=0) !important;
}

JavaScript

function init() {
  const map = new OpenLayers.Map('map');

  const maxExtent = new OpenLayers.Bounds(-285401.920, 22598.080, 595401.920, 903401.920);
  const projection = new OpenLayers.Projection("EPSG:28992");
  const 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, 0.21];
  const attribution = "&copy; OpenStreetMap contributors";

  const openbasiskaart_wmts_kvp_layer = new OpenLayers.Layer.WMTS({
    name: "Openbasiskaart (WMTS/KVP)",
    url: "http://www.openbasiskaart.nl/mapcache/wmts/",
    layer: "osm",
    matrixSet: "rd",
    format: "image/png",
    style: "default",
    serverResolutions,
    units: "m",
    maxExtent,
    projection,
    attribution,
  });
  const openbasiskaart_wmts_rest_layer = new OpenLayers.Layer.WMTS({
    name: "Openbasiskaart (WMTS/REST)",
    url: "https://www.openbasiskaart.nl/mapcache/wmts/1.0.0/osm/default/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
    requestEncoding: 'REST',
    layer: 'osm',
    matrixSet: 'rd',
    format: 'image/png',
    style: 'default',
    serverResolutions,
    units: "m",
    maxExtent,
    projection,
    attribution,
  });

  const brtachtergrondkaart_wmts_kvp_layer = new OpenLayers.Layer.WMTS({
    name: "PDOK BRT achtergrondkaart (WMTS/KVP)",
    url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts",
    matrixSet: "EPSG:28992",
    layer: "brtachtergrondkaart",
    format: "image/png",
    style: "default",
    serverResolutions,
    units: "m",
    maxExtent,
    projection,
    attribution: "&copy; PDOK",
  });

  const hwh_luchtfoto_wmts_rest_layer = new OpenLayers.Layer.WMTS({
    name: "PDOK luchtfoto (WMTS/REST)",
    url: "https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_ortho25/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.jpeg",
    requestEncoding: 'REST',
    layer: 'osm',
    matrixSet: 'EPSG:28992',
    format: 'image/png',
    style: 'default',
    serverResolutions,
...