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实现的原理方案大抵相同。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步