这个问题也是纠结了半天,两个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: |
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: |
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: |
filter | Function | * | A Function that will be used to decide whether to include a feature or not. The default is to include all features: Note: dynamically changing the |
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中将就使用了。下图放上未调整顺序和未调整的对比:
















