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

需求

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

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

如果我们需要添加的参数的值是动态变化的,那么,直接写在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);

这样就可以根据地图状态动态修改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);

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

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

posted @   槑孒  阅读(115)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示