Leaflet：在图层内对GeoJSON元素进行排序

Question

我正在使用leaflet显示一个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方法，但据我所知，它仅适用于标记。 有人知道如何做吗？非常感谢任何见解！

- J. Pierson

Answer 1

虽然ghybs的答案适用于leaflet 0.7，但切换到leaflet 1.0后，可以使用面板（panes）实现更简便的解决方案：

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));
            }
        });

希望这对其他人也有用！

- J. Pierson

Answer 2

正如你所发现的那样，zIndexOffset选项仅适用于 L.marker。 L.circleMarker进入overlayPane，您可以使用.bringToFront()和.bringToBack()方法相互重新排序。

- ghybs

---

谢谢！但是我能否访问我想要在叠加层面板中使用来排序标记的属性？就我所看到的，圆形标记不保留GeoJSON属性，但我可能是错的！ - J. Pierson

只要您使用 L.geoJson() 将您的 GeoJSON 数据转换为 Leaflet 图层，它就会自动将 GeoJSON 要素数据添加到每个 circleMarker.feature 成员中。如果您遇到问题，请随时提出新问题。至于排序，您可能也会对这篇文章感兴趣：https://gis.stackexchange.com/questions/166252/geojson-layer-order-in-leaflet-0-7-5/167904#167904 - ghybs

很抱歉，尽管您的答案给了我一些提示，但我无法使其工作。你能给个示例或者JSFiddle吗？那就太好了！ - J. Pierson

上面的评论中已经有一个链接到 JSFiddle。如果您仍需要帮助，请至少提供您的 JSFiddle。 - ghybs

你是对的，所有东西都在你的jsfiddle里。一开始我不明白如何将geojson元素作为图层进行操作，但现在我懂了。谢谢！ - J. Pierson