将 OpenLayers 从 4.6.5 升级到 5.3.0 后，TileWMS 未显示

Question

我有一个 OpenLayers 4.6.5 应用程序，它显示了一张地图，并且最重要的是可以选择打开和关闭一些叠加层。

叠加层属于 TileWMS 类型，并且看起来运行良好。

起初我像这样远程调用 OpenLayers:

<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

但我需要在本地存储，同时升级到 5.3.0。所以我下载了 v5.3.0-dist.zip，添加了文件并将上面的替换为：

<script src="./lib/ol/ol.js"></script>

一切似乎都像以前一样工作，除了 TileWMS，它根本没有显示。

据我所知，upgrade notes 中没有任何内容，表明应该有所更改。

我已经尝试排除 JavaScript 中不必要的部分，所以如果我遗漏了太多请告诉我：

var token = "123456thisisnotmytoken";

var myProjection = new ol.proj.Projection({
    code: projCode,
    units: "m",
    extent: [120000, 5661139.2, 1378291.2, 6500000]
});

var projection = GetProjection(myProjection);
var projectionExtent = projection.getExtent();

const map = new Map({
    target: "map",
    layers: [
        new Group({
            "title": "Base maps",
            layers: [
                new ol.layer.Tile({...
                }),
                new ol.layer.Tile({...
                })
            ]
        }),
        new Group({
            "title": "Overlays",
            layers: [
                new ol.layer.Tile({
                    title: "Matrikel",
                    type: "overlay",
                    visible: true,
                    opacity: 1.0,
                    zIndex: 1000,
                    source: new ol.source.TileWMS({
                        url: "https://services.kortforsyningen.dk/mat?token=" + token,
                        params: {
                            "LAYERS": "MatrikelSkel,Centroide",
                            "VERSION": "1.1.1",
                            "TRANSPARENT": "true",
                            "FORMAT": "image/png",
                            "STYLES": ""
                        },
                    })
                }),
                new ol.layer.Tile({
                    title: "Hillshade",
                    type: "overlay",
                    visible: false,
                    opacity: 1.0,
                    zIndex: 900,
                    source: new ol.source.TileWMS({
                        url: "https://services.kortforsyningen.dk/dhm?token=" + token,
                        params: {
                            "LAYERS": "dhm_terraen_skyggekort_transparent_overdrevet",
                            "VERSION": "1.1.1",
                            "TRANSPARENT": "true",
                            "FORMAT": "image/png",
                            "STYLES": ""
                        },
                    })
                })
            ]
        }),
    ],
    view: view
});

map.addControl(new ol.control.LayerSwitcher());

我知道第二个 TileWMS 默认是隐藏的，但我已经尝试在升级前工作的 LayerSwitcher 中打开和关闭它。

关于我如何解决这个问题有什么建议吗？

Answer 1

问题出在我的视图中的投影！

我把它改成了

GetProjection("EPSG:25832")

到

myProjection

所以现在看起来像这样：

var view = new ol.View({
  center: [606985, 6231744], // EPSG:25832
  zoom: 2,
  resolutions: [1638.4, 819.2, 409.6, 204.8, 102.4, 51.2, 25.6, 12.8, 6.4, 3.2, 1.6, 0.8, 0.4, 0.2],
  projection: myProjection,
  minZoom: 2,
})

myProjection 看起来像这样：

var projCode = "EPSG:25832";
var myProjection = new ol.proj.Projection({
  code: projCode,
  units: "m",
  extent: [120000, 5661139.2, 1378291.2, 6500000]
});

将 OpenLayers 从 4.6.5 升级到 5.3.0 后，TileWMS 未显示

TileWMS' not showing after upgrading OpenLayers from 4.6.5 to 5.3.0

javascript

web-services

wms

openlayers

openlayers-5