你如何在 R Leaflet 中实现传单插件“Leaflet-Pegman”答案

【问题标题】：How do you implement leaflet plugin "Leaflet-Pegman" in R Leaflet你如何在 R Leaflet 中实现传单插件“Leaflet-Pegman”
【发布时间】：2020-09-02 08:34:10
【问题描述】：

我想在我的 r shiny 应用程序中使用 google streetview。我正在使用传单来绘制我的地图。我发现了这个很棒的传单插件“Leaflet Pegman”。

如何将这个插件实现到一个闪亮的应用程序中？

我尝试使用这个explanation。我还找到了另一个 R 包 (googleway)，但在我的情况下，我想使用传单。

谁能给我一个可行的例子。这是我现在的代码：

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

Googlekey <- "api_key_here"

PluginPegman <- htmlDependency(name = "Pegman",version = "0.1.4"
                               ,src = c(href = "https://unpkg.com/leaflet-pegman/0.1.4/")
                               ,script = "leaflet-pegman.js"
                               ,stylesheet = "leaflet-pegman.css")

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

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

server <- function(input, output) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      # Set view to the Netherlands
      setView(5.41077,52.13012,zoom = 8) %>%
      addProviderTiles(providers$OpenStreetMap,group = "OSM") %>%
      
      registerPlugin(PluginPegman)  %>%
      onRender("function() {
      var pegmanControl = new L.Control.Pegman({
      position: 'bottomright', // position of control inside the map
      theme: 'leaflet-pegman-v3-default', // or 'leaflet-pegman-v3-small'});
      pegmanControl.addTo(map);
               }")
  })
}

shinyApp(ui = ui, server = server)

非常感谢。

【问题讨论】：

标签： javascript r leaflet google-street-view r-leaflet

【解决方案1】：

我必须在 UI 的 head 中包含 Leaflet-pegman js 文件，它才能工作。我还编辑了htmlDependency 中的链接，因为它没有引用正确的链接。

这段代码现在对我有用：

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

Googlekey <- "api_key_here"

PluginPegman <- htmlDependency(name = "Pegman", version = '0.1.5'
                               ,src = c(href = "https://unpkg.com/leaflet-pegman")
                               ,script = "leaflet-pegman.js"
                               ,stylesheet = "leaflet-pegman.css")

registerPlugin <- function(map, plugin) {
    map$dependencies <- c(map$dependencies, list(plugin))
    map
}

ui <- bootstrapPage(
    tags$head(
        tags$script(src='https://unpkg.com/leaflet-pegman@0.1.5/leaflet-pegman.js'),
        tags$style(type = "text/css","html,body {width:100%;height:100%}")
    ),
    
    leafletOutput("map",width = "100%",height = "100%")
)

server <- function(input, output) {
    
    output$map <- renderLeaflet({
        leaflet() %>%
            # Set view to the Netherlands
            setView(5.41077,52.13012,zoom = 8) %>%
            addProviderTiles(providers$OpenStreetMap,group = "OSM") %>%
            registerPlugin(PluginPegman)  %>%
            onRender("function(el,x) {
      var pegmanControl = new L.Control.Pegman({
      position: 'bottomright', 
      theme: 'leaflet-pegman-v3-default',
      apiKey: YOUR API KEY});
      pegmanControl.addTo(this);}")
    })
}

shinyApp(ui = ui, server = server)

【讨论】：