shinyDashboard环境下leafletProxy功能失效问题咨询

问题根因 #

• 代码中UI部分存在重复ID冲突：外层自定义div的id设置为map，与leafletOutput('map')的输出ID完全重复。HTML规范中DOM元素的ID为唯一标识，重复ID会导致leafletProxy无法定位到正确的地图渲染容器，因此更新逻辑无法生效。

解决方案 #

删除UI部分多余的外层div（或修改外层div的id为其他不重复值即可），修正后可正常实现切换选项修改圆圈颜色的效果。

修正后完整可运行代码 #

library(shiny)
library(shinydashboard)
library(leaflet)
library(sf)

n = 100

df1 = data.frame(id = 1:n,
                 x = rnorm(n, 10, 3),
                 y = rnorm(n, 49, 1.8))

pts = st_as_sf(df1, coords = c("x", "y"), crs = 4326)

map <- leaflet() %>%
  addProviderTiles(provider = providers$CartoDB.DarkMatter) %>%
  addCircles(data = pts, group = "pts") %>%
  setView(lng = 10.5, lat = 49.5, zoom = 6)

ui <- dashboardPage(
  dashboardHeader(),
  
  dashboardSidebar(
    selectInput(inputId = 'click', 'Choose one:', c('A', 'B', 'C'))
  ),
  
  dashboardBody(
    fluidRow(
      column(
        width = 12,
        leafletOutput('map', height = '800px')
      )
    )
  )
)


server <- function(input, output) {
  output$map <- renderLeaflet({map})
  
  observeEvent(input$click, {
    col <- switch(input$click, 
                  'A' = 'green', 
                  'B' = 'yellow', 
                  'C' = 'white')
    
    leafletProxy("map") %>%
      clearShapes() %>%
      addCircles(data = pts,
                 color = col)
  })
  
}

shinyApp(ui, server)

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