mapbox实现空间过滤

最新推荐文章于 2025-03-20 20:30:12 发布

有玉微凉，是为樱琅

最新推荐文章于 2025-03-20 20:30:12 发布

阅读量1.0k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript mapbox

本文链接：https://blog.youkuaiyun.com/Sakura1998gis/article/details/130487112

文章介绍了地图空间过滤的技术实现，通过添加一个空的geojson图层，当用户选择特定政区或河流时，将这些要素的geojson数据加入图层并用青色高亮显示，同时利用turfBbox进行地图定位。此外，提到了面要素和点要素的处理方式，并展示了如何调整图层顺序以保持高亮图层在最上方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理

空间过滤，一般就是选择政区，河流什么的地图要素，地图就会缩放到那里，高亮要素的边框。

我们这里用到的其实就是加载地图的时候就提前丢进去一个空的geojson图层，这个图层是用来空间过滤的，然后用户点击政区或者河流的时候，我们将该要素的geojson拿过来，丢进那个空的空间过滤图层里面，用青色（一般高亮使用的颜色就是青色）线要素显示，地图定位到该要素上，然后把这个过滤图层放到所有图层的最上方。
然后具体实现请看下面

空间过滤

首先是加载空的空间过滤图层，注意这里是线要素，面要素和线要素的geojson数据填到线要素里面都可以，面要素就会只显示边框，线要素就更合适了，至于点要素，定位到那里就可以了，当然你如果想搞的更好，也可以再加一个点要素的空间过滤图层来实现，笔者这里并没有加。

        map.addSource('filterGeoJSON',{
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features':[]
          }
        })
        map.addLayer({
          'id': "filterGeoJSON",
          'source': "filterGeoJSON",
          type:'line',
          'layout': {},
          'paint': {
            'line-color':'rgb(0,255,255)', // 高亮色，也就是青色
            'line-width': 2.5
          }
        })

然后获取到geojson

const geojson = data   data就是你不论是调接口也好，查geoserver服务也好，获取到的geojson

然后使用下面这个方法，把geojson传进去
turfBbox是turf/bbox，这是个很强大的第三方库，大家应该基本都知道这个，官网是这里

https://turfjs.fenxianglu.cn/category/

然后使用fitBounds方法进行定位
这里面的mapPadding是这个padding，不加这个的话，就会全屏，加上这个，可以看一个全景，这个要根据你自己的项目来调节，然后里面的就是padding的像素值，不用加px。
然后setData是填充数据，给咱们那个空间过滤图层。
最后moverLayer是把空间过滤图层放到所有图层的最上方。

	const mapPadding={
        padding: {top: 180, bottom:180, left: 0, right: 300}
    }
     //设置空间过滤图层
     setFilterGeoJSON(geojson){
       const bound = turfBbox(geojson.geometry)
       this.map.fitBounds(bound,this.mapPadding)
       this.map.getSource('filterGeoJSON').setData(geojson)
       this.map.moveLayer('filterGeoJSON')
     },