如何让Leaflet.TimeDimension的Period参数支持用户选择？

先修正你代码里的两处语法错误，避免运行异常：

• center: mapCenter: [56, 10] 应为 center: [56, 10]
• timeDimensionControlOptions 中 displayDate: true 后缺少逗号，导致后续position配置无效

针对你的需求，提供两种可行方案：

方案一：让用户手动选择时间间隔（period） #

通过添加下拉选择框，让用户自主切换15分钟/1小时的时间间隔，核心是监听选择事件，调用TimeDimension的API更新period并刷新时间轴。

1. 添加HTML选择控件 #

在地图容器附近插入下拉菜单：

<div class="period-selector">
  <label>时间间隔：</label>
  <select id="periodSelect">
    <option value="PT15M">15分钟</option>
    <option value="PT60M" selected>1小时</option>
  </select>
</div>

2. 编写JS监听逻辑 #

地图初始化完成后，添加选择事件监听：

// 获取选择控件
const periodSelect = document.getElementById('periodSelect');

// 监听选择变化
periodSelect.addEventListener('change', function() {
  const newPeriod = this.value;
  const timeDimension = map.timeDimension;
  
  // 更新period参数
  timeDimension.setPeriod(newPeriod);
  
  // 基于当前时间区间重新生成时间轴
  const currentInterval = timeDimension.getTimeInterval();
  timeDimension.setTimeInterval(currentInterval.start, currentInterval.end, newPeriod);
  
  // 若开启自动播放，重启播放器（可选）
  if (timeDimension.player) {
    timeDimension.player.stop();
    timeDimension.player.start();
  }
});

方案二：根据所选产品自动切换period #

如果不同数据产品对应固定时间间隔，可以在切换产品时自动更新period，无需用户手动操作。

1. 定义产品与period的映射 #

整理各产品的配置信息：

const products = [
  {
    id: 'product1',
    name: '15分钟间隔数据',
    period: 'PT15M',
    wmsUrl: '你的WMS服务地址'
  },
  {
    id: 'product2',
    name: '1小时间隔数据',
    period: 'PT60M',
    wmsUrl: '你的WMS服务地址'
  }
];

2. 切换产品时更新period #

假设你有产品切换控件（按钮/下拉），切换时执行以下逻辑：

// 切换到指定产品的函数
function switchProduct(product) {
  const timeDimension = map.timeDimension;
  
  // 移除旧的WMS图层（按需执行）
  // map.removeLayer(window.currentWmsLayer);
  
  // 更新period并刷新时间轴
  timeDimension.setPeriod(product.period);
  const currentInterval = timeDimension.getTimeInterval();
  timeDimension.setTimeInterval(currentInterval.start, currentInterval.end, product.period);
  
  // 添加新的WMS时间维度图层
  const newWmsLayer = L.tileLayer.wms(product.wmsUrl, {
    // 你的WMS参数（如layers、format）
    time: '{time}' // 绑定TimeDimension的时间变量
  });
  
  window.currentWmsLayer = L.timeDimension.layer.wms(newWmsLayer).addTo(map);
}

关键说明 #

• setPeriod() 是Leaflet TimeDimension的官方API，仅修改参数不会自动更新时间轴，必须配合setTimeInterval()重新生成时间点。
• WMS图层需将time参数设为'{time}'，确保TimeDimension能自动替换为当前选中的时间值。

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