题意:"Leaflet:在图层内排序 GeoJSON 元素"
问题背景:
I'm displaying a GeoJSON layer using leaflet, with the pointToLayer function. Everything works ok so far.
"我正在使用 Leaflet 显示一个 GeoJSON 图层,使用 `pointToLayer` 函数。一切到目前为止都正常。"
But I would like to display my points in a certain order, based on a property of the GeoJSON. This is important because the radiuses of my points varies with this property, and I need to display the smaller circles on top. I hope I make myself clear.
"但我希望根据 GeoJSON 的某个属性以特定顺序显示我的点。这很重要,因为我的点的半径与这个属性有关,我需要将较小的圆圈显示在上面。希望我表达得很清楚。"
I've tried many things, but here's what I think is my best try :
"我尝试了很多方法,但这是我认为最好的尝试:"
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));
}
});
You can notice that the zIndexOffset of features can be read in the popups, and they look ok. But the displaying order of the circles doesn't reflect the zIndexOffset. I've tried using the setZIndexOffset method, but as I understand it it works only with markers.
"你可以注意到,特征的 zIndexOffset 可以在弹出窗口中读取,并且看起来没问题。但是圆圈的显示顺序并没有反映 zIndexOffset。我尝试使用 `setZIndexOffset` 方法,但据我了解,它仅对标记有效。"
Does anyone know how to do this ? Thanks a lot for any insight !
"有人知道怎么做到这一点吗?非常感谢任何建议!"
问题解决:
As you figured out, the zIndexOffset
option is only for L.marker
's.
"正如你所发现的,zIndexOffset 选项仅适用于 L.marker。"
L.circleMarker
's go into the overlayPane and you can re-order them one to each other using .bringToFront() and .bringToBack() methods.
"L.circleMarker 会进入 overlayPane,你可以使用 .bringToFront() 和 .bringToBack() 方法对它们进行重新排序。"