Shiny Leaflet 通过鼠标单击事件隐藏条件面板

Question

我想使用条件面板在绝对面板中创建一个绘图，仅当我在底图上单击鼠标时才会出现该绘图。这没问题，我已经实现了。

但我希望一旦用户划掉点弹出窗口，情节就会被清除，条件面板会再次折叠。目前，当执行另一次单击时，绘图会发生变化并重新绘制数据，但我希望清除弹出窗口，将其与条件面板的折叠相关联；

这个非常简单的示例显示了单击时条件面板的创建（完整版本创建一个点并读取光栅堆栈以绘制时间线）：

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width="100%", height="100%"),
  absolutePanel(class = "panel panel-default", fixed = TRUE,draggable = TRUE,
                top = 20, left = 60,
                
                conditionalPanel("input.map_click",
                   h4(textOutput("Click_text")),
                top=20, left=60, height=400, width=200,
                style="padding-left: 10px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px")
  )
)


server <- function(input, output, session) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-4,52.5,9) %>%
      addProviderTiles(providers$CartoDB.Positron)  
  })
  
  observeEvent(input$map_click, {
    click <- input$map_click
    text<-paste("Lattitude ", click$lat, "Longtitude ", click$lng)
    text2 <- paste("YOUVE CLICKED THE MAP!!!",click$lat, click$lng)
    
    proxy <- leafletProxy("map")
    proxy %>% clearPopups() %>%
      addPopups(click$lng, click$lat, text)
    
    output$Click_text<-renderText({text2})
  })
  
}

runApp(shinyApp(ui, server), launch.browser = TRUE)

文档中有一个建议，有一个名为 mouseout 的事件，但它可能只是与实际标记上的点击相关联，而不是与地图图块点击相关联，因为我当然无法让它工作。有没有办法让弹出窗口划掉后面板消失？

Answer 1

看来 R 的

popup_close

 中确实还没有实现 

leaflet

 事件。 

尽管如此，我们可以使用很棒的

htmlwidgets

 包来构建它。

library(htmlwidgets) 我们将使用一些

javascript

 来： 

收听
• popupclose

   和 

  popupopen

   事件。 

将事件发生的信息发送给
• Shiny

  。  

这一切都可以在

onRender()

函数内完成：

output$map <- renderLeaflet({
        leaflet() %>%
            setView(-4,52.5,9) %>%
            addProviderTiles(providers$CartoDB.Positron) %>% 

            onRender("
                     function(el, x) {
                         this.on('popupopen', function(e) {
                             Shiny.onInputChange('myEvent', 'open');
                         });

                         this.on('popupclose', function(e) {
                             Shiny.onInputChange('myEvent', 'close');
                         });
                     }")
    })

onRender()

 添加了一些在地图渲染后执行的 JavaScript 代码。

在本例中，
this.on('popupopen', function())

 创建事件侦听器，而 

Shiny.onInputChange('myEvent', 'close')

 将值 

close

 分配给 

input$myEvent

。

我们现在只需要更改面板的条件：

conditionalPanel("input.myEvent == 'open'", ...)