Leaflet:订购图层中的GeoJSON元素
问题描述:
我正在使用leaflet和pointToLayer函数显示GeoJSON图层。目前一切正常。Leaflet:订购图层中的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可以在弹出窗口中读取,并且他们看起来OK。但圆圈的显示顺序并不反映zIndexOffset。 我试过使用setZIndexOffset方法,但据我所知,它只适用于标记。
有谁知道如何做到这一点?非常感谢任何见解!
答
如你所想,zIndexOffset
选项只适用于L.marker
的。
L.circleMarker
进入overlayPane
,您可以使用.bringToFront()
和.bringToBack()
方法将它们重新排序。
答
而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));
}
});
希望它可以使用别人!
谢谢!但是,是否可以访问我想用于在覆盖窗格中排列标记的属性?据我所见,圆圈标记不保留GeoJSON属性,但我可能是错的! –
只要使用'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吗?那太好了 ! –