Листовка: упорядочивание элементов GeoJSON внутри слоя

Я показываю слой GeoJSON с помощью листовки с функцией 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, но, как я понимаю, он работает только с маркерами.

Кто-нибудь знает, как это сделать? Большое спасибо за понимание!

источник

2016-08-23 J. Pierson

Как вы поняли, опция zIndexOffset предназначена только для L.marker.

L.circleMarker «s идти в overlayPane, и вы можете изменить порядок их один друг с другом, используя .bringToFront() и .bringToBack() методы.

источник

2016-08-23 14:29:26 ghybs

Спасибо! Но можно ли получить доступ к свойству, которое я хочу использовать, чтобы заказать мои маркеры в панели наложения? Насколько я вижу, маркеры окружения не сохраняют свойства GeoJSON, но я могу ошибаться! –

Пока вы используете 'L.geoJson()' для преобразования данных GeoJSON в слои листов, он должен автоматически добавлять данные функции 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

Листовка: упорядочивание элементов GeoJSON внутри слоя

ответ

Смежные вопросы