传单:在一个层内排序GeoJSON元素

Leaflet : ordering GeoJSON elements inside a layer

本文关键字：一个 内排序 GeoJSON 元素 传单      更新时间：2023-09-26

我正在使用传单显示一个GeoJSON层，带有pointToLayer函数。到目前为止一切正常。

但是我想根据GeoJSON的属性以一定的顺序显示我的点。这很重要，因为我的点的半径随着这个属性而变化，我需要在上面显示较小的圆。我希望我讲清楚了。

我已经尝试了很多东西，但这是我认为我最好的尝试:

var pointLayer = L.geoJson(centroids, {
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                        fillColor: "#76C551",
                        color: "#000",
                        weight: 1,
                        fillOpacity: 1
                    });
                },
                onEachFeature: function (feature, layer) {
                    var radius = calcPropRadius(feature.properties.nb);
                    layer.setRadius(radius);
                    feature.zIndexOffset = 1/feature.properties.nb*1000;
                    layer.bindPopup(feature.properties.name + " : " + String(feature.zIndexOffset));
                }
            });

你可以注意到功能的zIndexOffset可以在弹出框中读取，并且它们看起来很好。但是圆圈的显示顺序并不反映zIndexOffset。我试过使用setZIndexOffset方法，但据我所知，它只适用于标记。

有人知道怎么做吗?谢谢你的真知灼见!

ghybs的答案对于宣传单0.7非常有效，而切换到宣传单1.0允许使用窗格，这使得解决方案更容易:

var pointLayer = L.geoJson(centroids, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    fillColor: "#76C551",
                    color: "#000",
                    weight: 1,
                    fillOpacity: 1
                });
            },
            onEachFeature: function (feature, layer) {
                var radius = calcPropRadius(feature.properties.nb);
                layer.setRadius(radius);
                layer.setStyle({pane: 'pane'+ feature.properties.nb});
                var currentPane = map.createPane('pane' + feature.properties.nb);
                currentPane.style.zIndex = Math.round(1/feature.properties.nb*10000);
                layer.bindPopup(feature.properties.name + " : " + String(feature.zIndexOffset));
            }
        });

希望对别人有所帮助!

正如您所发现的，zIndexOffset选项仅适用于L.marker。

L.circleMarker进入overlayPane，您可以使用.bringToFront()和.bringToBack()方法将它们重新排序。

相关文章：