- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在传单 map 上添加了一个工具栏,以便非编码人员可以轻松绘制标记。为此,我使用了以下 R 包:leaflet、leaflet.extras 和shiny。
我有几个问题:
1)我添加了markerOptions
(见下文)来定义红叶的图标。根据我的经验,你只能有一种选择。我的意思是,没有办法让非编码人员从您以与我相同的方式定义的几个图标中进行选择。是否有可能以其他方式实现这一点?
2)一旦您单击左下角的“样式编辑器”来编辑叶子图标(见下文),它就会切换回其固有的图标池,并且您要编辑的叶子图标将变成此中的第一个图标水池。
实际上,如果有一种方法可以将额外的图标添加到这个池中(如下右图所示),那么我的第一个问题就得到了解决。该解决方案并不严格需要在 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()),
markerOptions = filterNULL(list(markerIcon = makeIcon(iconUrl = "http://leafletjs.com/examples/custom-icons/leaf-red.png")))) %>%
setView(lat = 45, lng = 9, zoom = 3) %>%
addStyleEditor(position = "bottomleft",
openOnLeafletDraw = TRUE)
)
}
shinyApp(ui,server)
最佳答案
您可以通过以下方式在选择的 HTML 标记中列出一堆可能的图标(这里我选择 font-awesome):
1) 获取精美字体图标的完整列表
fa_list <- read_html("http://astronautweb.co/snippet/font-awesome/") %>%
html_nodes("span.icon-name") %>%
html_text()
fa_pretty <- gsub("^fa-", "", fa_list)
2) 在您的 ui
中,加载 font-awesome 字体
tags$head(
tags$link(rel = "stylesheet", href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css")
)
3) 制作一个可以显示图标选择的 UI 小部件
shinyWidgets::pickerInput("defaultIcon", "Default Marker", choices = fa_pretty,
options = pickerOptions(liveSearch = TRUE),
choicesOpt = list(icon = paste("fa", fa_list),
iconBase = "fontawesome"))
用户可以选择他/她想要的图标,并且您的工具栏可以通过编写以下内容来尊重它:
... %>%
addDrawToolbar(...,
markerOptions = list(markerIcon = makeAwesomeIcon(icon = input$defaultIcon, library = "fa"))
但是,addDrawToolbar
似乎与 leafletProxy
配合得不太好,因此,如果您更改 UI 中的标记图标,它会删除传单 map 并你必须从头开始。相反,如果您想切换图标并保留现有标记,您可以定义自己的功能来添加标记。在我看来,这是一个更灵活的解决方案,仍然可以处理您的所有 UI 和功能请求。完整示例如下:
library(shiny)
library(leaflet)
library(leaflet.extras)
library(rvest)
fa_list <- read_html("http://astronautweb.co/snippet/font-awesome/") %>%
html_nodes("span.icon-name") %>%
html_text()
fa_pretty <- gsub("^fa-", "", fa_list)
# Awesome-icon markers only support the colors below...
fa_cols <- c("red", "darkred", "lightred", "orange", "beige", "green", "darkgreen",
"lightgreen", "blue", "darkblue", "lightblue", "purple", "darkpurple",
"pink", "cadetblue", "white", "gray", "lightgray", "black")
ui <- fluidPage(
tags$head(
tags$link(rel = "stylesheet",
href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css")
),
tags$style(type = "text/css", "#map {height: calc(100vh - 20px)!important;}"),
fluidRow(
splitLayout(cellArgs = list(style = "overflow: visible;"),
shinyWidgets::pickerInput("defaultIcon", "Default Marker", choices = fa_pretty,
options = shinyWidgets::pickerOptions(liveSearch = TRUE),
choicesOpt = list(icon = paste("fa", fa_list),
iconBase = "fontawesome")),
colourpicker::colourInput("defaultColor", "Default icon color"),
colourpicker::colourInput("defaultBg", "Default marker color", palette = "limited",
allowedCols = fa_cols, returnName = TRUE, value = "red")
),
tags$div( tags$b("Place Marker"),
shinyWidgets::switchInput("edit_mode", "Edit Mode",
onLabel = "Click on the map to add a marker"))
),
leafletOutput("map")
)
server <- function(input,output,session){
react_list <- reactiveValues()
# While the user has toggled the edit-mode input, register any future map-clicks
# as reactive values.
observe({
if (input$edit_mode & !isTRUE(input$map_click$.nonce == react_list$nonce)) {
react_list$mapEditClick <- input$map_click
}
react_list$nonce <- input$map_click$.nonce
})
output$map <- renderLeaflet(
leaflet() %>%
addProviderTiles(providers$CartoDB.Positron) %>%
addMeasure(
primaryLengthUnit = "kilometers",
secondaryAreaUnit = FALSE) %>%
setView(lat = 45, lng = 9, zoom = 3)
)
# When a user clicks on the map while being in edit-mode, place a marker with
# the chosen icon, color and marker-color at the click coordinates.
observeEvent(react_list$mapEditClick, {
leafletProxy("map") %>%
addAwesomeMarkers(
lng = react_list$mapEditClick$lng,
lat = react_list$mapEditClick$lat,
layerId = as.character(react_list$mapEditClick$.nonce),
icon = makeAwesomeIcon(icon = input$defaultIcon,
library = "fa",
iconColor = input$defaultColor,
markerColor = input$defaultBg),
label = "Click to delete",
labelOptions = labelOptions(TRUE))
})
# Delete the marker when it has been clicked.
observeEvent(input$map_marker_click, {
leafletProxy("map") %>%
removeMarker(as.character(input$map_marker_click$id))
})
}
shinyApp(ui,server)
关于r - 使用 R 中的 addDrawToolbar 在传单 map 上绘制额外标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52603435/
我有一个带有 LeafletJS 的项目。 例如,我在 map 中有 2 个点 (A, B)。我将其显示为 2 个标记 我必须画一条从 A 到 B 的折线。 我移动了标记 A,我想将标记 A 的折线的
是否可以向自定义图标标记添加文本?我想避免在图像编辑器中编辑图标只是为了添加文本。 我已经像这样创建了我的自定义图标标记: var airfieldIcon = L.icon({ ic
我想要一个 Leaflet 图层控件,选中/取消选中时必须显示/隐藏主图层内的所有子图层。我还想独立检查/取消选中子层。我浏览了 Leaflet 文档和论坛,但找不到任何引用资料。我应该为此编写一个自
如何处理 Leaflet map 库中的重叠线? 我从服务器 sid 下载 geoJSON 并将其绘制到 map 上。如果有两个相同的条目,Leaflet 会绘制它们两次。这可以通过在服务器端查找完全
我在项目中使用 leafletjs。在 map 上我有几个多边形和标记。当其中一个被点击时,所有这些都有一个点击事件来显示一些信息。如果用户单击 map 的“空白”部分(而不是任何多边形或标记),我想
我正在尝试对下一个边界的外观做出预测。这是一个plunkr: https://plnkr.co/edit/sk6NRh51WZA2vpWP 这就是我让它工作的方式,但它不是很有效: const ori
我是 Leaflet 的新手,目前我正在努力学习教程。到目前为止,我设法创建了一个交互式 clorophet map ,就像示例中的 http://leafletjs.com/examples/cho
我很难弄清楚为什么我无法在 map 上绘制正确的国家/地区。我已经完成了所有代码,但我仍然不明白为什么不能正常工作。 如果您看到任何问题,请告诉我。我很欣赏。 这是数据集 Country
是否可以在使用 Stamen Toner-lite tiles 的 Leaflet map 上设置中间(2.5、3.5、4.5 等)缩放级别? ?这是我到目前为止计算缩放级别的代码: leafletm
早上、下午或晚上。 我有以下位置数据(从'Count of sampling points within a grid cell'调整) # Demo data set.seed(123) # lat
大家好,我正在开发一个具有 map 功能的网站。我的目标是,如果您单击标记,则使其拖动。 这是我的代码 else if (select1.value === "Arson"){ var note =
我正在开发一个应用程序,用户可以在其中上传KML文件,并使用Leaflet,toGeoJSON和Angular-Leaflet-Directive在屏幕上呈现路径。 我使用toGeoJSON.kml(
我需要在多边形要素中实现多色填充。填充将根据要素属性进行有条件的格式化。 假设我需要一个具有 3 色图案的多边形,如下所示: let fillPalette = ['orange', 'green',
我从 javascript 开始,并试图解决这个问题。 我希望当用户单击 map 时出现一个表单。当他们填写表单时,我想在该位置创建一个标记,并将该标记的弹出内容设置为表单中的值。添加表单完成后,我还
我已经在地理服务器中发布了一个功能,我可以通过传单及其 basemap 成功访问该功能。现在我需要在弹出窗口中获取feature onclick的属性信息。 我按原样使用了示例( https://gi
我正在使用带有一些标记的传单 map 。我还有一个侧边栏,可以在其中看到标记的名称,如果单击标记的名称, map 将缩放到标记的 lnglat。它已经可以工作,但我的问题是,当我刷新页面并在侧边栏中选
我正在使用 Leaflet 和 Mapbox,我想设置 map 的 View : 所有标记均可见 中心设置为特定点 使用 setView 和 fitbounds 单独完成每个点很容易,但我不知道如何同
是否有所有潜在 map 源的列表?在示例页面上,可以浏览四种类型的 map 。外面还有什么? http://tombatossals.github.io/angular-leaflet-directi
我正在使用 Leaflet 制作交互式 map 。我在 map 上有标记(基于其经度和纬度坐标),并且我希望某些标记具有与其他标记不同的颜色。例如,某些坐标我给它的分数是“10”,我希望它是粉红色的,
我可能忽略了如何在 map 上更改 LeftletJS 的光标。 http://leafletjs.com/reference.htm 我尝试设置map_div.style.cursor = 'cro
我是一名优秀的程序员,十分优秀!