在错误的位置打开图层 WMTS答案

【问题标题】：Open layers WMTS at wrong location在错误的位置打开图层 WMTS
【发布时间】：2021-03-30 13:57:29
【问题描述】：

我正在尝试使用开放图层在现有的开放街道地图图层上显示 WMTS 图层。 WMTS 图层已加载，但位置错误（而且比例尺也关闭）。

我从官方示例开始，并对其进行了调整以显示新的 WMTS，但我无法正确加载它。我理解它的方式应该有几组不同坐标系的图像，并且 matrixSet 在这些之间切换。在 GetCapabilities xml 中列出了 epsg:4326（如果我不提供它，它根本不会加载），所以它应该是可用的。我原来的 OSM 地图也应该是 epsg:4326。我不明白为什么地图不匹配，非常感谢您的帮助！

这是我目前的代码：

<div id="map" class="map" style="height: 500px; width:100%"></div>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js">
<script type="text/javascript">

var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) 
{
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}

var map = new ol.Map(
{
    projection: 'EPSG:4326',
    target: 'map',
    layers: [
        new ol.layer.Tile(
        {
            source: new ol.source.OSM(),
        }),
        new ol.layer.Tile(
        {
            opacity: 0.7,
            source: new ol.source.WMTS(
            {
                url:
                  'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0', //?&request=GetTile&service=wmts
                layer: 'Actueel_ortho25',
                matrixSet: 'EPSG:4326',
                format: 'image/png',
                projection: 'EPSG:4326',
                tileGrid: new ol.tilegrid.WMTS(
                {
                    origin: ol.extent.getTopLeft(projectionExtent),
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
                style: 'default',
                wrapX: true,
            }),
        })
    ],
    view: new ol.View(
    {
        center: ol.proj.fromLonLat([5, 52]),
        zoom: 4
    })
});
</script>

【问题讨论】：

标签： javascript openlayers wms

【解决方案1】：

如果您检查https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0?&request=GetCapabilities 的功能，您会看到 EPSG:4326 矩阵不是从全局 EPSG:4326 投影的左上角开始（位于 90, -180）

<TopLeftCorner>53.637608 3.013754</TopLeftCorner>

所以它使用的是自定义平铺网格。最简单的解决方案是让 OpenLayers 解析功能并设置所需的选项

<meta charset="UTF-8">
<html>
<head>
    <title>OSM test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style>
  html, body, .map {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map""></div>
<script type="text/javascript">

fetch('https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0?&request=GetCapabilities')
  .then(function (response) {
    return response.text();
  })
  .then(function (text) {
    var result =  new ol.format.WMTSCapabilities().read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'Actueel_ortho25',
      matrixSet: 'EPSG:4326',

    });

    options.wrapX = true;
    var map = new ol.Map(
    {
      projection: 'EPSG:4326',
      target: 'map',
      layers: [
        new ol.layer.Tile(
        {
            source: new ol.source.OSM(),
        }),
        new ol.layer.Tile(
        {
            opacity: 0.7,
            source: new ol.source.WMTS(options),
        })
      ],
      view: new ol.View(
      {
        center: ol.proj.fromLonLat([5, 52]),
        zoom: 4
      })
    });

  });

</script>
</body>
</html>

【讨论】：

这完全解决了我的问题，非常感谢！！