Mapbox中点图层和面图层点击事件重叠,禁止点击穿透方案

news2024/11/17 7:37:40

使用mapbox的小伙伴们可能都遇到过这个问题,就是当地图上有两个图层,一个面图层一个点图层,二者相重合的时候。假设我们想点击点位弹窗展示一些内容,也想点击面图层的时候弹窗展示一些内容,这时候一个有意思的问题就产生了,就是点击点位弹窗的时候面图层对应的弹窗也会弹出来,就像这样(为了大家看的清楚我将点的弹窗偏移一些)

因为按照mapbox官方的写法,我们会这样写代码:

map.on("click", "point", (e) => {
        const dom = "<div>我是点弹窗</div>";
        const feature = e.features[0];
        const popup = new mapboxgl.Popup({ offset: [30, 30] })
          .setHTML(dom)
          .setLngLat(feature.geometry.coordinates)
          .addTo(map);
      });
      map.on("click", "polygon", (e) => {
        const dom = "<div>我是面弹窗</div>";
        const popup = new mapboxgl.Popup()
          .setHTML(dom)
          .setLngLat([e

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

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

相关文章

羊大师详解羊奶如何帮助控制血压

羊大师详解羊奶如何帮助控制血压 羊奶是一种珍贵的天然饮品&#xff0c;不仅具有丰富的营养成分&#xff0c;还被证实对血压具有调控作用。很多人在了解到羊奶的功效后&#xff0c;都对其与血压之间的关系产生了浓厚的兴趣。接下来&#xff0c;小编羊大师将为大家详细介绍羊奶…

如何通过类似于Android adb install apk 命令安装三方Harmony Hap包

安装命令 hdc install xxx.hapOpenHarmony设备安装Hap应用的五种方式 https://www.51cto.com/article/762223.htmlhttps://www.51cto.com/article/762223.html DevEco Studio 3.1为例新建个项目&#xff0c;点击File->Project Structure 进入签名页面然后点击Sign in登录华…

Docker | Docker入门安装

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;Docker系列 ✨特色专栏&#xff1a; My…

使用Pytorch从零开始构建Transformer

在本教程中&#xff0c;我们将使用 PyTorch 从头开始​​构建一个基本的 Transformer 模型。Vaswani 等人提出的 Transformer 模型。在论文“Attention is All You Need”中&#xff0c;是一种专为序列到序列任务&#xff08;例如机器翻译和文本摘要&#xff09;而设计的深度学…

C++算法入门练习——相同的二叉查找树

将第一组n​个互不相同的正整数先后插入到一棵空的二叉查找树中&#xff0c;得到二叉查找树T1​&#xff1b;再将第二组n个互不相同的正整数先后插入到一棵空的二叉查找树中&#xff0c;得到二叉查找树T2​。判断T1​和T2​​是否是同一棵二叉查找树。 二叉查找(搜索)树定义&am…

python变量、常量、数据类型

一、变量 变量是存储在内存中的值&#xff0c;这就意味着在创建变量时会在内存中开辟一个空间。 基于变量的数据类型&#xff0c;解释器会分配指定内存&#xff0c;并决定什么数据可以被存储在内存中。 因此&#xff0c;变量可以指定不同的数据类型&#xff0c;这些变量可以…

Delphi 12 Athens 发布了!

官方安装包 ☞ https://altd.embarcadero.com/download/radstudio/12.0/RADStudio_12_0_4915718.iso 安装辅助工具、控件可以戳这里 &#xff1a;Delphi 12 资源 RAD Stuido 12 Athens &#xff0c;这次更新的细节还是比较多的&#xff0c;但主要还是多端&#xff08;iOS、An…

来聊聊JVM中的类加载过程以及双亲委派模型(学习Java必知内容)

文章目录 1. 类加载过程加载验证准备解析初始化 2. 双亲委派模型一个类的加载流程双亲委派模型的优点 总结 1. 类加载过程 在整个 JVM 执行过程中, 和我们程序员关系最密切的就是类加载的过程, 所以接下来我们来看下类加载的执行流程. 对于一个类来说, 它的生命周期是这样的:…

盘点63个Python登录第三方源码Python爱好者不容错过

盘点63个Python登录第三方源码Python爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1l7oooH9YovHmWzQ_58FRdg?pwd8888 提取码&#xff1a;8888 项目名称 A headless…

安卓手机好用的清单软件有哪些?

生活中每个人都有丢三落四的习惯&#xff0c;伴随着生活节奏的加快&#xff0c;人们常忘事的情况会更加频繁的出现&#xff0c;这时候很多人就开始选择手机上记录清单类的软件&#xff0c;安卓手机在手机市场中占有很大的分量&#xff0c;在安卓手机上好用的记录清单的软件有哪…

1688商品详情数据接口(1688.item_get)

1688商品详情数据接口是一种程序化的接口&#xff0c;通过这个接口&#xff0c;商家或开发者可以使用自己的编程技能&#xff0c;对1688平台上的商品信息进行查询、获取和更新。这个接口允许商家根据自身的需求&#xff0c;获取商品的详细信息&#xff0c;例如价格、库存、描述…

没有PDF密码,如何解密?

PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和office一样&#xff0c;可以对文件进行加密&#xff0c;但是没有提供恢复密码的功…

SQLite3 数据库学习(五):Qt 数据库高级操作

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 1. Qt 数据库密码加密 MD5 加密在线工具 1.1 加密流程 加密后的密码都是不可逆的 1.2 代码实现 loginsqlite.h #ifndef LOGINSQLITE_H #define LOGINSQLITE_H#include <QWidget> #include <Q…

第15届蓝桥杯Scratch选拔赛中级(STEMA)真题2023年10月

一、单选题 1.运行以下哪个程序后&#xff0c;巨嘴鸟会向下移动&#xff1f;&#xff08; &#xff09; A. B. C. D. 2.运行以下程序后&#xff0c; 能看到几只河豚鱼&#xff08; &#xff09;&#xff1f; A.3 B.4 C.6 D.7 3.以下运算结果为“False”的是&#xff08…

Python教程73:Pandas中一维数组Series学习

创建一维数据类型Series dataNone 要转化为Series的数据(也可用dict直接设置行索引) 若是标量则必须设置索引,该值会重复,来匹配索引的长度 indexNone 设置行索引 dtypeNone 设置数据类型(使用numpy数据类型) nameNone 设置Series的name属性 copyFalse 不复制 (当data为ndarray…

常用服务注册中心与发现(Eurake、zookeeper、Nacos)笔记(一)基础概念

基础概念 注册中心 在服务治理框架中&#xff0c;通常都会构建一个注册中心&#xff0c;每个服务单元向注册中心登记自己提供的服务&#xff0c;将主机与端口号、版本号、通信协议等一些附加信息告知注册中心&#xff0c;注册中心按照服务名分类组织服务清单&#xff0c;服务…

群晖NAS搭建WebDav服务做文件共享,可随时随地远程访问

文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选框 2. 局域网测试WebDav服务2.1 下载RaiDrive客户端2.2 打开RaiDrive&#xff0c;设置界面语言可以选择中文2.3 点击添加按钮&#xff0c;新建虚拟驱动区2…

碳化硅MOS/超结MOS在直流充电桩上的应用-REASUNOS瑞森半导体

一、前言 直流充电桩是新能源汽车直流充电桩的简称&#xff0c;一般也被叫做“快充”。直流充电桩一般与交流电网连接&#xff0c;可作为非车载电动汽车的动力补充&#xff0c;是一种直流工作电源的电源控制装置&#xff0c;可以提供充足的电量&#xff0c;输出电压和电流可以…

.symtab ELF符号表(转载)

1. 符号表&#xff08;symbol table&#xff09;介绍 ELF文件中的“符号表&#xff08;symbol table&#xff09;”包含的是程序中的符号信息 – 这些符号代表的或许是定义&#xff08;例如定义全局变量时使用的变量名&#xff0c;或者定义函数时使用的函数名&#xff09;&…

探索网络模型与协议:从OSI到HTTPs的原理解析

一、OSI网络模型 OSI&#xff08;Open Systems Interconnection&#xff09;七层网络参考模型和TCP/IP四层模型都是用于理解和设计计算机网络的框架&#xff0c;但它们之间存在一些差异。 1、七层 vs 四层 OSI七层网络参考模型&#xff1a; 物理层&#xff08;Physical Laye…