wmts 作为 openlayers 3 (basemap.at) 中的底图答案

【问题标题】：wmts as basemap in openlayers 3 (basemap.at)wmts 作为 openlayers 3 (basemap.at) 中的底图
【发布时间】：2016-11-09 00:09:59
【问题描述】：

我想在开放图层中使用 wmts 地图服务。

wmts 层应该是基础层，它应该只显示 wmts 层，没有别的！

开放层的问题是我只能看到 osm-layer 而根本看不到 wmts 层。

或者我应该使用 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>

【问题讨论】：

标签： javascript html css openlayers-3

【解决方案1】：

您可以使用 WMTS 功能创建 basemap.at 图层，如official example 所示，或者选择更实用的方法并使用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'
    })
  })

【讨论】：

【解决方案2】：

您可以使用此代码：

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
        }
    });

【讨论】：