javascript - Leaflet:如何通过聚类从不同图层的下拉菜单中选择标记

Question

我在几层上有很多标记。标记位于一个相当小的区域。这就是我使用 MarkerCluster 插件的原因

var markerClusterLayer = L.markerClusterGroup();

我必须能够在图层之间切换，并能够从下拉列表中选择特定标记。这是我的代码的一部分来实现它:

var selector = L.control({
  position: 'topleft'
});

selector.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'mySelector');
  div.innerHTML = '<select id = "marker_select"><option value = "init">(деревни)</option></select>';
  return div;
};

selector.addTo(map);

var marker_select = L.DomUtil.get("marker_select");

var allMarkers = L.layerGroup();

function fillSelect (layer) {
    var optionElement = document.createElement("option");
  optionElement.innerHTML = layer.feature.properties.name;
  optionElement.value = L.stamp(layer);
  marker_select.appendChild(optionElement);
  allMarkers.addLayer(layer);
}

firstMarkerLayer.eachLayer(fillSelect);

map.on ('overlayadd', function (eventLayer) {
    var selectedLayer = eventLayer.layer;
    marker_select.innerHTML = '<option value = "init">(деревни)</option>';
    selectedLayer.eachLayer(fillSelect);
});

L.DomEvent.addListener(marker_select, 'click', function(e) {
  L.DomEvent.stopPropagation(e);
});

L.DomEvent.addListener(marker_select, 'change', changeHandler);

function changeHandler (e) {
    if (e.target.value == "init") {
        map.closePopup();
    } else {
        var selected = allMarkers.getLayer(e.target.value);
        if (map.hasLayer(selected)) {
            markerClusterLayer.zoomToShowLayer(selected, function() {
                selected.openPopup();
            })
        }
    }
};

markerClusterLayer.addLayer(allMarkers);

map.addLayer(markerClusterLayer);

不幸的是，代码运行不正确。标记添加到 map 上两次。第一次是集群，第二次是分开。而且我找不到它发生的点。另外，我必须在基础层和覆盖层组之间切换。 IE。我只需要两个按钮“第一”和“第二”，而不是基础层的单选按钮和覆盖层的复选框。

使用 MarkerCluster 插件选择一层效果很好。这里是: http://jsfiddle.net/anton9ov/atd1pr23/

但是我无法通过聚类来组织不同层的选择...这里是完整的损坏代码: http://jsfiddle.net/anton9ov/pgpLg5zw/

谁能告诉我，我做错了什么？

Answer 1

我已经为您创建了一个示例 http://jsfiddle.net/px9LyL87/6/有一张 map ，其中包含一个 basemap 图层和两个标记簇图层。

// Create marker layers
var markerLayer1 = L.markerClusterGroup({
    id: "markerLayer1"
});
var markerLayer2 = L.markerClusterGroup({
    id: "markerLayer2"
});

对于图层仅控制和提供标记图层。

// Add controls to the map
L.control.layers({}, {
    "Marker 1": markerLayer1,
    "Marker 2": markerLayer2
}).addTo(map);

如果您还提供 basemap 图层，则控件中将会有它们的单选按钮，这就是它的工作原理，您一次只能显示一张 basemap 。您可以打开/关闭标记层。添加和删​​除标记层将导致选择下拉列表的更新。

// Handle map layeradd event
map.on("layeradd", function(e) {
    // Handle only marker layers
    if((e.layer.options.id != "markerLayer1") && (e.layer.options.id != "markerLayer2")) {
    return;
  }

  // For the currently added layer (which is one with markers)
  // get all its layers
  var markers = e.layer.getLayers();

  // Get the dropdown
  var mySelector = $("#mySelector");

  // Add options to the dropdown menu
  for(var i = 0; i < markers.length; i++) {
    mySelector.append("<option value='" + L.stamp(markers[i]) + "'>" + markers[i].feature.properties.name + "</option>");
  }
});

在这些处理程序中，我只是检查当前添加/删除的图层是否是带有标记的图层，并根据它在选择下拉列表中添加或删除项目。我希望，这就是你想要的。如果没有请告诉我。