mapbox实现框选要素

贴个群号

WebGIS学习交流群461555818,欢迎大家。

成果图

在这里插入图片描述

参考博客

https://blog.youkuaiyun.com/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 }
             );
         })
     }
实现Mapbox中的框选查找,可以按照以下步骤进行操作: 1. 首先,在Mapbox Studio中创建或选择一个合适的地图样式。可以使用Mapbox Studio Classic或Mapbox Studio进行样式的创建和编辑。 2. 在地图样式中,确保已经添加了所需的地图图层和数据源。这些图层可以是矢量图层、栅格图层或栅格切片图层,根据具体的需求进行选择。 3. 在Mapbox.js中,使用适当的代码库和API来实现框选查找功能。可以使用Mapbox GL JS、Mapbox.js、或者其他适用于你的项目的JavaScript库。 4. 使用合适的交互事件和工具,在地图上创建一个框选区域。例如,可以使用鼠标拖拽事件或触摸事件来创建一个矩形框选区域。 5. 在框选事件中,获取框选区域的坐标范围。可以使用Mapbox的API来获取框选区域的边界坐标。 6. 使用Mapbox的API或其他适用的方法,将框选区域的坐标范围传递给后端服务器或数据库进行查找操作。 7. 在后端服务器或数据库中,根据框选区域的坐标范围执行查询操作。可以使用Mapbox的Map Matching API来执行地理位置匹配操作,根据给定的坐标范围查找符合条件的地理位置点。 8. 将查询结果返回到前端,并在地图上展示查找到的地理位置点。可以使用Mapbox的API或其他适用的方法,在地图上标记或高亮显示查找到的地理位置点。 总结一下,实现Mapbox中的框选查找功能,需要在Mapbox Studio中创建地图样式,使用Mapbox.js或其他适用的JavaScript库来实现框选交互,将框选区域的坐标范围传递给后端进行查询操作,最后在地图上展示查询结果。具体的实现方式可以根据具体的需求和项目进行选择和调整。 Mapbox Studio样式作为Mapbox.js中的底图 Mapbox Studio手册 Mapbox API开发者页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值