WMTS in 28992 met leaflet kaartje

Toepassingen KaartApi
#1

Goedemorgen kaartfanaten,

Nu ‘we’ binnenkort TMS gaan uitfaseren ben ik al mijn kaartmateriaal richting WMTS aan het verhuizen. Daarbij loop ik tegen de ietwat tekortkomingen van Leaflet aan. Ik poog met behulp van Proj4Leaflet en leaflet-tilelayer-wmts een wmts van pdok als achtergrondkaart in te laden op onze 28992 projectie.

Momenteel krijg ik voor elke tile die ik wil inladen een prachtige
ows:ExceptionTextThe requested tile is outside the bounding box of the tile map.</ows:ExceptionText>

Ik doe dus iets grandioos verkeerd.
Zou iemand mij willen wijzen op mijn fout of heeft er iemand een wel werkend voorbeeld dat ik zou kunnen gebruiken als hulp?

Bij voorbaat dank!

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/proj4@2.5.0/dist/proj4-src.js"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.1"></script>
<script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 500px; border: 3px solid darkorange;" ></div>
<script>
var RD = new L.Proj.CRS(
    'EPSG:28992',
'+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs', {
origin: [-285401.92, 22598.08],
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, 0.105],
bounds: L.bounds([-285401.92, 22598.08], [595401.920, 903401.920])
});
url = 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts?'
brtWMTS = new L.TileLayer.WMTS( url ,
                           {
                               layer: 'brtachtergrondkaart',
                               style: "default",
                               tilematrixSet: "EPSG:28992",
                               format: "image/png",
                               attribution: 'Map data: <a href="http://www.pdok.nl">BRT Achtergrondkaart</a>'
                           }
                          );

var map = new L.Map('map', {
crs: RD, // hier de Rijksdriehoek definitie
layers: [brtWMTS]
});

var center = L.point(91255.22, 438455.20);
map.setView(RD.projection.unproject(center), 10);
</script>
</body>
</html>
#2

Had je dit topic al gevonden? PDOK gaat TMS uitfaseren - #9 door wouter.visscher - Datasets - Geoforum

3 likes
#3

Wouter, bedankt voor je (snelle) antwoord.
De oplossing van Anton maakt gebruik van de {z}/{x}/{y} structuur. Ik had de hoop het met de ‘reguliere’ wmts structuur op te lossen omdat niet elke wmts (bij mijn weten?) die zxy structuur heeft.

#4

Als je de WMTS KVP wilt gebruiken met leaflet zou ik het persoonlijk zo oplossen:

  1. die lib: <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> skippen. Zitten zo ie zo fouten in m.b.t. de opbouw van de TileMatrixSet & TileMatrix (werkt alleen tegen Geoserver en GeoWebCache)
  2. de origin & bounds pakken uit het voorbeeld van @antonbakker
  3. de url ‘template’ aanpassen naar een KVP HTTP call. Dit is volgens mij ook hoe het zou ‘moeten’ werken.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/proj4@2.5.0/dist/proj4-src.js"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.1"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 500px; border: 3px solid darkorange;" ></div>
<script>
var RD = new L.Proj.CRS(
    'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs', {    
origin: [-285401.920, 903401.920],
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, 0.105],
bounds: L.bounds([-285401.920, 903401.920], [595401.920, 22598.080])
});
url = 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts?&service=WMTS&request=GetTile&version=1.0.0&layer=brtachtergrondkaart&style=default&tilematrixset=EPSG%3A28992&format=image%2Fpng&height=256&width=256&tilematrix={z}&tilecol={x}&tilerow={y}'
brtWMTS = new L.TileLayer( url ,
                           {
                               layer: 'brtachtergrondkaart',
                               style: "default",
                               format: "image/png",
                               attribution: 'Map data: <a href="http://www.pdok.nl">BRT Achtergrondkaart</a>'
                           }
                          );

var map = new L.Map('map', {
crs: RD, // hier de Rijksdriehoek definitie
layers: [brtWMTS]
});

var center = L.point(160000.0, 480803.840);
map.setView(RD.projection.unproject(center), 3);
</script>
</body>
</html>

image
image890×547 215 KB

1 like
#5

Let op: De hier gebruikte RD-definitie is een benadering met een fout van 0,6 tot 1,0 meter t.o.v. WGS84 (en een fout tot 0,25 m als je de WGS84-coördinaten interpreteert als ETRS89-coördinaten). Bij het hoogste hier vermelde zoomniveau {z}=15 scheelt dat 6-10 pixels (en dit wordt iedere 4 jaar een pixel meer).

#6

@wouter.visscher, bedankt voor de hulp!
@Jochem bedankt voor de tip!