如何为 imageWMS 正确更新参数

Question

我的项目有 2 个主要功能，1 个用于在页面加载时显示信息、矢量、图层等，另一个用于根据用户想要查看的内容显示信息。我正在调用 geoserver 将 geotiff 显示为 imageWMS ，我也在使用此函数 showBand:

在 geoserver 上显示来自此 geotiff 的波段值

eventRaster = (f) => {
    rasterWMS = new ol.source.ImageWMS({
        url: 'https://url/geoserver/name/wms',
        params: {
            'LAYERS': 'name:' + f
        },
        ratio: 1,
        serverType: 'geoserver'
    })
    return rasterWMS;
}

showBand = (map, vista, eventRaster) => {
    map.on('singleclick', function (evt) {
        /* document.querySelector('featureInfo > tr').classList.add("test") */
        const viewResolution = /** @type {number} */ (vista.getResolution());
        const url = eventRaster.getFeatureInfoUrl(
            evt.coordinate,
            viewResolution,
            'EPSG:3857',
            { 'INFO_FORMAT': 'text/html' }
        );
        if (url) {
            fetch(url)
                .then((response) => response.text())
                .then((html) => {
                    document.getElementById('showBand').innerHTML = html;
                    const pga = document.querySelector(".featureInfo tbody tr:nth-child(2) td:nth-child(2)").textContent;
                    const floatPga = parseFloat(pga).toFixed(2);
                    if (floatPga < 0) {
                        document.getElementById('showBand').innerHTML = "Da click en la una zona válida";
                    } else {
                        document.getElementById('showBand').innerHTML = floatPga + " gal";
                    }
                });
        }
    });

    map.on('pointermove', function (evt) {
        if (evt.dragging) {
            return;
        }
        const pixel = map.getEventPixel(evt.originalEvent);
        const hit = map.forEachLayerAtPixel(pixel, function () {
            return true;
        });
        /* map.getTargetElement().style.cursor = hit ? 'pointer' : ''; */
    });

}

所以我的函数中有这个：

firstLoad(){
  const f = sometiffname;
  lastTiffRaster = new ol.layer.Image({
        title: 'PGA(gal)',
        source: eventRaster(f),
    });
   map.addLayer(lastTiffRaster);
}

selected(){
  const f = sometiffname;
  map.removeLayer(lastTiffRaster);
  map.removeLayer(eventTiff);

  rasterWMS.updateParams({
        'LAYERS': 'name:'+f,
    });

  evetTiff = new ol.layer.Image({
        title: 'PGA(gal)',
        source: eventRaster(f),
    });
  map.addLayer(eventTiff);
}

第一次加载页面并单击我想查看的第一个事件时没有问题，因为参数更新完美，我可以毫无问题地看到 band 值，但是当我尝试调用另一个事件（第二个事件), geotiff 改变了，但是 params 没有更新。我在控制台 f 上打印以查看值是多少，它会根据事件发生变化，但我不知道为什么 updateParams 在这种情况下不起作用。

黄色标记是f

Answer 1

我必须为 selected() 创建一个新的 imagewms，然后从 firstload()

更新 imagewms

selected(){
  const f = sometiffname;
  const newRasterWMS = new ol.source.ImageWMS({
        url: 'https://url.pe/geoserver/somename/wms',
        params: {
            'LAYERS': 'somename:' + f
        },
        ratio: 1,
        serverType: 'geoserver'
    });

    rasterWMS.updateParams({
        'LAYERS': 'somename:'+f,
    });

    eventTiff = new ol.layer.Image({
        title: 'PGA(gal)',
        source: newRasterWMS
    });
   map.addLayer(lastTiffRaster);
}

如何为 imageWMS 正确更新参数

How to update params properly for imageWMS

javascript

maps

openlayers