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

我目前正在使用GeoJSON和

pointToLayer

在我的地图上创建图标，我希望其中一些图标出现在顶部

我的GeoJSON中有一个名为

z_index

的属性，在一些值上我设置为100，而在其他值上设置为null（通过研究，我认为我可以用它影响排序？），但是我迄今为止尝试的插件和东西都不起作用（例如）

我的当前配置如下所示：

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 %}

var geo_data={{geo_data|safe}
{站点中st的%u类型%}
var z_index=null
var{{st.safe_name}}=L.geoJSON（geo_数据{
过滤器：功能（特征、图层）{
如果（feature.geometry.coordinates！=“无”）{
返回feature.properties.type==“{{st.name}}”；
}
},
pointToLayer：功能（特性、latlng）{
返回L.标记（板条{
图标：L.AwesomeMarkers.icon(
{
图标：feature.properties.icon，
markerColor:feature.properties.color，
前缀：“fa”，
iconColor:'白色'，
}
)
}
);
},
onEachFeature：功能（功能，图层）{
层绑定弹出窗口（“”）；
}
});
{%endfor%}

这是一个图标的示例，目前应该是ontop，看起来它的z索引被设置为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>

标记有：

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点={
“类型”：“FeatureCollection”，
“特点”：[
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-104.9998241,
39.7471494
]
},
“类型”：“功能”，
“财产”：{
颜色：“绿色”，
z_索引：空
}
},
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-104.9983545,
39.7502833
]
},
“类型”：“功能”，
“财产”：{
z_指数：1000
}
}
]
};
var map=L.map（'map'）.setView（[39.74739，-105]，13）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'mapbox/light-v9'，
tileSize:512，
Zoomofset:-1
}).addTo（地图）；
var iconGreen=L.AwesomeMarkers.icon（{icon:'glass'，前缀：'fa'，markerColor:'green'}）；
var iconRed=L.AwesomeMarkers.icon（{icon:'spinner'，前缀：'fa'，markerColor:'red'，spin:true}）；
L.geoJSON（点{
pointToLayer：功能（特性、latlng）{
var color=feature.properties.color | |“红色”；
var zIndex=feature.properties.z|u索引| 0；
返回L.标记（板条{
zIndex偏移量：zIndex，
图标：颜色==“绿色”？图标绿色：图标红色
});
}
}).addTo（地图）
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：100%；
身高：100%；
}

标记有：

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点={
“类型”：“FeatureCollection”，
“特点”：[
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-104.9998241,
39.7471494
]
},
“类型”：“功能”，
“财产”：{
颜色：“绿色”，
z_索引：空
}
},
{
“几何学”：{
“类型”：“点”，
“坐标”：[
-104.9983545,
39.7502833
]
},
“类型”：“功能”，
“财产”：{
z_指数：1000
}
}
]
};
var map=L.map（'map'）.setView（[39.74739，-105]，13）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:'mapbox/light-v9'，
tileSize:512，
Zoomofset:-1
}).addTo（地图）；
var iconGreen=L.AwesomeMarkers.icon（{icon:'glass'，前缀：'fa'，markerColor:'green'}）；
var iconRed=L.AwesomeMarkers.icon（{icon:'spinner'，前缀：'fa'，markerColor:'red'，spin:true}）；
L.geoJSON（点{
pointToLayer：功能（特性、latlng）{
var color=feature.properties.color | |“红色”；
var zIndex=feature.properties.z|u索引| 0；
返回L.标记（板条{
zIndex偏移量：zIndex，
图标：颜色==“绿色”？图标绿色：图标红色
});
}
}).addTo（地图）
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：100%；
身高：100%；
}