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

如果我的理解是正确的，您希望在select中添加所有标记的名称，覆盖图层组firstMarkerLayer和secondMarkerLayer，并打开标记＆＃ 39;通过图层控件选择适当的叠加层时弹出窗口？

在这种情况下，您只需要使用eachLayer重复该步骤，然后填充select 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输入的内容，以便它仅列出地图上图层组的标记（通过图层控件选择的标记），您只需要听{{{ 3}}，清空select输入并用fillSelect填充回来。

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

更新了JSFiddle："baselayerchange" event

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

1 个答案: