如何在新的ImageWMS中使用openlayers geturl函数

Question

我在我的reactjs项目中使用openlayers。根据文档

我尝试了以下代码

var sourceData = new ImageWMS(
      {
         params: {'LAYERS': 'top:states'},
         ratio: 1,
         serverType: 'geoserver',
         getURL: function () {
          console.log('bounds');
          }
      });

this.olmap = new Map({
      target: null,
      layers: [new ImageLayer({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: sourceData
        })],
      view: new View({
        center: this.state.center,
        zoom: this.state.zoom
      })
    });

我正在尝试上述代码，但没有显示控制台日志。我能知道如何使其工作以便获得控制台日志吗？

Answer 1

它只是返回用于构建源的URL，例如

var sourceData = new ImageWMS(
      {
         url: 'https://ahocevar.com/geoserver/wms',
         params: {'LAYERS': 'top:states'},
         ratio: 1,
         serverType: 'geoserver'
      });
console.log(sourceData.getURL());  // 'https://ahocevar.com/geoserver/wms'

要登录完整的URL或其查询字符串参数，您需要自定义ImageLoAdfunction

var sourceData = new ImageWMS(
      {
         url: 'https://ahocevar.com/geoserver/wms',
         params: {'LAYERS': 'top:states'},
         ratio: 1,
         serverType: 'geoserver',
         imageLoadFunction: function(image, src) {
           var params = new URLSearchParams(src.slice(src.indexOf('?')));
           console.log('bounds', params.get('BBOX'));
           image.getImage().src = src;
         }
      });