如何在新ImageWMS中使用openlayers getUrl函数？

Question

我在我的 reactjs 项目中使用 OpenLayers。根据 documentation

我试过下面的代码

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

它只是 returns 用于构建源的 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;
         }
      });

如何在新ImageWMS中使用openlayers getUrl函数？

How to use openlayers getUrl function in new ImageWMS?

openlayers

reactjs