Как добавить WMTS Layer на карту Openlayers

Question

Я пытаюсь показать слой WMTS на карте openlayers, но когда я изменяю «EPSG: 3857» на «EPSG: 5514», карта не работает. Я использую WMTS из примеров OpenLayers и хочу показать 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>