mapbox实现框选要素

成果图

在这里插入图片描述

参考博客

https://blog.csdn.net/ScapeD/article/details/89158755

原理与源码

利用mapbox的queryRenderedFeatures方法可以获取范围内的要素,但是这个只能是点和矩形和范围内的全屏要素,并不支持多边形,所以实现这个的思路就是画完框子的时候,取框的外接矩形来获取要素,缩小范围,然后再从获取到的所有要素里面逐一和多边形对比,利用turf的是否包含和相交来判断,进一步缩小范围,得到我们最终的要素。
最后再设置一下框选到的要素的样式就可以了。

     let polygonBoundingBox = turf.bbox('你的geojson')
     let southWest = [polygonBoundingBox[0], polygonBoundingBox[1]];
     let northEast = [polygonBoundingBox[2], polygonBoundingBox[3]];
     let northEastPointPixel = map.project(northEast);
     let southWestPointPixel = map.project(southWest)
     const features = map.queryRenderedFeatures(
         [southWestPointPixel, northEastPointPixel]
     );
     let filter = []
     features.forEach(e=>{
         if(turf.booleanContains('你的geojson',e.geometry)==true||turf.booleanDisjoint('你的geojson',e.geometry)==false){
             filter.push(e)
         }
     })
     if(filter.length>0){
         filter.forEach(res=>{
             map.setFeatureState(
                 { source: res.source, id: res.id },
                 { select: true }
             );
         })
     }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C/S医学检验LIS信息管理系统源码 检验科LIS系统源码

LIS系统又称实验室信息管理系统是专门为医院检验科而设计的一套实验室信息管理系统。 LIS通过将所有仪器自身提供的端口与科室LIS系统中的工作站点连接,通过LIS实现与医院HIS系统的联网。是一套符合医院检验科实际需要的管理系统,实现检验业务全流程的计…

全国停车位收费标准接口API

1) 请求地址 接口地址https://psbg.jparking.cn/cw-gateway/cwzg/v1/near_park 2) 调用方式:HTTP post 3) 接口描述: 数据来源捷停车 不可用于商用 概不负责 4) 请求参数: {"latitude": "29.563009", //坐标"longitude&quo…

Linux 进程优先级

什么是进程的优先级 优先级:对资源的访问顺序!注意优先级与权限的区别,优先级决定的是访问资源的顺序,这意味着无论是谁都可以访问到资源;但是如果你没有权限,你是不能访问资源的! 这个应该比较…

网络运维与网络安全 学习笔记2023.12.5

网络运维与网络安全 学习笔记 第三十五天 今日目标 su用户切换、sudo命令提权、部署动态Web应用 数据库安全加固、Web安全加固 网络监控基础、配置zabbix主控机、配置zabbix被控机 管理监控项、监控结果分析 su用户切换 su机制介绍及用法 Linux安全基线 指的是使Linux各项…

哈希表【1】

