Question

我创建了一个传单地图，以在单独的垂直层中显示一些geoJSON数据。

它工作正常，除了层控件将不按顺序列出选项，即“层0，层2，层1”而不是“层0，层1，层2”。数据是通过AJAX调用加载的，因此这些图层会按照调用完成的顺序添加到控件中，即基本上是随机的。

根据图层控件[https://leafletjs.com/reference-1.3.0.html#control-layers的文档，如果sortLayers设置为true，则默认设置是按名称对图层进行排序，但这似乎没有发生。

因此，我尝试显式传递排序函数，但该文档并未给出应显示什么样的示例。

当我的代码如下：

var layerControlOptions = {
    hideSingleBase : true,
    autoZIndex : true,
    sortLayers: true}
var layerControl = L.control.layers(null, null, layerControlOptions).addTo(map);

该控件如下所示：

layer control with sortLayers: true and no sortFunction being defined

我最好的猜测是编写自己的排序功能：

var layerControlOptions = {
    hideSingleBase : true,
autoZIndex : true,
sortLayers: true,
sortFunction: function(layerA, layerB, nameA, nameB){return 
[nameA,nameB].sort();}}
var layerControl = L.control.layers(null, null, 
layerControlOptions).addTo(map);

由此，图层名称的显示顺序与未指定功能时的顺序相同。不知道我是写错了它，还是只是等同于默认值，由于某种原因它返回了错误的顺序。

这里似乎是同一问题：Leaflet Layer Control: Ordering

，没有可接受的答案，也没有提及层控制选项。我确实尝试了此处提出的解决方案，但也没有解决问题。

在此方面的任何帮助将不胜感激，谢谢。

Answer 1

您可能会看着this solution对控件中的图层进行排序（它不会对图层进行排序）。我主要是从Leaflet specs code借来的代码；

如果您在排序控件中的内容时没有问题，但是在以特定顺序加载JSON / GeoJSON（因此也有图层）方面遇到问题，则可能需要将fetch与Promise.all结合使用但这不再是关于Leaflet的知识，而是关于JavaScript知识的知识（请查看this page来尝试掌握fetch + Promise.all）

Answer 2

您可以像往常一样添加图层，然后使用删除标签的功能对它们进行排序，然后按排序的方式重新添加它们。

function sortLabels() {
    var controlLayers = {}
    layerControl._layers.forEach(function(x) {
        if (x.overlay) {
            controlLayers[x.name] = x.layer
        }
    });
    names = Object.keys(controlLayers).sort()
    //remove and add sorted layernames
    names.forEach(x => layerControl.removeLayer(controlLayers[x]))
    names.forEach(x => layerControl.addOverlay(controlLayers[x], x))
}

var baseMaps = { "OpenStreetMap": tile_layer_osm, "ESRI World Imagery" : esri_satelite };

var overlayMaps = {nameC: layerC, nameA: layerA, nameB: layerB}

var layerControl = L.control.layers(baseMaps, overlayMaps, null, {collapsed: false}).addTo(map);
sortLabels()

Leaflet图层控件中的图层排序顺序

2 个答案: