Question

我有一个Leaflet.js地图，其中列出了华盛顿州斯波坎过去10年的所有汽车死亡人数：https://codepen.io/dangayle/pen/NMJRLQ

const map = L.map('mapid').setView([47.657754, -117.426300], 11);
const accessToken = "pk.eyJ1IjoiZGFuZ2F5bGUiLCJhIjoiY2ltd2c4NWR3MDM4MnZxbHVjeHhlM2I4YiJ9.WN9nil2nsgakEItZXuQd_A"

function button(label, container) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}

const tiles = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 16,
    id: 'mapbox.streets',
    accessToken: accessToken
}).addTo(map);

const markers = L.markerClusterGroup({
  maxClusterRadius: 100
});

axios.get('https://spokesmanreview.s3.amazonaws.com/crash-data/three-plus-vehicles.geojson')
  .then(function (response) {
    const features = response.data.features
    for ( let i=0; i < features.length; i++ ){
      const row = features[i];
      const title = row['properties']["REPORT NUMBER"];
      const marker = L.marker(new L.LatLng(row['geometry']['coordinates'][1], row['geometry']['coordinates'][0]), { title: title });
      markers.addLayer(marker)
    }
    map.addLayer(markers);

  })
  .catch(function (error) {
    console.log(error);
  });

我们对隔离地图上的热点，特定交叉点处的事件簇感兴趣。我需要过滤掉无关的标记，以便更轻松地发现那些热点。

如何从leaflet.markercluster中删除maxZoom群集中不适合的标记以及其他小型（n <5）群集？

Answer 1

快速而肮脏的方法是创建不可见的标记，而不是删除它们。例如：

// In your CSS
.invisible-marker {
    display: none;
}

// In your JS
marker = L.marker([lat,lng], {icon:
  L.divIcon({
    className: 'invisible-marker'
  })
}).addTo(myClusterGroup);

这将使您的单个标记不可见。对于小型团体，请利用Leaflet.Markercluster的iconCreateFunction选项，例如：

var myClusterGroup = L.markerClusterGroup({
        iconCreateFunction: function (cluster) {
            var markerCount = cluster.getAllChildMarkers().length;

            if (markerCount <= 5) {
                return L.divIcon({ className: 'invisible-marker' });
            } else {
                 // Return your default cluster icon here
            }
        }
});

请记住查看有关L.DivIcon的Leaflet文档以及iconCreateFunction的Leaflet.MarkerCluster示例。

如何从不适合集群的leaflet.markercluster中删除标记和组？

1 个答案: