leaflet知识点:地图窗格panes的应用

一,需求背景

地图中存在无人机,停机坪,航线三个图层,需要实现无人机图层显示在最上面,停机坪图层显示在最下面,航线图层显示在中间。

在这里插入图片描述
在这里插入图片描述

二,遇到问题

由下图可知航线图层所在overlayPane窗格的z-index层级是低于无人机和停机坪所在markerPane窗格的z-index层级,通过设置Marker标记的zIndexOffset,只能让无人机图层显示在最上面,而航线图层始终会被遮住。

在这里插入图片描述
在这里插入图片描述

三,解决方法

通过自定义窗格可以解决这个问题,新建一个名称为plane-stop窗格,将停机坪图层放到这个窗格中,设置这个自定义窗格的css样式z-index值在200和400之间,不能低于200,低于200会被瓦片遮住。

// js
const latlngs = [[31.59111111, 120.29],[31.59222222, 120.28],[31.59333333, 120.29],
];
L.polyline(latlngs, { color: "red" }).addTo(map);
const planeIcon = L.icon({iconUrl: planeImg,iconSize: [48, 48],iconAnchor: [24, 24],
});
L.marker([31.59111111, 120.29], {icon: planeIcon,zIndexOffset: 1000,
}).addTo(map);const planeStopPane = map.createPane("plane-stop");
const planeStopIcon = L.icon({iconUrl: planeStopImg,iconSize: [48, 48],iconAnchor: [24, 24],
});
L.marker([31.59111111, 120.29], {icon: planeStopIcon,pane: planeStopPane,
}).addTo(map);// css
.leaflet-plane-stop-pane {z-index: 300;
}

在这里插入图片描述

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

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

相关文章

工控 modbusTCP 报文

