如何为Leaflet中的栅格数据实现静态HTML时间滑块？

因为leaflet.extras2::addTimeslider()仅支持带时间属性的点/线类型Simple Feature对象，我们可以通过构造空SF时间数据源 + JS监听滑块事件控制栅格图层显示的方式，实现栅格数据的时间滑块效果，全程无需Shiny，输出静态HTML。

步骤1：准备多时间步栅格数据 #

先准备好对应不同时间点的栅格，这里用示例数据演示：

library(leaflet)
library(leaflet.extras2)
library(sf)
library(raster)
library(htmlwidgets)

# 生成3个时间点的示例栅格（间隔1小时）
time_points <- seq.POSIXct(Sys.time() - 3*3600, Sys.time(), by = "3600")
raster_list <- lapply(1:3, function(i) {
  # 创建范围在[-80,-70]经度、[20,30]纬度的栅格
  r <- raster(nrow=10, ncol=10, xmn=-80, xmx=-70, ymn=20, ymx=30)
  values(r) <- runif(ncell(r)) * i  # 每个时间步栅格值递增
  list(raster = r, timestamp = time_points[i])
})

步骤2：构造时间滑块所需的SF数据源 #

addTimeslider()必须传入POINT/LINESTRING类型的SF对象，我们可以创建一个仅包含时间列的空点集合，用来定义滑块的时间范围：

# 创建空SF点对象，每个行对应一个时间点
slider_sf <- st_sf(
  time = time_points,
  # 用无效坐标的空点占位，不影响地图显示
  geometry = st_sfc(lapply(time_points, function(x) st_point(c(0,0)))),
  crs = 4326
)

步骤3：添加栅格图层并标记时间属性 #

把所有栅格添加到地图上，给每个栅格图层绑定对应的时间戳（转成整数毫秒，方便JS识别）：

# 初始化地图
map <- leaflet() %>% addTiles()

# 循环添加每个栅格图层，设置唯一ID和时间属性
for (idx in seq_along(raster_list)) {
  map <- map %>%
    addRasterImage(
      raster_list[[idx]]$raster,
      colors = "viridis",
      opacity = 0.7,
      layerId = paste0("raster_layer_", idx),
      # 给图层绑定时间戳属性
      options = pathOptions(
        attrs = list("data-timestamp" = as.integer(raster_list[[idx]]$timestamp))
      )
    )
}

步骤4：添加时间滑块并绑定JS控制逻辑 #

添加时间滑块后，用JS监听滑块的时间变化事件，动态显示/隐藏对应时间的栅格：

map <- map %>%
  addTimeslider(
    data = slider_sf,
    options = timesliderOptions(
      position = "topright",
      timeAttribute = "time",
      range = FALSE,  # 单时间点模式，需范围可设为TRUE
      showAllOnStart = FALSE
    )
  ) %>%
  setView(-75, 25, 5) %>%
  # 自定义JS逻辑：监听滑块事件，切换栅格显示
  onRender("function(el, x) {
    var map = this;
    // 初始隐藏所有栅格图层
    map.eachLayer(function(layer) {
      if (layer.options?.attrs?.['data-timestamp']) {
        layer.setOpacity(0);
      }
    });
    
    // 监听时间滑块变化事件
    map.on('timeslider:changed', function(e) {
      var selectedTime = e.time;
      // 遍历所有图层，匹配时间的显示，其余隐藏
      map.eachLayer(function(layer) {
        if (layer.options?.attrs?.['data-timestamp']) {
          var layerTime = parseInt(layer.options.attrs['data-timestamp']);
          // 允许毫秒级误差，匹配对应时间的栅格
          if (Math.abs(layerTime - selectedTime) < 1000) {
            layer.setOpacity(0.7);
          } else {
            layer.setOpacity(0);
          }
        }
      });
    });
  }")

# 导出为静态HTML文件
saveWidget(map, "raster_time_slider.html", selfcontained = TRUE)

关键说明 #

• 空SF对象仅用于给时间滑块提供时间范围，不会在地图上显示任何点。
• 栅格的显示切换通过控制透明度实现，也可以用layer.addTo(map)和map.removeLayer(layer)实现完全显示/隐藏。
• 如果是RasterBrick或RasterStack类型的时间序列栅格，先通过raster::raster()将其拆分为单个栅格，再按上述步骤处理。

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