R 将图像覆盖在有光泽的传单上观察事件

我有一个闪亮的应用程序，我需要在一个观察事件的实例中添加一个png图像

但是，我可以在Shiny之外实现这一点，而不是在observe函数内。我想这和已经渲染的地图有关吧

我简化了示例（因此只有一个png），但理想情况下，我希望能够快速插入其他png（即雷达图像）

库（闪亮）
图书馆（单张）
库（htmlwidgets）
ui看起来，
传单代理
不提供从R侧访问传单Api的方法

onRender
肯定不起作用，因为
proxy
的关键是不重新渲染地图

我找到的解决方案是在创建传单时添加一个自定义事件处理程序，使用
onRender
，这样我们以后就可以访问传单Api了

使用消息当然是一种限制，但是如果您想要呈现图像的方式（提供src和边界）总是相同的，那么它就足够了

library(shiny)
library(leaflet)
library(htmlwidgets)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "80%"),
  actionButton("recalc", "Action")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(lng = 153.240001, lat = -27.717732, zoom = 7) %>%
      addProviderTiles(providers$OpenStreetMap) %>% 
      addTiles() %>%  # Add default OpenStreetMap map tiles
      addMarkers(lng=153.240001, lat=-27.717732, popup="Mt Stapylton") %>%
      htmlwidgets::onRender("
        function(el, x) {
          var myMap = this;
          // Saving a copy of the overlay to remove it when the next one comes.
          var overlay;

          Shiny.addCustomMessageHandler('setOverlay', function(message) {
            if (myMap.hasLayer(overlay)) myMap.removeLayer(overlay);

            overlay = L.imageOverlay(message.src, message.bounds);

            overlay.addTo(myMap);
          });
        }
      ")
  })

  observeEvent(input$recalc, {
    session$sendCustomMessage("setOverlay", list(
      src = 'https://www.google.com.au/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
      bounds = list(list(-25.58,150.71), list(-30,155.88))
    ))
  })
}

shinyApp(ui, server)

库（闪亮）
图书馆（单张）
库（htmlwidgets）
ui%
addTiles（）%>%#添加默认的OpenStreetMap分幅
添加标记（lng=153.240001，lat=-27.717732，popup=“Mt Stapylton”）%>%
htmlwidgets:：onRender（“
函数（el，x）{
var myMap=this；
//保存覆盖的副本，以便在下一个副本出现时将其删除。
var叠加；
addCustomMessageHandler（'setOverlay'，函数（消息）{
if（myMap.hasLayer（overlay））myMap.removeLayer（overlay）；
overlay=L.imageOverlay（message.src，message.bounds）；
overlay.addTo（myMap）；
});
}
")
})
observeEvent（输入$recalc{
会话$sendCustomMessage（“setOverlay”，列表(
src='1〕https://www.google.com.au/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
边界=列表（列表（-25.58150.71），列表（-30155.88））
))
})
}
shinyApp（用户界面、服务器）
非常感谢
library(shiny)
library(leaflet)
library(htmlwidgets)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "80%"),
  actionButton("recalc", "Action")
)

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(lng = 153.240001, lat = -27.717732, zoom = 7) %>%
      addProviderTiles(providers$OpenStreetMap) %>% 
      addTiles() %>%  # Add default OpenStreetMap map tiles
      addMarkers(lng=153.240001, lat=-27.717732, popup="Mt Stapylton") %>%
      htmlwidgets::onRender("
        function(el, x) {
          var myMap = this;
          // Saving a copy of the overlay to remove it when the next one comes.
          var overlay;

          Shiny.addCustomMessageHandler('setOverlay', function(message) {
            if (myMap.hasLayer(overlay)) myMap.removeLayer(overlay);

            overlay = L.imageOverlay(message.src, message.bounds);

            overlay.addTo(myMap);
          });
        }
      ")
  })

  observeEvent(input$recalc, {
    session$sendCustomMessage("setOverlay", list(
      src = 'https://www.google.com.au/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
      bounds = list(list(-25.58,150.71), list(-30,155.88))
    ))
  })
}

shinyApp(ui, server)