传单 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 = nullvar {{ 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) {

    // beware the exact type of your property

    // adapt your test to your context

    var zindex = feature.properties.z_index && feature.properties.z_index !== "null";

    return L.marker(latlng, {

        zIndexOffset: zindex  ? 1000 : 0,

        icon: L.AwesomeMarkers.icon(

                    {

                        icon: feature.properties.icon, 

                        markerColor: feature.properties.color, 

                        prefix: 'fa', 

                        iconColor: 'white',

                    }

                )

            }

        );

},

和一个演示

var points = {

    "type": "FeatureCollection",

    "features": [

        {

            "geometry": {

                "type": "Point",

                "coordinates": [

                    -104.9998241,

                    39.7471494

                ]

            },

            "type": "Feature",

            "properties": {

              color: 'green',

              z_index: null

            }

        },

        {

            "geometry": {

                "type": "Point",

                "coordinates": [

                    -104.9983545,

                    39.7502833

                ]

            },

            "type": "Feature",

            "properties": {

                z_index: 1000

            }

        }

    ]

};

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', {

    maxZoom: 18,

    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

    id: 'mapbox/light-v9',

    tileSize: 512,

    zoomOffset: -1

  }).addTo(map);

  

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, {

    pointToLayer: function (feature, latlng) {

        var color = feature.properties.color || 'red';

        var zIndex = feature.properties.z_index || 0;

        return L.marker(latlng, {

          zIndexOffset: zIndex,

          icon: color === 'green' ? iconGreen: iconRed

       });

    }

  }).addTo(map);

html, body {

  height: 100%;

  margin: 0;

}

#map {

  width: 100%;

  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>