如何在传单地图上添加文字？

Question

每天我都需要在地图上绘制一条路径并添加一个文本，例如 4、5 或 8 分钟。表示从起点到目的地的车程（见下图）。我认为在 R 中使用 Leaflet 创建一个闪亮的应用程序会很有帮助（代码如下所示）。

我使用 leaflet.extras 包中的 addDrawToolbar 来绘制路径，如所附地图所示。但我不知道也找不到如何以与绘制路径相同的方式添加文本。解决方案不一定必须在 R 中。我的目标是为那些想做这些事情但同时不知道如何编码的人创建一个应用程序。

library(shiny)
library(leaflet)
library(leaflet.extras)


ui = fluidPage(
      tags$style(type = "text/css", "#map {height: calc(100vh - 20px) 
      !important;}"),
      leafletOutput("map")
      )

server = function(input,output,session){
             output$map = renderLeaflet(
                 leaflet()%>%

         addTiles(urlTemplate = "http://mt0.google.com/vt/lyrs=m&hl=en&x= 
              {x}&y={y}&z={z}&s=Ga")%>%

         addMeasure(
              primaryLengthUnit = "kilometers",
              secondaryAreaUnit = FALSE
         )%>%

         addDrawToolbar(
              targetGroup='draw',

              editOptions = editToolbarOptions(selectedPathOptions = 
                    selectedPathOptions()),

              polylineOptions = filterNULL(list(shapeOptions = 
                    drawShapeOptions(lineJoin = "round", weight = 8))),

              circleOptions = filterNULL(list(shapeOptions = 
                    drawShapeOptions(),
                    repeatMode = F,
                    showRadius = T,
                    metric = T,
                    feet = F,
                    nautic = F))) %>%
        setView(lat = 45, lng = 9, zoom = 3) %>%
        addStyleEditor(position = "bottomleft", 
                 openOnLeafletDraw = TRUE)
 )
}

 shinyApp(ui,server)

Answer 1

这样做的一种方法是提示用户在双击传单地图时添加文本。双击坐标处理放置文本的位置，弹出提示处理文本应该说的内容。

library(shiny)
library(leaflet)
library(leaflet.extras)

server = function(input,output,session){

  # Create reactive boolean value that indicates a double-click on the leaflet widget
  react_list <- reactiveValues(doubleClick = FALSE, lastClick = NA)
  observeEvent(input$map_click$.nonce, {
    react_list$doubleClick <- identical(react_list$lastClick, input$map_click[1:2])
    react_list$lastClick   <- input$map_click[1:2]
  })

  # Upon double-click, create pop-up prompt allowing user to enter text
  observeEvent(input$map_click[1:2], {
    if (react_list$doubleClick) {
      shinyWidgets::inputSweetAlert(session, "addText", title = "Add text:")
    }
  })

  # Upon entering the text, place the text on leaflet widget at the location of the double-click
  observeEvent(input$addText, {
    leafletProxy("map") %>% 
      addLabelOnlyMarkers(
        input$map_click$lng, input$map_click$lat, label = input$addText, 
        labelOptions = labelOptions(noHide = TRUE, direction = "right", textOnly = TRUE,
                                    textsize = "15px"))
  })

  # Clear out all text if user clears all layers via the toolbar
  observeEvent(input$map_draw_deletestop, {
    if ( length(input$map_draw_all_features$features) < 1 ) {
      leafletProxy("map") %>% clearMarkers()
    }
  })

  output$map <- renderLeaflet({
    leaflet(options = leafletOptions(doubleClickZoom = FALSE)) %>%
      addProviderTiles(providers$CartoDB.Positron) %>% 
      addMeasure(
        primaryLengthUnit = "kilometers",
        secondaryAreaUnit = FALSE) %>%
      addDrawToolbar(
        targetGroup     ='draw',
        editOptions     = editToolbarOptions(selectedPathOptions = selectedPathOptions()),
        polylineOptions = filterNULL(list(shapeOptions = drawShapeOptions(lineJoin = "round", weight = 8))),
        circleOptions   = filterNULL(list(shapeOptions = drawShapeOptions(), repeatMode = F, showRadius = T,
                                          metric = T, feet = F, nautic = F))) %>%
      setView(lng = -73.97721, lat = 40.7640, zoom = 15)
  })
}

shinyApp(ui = fluidPage( leafletOutput("map") ) , server)