Vector Tiles (tegola) / WMS 在 OpenLayers 6.22 上的叠加问题
Vector Tiles (tegola) / WMS overlay problem on OpenLayers 6.22
我正在尝试了解 openlayers (6.3.1) 上的一些矢量图块逻辑和实现。我有 2 层根本不重叠,导致下面的屏幕截图。
我研究了多个示例,但它们只会增加我的技术疑虑和困惑
这是系统:
- 矢量磁贴服务器
Tegola 服务器 (gospatial/tegola:v0.10.4
),使用默认选项(256
像素处的图块?大小源数据 srid=4326
和 SQL SQL:FROM XXX.XXX WHERE geom && !BBOX!
)
服务器层描述在这里:http://tiles.isric.org/capabilities/wosis.json
- WMS 服务
WMS 服务:http://maps.isric.org/mapserv?map=/map/soc.map
- 运行 例子
jsfiddle 中的完整代码示例:https://jsfiddle.net/jorgejesus/vt6qndrw/1/
- 代码部分:
所以对于 tegola 服务器,我有这样的东西:
var tegola_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
projection: 'EPSG:4326',
url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256,256],
resolutions:resolutions, //from above check jsfiddle
origin: [-180,90.0],
})
})
})
对于 WMS:
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
projection: 'EPSG:4326',
url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
OL 6 观点终于来了:
var map = new ol.Map({
layers: [
tegola_layer,
wms_layer
],
target: 'map',
view: new ol.View({
center: [-76.275329586789, 22.153492567373],
extent: ol.proj.get("EPSG:4326").getExtent(),
zoom: 5,
projection: "EPSG:4326"
})
});
我有下面的图片作为最终的代码结果,西欧享受墨西哥高尔夫的温暖水域会很愉快,但这不是我的objective。
请指点提示并指出问题所在,我发现矢量切片文档非常分散,我可能对网格有一些误解。
您的矢量切片源是 EPSG:3857,无法重新投影矢量切片。您将需要在 EPSG:3857 中显示两个图层(或找到矢量切片数据的替代 EPSG:4326 来源)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var resolutions = [];
var maxResolution = 360 / 256;
resolutions.length = 24;
for (var i = 0; i < 24; ++i) {
resolutions[i] = maxResolution / Math.pow(2, i + 1);
}
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
// projection: 'EPSG:4326',
url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
var tegola_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
// projection: 'EPSG:4326',
url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
})
})
var map = new ol.Map({
layers: [
wms_layer,
tegola_layer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-76.275329586789, 22.153492567373]),
zoom: 5,
})
});
</script>
</body>
</html>
有几个问题:
- 投影
- 不正确的地图分辨率图块
Tegola 不是替代非 Web 墨卡托项目的矢量切片的最佳选择。 T-rex 是一个更好的选择,但即使在那里它也有点 fiddle 去纠正问题。
基本上两边的分辨率,tilesize,投影系统和地图扩展必须相同(server/tiles和OL代码)。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height: 1024px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
//We need to have EXACTLY the same resolution on the trex/
//on the the server
//[grid.user]
//width = 512
//height = 512
//extent = { minx = -180, miny = -90, maxx = 180, maxy = 90 }
//srid = 4326
//units = "dd"
//resolutions = [0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125]
//origin = "TopLeft"
defaultResolutions = []
var maxResolution = 360 / 512; //degrees devided by tile size
defaultResolutions.length = 14;
for (var i = 0; i < 14; ++i) {
defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}
//defaultResolutions as the same as in server
// Custom tile grid for the EPSG:4326 projection
var tileGrid = new ol.tilegrid.TileGrid({
extent: [-180, -90, 180, 90],
tileSize: 512,
resolutions: defaultResolutions
});
var vector_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
projection: 'EPSG:4326',
url: 'http://trex.isric.org/wosis/{z}/{x}/{y}.pbf?debug=true',
tileGrid: tileGrid
})
})
//The dev soc_0-5cm_mean has no web has no
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://dev-maps.isric.org/mapserv?map=/map/soc.map',
projection: "EPSG:4326",
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
var map = new ol.Map({
layers: [
wms_layer,
vector_layer
],
target: 'map',
view: new ol.View({
center: [-76.275329586789, 22.153492567373],
//[ -180, -90, 180, 90]
extent: ol.proj.get("EPSG:4326").getExtent(),
zoom: 5,
projection: "EPSG:4326"
})
});
</script>
</body>
</html>
希望这对其他人有帮助:)
我正在尝试了解 openlayers (6.3.1) 上的一些矢量图块逻辑和实现。我有 2 层根本不重叠,导致下面的屏幕截图。 我研究了多个示例,但它们只会增加我的技术疑虑和困惑 这是系统:
- 矢量磁贴服务器
Tegola 服务器 (gospatial/tegola:v0.10.4
),使用默认选项(256
像素处的图块?大小源数据 srid=4326
和 SQL SQL:FROM XXX.XXX WHERE geom && !BBOX!
)
服务器层描述在这里:http://tiles.isric.org/capabilities/wosis.json
- WMS 服务
WMS 服务:http://maps.isric.org/mapserv?map=/map/soc.map
- 运行 例子
jsfiddle 中的完整代码示例:https://jsfiddle.net/jorgejesus/vt6qndrw/1/
- 代码部分:
所以对于 tegola 服务器,我有这样的东西:
var tegola_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
projection: 'EPSG:4326',
url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256,256],
resolutions:resolutions, //from above check jsfiddle
origin: [-180,90.0],
})
})
})
对于 WMS:
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
projection: 'EPSG:4326',
url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
OL 6 观点终于来了:
var map = new ol.Map({
layers: [
tegola_layer,
wms_layer
],
target: 'map',
view: new ol.View({
center: [-76.275329586789, 22.153492567373],
extent: ol.proj.get("EPSG:4326").getExtent(),
zoom: 5,
projection: "EPSG:4326"
})
});
我有下面的图片作为最终的代码结果,西欧享受墨西哥高尔夫的温暖水域会很愉快,但这不是我的objective。
请指点提示并指出问题所在,我发现矢量切片文档非常分散,我可能对网格有一些误解。
您的矢量切片源是 EPSG:3857,无法重新投影矢量切片。您将需要在 EPSG:3857 中显示两个图层(或找到矢量切片数据的替代 EPSG:4326 来源)
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var resolutions = [];
var maxResolution = 360 / 256;
resolutions.length = 24;
for (var i = 0; i < 24; ++i) {
resolutions[i] = maxResolution / Math.pow(2, i + 1);
}
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
// projection: 'EPSG:4326',
url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
var tegola_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
// projection: 'EPSG:4326',
url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
})
})
var map = new ol.Map({
layers: [
wms_layer,
tegola_layer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-76.275329586789, 22.153492567373]),
zoom: 5,
})
});
</script>
</body>
</html>
有几个问题:
- 投影
- 不正确的地图分辨率图块
Tegola 不是替代非 Web 墨卡托项目的矢量切片的最佳选择。 T-rex 是一个更好的选择,但即使在那里它也有点 fiddle 去纠正问题。
基本上两边的分辨率,tilesize,投影系统和地图扩展必须相同(server/tiles和OL代码)。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<style>
.map {
width: 100%;
height: 1024px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
//We need to have EXACTLY the same resolution on the trex/
//on the the server
//[grid.user]
//width = 512
//height = 512
//extent = { minx = -180, miny = -90, maxx = 180, maxy = 90 }
//srid = 4326
//units = "dd"
//resolutions = [0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125]
//origin = "TopLeft"
defaultResolutions = []
var maxResolution = 360 / 512; //degrees devided by tile size
defaultResolutions.length = 14;
for (var i = 0; i < 14; ++i) {
defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}
//defaultResolutions as the same as in server
// Custom tile grid for the EPSG:4326 projection
var tileGrid = new ol.tilegrid.TileGrid({
extent: [-180, -90, 180, 90],
tileSize: 512,
resolutions: defaultResolutions
});
var vector_layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
projection: 'EPSG:4326',
url: 'http://trex.isric.org/wosis/{z}/{x}/{y}.pbf?debug=true',
tileGrid: tileGrid
})
})
//The dev soc_0-5cm_mean has no web has no
var wms_layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://dev-maps.isric.org/mapserv?map=/map/soc.map',
projection: "EPSG:4326",
params: {
'LAYERS':'soc_0-5cm_mean',
crossOrigin: 'anonymous',
'TILED': true
},
})
})
var map = new ol.Map({
layers: [
wms_layer,
vector_layer
],
target: 'map',
view: new ol.View({
center: [-76.275329586789, 22.153492567373],
//[ -180, -90, 180, 90]
extent: ol.proj.get("EPSG:4326").getExtent(),
zoom: 5,
projection: "EPSG:4326"
})
});
</script>
</body>
</html>
希望这对其他人有帮助:)