Openlayers - 移动地图答案

【问题标题】：Openlayers - shifted mapOpenlayers - 移动地图
【发布时间】：2019-10-28 10:18:43
【问题描述】：

我在这篇文章How to fix EPSG:4326 with WMTS incorrect map overlay 中获得了类似示例的数据，它甚至具有我需要的相同来源。但是，地图发生了变化。

private createLayer() {
this.service
  .getTypesLayersFilter()
  .subscribe((resp: TypesLayersFilters) => {
    const filter = first(resp.WMTS);
    const parser = new WMTSCapabilities();
    const layer = 'ORTOFOTOMAPA';
    const matrixSet = 'EPSG:4326';

    this.wmtsService.getData().subscribe(text => {
      const result = parser.read(text);
      const options = optionsFromCapabilities(result, {
        layer,
        matrixSet,
        crossOrigin: true
      });

      const layerNew = new TileLayer({
        source: new WMTS(options),
        opacity: 0.7,
        name: 'WMTS',
      });

    });
  });
}

来源： https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities

getData() {
const url =
  'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO';
const data = {
  SERVICE: 'WMTS',
  REQUEST: 'GetCapabilities'
};
const options: any = { params: data, responseType: 'text' };

return this.http.get(url, {
  ...options,
  params: this.toHttpParams(options.params)
});
}

map screenshot

什么会导致这种转变，我做错了什么吗？也许解决方案是移动地图，如果可能的话，应该这样做？

【问题讨论】：

标签： openlayers openlayers-5

【解决方案1】：

我在示例中添加了一些不透明度，并且可以看到 GetCapabilities 定义的 tilegrid 没有准确定位在 EPSG:4326 中。该服务还支持 EPSG:2180，这似乎更适合。使用该投影需要 proj4，并且您需要在投影定义中包含 +axis=neu，因为服务使用北东坐标顺序。

proj4.defs('EPSG:2180', '+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +axis=neu +no_defs ');

ol.proj.proj4.register(proj4);

var parser = new ol.format.WMTSCapabilities();
var url = 'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities';

fetch(url).then(function(response) {
  return response.text();
}).then(function(text) {
  var result = parser.read(text);
  var options = ol.source.WMTS.optionsFromCapabilities(result, {
    layer: 'ORTOFOTOMAPA',
    matrixSet: 'EPSG:2180',
    crossOrigin: true,
  });
  //console.log(options);

  this.map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Tile({
        source: new ol.source.WMTS(options),
        opacity: 0.5
      })
    ],
    target: "map",
    view: new ol.View({
      center: ol.proj.fromLonLat([19.4569911, 51.7687323]),
      zoom: 4
    })
  });

});

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<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>

【讨论】：