传单 geojson - 指向某些图标上的图层集 z 索引？

Question

我目前正在使用 GeoJSON 并pointToLayer在我的地图上创建图标，我希望其中一些图标出现在顶部。

我的 GeoJSON 中有一个属性，在z_index我设置为 100 和其他 null 的一些值上调用它（通过研究，我认为我可以用这个来影响排序？）但到目前为止我尝试过的插件和东西不是工作（例如https://gist.github.com/up209d/4c68f2391f2302e510eb81aa8bcd4514 ）

我当前的配置如下：

var geo_data = {{ geo_data|safe }}

{% for st in site_types %}

var z_index = null

var {{ st.safe_name }} = L.geoJSON(geo_data, {

    filter: function(feature, layer) {

        if (feature.geometry.coordinates != "None") {

            return feature.properties.type === "{{ st.name }}";

        }

    },

    pointToLayer: function (feature, latlng) {

        return L.marker(latlng, {

            icon: L.AwesomeMarkers.icon(

                        {

                            icon: feature.properties.icon, 

                            markerColor: feature.properties.color, 

                            prefix: 'fa', 

                            iconColor: 'white',

                        }

                    )

                }

            );

    },

    onEachFeature: function (feature, layer) {

        layer.bindPopup('<h3><a href="/sites/site/'+feature.properties.site_id+'">'+feature.properties.popupContent+'</a></h3>');

}

});

{% endfor %}

这是目前应该在顶部的图标示例，看起来它的 z-index 设置为 1901

<div class="awesome-marker-icon-darkred awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(512px, 901px, 0px); z-index: 1901; outline: none;"><i class="fa fa-server  icon-white"></i></div>

Answer 1

标记有一个zIndexOffset属性：zIndexOffset（数字，默认值：0）默认情况下，标记图像 zIndex 是根据其纬度自动设置的。如果要将标记放在所有其他标记的顶部（或下方），请使用此选项，指定一个高值，如 1000（或分别为高负值）。您的pointToLayer函数可以根据您的z_index属性设置此选项。就像是：pointToLayer: function (feature, latlng) {&nbsp; &nbsp; // beware the exact type of your property&nbsp; &nbsp; // adapt your test to your context&nbsp; &nbsp; var zindex = feature.properties.z_index && feature.properties.z_index !== "null";&nbsp; &nbsp; return L.marker(latlng, {&nbsp; &nbsp; &nbsp; &nbsp; zIndexOffset: zindex&nbsp; ? 1000 : 0,&nbsp; &nbsp; &nbsp; &nbsp; icon: L.AwesomeMarkers.icon(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: feature.properties.icon,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markerColor: feature.properties.color,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prefix: 'fa',&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iconColor: 'white',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; );},和一个演示var points = {&nbsp; &nbsp; "type": "FeatureCollection",&nbsp; &nbsp; "features": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "geometry": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "Point",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coordinates": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -104.9998241,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 39.7471494&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "Feature",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "properties": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'green',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z_index: null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "geometry": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "Point",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "coordinates": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -104.9983545,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 39.7502833&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "type": "Feature",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "properties": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z_index: 1000&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]};var map = L.map('map').setView([39.74739, -105], 13);L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {&nbsp; &nbsp; maxZoom: 18,&nbsp; &nbsp; attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +&nbsp; &nbsp; &nbsp; '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +&nbsp; &nbsp; &nbsp; 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',&nbsp; &nbsp; id: 'mapbox/light-v9',&nbsp; &nbsp; tileSize: 512,&nbsp; &nbsp; zoomOffset: -1&nbsp; }).addTo(map);&nbsp;&nbsp;var iconGreen = L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'green'});var iconRed = L.AwesomeMarkers.icon({icon: 'spinner', prefix: 'fa', markerColor: 'red', spin:true});L.geoJSON(points, {&nbsp; &nbsp; pointToLayer: function (feature, latlng) {&nbsp; &nbsp; &nbsp; &nbsp; var color = feature.properties.color || 'red';&nbsp; &nbsp; &nbsp; &nbsp; var zIndex = feature.properties.z_index || 0;&nbsp; &nbsp; &nbsp; &nbsp; return L.marker(latlng, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zIndexOffset: zIndex,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: color === 'green' ? iconGreen: iconRed&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; }&nbsp; }).addTo(map);html, body {&nbsp; height: 100%;&nbsp; margin: 0;}#map {&nbsp; width: 100%;&nbsp; height: 100%;}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script><div id='map'></div>