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 `LatLng`s. 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中将就使用了。下图放上未调整顺序和未调整的对比：

leaflet如何为geoJson图层设置zIndex图层顺序?相关推荐

轴线图层设置_图层设置原则
第一,在够用的基础上图层是越少越好不管是什么专业,什么阶段的图纸,图纸上所有的图元可以用一定的规律来组织整理.比如说,建筑专业的图纸,就平面图而言,可以分为:柱.墙.轴线.尺寸标注.一般标注.门窗看 ...
ggplot2设置坐标轴范围_R可视化03|ggplot2图层-几何对象图层（geom layer）
前面简单介绍ggplot2是基于图层图形语法(the Grammar of Graphics),一张完整图由不同图层叠加而成,本文介绍几何对象图层(geom layer),续前篇: R可视化01|gg ...
还在对Matplotlib繁琐的图层设置感到烦恼！？快来看看这个Python绘图工具包吧
是不是被matplotlib繁琐绘图属性设置搞得一脸懵?是不是因常常记不住某一个图层设置函数而被迫看又长又枯燥的API文档?又或者是不是在面对多个matplotlib子图时写了大量的循环代码来设置属性 ...
html语言arc属性,为要素图层设置 HTML 弹出窗口属性
ArcGIS 中的许多地图图层都可用于访问要素的丰富的属性及其他信息.一种机制是,单击每个要素时显示一个 HTML 弹出窗口.这就潜在地提供了一种有效的方法来共享每个要素的 HTML 格式的信息(例如 ...
《AutoCAD 2014中文版超级学习手册》——第2章　图层设置 2.1　设置图层
本节书摘来自异步社区<AutoCAD 2014中文版超级学习手册>一书中的第2章,第2.1节,作者:黄志刚 , 朱爱华著,更多章节内容可以访问云栖社区"异步社区"公众号 ...
中望3D 2020 图层管理器（图层的设置+移动图层+复制图层）
图层在二维CAD中的作用是对不同线型.线宽.标注.打印等进行整理归类,而在三维CAD中,只有小部分三维CAD软件是具有图层这个概念的,有助于设计师在模具等设计中对不同零件进行整理归类,使设计工作更快捷 ...
CAD绘图中的图层设置
2019独角兽企业重金招聘Python工程师标准>>> 今天我们就来讲解一下"图层"问题,有很多朋友打开图纸一看,有几十个图层,有时自己都分不清哪一个图层改在哪? ...
CAD的图层设置及视图讲解
2019独角兽企业重金招聘Python工程师标准>>> 图层命令中,第一个是layer,图层属性管理器.里面的具体内容以前已较为详细的谈过,这里不再重复.和图层控制有关的其它命令,则 ...
《AutoCAD全套园林图纸绘制自学手册》一2.6　图层设置
本节书摘来自异步社区<AutoCAD全套园林图纸绘制自学手册>一书中的第2章,第2.6节,作者朱春阳 , 李晓艳 , 胡仁喜,更多章节内容可以访问云栖社区"异步社区" ...

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

leaflet如何为geoJson图层设置zIndex图层顺序?相关推荐

最新文章

热门文章