传单:如何使用聚类从不同图层的下拉菜单中选择标记

Leaflet: how to select the markers from drop down menu on different layers with clustering

本文关键字：下拉菜单 选择 图层 何使用 聚类 传单      更新时间：2023-09-26

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

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);

不幸的是，代码工作不正确。添加到地图的标记两次。第一次在集群中，第二次单独。而且我找不到它发生的点。此外，我必须在基础图层和叠加层组之间切换。即我只需要两个按钮"第一"和"第二"，而不是用于基础层的单选按钮和用于叠加的复选框。

使用标记群集插件选择一层效果很好。在这里：http://jsfiddle.net/anton9ov/atd1pr23/

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

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

我为您创建了一个示例 http://jsfiddle.net/px9LyL87/6/地图包含一个底图图层和两个标记聚类图层。

// 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);
如果同时提供底图图层，

则控件中将有用于这些图层的单选按钮，这就是其工作原理，一次只能显示一个底图。您可以打开/关闭标记图层。添加和移除标记图层将导致更新选择下拉列表。

// 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>");
  }
});

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

相关文章：