我正在尝试使用Open Layers在现有的Open Street Map层上显示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>
如果检查功能https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0?&request=GetCapabilities您可以看到EPSG:4326矩阵没有从全局EPSG:4226投影的左上角开始(将在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>