缩小地图时聚合的传单标记答案

【问题标题】：Leaflet markers aggregating when dezooming the map缩小地图时聚合的传单标记
【发布时间】：2021-10-29 15:43:41
【问题描述】：

我是 Leaflet 的新手，我正在尝试显示带有标记的地图。

我遇到的问题是当我缩小时标记消失了，并被一个数字代替：

我使用 CircleMarkers 来设置每个标记的颜色，这样无论缩放级别如何，标记都保持其大小。我使用 markercluster 添加标记，因为我希望能够轻松删除它们。

<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>


function addMarkers(data){


// setup a marker group
markerList = L.markerClusterGroup();



for (var i = 0; i < data.length; i++){
    var circleColor = getcolor(data[i].roundScore);
    var circle = L.circleMarker([data[i].solutionLat, data[i].solutionLng], {
    color: circleColor,
    fillColor: circleColor,
    fillOpacity: 0.5,
    radius: 5
    });

    circle.bindPopup("Score : " + data[i].roundScore + "\n Address :" + data[i].address);
    markerList.addLayer(circle);

}
window.mapMark.addLayer(markerList);

}

function deleteMarkers(){
if(markerList) {
    markerList.clearLayers();
}

}

我不知道如何改变这种行为，以及它是链接到标记本身还是链接到我使用的图块，即 openstreetmap：

const attribution =
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

  const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  const tiles = L.tileLayer(tileUrl, { attribution });
  tiles.addTo(mapMark);

}

任何帮助或提示将不胜感激。非常感谢:)

【问题讨论】：

标签： javascript leaflet openstreetmap leaflet.markercluster

【解决方案1】：

您的圆形标记消失并被数字替换是 Leaflet.markercluster 的预期效果。如果您也包含了插件 CSS 文件，这些数字将出现在绿色/黄色/橙色气泡中。

要避免这种集群，但仍然能够一次删除所有标记，只需使用基本层组而不是 MarkerClusterGroup：

https://leafletjs.com/reference-1.7.1.html#layergroup

用于将多个图层分组并作为一个图层处理。

markerList = L.layerGroup();

// you can also clear layers of a basic Layer Group
markerList.clearLayers();

【讨论】：