4

我想使用 Shiny Leaflet 来渲染已经存在的传单地图，但是由于初始地图​​是从外部托管（相当复杂）的 JS 文件创建的，我无法控制它，因此出现了问题。

我似乎无法让传单地图与 R 传单功能一起使用。也就是说，除了浏览器控制台打印：“找不到带有 id mapid 的地图”之外，什么也没有发生。

所以问题是： 如何让 Shiny Leaflet 从外部托管的 JS 文件中识别在 UI 端创建的 Leaflet 地图，以便可以从服务器端更改地图。

下面是一个最小的示例，其中使用 JS 在 UI 端创建传单地图。然后应用程序（不成功）尝试从服务器端向地图添加新点。：

library(shiny)
library(leaflet)

ui <- fluidPage(
  # Load leaflet.js
  tags$head(HTML("

                 <link rel='stylesheet' href='https://unpkg.com/leaflet@1.2.0/dist/leaflet.css' integrity='sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==' crossorigin=''>
                 <script src='https://unpkg.com/leaflet@1.2.0/dist/leaflet.js' integrity='sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==' crossorigin=''></script> ")
  ),

  # Setup Map Container
  leafletOutput("mapid", height = "400px"),

  # Setup Base Map
  HTML(
    "
    <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
    }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
    .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
    </script>
    "
  ),

  br(),
  actionButton("recalc", "New points")
)


server <- function(input, output, session) {
  # Create Random Data Point
  points <- eventReactive(input$recalc, {
    cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
  }, ignoreNULL = FALSE)

  # When recalc is clicked add markers to map
  observeEvent(input$recalc,{
    leafletProxy("mapid", session) %>%
      addMarkers(data = points())
  })
}

shinyApp(ui, server)

任何帮助将不胜感激！

干杯

4

0 回答 0