mapbox实现框选要素

原创已于 2024-01-15 17:52:25 修改 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#mapbox #webgis #gis #前端

于 2023-12-05 15:19:07 首次发布

mapbox+leaflet 专栏收录该内容

64 篇文章

订阅专栏

贴个群号

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