Leaflet markercluster:如何创建带有编号标记的markercluster?

时间:2016-08-19 14:09:15

标签: javascript leaflet markerclusterer leaflet.markercluster

我正在尝试创建一个带有ID标记的markercluster,因为我后来想从地图中删除一个标记。但是,我甚至无法将这些标记的标记显示在地图上。我是从geoJSON格式的变量individualPoints加载它们的。我可以使用以下代码段直接将这些标记添加到地图中:

// create object to save markers
var markersID = {};

// exchanges latitude & longitude
function switchLatLong(oldLocation) {
  return new L.LatLng(oldLocation[1], oldLocation[0]);
}

var geoJsonLayer = L.geoJson(individualPoints, {
  onEachFeature: function(feature, layer) {
    /* can add directly to the map--this works */
    markersID[feature.properties.id] = 
        L.marker(switchLatLong(feature.geometry.coordinates))
            .addTo(map);
  }
});

但我希望它们在群集中,所以我认为我需要用ID标记每个标记(如this question中所示),然后将此组添加到群集中,如下所示:

var geoJsonLayer = L.geoJson(individualPoints, {
  onEachFeature: function(feature, layer) {
    /* tag the marker with the id */
    markersID[feature.properties.id] = 
        L.marker(switchLatLong(feature.geometry.coordinates));
  }
});

// create a marker cluster group, and add the markers to this.
var markers = L.markerClusterGroup({});
/* here's where I'm trying to toggle to use the markers with ID numbers */
//markers.addLayer(geoJsonLayer); // this works
markers.addLayers(markersID);   // this doesn't

添加geoJsonLayer效果很好,但添加markersID并不合适。所以我必须错误地添加markersID。 这是一个jsfiddle。 https://jsfiddle.net/anfw0n6w/

问题:有没有更好的方法来创建具有我以后可以参考的ID的标记?我怎样才能将markersID添加到markerClusterGroup?

1 个答案:

答案 0 :(得分:3)

  

有没有更好的方法来创建具有我以后可以参考的ID的标记?

有一些方法可行: - )

  

我还能如何将markersID添加到markerClusterGroup?

由于您的markersID是普通对象,因此您不能。 addLayer接受标记或图层组(例如L.geoJson),addLayers接受标记数组

不要混淆以后引用标记的需要,需要将它们添加到Marker Cluster Group。

在您的onEachFeature内,您{em>重复在markersID中复制您的标记(创建新标记),而不是保留对同一{{1}的引用}由layer构建。如果您仅保留对L.geoJson的引用,那么您可以直接引用这些标记,并且可以直接将layer图层组添加到标记群集组:

L.geoJson

演示:https://jsfiddle.net/anfw0n6w/1/