BRT in openlayers 4.6.4 hangen mbv wmts

Datasets BGT
#1

Hallo,

Ik probeer de brtachtergrondkaart kaart in openlayers 4.6.4 in te hangen maar krijg het niet voor elkaar.

Bij het aanmaken van de map geef ik in de layers de volgende op:

layers: [
     new ol.layer.Tile({
            source: new ol.source.WMTS({
            
              url: 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts?REQUEST=GetCapabilities&service=WMTS',
              layer: 'brtachtergrondkaart',
			  crossOrigin: 'omit',
              matrixSet: 'EPSG:28992',
              format: 'image/png8',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              style: '',
			  visible: 'true'
            })
          })
    ],

Voor aantal van die variables heb ik de volgende:

var projection = new ol.proj.Projection({
code: ‘EPSG:28992’,
// The extent is used to determine zoom level 0. Recommended values for a
// projection’s validity extent can be found at https://epsg.io/.
extent: [5.291266, 52.132633, 53.7, 7.22 ],//[485869.5728, 76443.1884, 837076.5648, 299941.7864],
units: ‘m’
});
ol.proj.addProjection(projection);
//var projection = ol.proj.get(“EPSG:28992”);
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(26);
var matrixIds = new Array(26);
for (var z = 0; z < 26; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = ‘EPSG:28992:’ + z;
}

Toch krijg ik het niet voor elkaar om deze brt laag te zien. Weet niet waar ik het fout doe.

#2

Beste @namik,

Naar aanleiding van je vraag heb ik een voorbeeld gemaakt met OpenLayers 4. Er zijn een aantal aspecten waar je rekening mee moet houden die beschreven zijn in de Nederlandse tiling richtlijn:

Kortom: als je dit eenmaal weet, kan je verder. Maar goed, het vergt nogal wat voorkennis.

Gelukkig kan het ook makkelijker als je niet aan het Rijksdriehoekstelsel gebonden bent, namelijk met behulp van NL Maps. Je kiest een kaartlaag en selecteert OpenLayers als JS bibliotheek en je krijgt de code op een presenteerblaadje. Wil je iets meer, dan kan je de code van NL Maps als NPM-packages aan je eigen project toevoegen.

4 likes
#3

Hallo Edward,

Dit heeft mij enorm geholpen. Ik kwam al niet uit met de url welke precies moest zijn.
Daarnaast had ik ook al moeite met de resolutie, de matrixIds en de extent idd.

NU kan ik weer verder.

Heel erg bedankt voor je hulp :wink:

1 like
#4

Succes! Benieuwd naar het resultaat. Is dat binnenkort online te bewonderen?

#5

Thanks.

Dat zal nog een tijdje duren denk ik voordat we ergens online kunnen tonen :wink:

#6

beste @emacgillavry,

Ik heb je voorbeeld gevolgd en het werkt zoals verwacht. Ik ben nu alleen bij het punt aan gekomen dat ik een punt will toevoegen fromLonLat. Ik heb de projection ge-add maar hij wil nog altijd niet de coordinaten transformeren.

var projectionExtent = [-285401.92, 22598.08, 595401.9199999999, 903401.9199999999];
var projection = new ol.proj.Projection({ code: 'EPSG:28992', units: 'm', extent: projectionExtent });
ol.proj.addProjection(projection);

console.log(ol.proj.fromLonLat([5.2, 52.25], 'EPSG:28992'));

Mijn vraag is dan ook is dit de juiste manier? Zo nee, wat doe ik fout?

#7

OpenLayers kent de string ‘EPSG: 28992’ op zichzelf niet. Het is slechts een waarde van de property code van het object projection. Je moet dus het hele object meegeven:

console.log(ol.proj.fromLonLat([5.2, 52.25], projection));

Hopelijk lukt dat wel. Succes ermee!

1 like
#8

Zou je misschien ook zo’n mooi voorbeeld kunnen maken op basis van OpenLayers 2.10?