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

news2024/12/23 16:17:51

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

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

OptionTypeDefaultDescription
pointToLayerFunction*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);
}
styleFunction*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 {}
}
onEachFeatureFunction*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) {}
filterFunction*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.

coordsToLatLngFunction*Function that will be used for converting GeoJSON coordinates to LatLngs. The default is the coordsToLatLng static method.
markersInheritOptionsBooleanfalseWhether 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);

        

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

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

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

OptionTypeDefaultDescription
iconIcon*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.
keyboardBooleantrueWhether the marker can be tabbed to with a keyboard and clicked by pressing enter.
titleString''Text for the browser tooltip that appear on marker hover (no tooltip by default).
altString''Text for the alt attribute of the icon image (useful for accessibility).
zIndexOffsetNumber0By 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).
opacityNumber1.0The opacity of the marker.
riseOnHoverBooleanfalseIf true, the marker will get on top of others when you hover the mouse over it.
riseOffsetNumber250The z-index offset used for the riseOnHover feature.
paneString'markerPane'Map pane where the markers icon will be added. Map pane where the markers shadow will be added.
bubblingMouseEventsBooleanfalseWhen 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中将就使用了。下图放上未调整顺序和未调整的对比:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2055104.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stable Diffusion绘画 | ControlNet应用-Scribble (涂鸦)

Scribble (涂鸦) 使用该算法生成的线稿,线条最粗最随意,常用于抓取画面的大体轮廓,让AI进行创意发挥。 提示词输入 a panda,生成图片如下: 将提示词换成 a dog,生成图片如下: 今天先分享到这里…

海康相机opencv,C++调用demo配置记录

