但是当我想通过maplibregl的WMS服务使用相同的功能时,多个图像叠加在地图上。
使用maplibregl+wms服务的代码快照在这里
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a WMS source</title>
<meta property="og:description" content="Add an external Web Map Service raster layer to the map using addSource's tiles option." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=l1pwXTuM4tkfkKv0lOMc',
zoom: 1,
center: [-74.5447, 40.6892]
});
map.on('load', () => {
map.addSource('wms-test-source', {
'type': 'raster',
// Use the tiles option to specify a WMS tile source URL
// https://maplibre.org/maplibre-style-spec/sources/
'tiles': ['http://localhost:8080/ncWMS2/wms?SERVICE=WMS&REQUEST=GetMap&SRS=EPSG:3857&VERSION=1.3.0&DATASET=1&STYLES=&CRS=CRS:84&WIDTH=256&HEIGHT=256&LAYERS=spi&bbox=33.875,10.875,60.125,33.125&format=image/png&transparent=true'],
'tileSize': 512
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'raster',
'source': 'wms-test-source',
'paint': {}
}
);
});
</script>
</body>
</html>
还有, 我的数据集中有多个时间戳,任何有关发布和访问每个时间戳层以及检索选定位置的时间序列数据的信息都会有很大帮助。
我尝试过添加图像源,理想情况下,wms 应该从服务器获取地理参考图像并根据边界放置它。
我也遇到了类似的问题,问题是 bbox 已修复。将其更改为 bbox={bbox-epsg-3857} 这样maplibre(mapbox)就会明白。
您可以在这里找到此信息: https://docs.mapbox.com/style-spec/reference/sources/
通过向支持 EPSG:3857(或 EPSG:900913)作为平铺数据源的 WMS 服务器提供 URL。服务器 URL 应包含“{bbox-epsg-3857}”替换令牌以提供 bbox 参数。