如何使用切换的 Leaflet 图层组中的标记填充 select

Question

我的传单地图上有两个图层组。

var firstMarkerLayer = L.geoJson(firstGroup, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.name);
  }
});

var secondMarkerLayer = L.geoJson(secondGroup, {
  onEachFeature: function(feature, layer) {
    layer.bindPopup(feature.properties.name);
  }
});

var overlays = {
  "first" : firstMarkerLayer,
  "second" : secondMarkerLayer
};

我还有一个代码，可以从下拉列表中选择第一层上的标记并显示相应的工具提示。

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">(places)</option></select>';
  return div;
};

selector.addTo(map);

firstMarkerLayer.eachLayer(function(layer) {
  var optionElement = document.createElement("option");
  optionElement.innerHTML = layer.feature.properties.name;
  optionElement.value = layer._leaflet_id;
  L.DomUtil.get("marker_select").appendChild(optionElement);
});

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

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 {
    firstMarkerLayer._layers[e.target.value].openPopup();
  }
}

但它只适用于一层。有人可以建议我如何完成我的代码以实现具有任何选定重叠层的所有功能吗？

这是我的代码：http://jsfiddle.net/anton9ov/y4o7oxbu/

Answer 1

如果我的理解是正确的，你想用覆盖图层组 firstMarkerLayer 和 secondMarkerLayer 中所有标记的名称填充你的 select，它会打开通过图层控件选择适当的叠加层时标记的弹出窗口？

在这种情况下，您只需重复使用 eachLayer 的步骤，在其中为 secondMarkerLayer.

填写 select

在您的 changeHandler 侦听器中，您需要首先检查所选图层（标记）id 属于哪个图层组，然后打开其弹出窗口。

您可以通过将您的个人标记添加到第 3 层组（当然，您不添加到地图来避免寻找父层组），只是为了受益于 .getLayer(id) 方法。

然后只需检查标记是否在地图上，然后打开它的弹出窗口。

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);
secondMarkerLayer.eachLayer(fillSelect);

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

已更新 JSFiddle：http://jsfiddle.net/y4o7oxbu/15/

编辑：

至于还要更改 select 输入的内容，以便它仅列出地图上图层组的标记（通过图层控制选择的图层组），您只需要听"baselayerchange" event，清空 select 输入并用 fillSelect 填充。

map.on ('baselayerchange', function (eventLayer) {
  var selectedLayer = eventLayer.layer;
  marker_select.innerHTML = '<option value = "init">(places)</option>';
  selectedLayer.eachLayer(fillSelect);
});

已更新 JSFiddle：http://jsfiddle.net/toj5wyt6/24/

如何使用切换的 Leaflet 图层组中的标记填充 select

How to fill a select with markers from switched Leaflet layer groups

javascript

leaflet