WMTS call in Angular 9 lukt niet

Datasets Luchtfoto's
#1

Kan iemand mij helpen bij het ophalen van de lucht foto WMTS tile in Openlayers?
Hieronder mijn code:

ngAfterViewInit(): void {
    this.projection = getProjection('EPSG:3857');
    this.projectionExtent = this.projection.getExtent();
    this.size = getWidth(this.projectionExtent) / 256;
    for (let z = 0; z < 14; ++z) {
      this.resolutions[z] = this.size / Math.pow(2, z);
      this.matrixIds[z] = z;
    }

    this.initMap();

  }

  private initMap(): void{
    this.Map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new OSM(
          )
        }),
        new Tile({
          visible: true,
          className : 'Luchtfoto',
            source: new WMTS({
              attributions: '',
              crossOrigin: null,
              url: 'https://service.pdok.nl/hwh/luchtfotocir/wmts/v1_0?&request=GetCapabilities&service=wmts',
              layer: 'luchtfoto',
              matrixSet: 'EPSG:3857',
              format: 'image/png',
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(this.projectionExtent),
                resolutions: this.resolutions,
                matrixIds: this.matrixIds,
              }),

              style: 'default',
              wrapX: true,
              }),
        }),

      ],
      view: new View({
        center: [510406.33, 6790500.21],
        zoom: 9
      })
    });
  }
#2

Misschien kun je iets meer vertellen over wat er niet werkt, welke fouten je krijgt en wat je zelf al hebt geprobeerd?

1 like
#3

Mee eens, ook versie-info handig.
Wat direct opvalt is gebruik class Tile, i.p.v. TileLayer voor OSM en WMTS lagen.

1 like
#4

@kelvin ik heb een een voorbeeld openlayers applicatie met een WMTS laag, zie de code en de live demo. Het voorbeeld is in EPSG:28992, maar zou eenvoudig aan te passen moeten zijn voor EPSG:3857.

1 like
#5

@kelvin Vanochtend hebben we hier vastgesteld dat een web viewer met de https://service.pdok.nl/hwh/luchtfotocir/wmts/v1_0?&request=GetCapabilities&service=wmts service niet gaat werken (vooralsnog), want de service geeft geen CORS headers mee. Er wordt aan gewerkt om de CORS headers toe te voegen, als het zo ver is dan laat ik het weten.

1 like
#6

De CORS header is inmiddels toegevoegd.

2 likes
#7

Bedankt voor alle info en voorbeelden. Het is mij inmiddels gelukt om in een angular 10 applicatie in openlayers de WMTS tile op te halen . Hieronder de code :

new Tile({
  className : ‘Luchtfoto’,
  source: new WMTS({
    attributions: ‘’,
    crossOrigin: null,
    url: ‘https://service.pdok.nl/hwh/luchtfotocir/wmts/v1_0’,
    layer: ‘2017_ortho25IR’,
    matrixSet: ‘EPSG:3857’,
    format: ‘image/png’,
    tileGrid: new WMTSTileGrid({
      origin: [-20037508, 20037508],
      resolutions: this.resolutions,
      matrixIds: this.matrixIds,
    }),
    style: ‘normal’,
    wrapX: true,
  }),
});
2 likes