如何將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>