如何将 WMTS 图层添加到 Openlayers 地图

Question

我试图在 openlayers 地图上显示 WMTS 图层，但是当我将“EPSG:3857”更改为“EPSG:5514”时，地图不起作用。我正在使用来自 OpenLayers 示例的 WMTS，我想展示 MapServer (GeomorfologickeJednotky)。

这是我的 Codepen https://codepen.io/Seuss/pen/OGqxoO

(window.webpackJsonp = window.webpackJsonp || []).push([
  [155], {
    380: function(e, r, t) {
      "use strict";
      t.r(r);
      for (var a = t(3), i = t(2), s = t(1), n = t(6), o = t(5), c = t(12), p = t(102), w = t(147), g = Object(o.g)("EPSG:3857"), l = g.getExtent(), u = Object(s.E)(l) / 256, m = new Array(14), y = new Array(14), S = 0; S < 14; ++S) m[S] = u / Math.pow(2, S), y[S] = S;
      new a.a({
        layers: [new n.a({
          source: new c.b,
          opacity: .7
        }), new n.a({
          opacity: .7,
          source: new p.a({
            attributions: 'Tiles © <a href="https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer">ArcGIS</a>',
            url: "http://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer/WMTS/",
            layer: "0",
            matrixSet: "EPSG:3857",
            format: "image/png",
            projection: g,
            tileGrid: new w.b({
              origin: Object(s.C)(l),
              resolutions: m,
              matrixIds: y
            }),
            style: "default",
            wrapX: !0
          })
        })],
        target: "map",
        view: new i.a({
          center: [1678982, 5913697],
          zoom: 6
        })
      })
    }
  },
  [
    [380, 0]
  ]
]);
//# sourceMappingURL=wmts.js.map

Answer 1

EPSG:5514 WMTS 将使用非标准平铺网格，因此您不能简单地更改投影。缩小的代码也很难理解，您应该避免使用它来进行更改。设置 WMTS 的最简单方法是解析功能。 EPSG:5514 似乎是该服务支持的唯一投影，必须为 proj4 定义和注册。如果视图处于不同的投影中，WMTS 将由客户端重新投影。

proj4.defs("EPSG:5514","+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=589,76,480,0,0,0,0 +units=m +no_defs");
ol.proj.proj4.register(proj4);
  var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer/WMTS';

var parser = new ol.format.WMTSCapabilities();

fetch(url).then(function(response) {
  return response.text();
}).then(function(text) {
  var result = parser.read(text);
  var options = ol.source.WMTS.optionsFromCapabilities(result, {
    layer: 'GeomorfologickeJednotky'
  });

  var layers = [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
      source: new ol.source.WMTS(options),
      opacity: 0.5
    })
  ];

  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([15, 50]),
      zoom: 7
    })
  });

});

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>

最好使用同一服务器中的 ArcGIS 服务，默认情况下服务 EPSG:3857

  var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer';

  var layers = [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
      source: new ol.source.TileArcGISRest({
        url: url
      }),
      opacity: 0.5
    })
  ];

  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([15, 50]),
      zoom: 7
    })
  });

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

但如果需要，也可以提供 EPSG:5514

proj4.defs("EPSG:5514","+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=589,76,480,0,0,0,0 +units=m +no_defs");
ol.proj.proj4.register(proj4);

  var url = 'https://ags.cuzk.cz/arcgis/rest/services/GeomorfologickeJednotky/MapServer';

  var layers = [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Tile({
      source: new ol.source.TileArcGISRest({
        url: url,
        projection: "EPSG:5514"
      }),
      opacity: 0.5
    })
  ];

  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      projection: "EPSG:5514",
      center: ol.proj.fromLonLat([15, 50], "EPSG:5514"),
      zoom: 7
    })
  });

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>