如何通过Leaflet TimeDimension动态传递WMS的cql_filter参数

核心逻辑：Leaflet TimeDimension默认会将选中时间作为WMS标准TIME参数传递给图层，但你的时间过滤需要嵌入到跨层查询的CQL条件中，因此需要禁用默认的时间参数传递逻辑，监听时间变化事件动态更新CQL过滤条件触发图层重绘。

实现方式一：重写TimeDimension WMS层的setTime方法 #

const baseUrl = "你的GeoServer WMS服务地址";
// 初始化基础泊车位WMS层，设置初始时间过滤
const vacantParking = L.tileLayer.wms(baseUrl, {
  layers: 'workspace:parking_spacesLayer',
  cql_filter: "BEYOND(the_geom,collectGeometries(queryCollection('workspace:boatsLayer','the_geom','datetime=2021-11-09')),5,meters)",
  format: 'image/png',
  transparent: true
});

// 初始化TimeDimension绑定图层
const vacantParkingTime = L.timeDimension.layer.wms(vacantParking, {
  updateTimeDimension: true,
  requestTimeFromCapabilities: false, // 禁用从无时间字段的泊车位图层拉取时间配置
  wmsTimeParam: null, // 禁止自动拼接TIME参数到WMS请求中
  // 重写时间更新逻辑
  setTime: function(time) {
    if (!this._wmsLayer) return;
    // 将时间对象格式化为和船只图层datetime字段完全匹配的格式，此处示例为年月日格式，如需时分秒可自行调整
    const formatDate = time.toISOString().split('T')[0];
    // 拼接新的CQL过滤条件
    const newCql = `BEYOND(the_geom,collectGeometries(queryCollection('workspace:boatsLayer','the_geom','datetime=${formatDate}')),5,meters)`;
    // 更新WMS层参数，自动触发瓦片重请求
    this._wmsLayer.setParams({
      cql_filter: newCql
    });
    // 保留父类原有逻辑
    L.TimeDimension.Layer.WMS.prototype.setTime.call(this, time);
  }
}).addTo(map);

// 手动配置TimeDimension的可用时间范围，替换为你船只图层的实际时间范围
map.timeDimension.setAvailableTimes([
  "2021-11-01T00:00:00Z",
  "2021-11-02T00:00:00Z",
  // 所有可用时间节点
], false);

实现方式二：监听时间变化事件（更简洁） #

不需要重写类方法，直接监听timeDimension的时间加载事件更新参数即可：

const baseUrl = "你的GeoServer WMS服务地址";
const vacantParking = L.tileLayer.wms(baseUrl, {
  layers: 'workspace:parking_spacesLayer',
  cql_filter: "BEYOND(the_geom,collectGeometries(queryCollection('workspace:boatsLayer','the_geom','datetime=2021-11-09')),5,meters)",
  format: 'image/png',
  transparent: true
});

const vacantParkingTime = L.timeDimension.layer.wms(vacantParking, {
  updateTimeDimension: true,
  requestTimeFromCapabilities: false,
  wmsTimeParam: null
}).addTo(map);

// 监听时间变化事件，动态更新CQL
map.timeDimension.on('timeload', e => {
  const formatDate = e.time.toISOString().split('T')[0];
  const newCql = `BEYOND(the_geom,collectGeometries(queryCollection('workspace:boatsLayer','the_geom','datetime=${formatDate}')),5,meters)`;
  vacantParking.setParams({ cql_filter: newCql });
});

// 同样需要手动配置可用时间范围
map.timeDimension.setAvailableTimes([/* 船只图层的所有可用时间节点 */], false);

原有方案失效原因 #

• 方案1：INCLUDE会查询所有时间的船只数据，不会按选中时间过滤，无动态效果
• 方案2：同时传两个图层时，默认TIME参数会作用在所有图层上，泊车位图层没有时间字段会导致WMS请求异常，CQL也不会自动关联时间参数
• 方案3：仅在图层初始化时拼接了一次时间参数，后续时间变化时没有更新CQL参数，因此不会生效

注意事项 #

• 时间格式化必须和船只图层datetime字段的存储格式完全匹配，如字段存储为yyyy-MM-dd HH:mm:ss格式，需要调整格式化逻辑输出对应格式的字符串，否则会过滤失败
• 如需展示占用泊位，只需将CQL中的BEYOND关键字替换为DWITHIN即可

内容的提问来源于stack exchange，提问作者Paul H