单击按钮时替换标记

问题描述 投票:0回答:1

我正在启动一个闪亮的应用程序,其中包含传单地图。

我需要用户能够在地图上放置两个单独的标记(出发地和目的地),并可能稍后替换它们。

所以我所做的是创建一个起点按钮和一个目的地按钮,这样当用户单击其中一个按钮时,他们将在地图上下次单击时放置或更新相应的标记。

library(shiny)
library(shinyWidgets)
library(leaflet)
library(RColorBrewer)
library(osrm)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10,
                actionButton("change_orig", "Origine"),
                actionButton("change_dest", "Destination"),
  )
)

server <- function(input, output, session) {
  
  origin_icon = makeIcon("https://static.thenounproject.com/png/1477944-200.png",
                         iconWidth=24, iconHeight=30)
  destination_icon = makeIcon("https://static.thenounproject.com/png/924206-200.png",
                              iconWidth=24, iconHeight=30)
  
  output$map <- renderLeaflet({
    leaflet() %>% addTiles(providers$OpenStreetMap) %>%
      addProviderTiles(providers$OpenStreetMap, group="Open Street Map") %>% 
      addProviderTiles(providers$OpenTopoMap, group="Open Topo Map") %>% 
      fitBounds(2.907730, 45.856550, 3.310954, 45.714034) %>%
      addLayersControl(
        baseGroups = c("Open Street Map", "Open Topo Map")
      )
    
  })
  
  # When "Origin" is selected, 
  # a click on the map will (re)place the origin marker.
  observeEvent(input$change_orig, {
    observeEvent(input$map_click, {
      click = input$map_click
      leafletProxy('map')%>%
        clearGroup("origin") %>%
        addMarkers(lng=click$lng, lat=click$lat, icon=origin_icon,
                   group="origin")
      })
  })
  
  # When "Destination" is selected, 
  # a click on the map will (re)place the destination marker.
  observeEvent(input$change_dest, {
    observeEvent(input$map_click, {
      click = input$map_click
      leafletProxy('map') %>%
        clearGroup("destination") %>%
        addMarkers(lng=click$lng, lat=click$lat, icon=destination_icon,
                   group="destination")
    })
  })
  
  
}

shinyApp(ui, server)

我在这里面临几个问题。

  • 如果我在单击其中一个按钮之前已经单击过地图,则应用程序将考虑之前的单击并在那里添加标记。
  • 最重要的是:即使我在单独的组中创建起点标记和目的地标记,
    clearGroup
    也会删除目的地和起点标记,并在同一位置重新创建两者。

如何确保只创建或替换一个标记而不影响另一个标记?

我怎样才能只监听按钮被选择后的点击事件?

r shiny r-leaflet
1个回答
1
投票

所以我最终选择了一个

radioButtons
而不是两个
actionButton

然后在

observeEvent
map_click
中,我使用了一个简单的
if
来检查选择了哪个单选按钮:

library(shiny)
library(shinyWidgets)
library(leaflet)
library(RColorBrewer)
library(osrm)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10,
                radioButtons(
                  'orig_dest_switch',
                  "Changer l'origine ou la destination",
                  choices = c("Origine", "Destination"),
                  choiceValues = c("orig", "dest"),
                  inline = TRUE),
  )
)

server <- function(input, output, session) {
  
  origin_icon = makeIcon("https://static.thenounproject.com/png/1477944-200.png",
                         iconWidth=24, iconHeight=30)
  destination_icon = makeIcon("https://static.thenounproject.com/png/924206-200.png",
                              iconWidth=24, iconHeight=30)
  
  
  output$map <- renderLeaflet({
    leaflet() %>% addTiles(providers$OpenStreetMap) %>%
      addProviderTiles(providers$OpenStreetMap, group="Open Street Map") %>% 
      addProviderTiles(providers$OpenTopoMap, group="Open Topo Map") %>% 
      fitBounds(2.907730, 45.856550, 3.310954, 45.714034) %>%
      addLayersControl(
        baseGroups = c("Open Street Map", "Open Topo Map")
      )
    
  })
  
  observeEvent(input$map_click, {
    click = input$map_click
    # Vérifier si l'on update le marker d'origine ou de destination
    if(input$orig_dest_switch=="Origine"){
      origin = list(lng=click$lng, lat=click$lat)
      leafletProxy('map')%>%
        clearGroup("origin") %>%
        addMarkers(lng=click$lng, lat=click$lat, icon=origin_icon,
                   group="origin")
    } else {
      destination = list(lng=click$lng, lat=click$lat)
      leafletProxy('map')%>%
        clearGroup("destination") %>%
        addMarkers(lng=click$lng, lat=click$lat, icon=destination_icon,
                   group="destination")
    }
  })
  
}

shinyApp(ui, server)
© www.soinside.com 2019 - 2024. All rights reserved.