javascript - 如何使用切换后的 Leaflet 图层组中的标记填充选区

Question

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

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 属于哪个图层组，然后打开其弹出窗口。

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

然后只需检查标记是否在 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);
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输入的内容，使其仅列出 map 上图层组的标记(通过图层控件选择的标记)，您只需要听至 "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/