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 });})}

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

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

相关文章

【JavaEE进阶】 Spring核⼼与设计思想

文章目录 🌲Spring 是什么?🎄什么是IoC呢?🎈传统程序开发🎈传统程序开发的缺陷🎈如何解决传统程序的缺陷?🎈控制反转式程序开发🎈对⽐总结规律 🍀…

适用于 Windows 的最佳(免费/付费)数据恢复软件

借助最佳数据恢复工具从 Windows PC 恢复丢失和删除的数据 您是否正在寻找一种巧妙的方法来从计算机中取消删除或恢复已删除的文件?如果是,那么这篇文章就是为您准备的!在本教程中,我们整理了一份全面的数据恢复软件列表&#xf…

Android 第三十九章 RatingBar

一、属性 android:isIndicator“false” 此评级栏是否为指示器(用户不可更改)。 默认false 可更改,true 不可更改android:numStars“6” 设置星星数量android:rating“1” 设置默认评级android:stepSize“2” 设置步长 二、示例 class Mai…

机器人学习目标

学习目标: 若干年后,我们都将化为尘土,无人铭记我们的存在。那么,何不趁现在,尽己所能,在这个世界上留下一些痕迹,让未来的时光里,仍有人能感知到我们的存在。 机器人协会每届每个阶…

在 Vue 3 项目中实现图片的在线预览(百度搜索暂未验证)

当使用 Vue 3 TypeScript Vite 完成图片在线预览时,你可以使用第三方库 vue-image-lightbox 来实现。以下是如何在 Vue 3 TypeScript Vite 项目中完成这个任务的示例: 首先,安装 vue-image-lightbox 库: npm install vue-ima…

外包干了4年,技术退步明显...

先说情况,大专毕业,18年通过校招进入湖南某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

Pip命令:Python包管理的利器

Pip是Python的一个强大的包管理工具,它可以帮助我们轻松地安装、升级和管理Python包。在这篇文章中,我将介绍Pip命令的基本用法和一些高级技巧。 安装Pip 在大多数Python发行版中,Pip都是默认安装的。如果你的系统中还没有安装Pip&#xff0c…

postgres pg_dump: fe_sendauth: no password supplied问题处理

postgres pg_dump: fe_sendauth: no password supplied问题处理 1、pg_dump: fe_sendauth: no password supplied问题处理(root 用户)2、解决方法2.1、创建 .pgpass文件2.2、chmod 600 ~/.pgpass 3、额外情况 1、pg_dump: fe_sendauth: no password supp…

codeforces每日两道思维题(第 二 天)

2 C. Challenging Cliffs 原题链接:Problem - 1537C - Codeforces rating : 1200 题目描述: 你是一名游戏设计师,想要创建一个障碍赛道。玩家将从左到右行走。你已经选择了 n 座山的高度,并希望安排它们,以便第一座…

SCAU:18037 20秒后的时间

18037 20秒后的时间 时间限制:1000MS 代码长度限制:10KB 提交次数:0 通过次数:0 题型: 编程题 语言: G;GCC Description 编写程序,输入三个整数变量hour(小时)、minute(分钟)、second(秒)…

优化网站性能,从容谈CDN加速的部署与运维

随着互联网的迅猛发展,网站的性能优化成为网站运维工作中不可或缺的一环。其中,CDN(Content Delivery Network)加速技术因其在全球范围内提供快速、可靠的内容分发而备受关注。本文将从一个网站运维的角度出发,深入探讨…

文件重命名:删除文件名中的空格,提高文件可读性和可管理性的方法

在计算机科学中,有效的文件管理对于提高工作效率和保持数据的一致性至关重要。工作中经常会遇到文件名中包含空格的情况,这不仅会使文件在某些情况下难以读取,而且可能导致管理上的困扰。在文件名中添加空格可能会使文件名变得模糊和不明确&a…

AIGC: 关于ChatGPT中基于API实现一个Client客户端

Java版的GPT的Client 可作为其他编程语言的参考注意: 下面包名中的 xxx 可以换成自己的 1 )核心代码结构设计 src main java com.xxx.gpt.client entity ChatCompletion.javaChatCompletionResponse.javaChatChoice.java… util Proxys.java… ChatApi.javaChatG…

我有才知识付费小程序免费搭建:轻松拥有知识付费平台

用户管理 提供会员特权和积分奖励,提高用户忠诚度和购买力。 用户通过在平台上进行消费、签到、参与活动等方式获取积分,用于兑换丰厚奖品或提升会员等级。增强用户的参与感与忠诚度,提高用户粘性,并刺激用户的购买力。 为用户打…

7z命令压缩文件夹,并忽略其中某些文件夹

-xr指令表示忽略 对于.vs这样的文件夹,需要用双引号括起来 类似的,可以使用通配符忽略文件 .\7z.exe a -t7z D:\Document\Code\apps.7z D:\Document\Code\apps -xr!".vs" -xr!bin -xr!obj

编码生成规则Long increment(K key, long delta)

前端不传数据&#xff0c;像一些 需要 从后台查出来的编码的生成规则&#xff1b; 采用方法为&#xff1a;Long increment(K key, long delta) redisTemplate.opsForValue()中的方法都定义在ValueOperations<K, V> 中&#xff0c;该接口中一共有17个方法&#xff1a; …

Arduino学习笔记2023年11月30日

目录 1 编程软件下载2 代码结构3 IO引脚控制3.1 引脚初始化3.2 引脚使用数字量输出数字量输入模拟量输出模拟量输入 4 串口串口初始化串口输出串口输入 5 外部中断6 函数6.1 映射区间函数6.2 延时函数 总结 1 编程软件下载 官网链接&#xff1a;https://www.arduino.cc/ 下载链…

SpringBoot 配置文件使用@ @取值

目录 一、背景 二、遇到的问题 三、解决办法 一、背景 &#xff08;1&#xff09;我在项目中引入了如下依赖&#xff0c;目的是开启SpringBoot为我们提供的监控(Actuator)功能。 <!-- 引入SpringBoot 监控功能 --> <dependency><groupId>org.springframew…

PWM控制器电路D9741,定时闩锁、短路保护电路,输出基准电压(2.5V) 采用SOP16封装形式

D9741是一块脉宽调制方三用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。 主要特点&#xff1a;● 高精度基准电路 ● 定时闩锁、短路保护电路 ● 低电压输入时误操作保护电路 ● 输出基准电…

Linux服务器部署XXL-JOB

参考文档及下载地址&#xff1a;分布式任务调度平台XXL-JOB 1 从git拉取XXL-JOB代码 我们的大部分变动&#xff0c;是发生在xxl-job-admin&#xff0c;最终将这个模块打包成jar包部署在linux服务器上。 2 执行数据库脚本 doc\db\tables_xxl_job.sql 3 修改pom文件&#xff0c…