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

使用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.hqwc.cn/news/210556.html

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

相关文章

windows11下安装Tensor RT,并在conda虚拟环境下使用

建议仔细读一读NVIDIA官方出的安装教程&#xff0c;里面有windows、linux等安装教程&#xff0c;非常详细&#xff0c;这里再做一下简要总结。 TensorRT主要有三种安装模式、五种安装方式 毫无疑问&#xff0c;在windows系统中&#xff0c;我们只能选择zip安装。 安装tensorR…

轻松记录收支明细,一键打印,财务无忧!

作为现代人&#xff0c;管理好个人财务是非常重要的。但是&#xff0c;如何记录收支明细并打印出来呢&#xff1f;今天&#xff0c;我们向您推荐一款财务软件&#xff0c;帮助您轻松解决这个问题。 首先第一步&#xff0c;我们要打开【晨曦记账本】&#xff0c;并登录账号。 第…

Jmeter 分布式压测

为什么要分布式 jmeter是100%纯java开发的程序&#xff0c;虚拟用户是以线程实现的&#xff0c;在大量并发情况下&#xff0c;很容易出现CPU、内存消耗过大的问题&#xff0c;甚至会出现java内存溢出。一般一台电脑设置500-600线程数即可&#xff0c;如果超过1000线程&#xf…

词向量笔记

一、词向量的世界排名比赛MTEB MTEB: Massive Text Embedding Benchmark 二、词向量的维数 词向量的维数d1一般取20~500之间 三、向量索引SOTA 构建向量索引&#xff0c;就用这个吧&#xff1a;hnsw

【MySQL】宝塔面板结合内网穿透实现公网远程访问

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cpo…

springcloud宿舍管理系统源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;idea&#xff0c;vscode springcloud springboot mybatis vue elementui 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页展示轮播&#xff0c;公告&#xff0c;报修&#xff0c;晚归登记&#xff0…

安卓手机便签APP用哪个,手机上好用的便签APP是什么

在日常生活及工作方面&#xff0c;总是有许多做不完的事情需要大家来处理&#xff0c;当多项任务堆叠交叉在一起时&#xff0c;很容易漏掉一些项目&#xff0c;这时候大家会借助经常携带的手机来记录容易忘记的事情&#xff0c;如手机上的闹钟、定时提醒软件都可以用来记录待办…

2023.11.22 IDEA Spring Boot 项目热部署

目录 引言 操作步骤 1. 在 pom.xml 中添加热部署框架支持 2. Setting 开启项目自动编译 3. 以后创建的新项目进行同步配置 4. 重复 配置 步骤2 的内容 5. 开启运行中的热部署 引言 Spring Boot 的热部署是一种在项目正在运行的时候修改代码&#xff0c;却不需要重新启动…

亚马逊防关联要注意什么?看这一篇,防关联有技巧!

亚马逊账号关联的问题&#xff0c;对于跨境电商来说都不陌生&#xff0c;店铺的安全问题往往和账号关联有关&#xff0c;一旦亚马逊账号被关联就很可能导致我们的店铺被封&#xff0c;对于被亚马逊封店的卖家都会有申诉机会&#xff0c;如果无法成功申诉&#xff0c;那将永久被…

HarmonyOS 属性动画开发示例(ArkTS)

介绍 利用 ArkUI 组件不仅可以实现属性变化引起的属性动画&#xff0c;也可以实现父组件状态变化引起子组件产生动画效果&#xff0c;这种动画为显式动画。效果如图所示&#xff1a; 相关概念 显式动画&#xff1a;提供全局 animateTo 显式动画接口来指定由于闭包代码导致的…

算法复杂度分析

文章目录 有数据范围反推算法复杂度以及算法内容一般方法递归 有数据范围反推算法复杂度以及算法内容 c一秒可以算 1 0 7 10^7 107~ 1 0 8 10^8 108次 一般方法 看循环 有几层循环就可以初步分析O( n i n^i ni) 双指针算法除外O(n) 递归 公式法 根据公式的形式&#xff0…

服务号可以迁移到订阅号吗

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;首先我们要看一下服务号和订阅号的主要区别。1、服务号推送的消息没有折叠&#xff0c;消息出现在聊天列表中&#xff0c;会像收到消息一样有提醒。而订阅号推送的消息是折叠的&#xff0c;“订阅号…