Question

我得到的数据类似于本帖子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

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

Answer 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>

Openlayers-移位的地图

1 个答案: