如何正确更新OpenLayers中ImageWMS的参数以切换GeoServer发布的GeoTIFF图层

问题根因 #

• 逻辑矛盾：你在selected函数中先对全局rasterWMS执行updateParams更新参数，但紧接着调用eventRaster(f)生成了一个全新的ImageWMS实例，新实例会覆盖全局rasterWMS的指向，你更新参数的旧实例已经被丢弃，新生成的图层使用的是新实例的初始参数，自然看不到参数更新的效果。
• 拼写错误：代码中evetTiff拼写错误（少了字母n），实际后续使用的是eventTiff，变量不一致会导致图层移除/添加逻辑异常。
• 潜在问题：如果showBand函数被重复调用，会给map重复绑定singleclick事件，触发一次点击会执行多次回调，导致取值异常。

修复方案 #

方案1：复用现有WMS源（推荐，性能更高）

不需要反复删加图层，直接更新现有图层的源参数即可：

// 全局保存WMS源和图层实例
let rasterWMS, wmsLayer;

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

firstLoad(){
  const f = sometiffname;
  rasterWMS = eventRaster(f);
  wmsLayer = new ol.layer.Image({
        title: 'PGA(gal)',
        source: rasterWMS,
    });
   map.addLayer(wmsLayer);
   // showBand仅在初始化时调用一次
   showBand(map, vista, rasterWMS);
}

selected(){
  const f = sometiffname;
  // 直接更新现有源的参数，不需要删加图层
  rasterWMS.updateParams({
        'LAYERS': 'name:'+f,
  });
}

方案2：保留删加图层的逻辑

删掉无效的updateParams调用，修正拼写错误即可：

selected(){
  const f = sometiffname;
  map.removeLayer(lastTiffRaster);
  // 确保变量存在再移除，避免报错
  if(eventTiff) map.removeLayer(eventTiff);

  // 删掉这行无效的updateParams，因为后面会生成新的源
  // rasterWMS.updateParams({'LAYERS': 'name:'+f});

  // 修正拼写错误
  eventTiff = new ol.layer.Image({
        title: 'PGA(gal)',
        source: eventRaster(f),
    });
  map.addLayer(eventTiff);
}

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