gpt4 book ai didi

css - 传单中两组的自定义markerCluster

转载 作者:行者123 更新时间:2023-12-05 06:49:46 27 4
gpt4 key购买 nike

假设 data.frame 的列“group”具有唯一值“group1”和“group2”。在传单中,我们可以使用 ColorFactor() 为这些组分配颜色。我们还可以使用最少的 CSS 更改 markerCluster 颜色。

我们如何为每个组的 ma​​rkerClusters 分配不同的颜色?换句话说,我希望“group1”中点的所有标记簇都是“海军”,并且“group2”中点的所有标记簇在所有缩放级别都是“红色”,甚至是单个点。

在 Rmd 文件中:

---
output: html_document
---

<style>
.marker-cluster-small {
background-color: green;
}
.marker-cluster-small div {
background-color: green;
}
.marker-cluster-medium {
background-color: green;
}
.marker-cluster-medium div {
background-color: green;
}
.marker-cluster-large {
background-color: green;
}
.marker-cluster-large div {
background-color: green;
}
</style>

```{r}
library(leaflet)
library(magrittr)
quakes$group <- sample(c("group1", "group2"), 1000, replace = TRUE)
pal_group <- colorFactor(c("navy", "red"), c("group1", "group2"))

leaflet() %>%
addTiles() %>%
addCircleMarkers(
lng = quakes$long,
lat = quakes$lat,
clusterOptions = markerClusterOptions(),
color = pal_group(quakes$group)
)


最佳答案

看来您可能对该答案感兴趣:Prevent multiple markerClusterGroup icons from overlapping in Leaflet

使用 2 个单独的 MarkerClusterGroups 可能不合适,通常情况下某些点位于附近的位置,但适用于不同的组。在这种情况下,Leaflet.markercluster 可能会在同一位置显示 2 个独立的集群,彼此重叠(这正是我们首先要通过使用集群来避免的)。

为了仍然显示给出每个类别的子标记数量提示的集群,我们必须自定义集群图标。链接的答案提出了这样的自定义功能:

Screenshot of Leaflet.markercluster with customized cluster icons for each category

function customClusterIcon(cluster) {
// Count number of markers from each category.
var markers = cluster.getAllChildMarkers();
var cat1count = 0;
var cat2count = 0;
for (var marker of markers) {
var category = marker.options.category;
if (category && category === 'cat2') {
cat2count += 1;
} else {
cat1count += 1;
}
}
// Generate the cluster icon depending on presence of Markers from different categories.
if (cat2count === 0) {
return L.divIcon({
html: cat1count,
className: 'cat1cluster cluster',
iconSize: [20, 20]
});
} else if (cat1count === 0) {
return L.divIcon({
html: cat2count,
className: 'cat2cluster cluster',
iconSize: [20, 20]
});
} else {
return L.divIcon({
html: `
<div class="cat1cluster cluster">${cat1count}</div>
<div class="cat2cluster cluster">${cat2count}</div>
`,
className: '',
iconSize: [45, 20]
});
}
}

var paris = [48.86, 2.35];
var parisLeft = [48.86, 2.25];
var parisRight = [48.86, 2.45];
var map = L.map('map', {
maxZoom: 18
}).setView(paris, 11);

var mcg = L.markerClusterGroup({
iconCreateFunction: customClusterIcon
}).addTo(map);
var category1 = L.layerGroup();
var category2 = L.layerGroup();

var cat2style = {
color: 'red',
category: 'cat2'
};

var markerA = L.circleMarker(paris).addTo(category1);
var markerB = L.circleMarker(paris).addTo(category1);
var markerC = L.circleMarker(paris, cat2style).addTo(category2);
var markerD = L.circleMarker(paris, cat2style).addTo(category2);

var markerE = L.circleMarker(parisLeft).addTo(category1);
var markerF = L.circleMarker(parisLeft).addTo(category1);

var markerG = L.circleMarker(parisRight, cat2style).addTo(category2);
var markerH = L.circleMarker(parisRight, cat2style).addTo(category2);

mcg.addLayers([category1, category2]);


L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
html,
body,
#map {
height: 100%;
margin: 0;
}

.cat1cluster {
background-color: #3388ff;
}

.cat2cluster {
background-color: red;
}

.cluster {
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
}
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js"></script>


<div id="map"></div>

关于css - 传单中两组的自定义markerCluster,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66522257/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com