R的传单中的方形标记
在JS传单中，您可以创建一个方形的divIcon，颜色由您选择，例如这个方形紫色标记： 如何在R的传单中实现这一点？附加问题：颜色如何依赖于geojson数据的属性值？在这里的示例中，值名称是“value” 下面是一份MVE for JS手册，我想在R中复制一下：R的传单中的方形标记,r,shiny,leaflet,r-leaflet,R,Shiny,Leaflet,R Leaflet,在JS传单中，您可以创建一个方形的divIcon，颜色由您选择，例如这个方形紫色标记： 如何在R的传单中实现这一点？附加问题：颜色如何依赖于geojson数据的属性值？在这里的示例中，值名称是“value” 下面是一份MVE for JS手册，我想在R中复制一下： <html> <head> <title>A Leaflet map!</title> <link rel="stylesheet" href="https://unpk
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin="">
</script>
<script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<style>
body {margin: 0}
#map{
height: 100%;
background-color: #FFF;
}
.layer-1-icon {
background-color: #bf00ff;
}
.layer-1-label {
background-color: rgba(255,255,255,0.8);
box-shadow: none;
color: #282828;
padding: 2px;
border: none;
font-weight: 700;
font-size: 14px;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 0px;
background: transparent;
content: "";
}
</style>
</head>
<body>
<div id="map"></div>
<!-- IMPORT OUR GEOJSON FILES -->
<script>
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [9.400038162145233,56.09709088979111]
},
"properties": {
"Value": 76205,
"Name": "A transformer"
},
"id": 0
}]}
</script>
<script>
// initialize the map
var map = L.map('map').setView([56.09709088979111, 9.400038162145233], 10);
// load a tile layer (docs here: https://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html)
var esri_streets = L.esri.basemapLayer("Streets").addTo(map);
lyr1 = L.geoJSON(data, {
//minZoom: 10, <- Min zoom is NOT available for geoJSON layers. We need to control this ourselves in our map.on zoomend function
onEachFeature: function (f, l) {
l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
l.bindTooltip(f.properties.Name.toString(), {
permanent: false,
className: 'layer-1-label',
})
},
pointToLayer: function(feature, latLng) {
return L.marker(latLng, {
icon: L.divIcon({
className: "layer-1-icon",
iconSize: 14,
})
})
}
}).addTo(map);
</script>
</body>
</html>
单张地图！
正文{页边距：0}
#映射{
身高：100%；
背景色：#FFF；
}
.第1层图标{
背景色：#bf00ff；
}
.第1层标签{
背景色：rgba（255255,0.8）；
盒影：无；
颜色:#282828 ;；
填充：2px；
边界：无；
字号：700；
字体大小：14px；
}
.传单工具提示顶部：之前，
.传单工具提示底部：之前，
.左侧传单工具提示：之前，
.传单工具提示右侧：之前{
位置：绝对位置；
指针事件：无；
边界：0px；
背景：透明；
内容：“；
}
风险值数据={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[9.400038162145233,56.09709088979111]
},
“财产”：{
“价值”：76205，
“名称”：“变压器”
},
“id”：0
}]}
//初始化映射
var map=L.map（'map'）.setView（[56.09709088979111,9.400038162145233]，10）；
//加载平铺层（此处的文档：https://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html)
var esri_streets=L.esri.basemapLayer（“街道”）.addTo（地图）；
lyr1=L.geoJSON（数据{
//minZoom:10，从这个例子中循环使用。我们只需要创建一个图标，然后将它作为参数传递到函数addMarkers
中
图书馆（传单）
#资料
种子集（2015年）
lat1=36+runif（n=5，最小值=-1，最大值=1）
lon1=-115+runif（n=5，最小值=-1，最大值=1）
lat2=35+runif（n=5，最小值=-0.5，最大值=0.5）
lon2=-110+runif（n=5，最小值=-0.5，最大值=0.5）
lat3=34+runif（n=5，最小值=-0.5，最大值=0.5）
lon3=-112+runif（n=5，最小值=-0.5，最大值=0.5）
数据_all=rbind(
数据帧(
经度=1，
纬度=纬度1，
组=1
),
数据帧(
经度=2，
纬度=纬度2，
组=2
),
数据帧(
经度=3，
纬度=纬度3，
组=3
)
)
#图标
方绿色%
传单（）%>%
addTiles（）%>%
添加标记(
lng=经度，
纬度=~纬度，
图标=~square\u绿色
)
它对您有用吗？
library(shiny)
library(leaflet)
library(geojsonio)
library(jsonlite)
# Define UI for application that draws a histogram
ui <- fluidPage(
leafletOutput("mymap",width="100%"),
tags$head(tags$style(HTML(
".layer-1-icon {
background-color: #bf00ff;
}"
)))
)
data <- data.frame(name='A transformer',lat=56.097,lon=9.400,
value= 76205, `Voltage level`= 60000)
geojson_data <- geojson_sp(geojson_list(data, lat='lat', lon='lon'))
server <- function(input, output) {
leaflet() %>% addTiles() %>%
setView(9.4, 56.3, 8 ) %>%
addMarkers(data=geojson_data,
layerId = 1, group='Stationer',
label = ~name,
labelOptions = labelOptions(permanent=F),
clusterOptions = markerClusterOptions(
iconCreateFunction = JS("
function(cluster) {
return new L.DivIcon({
html: '<div><span>' + cluster.getChildCount() + '</div><span>',
className: 'layer-1-icon'
});
}
")
)
)
}
shinyApp(ui = ui, server = server)
library(leaflet)
# data
set.seed(2015)
lat1 = 36 + runif(n = 5, min = -1, max = 1)
lon1 = -115 + runif(n = 5, min = -1, max = 1)
lat2 = 35 + runif(n = 5, min = -0.5, max = 0.5)
lon2 = -110 + runif(n = 5, min = -0.5, max = 0.5)
lat3 = 34 + runif(n = 5, min = -0.5, max = 0.5)
lon3 = -112 + runif(n = 5, min = -0.5, max = 0.5)
data_all = rbind(
data.frame(
Longitude = lon1,
Latitude = lat1,
Group = 1
),
data.frame(
Longitude = lon2,
Latitude = lat2,
Group = 2
),
data.frame(
Longitude = lon3,
Latitude = lat3,
Group = 3
)
)
# icon
square_green <-
makeIcon(iconUrl = "https://www.freeiconspng.com/uploads/green-square-1.png",
iconWidth = 18,
iconHeight = 18)
# map
data_all %>%
leaflet() %>%
addTiles() %>%
addMarkers(
lng = ~ Longitude,
lat = ~ Latitude,
icon = ~ square_green
)