Tx 发送报文:00 C9 00 00 00 06 01 03 00 00 00 02 Rx 接收报文:00 C9 00 00 00 07 01 03 04 01 4D 00 01 Tx 发送报文:00 C9 00 00 00 06 01 03 00 00 00 02 00 C9 事务处理标识符 2字节 00 00 协议标识符 2字节 固定 00 00 00 06 长度 2字节 表示之后的字节总数 (…

大数据之ClickHouse

大数据之ClickHouse 简介 ClickHouse是一种列式数据库管理系统,专门用于高性能数据分析和数据仓库应用。它是一个开源的数据库系统,最初由俄罗斯搜索引擎公司Yandex开发,用于满足大规模数据分析和报告的需求。 特点 开源的列式存储数据库…

elementUI 下拉框加提示文案

效果如下&#xff1a; 展示文案在最下面&#xff0c;跟选项有个分割线 <el-select v-model"value" placeholder"请选择" clearable popper-class"addNotice" class"addNoticeS" visible-change"(v) >selectNotice(v,展示…

Testng测试框架(7)--测试运行

忽略测试 TestNG可以让你忽略类、特殊包、包及其子中的所有Test方法。 当在测试方法级别使用Ignore 注解&#xff0c;在功能上与Test(enabledfalse).一样。 以下例子将忽略类中所有tests。 import org.testng.annotations.Ignore; import org.testng.annotations.Test; Ign…

秦朗丢寒假作业系摆拍 博主被处罚

大家好&#xff01; 我是老洪&#xff0c;刚看到秦朗丢寒假作业系摆拍博主被处罚。 据央视财经媒体报道&#xff0c;近期&#xff0c;“秦朗丢寒假作业”事件被证实为自导自编的摆拍视频。 图片来源央视财经公众号截图 该博主与同事薛某&#xff0c;为了吸引更多的粉丝和流量&a…

基于SSM的旅游管理系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对旅游信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&am…

解决cmd输入py文件路径不能执行,使用anaconda prompt 能执行

究其原因&#xff0c;是因为没有配置环境&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 第一步&#xff1a;配置环境变量 操作步骤如下&#xff1a; 1、右击此电脑 ---->属性 2、高级系统设置 3、点击环境变量 4、选择 …

代码随想录--数组--长度最小的子数组

题目 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0。 示例&#xff1a; 输入&#xff1a;s 7, nums [2,3,1,2,4,3] 输出&#…

[BT]BUUCTF刷题第16天(4.12)

第16天 Web [MRCTF2020]Ezpop 打开网站就是一段泄露的源代码&#xff1a; <?php //flag is in flag.php //WTF IS THIS? //Learn From https://ctf.ieki.xyz/library/php.html#%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E9%AD%94%E6%9C%AF%E6%96%B9%E6%B3%95 //And Crack…

文件名乱码危机:数据恢复全攻略

在数字化时代的浪潮中&#xff0c;电脑文件成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;有时我们会突然遭遇一个令人头疼的问题&#xff1a;原本清晰易读的文件名突然变成了乱码。这些乱码文件名不仅让我们无法准确识别文件内容&#xff0c;更可能意味着数据丢…

时间序列分析 # 平稳性检验和ARMA模型的识别与定阶 #R语言

掌握单位根检验的原理并能解读结果&#xff1b;掌握利用序列的自相关图和偏自相关图识别模型并进行初步定阶。 原始数据在文末&#xff01;&#xff01;&#xff01; 练习1、根据某1971年9月-1993年6月澳大利亚季度常住人口变动&#xff08;单位&#xff1a;千人&#xff09;的…

一个开源跨平台嵌入式USB设备协议:TinyUSB

概述 TinyUSB 是一个用于嵌入式系统的开源跨平台 USB 主机/设备堆栈&#xff0c;设计为内存安全&#xff0c;无需动态分配&#xff0c;线程安全&#xff0c;所有中断事件都被推迟&#xff0c;然后在非 ISR 任务函数中处理。查看在线文档以获取更多详细信息。 源码链接&#xff…

Redis从入门到精通(十五)Redis分布式缓存(三)Redis分片集群的搭建和原理分析

文章目录 前言5.4 分片集群5.4.1 搭建分片集群5.4.2 散列插槽5.4.3 集群伸缩5.4.3.1 需求分析5.4.3.2 创建新的Redis实例5.4.3.3 添加新节点到Redis集群5.4.3.4 转移插槽 5.4.4 故障转移5.4.4.1 自动故障转移5.4.4.2 手动故障转移 5.4.5 RedisTemplate 5.5 小结 前言 Redis分布…

kali工具----枚举工具

一、枚举工具 枚举是一类程序&#xff0c;它允许用户从一个网络中收集某一类的所有相关信息。本节将介绍DNS枚举和SNMP枚举技术。DNS枚举可以收集本地所有DNS服务和相关条目。DNS枚举可以帮助用户收集目标组织的关键信息&#xff0c;如用户名、计算机名和IP地址等&#xff0c;…

【Qt】界面优化

目录 一、QSS 1.1 基本语法 1.2 QSS设置方法 1.2.1 指定控件样式设置 1.2.2 全局样式设置 1.2.3 从文件加载样式表 1.2.4 使用Qt Designer编辑样式 1.3 选择器 1.3.1 介绍 1.3.2 子控件选择器 1.3.3 伪类选择器 1.4 样式属性(盒模型) 1.5 代码示例(登录界面) 二、…

OSCP靶场--Banzai

OSCP靶场–Banzai 考点(ftp爆破 webshell上传web1访问403web2可以访问webshell反弹mysql udf提权) 1.nmap扫描 ## nmap扫描一定要使用 -p- 否则容易扫不全端口 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC 192.168.158.56 -Pn -p- --min-rate 2500Starting Nmap 7.…

机器学习前导——PyCharm PyTorch Python3 机器学习

机器学习前导——PyCharm & pytorch & Python3 & 机器学习 文章目录 前言PyCharmPyTorchPython3机器学习联系 前言 这学期选了《机器学习》&#xff0c;第一次接触&#xff0c;对一些专有名词很陌生。 PyCharm PyCharm是一款由JetBrains开发的软件&#xff0c…

STM32 串口接收定长,不定长数据

本文为大家介绍如何使用 串口 接收定长 和 不定长 的数据。 文章目录 前言一、串口接收定长数据1. 函数介绍2.代码实现 二、串口接收不定长数据1.函数介绍2. 代码实现 三&#xff0c;两者回调函数的区别比较四&#xff0c;空闲中断的介绍总结 前言 一、串口接收定长数据 1. 函…

SpringBoot3 + Vue3 + Uniapp + uView + Elenment 实现动态二级分类以及二级分类的管理

SpringBoot3 Vue3 Uniapp uView Elenment 实现动态二级分类以及二级分类的管理 1. 效果展示1.1 前端显示效果1.2 后台管理一级分类1.3 后台管理二级分类 2. 后端代码2.1 GoodsCategoryController.java2.2.1 GoodsCategoryMapper.java2.2.2 GoodsCategorySonMapper.java2.3.…

Zookeeper的集群搭建和ZAB协议详解

Zookeeper的集群搭建 1&#xff09;zk集群中的角色 Zookeeper集群中的节点有三个角色&#xff1a; Leader&#xff1a;处理集群的所有事务请求&#xff0c;集群中只有一个LeaderFollwoer&#xff1a;只能处理读请求&#xff0c;参与Leader选举Observer&#xff1a;只能处理读…