leaflet如何为geoJson图层设置zIndex图层顺序?

这个问题也是纠结了半天，两个geojson的面图层作为Layer，因所画的内容重要程度不同，总有主次之分，比如标记型的图标，即使被盖住了，也无伤大雅，但是一些监控或者告警的数据，如果被盖住了，就比较致命了。

许多建议说使用 Layer.setZIndex(999) ，但是跟过代码知道， Layer.zIndex打印显示undefined，直接官方文档，你会发现GeoJSON.Options 属性中根本没有 zindex属性。

Option	Type	Default	Description
pointToLayer	Function	*	A Function defining how GeoJSON points spawn Leaflet layers. It is internally called when data is added, passing the GeoJSON point feature and its LatLng. The default is to spawn a default Marker: function(geoJsonPoint, latlng) { return L.marker(latlng); }
style	Function	*	A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults: function (geoJsonFeature) { return {} }
onEachFeature	Function	*	A Function that will be called once for each created Feature, after it has been created and styled. Useful for attaching events and popups to features. The default is to do nothing with the newly created layers: function (feature, layer) {}
filter	Function	*	A Function that will be used to decide whether to include a feature or not. The default is to include all features: function (geoJsonFeature) { return true; } Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features.
coordsToLatLng	Function	*	A Function that will be used for converting GeoJSON coordinates to LatLngs. The default is the coordsToLatLng static method.
markersInheritOptions	Boolean	false	Whether default Markers for "Point" type Features inherit from group options.

不过可喜的是，你发现了有style属性，跟进去，style中也可以设置 zindex，然在此处的样式加载中并没用处，所以你会很悲哀的发现，你无法通过 data_layer 对象整体设置该 Layer的Zindex。导致界面图标层级不明确。

        this.data_layer = L.geoJSON(data,{
          pointToLayer: PointToLayer,
          onEachFeature: OnEachFeature
        }).addTo(this.map);

        

然后只好百度，然后部分帖子说，使用LayerGroup的 setZIndex,查API如下,添加不同的TileLayer确实可以控制层级，然 GeoJSON本身就相当于一个Group，当LayerGroup添加

GeoJSON对象时，setZIndex又失去作用了。

那只能往更小的力度去解决了，然后来到了Marker

Option	Type	Default	Description
icon	Icon	*	Icon instance to use for rendering the marker. See Icon documentation for details on how to customize the marker icon. If not specified, a common instance of L.Icon.Default is used.
keyboard	Boolean	true	Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
title	String	''	Text for the browser tooltip that appear on marker hover (no tooltip by default).
alt	String	''	Text for the alt attribute of the icon image (useful for accessibility).
zIndexOffset	Number	0	By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like 1000 (or high negative value, respectively).
opacity	Number	1.0	The opacity of the marker.
riseOnHover	Boolean	false	If true, the marker will get on top of others when you hover the mouse over it.
riseOffset	Number	250	The z-index offset used for the riseOnHover feature.
pane	String	'markerPane'	Map pane where the markers icon will be added. Map pane where the markers shadow will be added.
bubblingMouseEvents	Boolean	false	When true, a mouse event on this marker will trigger the same event on the map (unless L.DomEvent.stopPropagation is used).

发现有一个zIndexOffset居然好使，代码如下：

    PointToLayer(feature, latlng) {
      var  bili = this.izoom * 3 * (this.izoom / 5.0);
      //落雷  距离线路 小于1000米 使用另一个图标
      return L.marker(latlng, {
          icon: L.icon({
              iconUrl: require("@/assets/image/rep.png"),
              iconSize: [bili,bili],
              iconAnchor: [bili/2,bili/2],
              className: 'map-rep-point'
            }),
           zIndexOffset: 9999 
      });
    },

当然，怀着好奇的心情，试了下 L.icon 元素中的 className 属性中的z-index属性，发现依然控制不住，看来只能在 L.marker中将就使用了。下图放上未调整顺序和未调整的对比：