我在几层上有很多标记。标记位于一个相当小的区域。这就是我使用 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);
不幸的是,代码运行不正确。标记添加到 map 上两次。第一次是集群,第二次是分开。而且我找不到它发生的点。另外,我必须在基础层和覆盖层组之间切换。 IE。我只需要两个按钮“第一”和“第二”,而不是基础层的单选按钮和覆盖层的复选框。
使用 MarkerCluster 插件选择一层效果很好。这里是: http://jsfiddle.net/anton9ov/atd1pr23/
但是我无法通过聚类来组织不同层的选择...这里是完整的损坏代码: http://jsfiddle.net/anton9ov/pgpLg5zw/
谁能告诉我,我做错了什么?
最佳答案
我已经为您创建了一个示例 http://jsfiddle.net/px9LyL87/6/ 有一张 map ,其中包含一个 basemap 图层和两个标记簇图层。
// 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);
如果您还提供 basemap 图层,则控件中将会有它们的单选按钮,这就是它的工作原理,您一次只能显示一张 basemap 。您可以打开/关闭标记层。添加和删除标记层将导致选择下拉列表的更新。
// 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>");
}
});
在这些处理程序中,我只是检查当前添加/删除的图层是否是带有标记的图层,并根据它在选择下拉列表中添加或删除项目。我希望,这就是你想要的。如果没有请告诉我。
关于javascript - Leaflet:如何通过聚类从不同图层的下拉菜单中选择标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36133080/