如何使用切换的传单图层组中的标记填充选择

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

本文关键字：图层 填充 选择 何使用 单图层      更新时间：2023-09-26

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

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/

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

在这种情况下，您只需要在填充select eachLayer重复该步骤即可 secondMarkerLayer .

在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"事件，清空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/

相关文章：