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

不幸的是，代码工作不正确。标记添加到地图两次。第一次在集群中，第二次分开。我无法找到它发生的地方。此外，我必须在基本图层组和叠加层之间切换。即我只需要两个按钮“first”和“second”而不是基本图层的单选按钮和叠加的复选框。

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

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

有人可以告诉我，我做错了吗？

Answer 1

我为你创建了一个样本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>");
  }
});

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

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

1 个答案: