Leaflet:在层内排序 GeoJSON 元素

问题描述 投票:0回答:3

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

但我想根据 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 方法,但据我了解,它仅适用于标记。

有人知道该怎么做吗?非常感谢您的见解!

javascript leaflet geojson
3个回答
4
投票

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

希望对其他人有用!


2
投票

正如您所想,

zIndexOffset
选项仅适用于
L.marker

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


0
投票

我想提供一个对我解决类似问题有用的替代方案。

就我而言,我的数据的“状态”会随着时间的推移而变化,我需要最关键的数据始终位于最前面。所以我在绘制之前对数据进行了排序,类似于:

myData.features.sort((a,b) => a.properties.status <= b.properties.status ? -1 : 1);
return (<GeoJSON data={myData}/>);

这样关键的就被最后抽出来了。

就您而言,我相信您可以在抽奖前订购

centroids

© www.soinside.com 2019 - 2024. All rights reserved.