mapbox实现框选要素

news2025/2/24 9:32:50

成果图

在这里插入图片描述

参考博客

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.coloradmin.cn/o/1285935.html

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

相关文章

合并一个文件夹下的多个txt文件,并对文本内容分列处理。

python 合并一个文件夹下的多个txt文件,并对文本内容分列。 原始文件: 最终结果: import pandas as pd import xlwt import pandas as pd from sqlalchemy import create_engine import pandas as pd import os import glob dirPath g…

深入浅出 Linux 中的 ARM IOMMU SMMU III

系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的 dma_alloc_coherent()/dma_alloc_attrs() 等接口。dma_alloc_coherent()/dma_alloc_attrs() 等接口通过 DMA IOMMU 的回调分配内存,并为经过 IOMMU 的 DMA 内…

十二、FreeRTOS之FreeRTOS任务相关API函数

本节需要掌握以下内容: 1,FreeRTOS任务相关API函数介绍(熟悉) 2,任务状态查询API函数实验(掌握) 3,任务时间统计API函数实验(掌握) 4,课堂总结…

视频分割方法:视频批量剪辑技巧,精准至秒高效分割

在视频编辑过程中,视频分割是一项基础但重要的步骤。对于许多初学者或非专业人士来说,视频分割可能是一项挑战。然而,随着技术的发展,现在有许多工具可以快速高效地进行视频分割。本文讲解云炫AI智剪如何一键分割视频,…

记住5个关键点,避免被身边人传染成胖子

在现代社会,肥胖已经成为一个全球性的疑难杂症。 越来越多的人为了减去身上的赘肉采取各种各样、五花八门的方法,但却发现收效甚微,总是抵挡不住各种各样的引诱,美食、游戏、聚餐、追剧,美食吃不到睡都睡不好&#xf…

【Unity动画】状态机中层的融合原理与用法详解

1. 状态机概念介绍 在Unity中,动画状态机(Animator State Machine)是一种强大的工具,用于控制游戏对象的动画行为。动画状态机由多个动画状态Animation和过渡条件Transition、层组成!而层(Layers&#xff…

抖音本地生活服务商申请入口在哪里?具体流程是怎样的?

不论是抖音的本地生活业务,还是后来的支付宝、视频号的本地生活业务,因为市场体量足够庞大,市场前景广阔,一直很受各大创业者的追捧。那么,如此火热的本地生活项目,想要申请成为服务商,具体的申…

五个轻量级免费 PDF 阅读器

便携式文档格式 (PDF) 是商业中最常用的文档类型之一。它们不仅是创建精心设计的文档的更通用的解决方案,而且还具有交互性和安全性。因此,对于寻求具有专业外观的文档的企业来说,PDF 是理所当然的选择。 当谈到查看这些文档时,大…

高等职业学校新媒体营销实训室解决方案

背景 随着数字化时代的来临,新媒体营销成为企业推广和品牌建设的关键手段。为了培养高职学生在新媒体领域的实际操作能力,建立一套全面、系统的实训室方案至关重要。 目标 搭建高职新媒体营销实训室,旨在培养学生的实际操作能力&#xff0…

微机原理11

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案,请将选定的答案填涂在答题纸的相应位置上。) CPU 的数据总线提供() A.数据信号流 B. 地址信号流 C.来自1O设备和存储器的响应信号 D.所有存储器和1/O设…

VirtualBox+Vagrant安装虚拟机

文章目录 一、下载Virtualbox和Vagrant1、下载2、安装 二、安装虚拟机1、新建目录D:\VirtualMachine2、执行vagrant init centos/7命令,就会在该目录下创建Vagrantfile文件3、执行vagrant up命令4、查看当前主机分给虚拟机的网关网段5、找到D:\VirtualMachine下的Va…

自定义一个简单的JDBC连接池实现方法(附代码演示)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍自定义一个简单的JDBC连接池实现方法以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在…

github首次将文件合到远端分支,发现名字不是master,而是main

暂存区和本地仓库的信息都存储在.git目录中其中 其中,暂存区和本地仓库的信息都存储在.git目录中 在自己的github上实践 1、刚开始,git clone gitgithub.com:lingze8678/my_github.git到本地 2、在克隆后的代码中加入一个pdf文件 3、在git bash中操作…

查询绑定了所有id的name

1、如图,绑定了所有id的有A,B两个name 2、第一种Sql及效率 explain SELECT name,count(id) as count from test GROUP BY name HAVING count(id)(SELECT count(DISTINCT id) from test); 3、第二种sql及效率 explain select * from (SELECT name,count(id) as co…

VS2022异常解决Could not get emulator name after starting AVD

1、问题描述 在启动安卓仿真器时,弹出这个框 2、设置信息 冲着NET 8升级的VS2022,将其升级为 17.8.2,结果Xamarin开发时,安卓模拟器死活起不来,起来就黑屏。然后网上各种搜解决方案(包括不限于&#xf…

Fiddler抓包详细实用保姆级教程,小白一看就会

一、Fiddler4工作原理 Fiddler 是一款以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888,这是fiddler的默认端口。 我们发送的每一个请求和收到的每一个响应都会先经过fiddler,这样就实现了抓取数据包的工作 当Fiddler退出时…

C++基础 -41- 迭代器

每个stl 模板接口都有一个专用的迭代器 迭代器就是 stl 库中的 一个特殊指针,功能与指针类似(类似但不是) 迭代器定义格式 迭代器的使用,使用迭代器遍历向量容器的参数 代码运行结果 无论使用普通方式还是迭代器方式去都可以遍历vector容器

软著项目推荐 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分:4.2 损失函数:4.3 搭建seq2seq框架:4.4 测试部分:4.5 评价NLP测试效果:4.6 梯度截断…

线程池原理初探

1.引言 合理利用线程池能够带来三个好处。第一:降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二:提高响应速度。当任务到达时,任务可以不需要的等到线程创建就能立即执行。第三:提高线程的可管理性。…

windows下DSS界面本地集成linkis管理台

说明:当前开发环境为windows,node版本使用16.15.1。启动web时,确保后端服务已准备就绪。 1.linkis web编译 #进入项目WEB根目录 $ cd linkis/linkis-web #安装项目所需依赖 $ npm install参考官方编译说明,windows下编译一直异常…