MapLibre GL调用本地WMS服务多图叠加及时间戳图层问题咨询

问题现象 #

• 通过ncWMS2成功发布本地数据集（已发布数据集截图）
• 使用MapLibre GL调用该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能从服务器获取地理参考图像并按边界正确放置。

内容的提问来源于stack exchange，提问作者pammiphani ramakrishna