如何在leaflet地图上添加文本？

Question

如何在leaflet地图上添加文本？

12

每天我需要在地图上画出路径，并添加一个文本，如4、5或8分钟，表示从起点到终点需要多长时间（如下图所示）。我认为使用 Leaflet 在 R 中创建一个 Shiny 应用程序会很有帮助（代码如下所示）。

我使用 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)

- BRCN

你考虑过使用弹出窗口吗？https://rstudio.github.io/leaflet/popups.html? 你可以使用HTML样式来设置文本，并使用纬度/经度指定位置... - Tonio Liebrand

我已经考虑了你的建议。非常感谢，但正如问题中所解释的，这个应用程序将由非编码人员使用，使用弹出窗口在传单地图上放置文本需要事先进行编码。 - BRCN

你能否创建一个用户输入文本框，并使用它来填充弹出窗口？ - conv3d

您还需要纬度和经度数据才能使用弹出窗口或添加标签标记(这是另一种选择)，而不仅仅是文本。我想为那些希望尽可能少地付出努力、不想关心纬度和经度值的人实现这样的应用程序。 - BRCN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chrisss · Accepted Answer

一种实现这个功能的方法是，在叶子地图上双击时提示用户添加文本。双击坐标确定文本放置位置，弹出式提示确定文本内容。

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)