这个问题也是纠结了半天,两个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中将就使用了。下图放上未调整顺序和未调整的对比: