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方法，但據我所知，它只適用於標記。

有誰知道如何做到這一點？非常感謝任何見解！

來源

2016-08-23 J. Pierson

如你所想，zIndexOffset選項只適用於L.marker的。

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

來源

2016-08-23 14:29:26 ghybs

謝謝！但是，是否可以訪問我想用於在覆蓋窗格中排列標記的屬性？據我所見，圓圈標記不保留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嗎？那太好了！ –

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

希望它可以使用別人！

來源

2016-09-06 15:12:36

Leaflet：訂購圖層中的GeoJSON元素

回答

相關問題