需求

 https://leafletjs.cn/reference.html#tilelayer-wms

leaflet动态更改wms瓦片请求参数_html


官方文档这里说了可以添加自定义参数，但是这里的写法，值是固定的

如果我们需要添加的参数的值是动态变化的，那么，直接写在options的方式固然是行不通的

解决办法

重写getTileUrl方法，可以选择继承TilelayerWMS重写一个类，也可以针对指定图层做修改

针对指定图层做修改做演示

a.根据地图状态动态修改zoom参数值示例

const tiles = L.tileLayer.wms("http://localhost:9090/geoserver/ne/wms", {
  layers: "ne:countries",
  tileSize: map.getSize(),
});
tiles.getTileUrl = function (croods) {
  let { x, y, z } = croods;
  url = L.TileLayerWMS.prototype.getTileUrl.call(this, coords);
  return url + "&zoom=" + z;
};
tiles.addTo(map);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

这样就可以根据地图状态动态修改zoom值了

b.非标准wms图层服务，动态传top/bottom/left/right/width/height值示例
有些wms服务，要求传top/bottom/left/right而不是传bbox，这时就需要动态传这些值了

const tiles = L.tileLayer.wms("http://localhost:9090/geoserver/ne/wms", {
        test: "123",
});
tiles.getTileUrl = function (coords) {
  let { x: width, y: height } = this.getTileSize();
  let bound = this._tileCoordsToBounds(coords),
    top = bound.getNorth(),
    bottom = bound.getSouth(),
    left = bound.getEast(),
    right = bound.getWest(),
    options = {
      ...this.options,
      top,
      bottom,
      left,
      right,
      width,
      height,
    };
  return this._url + hnsdk.Util.getParamString(options, this._url);
};
tiles.addTo(map);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

leaflet动态更改wms瓦片请求参数_html_02

可以发现，每张瓦片请求的top/bottom/left/right参数都是不同的

这种方式也可以为后续有些图层服务对单张瓦片请求做加密的话，使用leaflet实现的原理方案大抵相同。