海康相机opencv,C调用demo配置记录 配置:1.Opencv4.6.0 2.MVS 3.Vs2019 第一章、相关文件 一、demo文件 在安装好mvs后,相应文件夹中,会有样例文件。默认安装mvs的话,文件在目录: C:\Program Files (x…

C++:C/C++的内存管理

目录 C/C内存分布 C语言中动态内存管理方式 C内存管理方式 new/delete操作内置类型 new/delete操作自定义类型 operator new与operator delete函数 new和delete的实现原理 定位new表达式 常见问题 malloc/free和new/delete的区别 内存泄漏 C/C内存分布 我们先来看以…

STM32 定时器 输入捕获

用于测频率测占空比 IC(Input Capture)输入捕获 输入捕获模式下,当通道输入引脚出现指定电平跳变(上升沿/下降沿)时,会让当前CNT的值将被锁存到CCR中,可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数…

探索ChatGPT:一场AI语言模型的革命

前言 随着人工智能(AI)的不断发展,越来越多的技术在日常生活和工作中得到了广泛应用,ChatGPT作为一种基于GPT-4架构的自然语言处理模型,正引领着AI对话系统的新时代。本文将带你深入了解ChatGPT的背景、应用以及未来发…

python动画:矢量图形的体系结构演示

总体来说,这些类构成了一个支持矢量图形的体系结构,提供了创建、管理和操作数学对象的灵活性。描述使用矢量图形的 Mobject(数学对象)的术语。这些对象在动画和数学绘图领域常用于创建灵活和可扩展的图形。 1.CurvesAsSubmobject…

中学理化生实验室设备仪器配置及实验应用

中学理化生实验室设备涵盖了物理、化学和生物三个学科所需的多种仪器、设备和材料,实验室设备的种类丰富多样,涵盖了从基础配备到专业配置再到实验应用等各种需求。以下是对这些设备的配置分类和具体实验应用的描述。 中学理化生实验室设备仪器配置 中…

一起学习CAN总线之物理层协议(2)

附:ISO 11898-1:2024和ISO11898-2:2024标准下载 一起学习CAN总线之物理层协议(2) CAN总线物理层主要完成节点间信号的传送,把各种信息转换成可以传输的物理电平,并将信号传输到其他的目标设备上。CAN总线传输介质&…

智慧排水远程监测系统物联网解决方案

智慧排水监测系统是一种集成了现代信息技术、物联网技术、大数据分析及云计算能力的高效城市排水管理解决方案。该系统通过全面、实时地监控城市排水网络的运行状态,旨在预防内涝灾害,优化水资源管理,保障城市安全运行,促进可持续…

零基础如何入门网络安全?网络安全难吗?

零基础如何入门网络安全 我经常会看到这一类的问题: 学习XXX知识没效果;学习XXX技能没方向;学习XXX没办法入门; 给大家一个忠告,如果你完全没有基础的话,前期最好不要盲目去找资料学习,因为大…

windows系统如何走后面之windows系统隐藏账户

系统隐藏账户是一种最为简单有效的权限维持方式,其做法就是让攻击者创建一个新的具有管理员权限的隐藏账户,因为是隐藏账户,所以防守方是无法通过控制面板或命令行看到这个账户的。 自然我们需要一些前提条件,比如说有一个网站&am…

【unity小技巧】获取免费开源的人物模型,并为obj fbx人物模型绑定骨骼、动画——mixamo的使用介绍

文章目录 前言地址上传自己的3D角色下载单动画下载动作包角色模型导入Unity动画导入unity设置动画骨骼动画骨骼不配的问题参考完结 前言 其实前面我已经推荐了几种获取人物模型的方法: 1、【unity小技巧】下载原神模型,在Blender中PMX模型转FBX模型&…

【GitLab】使用 Docker engine安装 GitLab 2: gitlab-ce:17.3.0-ce.0 拉取

ce版本必须配置代理。 极狐版本可以直接pull 社区版GitLab不支持Alibaba Cloud Linux 3,本操作以Ubuntu/Debian系统为例进行说明,其他操作系统安装说明,请参见安装社区版GitLab。 docker 环境重启 sudo systemctl daemon-reload sudo systemctl restart docker脚本安装 安裝…

一文带你打通WSL下的SSH连接

写在文章开头 Windows下Linux子系统即WSL已经成为笔者调试Linux程序的常用方式,默认情况下WSL是没有安装SSH服务的,所以对于常见的SSH客户端我们无法做到连接管理调试(除了笔者最爱的Mobaxterm),所以笔者专门以此文章来分享一下笔者WSL配置S…

GIF压缩专题:gif压缩大小但不改变画质,应该如何操作?

GIF(Graphics Interchange Format/图形互换格式)是一种网络上广泛使用的图像文件格式,特别适用于包含透明度和动画的图像。然而,随着GIF文件内容的丰富、复杂度、高分辨率等因素增加,GIF文件大小也随之增长&#xff0c…

Self-Attention流程的代码实现【python】

文章目录 1、知识回顾2、Self-attetion实现步骤3、准备输入4、初始化参数5、获取Q,K,V6、计算attention scores7、计算softmax8、给values乘上scores9、完整代码10、总结 🍃作者介绍:双非本科大四网络工程专业在读,阿里云专家博主&#xff0c…

OOP篇(Java - 抽象类、类、对象、构造器、接口、内部类、 代码块、枚举)(doing)

目录 一、抽象类 1. 简介 2. 什么时候定义抽象类? 3. 什么是抽象方法? 4. 抽象类的作用是什么? 5. 继承抽象类需要做什么? 6. 抽象类为什么不能创建对象?自己干什么, 创建对象毫无意义 7. final和abstract是什…

【备战蓝桥杯青少组】第三天 放苹果

题 OpenJudge - 666:放苹果 描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法。 输入 第一行…

Linux驱动入门实验班——DHT11、DS18B20模块驱动(附百问网视频链接)

目录 前言 一、DHT11模块 1.通信协议 2.数据格式 3.编程思路 ①入口函数 ②实现read函数 ③编写中断处理函数 ④***编写数据解析函数 ⑤应用程序 二、DS18B20模块 1. 通信时序 ① 初始化时序 ② 写时序 ③ 读时序 2. 常用命令 3. 编程思路 1.启动温度转换 2…

Dragonfly S 5MP工业相机量产 机器视觉应用的新选择

近日,51camera的合作厂商Teledyne FLIR IIS宣布Dragonfly️ S USB 5MP模块化、紧凑型相机现已全面投产,Dragonfly S 5MP是新Dragonfly S系列中首款迈入量产阶段的相机。 作为机器视觉应用领域的入门级产品,Dragonfly S不仅简化了成像系统的快…