如何在R Shiny中监听leafsync同步地图的点击事件

问题原因 #

你的代码无法触发点击事件是两个核心问题导致的：

• 你创建的Leaflet地图对象没有显式指定elementId，leafsync的sync()函数不会自动将R环境中的变量名作为Shiny输入ID的前缀，Shiny无法识别input$cte_map_shape_click对应的地图组件
• 你调用addPolygons时没有指定layerId参数，就算捕获到点击事件也无法获取对应形状的id值

修改步骤 #

1. 给每个Leaflet地图对象添加elementId参数，值和你要监听的输入ID前缀保持一致
2. 给addPolygons添加layerId参数，绑定你的空间数据中代表唯一标识的字段
3. observeEvent直接放在renderUI外部即可，Shiny支持自动捕获动态渲染组件的输入事件

完整可运行修改代码示例 #

library(shiny)
library(leaflet)
library(leafsync)

# 这里替换为你自己的空间数据，示例为纽约学区测试数据
ctecscrs_geo <- tigris::school_districts(state = "NY", county = "New York", cb = TRUE)
csd_dem_geo <- ctecscrs_geo

ui <- fluidPage(
  navbarPage('CS4All and CTE Progress Visualization',
             tabPanel('Map',
                      div(class='outer',
                          sidebarLayout(
                            mainPanel(
                              uiOutput('synced_maps')
                            )
                          )
                      )
             )
  )
)

server <- function(input, output) {
  output$synced_maps <- renderUI({
    
    # --- CS4ALL MAP 显式指定elementId
    cs4all_map <- leaflet(elementId = "cs4all_map") %>%
      setView(lat=40.730610, lng=-73.935242, zoom = 10) %>%
      addProviderTiles(providers$CartoDB.Positron) %>%
      addPolygons(data         = ctecscrs_geo,
                  stroke       = TRUE,
                  color        = '#808080',
                  weight       = 1,
                  layerId      = ~GEOID) # 绑定唯一标识字段，替换为你自己的字段名

    # --- CTE MAP 显式指定elementId
    cte_map <- leaflet(elementId = "cte_map") %>%
      setView(lat=40.730610, lng=-73.935242, zoom = 10) %>%
      addProviderTiles(providers$CartoDB.Positron) %>%
      addPolygons(data         = ctecscrs_geo,
                  stroke       = TRUE,
                  color        = '#808080',
                  weight       = 1,
                  layerId      = ~GEOID) # 绑定唯一标识字段，替换为你自己的字段名

    # --- DEMOGRAPHICS MAP 显式指定elementId
    dem_map <- leaflet(elementId = "dem_map") %>%
      setView(lat=40.730610, lng=-73.935242, zoom = 10) %>%
      addProviderTiles(providers$CartoDB.Positron) %>%
      addPolygons(data         = csd_dem_geo,
                  stroke       = TRUE,
                  color        = '#808080',
                  weight       = 1,
                  layerId      = ~GEOID) # 绑定唯一标识字段，替换为你自己的字段名
    
    sync(cs4all_map, cte_map, dem_map)
  })
  
  # 监听CTE地图的形状点击事件，放在renderUI外部即可
  observeEvent(input$cte_map_shape_click, {
    click <- input$cte_map_shape_click
    print(click$id)
  })
}

shinyApp(ui, server)

补充说明 #

• 三个地图的点击事件都可以通过对应elementId+_shape_click的规则监听，比如监听CS4ALL地图的点击就用input$cs4all_map_shape_click
• 如果需要点击任意地图三个地图同步高亮对应区域，只需要在监听事件里调用leafletProxy分别更新三个地图的样式即可

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