CODEWITHSUNDEEP
javascripthtmlcssopenlayers-3
MisterFab1an
MisterFab1an

Reputation: 3

wmts as basemap in openlayers 3 (basemap.at)

I want to use a wmts map service in open layers.

The wmts layer should be the base layer and it should only display the wmts layer, nothing else!

The problem here with open layers is that I can only see the osm-layer and not the wmts layer at all.

Or should I use the getCapabilities?

Wmts-Service

It should look like this

<!DOCTYPE html>
<html>
  <head>
    <title>openlayers3</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var projection = ol.proj.get('EPSG:3857');
      var projectionExtent = projection.getExtent();
      var size = ol.extent.getWidth(projectionExtent) / 256;
      var resolutions = new Array(14);
      var matrixIds = new Array(14);
      for (var z = 0; z < 14; ++z) {
        // generate resolutions and matrixIds arrays for this WMTS
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
      }

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
            opacity: 0.7
          }),
          new ol.layer.Tile({
            source: new ol.source.WMTS({
              attributions: '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>',
              url: "https://maps.wien.gv.at/basemap/geolandbasemap/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
              layer: "geolandbasemap",
              matrixSet: 'google3857',
              format: 'image/png',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              encoding: "REST",
              style: 'normal',
              wrapX: true,
              visibile: true
            })
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
          collapsible: false
          })
        }),
        view: new ol.View({
          center: [1799448, 6124949],
          zoom: 4
        })
      });    </script>
  </body>
</html>

Upvotes: 0

Views: 965

Answers (2)

Ahmad Mokarian
Ahmad Mokarian

Reputation: 1

you can use this code:

var projection = ol.proj.get('EPSG:3857');
    var tileSizePixels = 256;
    var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
    var matrixIds = [];
    var resolutions = [];
    for (var i = 0; i <= 20; i++) {
        matrixIds[i] = i;
        resolutions[i] = tileSizeMtrs / Math.pow(2, i);
    }

var tileGrid = new ol.tilegrid.WMTS({
        origin: ol.extent.getTopLeft(projection.getExtent()),
        resolutions: resolutions,
        matrixIds: matrixIds
    });

var wmtsSource = new ol.source.WMTS({
        url: 'WMTS url',
        layer: 'LayerName',
        format: 'image/png',
        matrixSet: 'EPSG:3857',
        tileGrid: tileGrid,
        style: 'default',
        dimensions: {
            'threshold': 100
        }
    });

Upvotes: 0

ahocevar
ahocevar

Reputation: 5647

You can either create the basemap.at layers from the WMTS capabilities as shown in the official example, or you choose a more pragmatic approach and use ol.source.XYZ:

  new ol.layer.Tile({
    // extent taken from the Capabilities XML
    extent: ol.proj.transformExtent([8.782379, 46.358770, 17.189532, 49.037872], 'EPSG:4326', 'EPSG:3857'),
    source: new ol.source.XYZ({
      maxZoom: 19,
      attributions: [new ol.Attribution({
        html: 'Datenquelle: <a href="http://www.basemap.at">basemap.at</a> &copy; <a href="http://creativecommons.org/licenses/by/3.0/at/">CC BY 3.0 AT</a>'
      })],
      crossOrigin: 'anonymous',
      url: '//maps{1-4}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png'
    })
  })

Upvotes: 1

Related Questions