使用Leaflet SuperCluster时,有没有办法更改默认标记图标?
我按照演示中给出的示例。我能够使Supercluster工作并能够创建集群。但是单个标记具有默认的传单标记图标,该图标来自示例中的方法createClusterIcon。
我有不同类型的标记,并希望每个标记都有不同的图标。
Supercluster使用具有函数pointToLayer的geoJSON层来创建集群图标。我们如何修改或自定义它以创建群集图标,并为每个标记设置自定义图标?
createClusterIcon方法 -
function createClusterIcon(feature, latlng) {
if (!feature.properties.cluster) return L.marker(latlng);
var count = feature.properties.point_count;
var abbrev = feature.properties.point_count_abbreviated;
var size =
count < 100 ? 'small' :
count < 1000 ? 'medium' : 'large';
var icon = L.divIcon({
html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
className: 'marker-cluster marker-cluster-' + size,
iconSize: L.point(40, 40)
});
return L.marker(latlng, {icon: icon});}
添加到地图的geoJSON图层
var markers = L.geoJson(null, {
pointToLayer: createClusterIcon}).addTo(map);
使用addData方法将标记添加到geoJSON图层
markers.clearLayers();
markers.addData(e.data);
答案 0 :(得分:1)
对代码的更有针对性的理解解决了这个问题。
createClusterIcon函数中的if条件,当函数没有集群属性时返回L.marker,应该用于创建自定义图标。
我更改了if条件如下:
if (!feature.properties.cluster) {
let icon = L.icon({
iconUrl: '<icon_url>',
iconSize: [40,40]
})
return L.marker(latlng, {
icon: icon
});
}
现在每个标记都有iconUrl表示的图标。