文章目录 🤔0.哈希表🌼1. 两数之和🌻1. 题目🌷2. 算法原理🌺3. 代码实现 🍈面试题 01.02. 判定是否互为字符重排🍌1. 题目🍏2. 算法原理🍓3. 代码实现 🤔0.哈…

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-C卷

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-C卷 2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-C卷A模块基础设施设置/安全加固(200分)A 模块基础设施设置/安全加固(200 分&am…

一个跨平台、跨空间支持多用户的远程云备份系统

多可云备份系统用于将一台服务器上的数据,高速备份到另一台或多台服务器上。无论这些服务器都在同一个局域网内,还是都在云服务器上,或者是分别在局域网内和云服务器上,使用多可云备份系统,都能够高速、高效、精确地完…

AntV和AntD之间的区别与联系

前言:最近在调研前端的一些框架,技术栈主要是用react,所以找到了2个十分相似解决方案,拿来对比一下(antd和antv都是基于react) antd对比antv antd antv 解决方案企业级 UI 设计语言数据可视化解决方案提供…

每日一练 | 华为认证真题练习Day142

1、路由器的主要功能,以下说法错误的是?(多选) A. 通过多种协议建立路由表 B. 根据路由表指导数据转发 C. 根据收到数据包的源IP地址进行转发 D. 实现相同网段设备之间相互通信 2、管理员发现无法通过TFTP传输文件到华为AR200…

【设计模式】策略模式设计-电影票打折功能

任务二:使用策略模式设计电影票打折功能 某电影院售标系统为不同类型的用户提供了不同的打折方式(Discount),学生凭学生证可享受8折优惠**(StudentDiscount),儿童可享受减免10元的优惠&#xf…

使用gunicorn部署django项目时,发现静态文件加载失败问题

本文主要介绍如何配置Niginx加载Django的静态资源文件,也就是Static 1、首先需要将Django项目中的Settings.py 文件中的两个参数做以下设置: STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, static) 2、将 STATICFILES_DIRS [ os.p…

开关电源有哪些EMI整改?|深圳比创达电子EMC

某控制产品在进行辐射发射测试时,发现测试结果超标,辐射发射测试结果如下图所示: 控制产品在去掉发射源之前,就在各外部端口采取了各种滤波措施,结果并无明显作用,即使把所有相关外部引线全部拿走(只剩下电…

js 防抖函数、节流函数

/** 节流函数 */ export function throttle(func, wait 100) {let isDoing falsereturn function (...rest) {if (isDoing) returnisDoing truesetTimeout(() > {func(...rest)isDoing false}, wait)} }/** 防抖函数 */ export function debounce(func, wait 100) {let…

微信小程序开发:地图路线规划全流程,超详细!!!(包括遇到的问题解决)

目录 效果展示 第一章 准备阶段 1.1 使用uniapp搭建微信小程序 1.2 条件1:appId(微信小程序appId) 1.3 条件2:key(腾讯位置服务申请的key) 1.4 条件3:插件appId(微信小程序插件…

C语言每日一题(41)循环队列

力扣 622 循环队列 题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好处是我们可以利用这个队列之前…

分布式版本管理系统---->Git(Linux---centos(保姆式)讲解1)

文章目录: 1:什么是Git以及作用 2.Git的基本操作过程(创建git仓库,配置仓库的配置) 3.git的工作区,暂存区,版本库的关系 4.将文件添加到版本库:git add 与git commit -m命令 5.git log查看日志的引入 6.查看.git文件中的内容 7.修改文件内容查…

图扑数字孪生压缩空气储能管控平台

压缩空气储能在解决可再生能源不稳定性和提供可靠能源供应方面具有重要的优势。压缩空气储能,是指在电网负荷低谷期将电能用于压缩空气,在电网负荷高峰期释放压缩空气推动汽轮机发电的储能方式。通过提高能量转换效率、增加储能密度、快速启动和调节能力…

探索什么样的导线,适合做433的天线

​​​​​​一、理论基础 (3 封私信 / 18 条消息) 为什么天线的材质会影响接收电磁波的效果? - 知乎 (zhihu.com) 电感基础3——RLC电路,帮助你轻松理解“阻抗”的概念 - 知乎 (zhihu.com) 一文读懂介电性能---介电常数 - 知乎 (zhihu.com) 433MHz 至…

亚马逊,shopee,lazada自养号测评补单,保护店铺信誉提升自然流量

测评补单对跨境电商卖家来说,是运营店铺的重要手段之一。一个产品想要有更好的曝光、更高的转化率,需要有一个好的Listing排名。Review在各平台Listing中占据着较高的权重,一个好的Review能给用户带来良好的观感,使用户对产品的信…

【EI会议征稿】第五届人工智能、网络与信息技术国际学术会议(AINIT 2024)

第五届人工智能、网络与信息技术国际学术会议(AINIT 2024) 第五届人工智能、网络与信息技术国际学术会议(AINIT 2024)将于2024年3月22-24日在中国南京举行。本届会议将主要关注人工智能、网络与信息技术面临的新的挑战问题和研究…