MapBox实现要素点击高亮的几种思路（点击颜色变化）

WebGIS小智

已于 2022-11-14 16:10:37 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： MapBox基础教学 GIS原理系列文章标签： mapbox 点击高亮

于 2022-11-14 16:08:27 首次发布

本文链接：https://blog.youkuaiyun.com/lz5211314121/article/details/127848062

GIS原理系列同时被 2 个专栏收录

40 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

MapBox基础教学

8 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了两种在MapBox中实现图层点击高亮的方法。第一种是通过监听'click'事件，获取点击的要素并创建新图层显示；第二种是利用filter动态改变图层展示，创建专门的高亮图层。两种方法在数据量不大时性能相近，第一种更易于理解和实现。

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

需求和问题是这样的：现在假设你有一个图层A，想要实现点击A图层中的某一个要素高亮的需求，首先我们将A图层添加到地图上：

第一种思路最简单也最好理解，首先我们可以通过map.on('click',e=>{})的回调，获取当前鼠标点击事所选中的要素，然后将这个要素作为数据源source，重新构建一个图层添加到地图上。

代码如下：

	map.on('click', function (e) {
     // 获取点击到的要素
		const features = map.queryRenderedFeatures(e.point);
    
		map.addLayer({
		  "id": "test-filter",
		  "type": "fill",
		  "source": {
			  "type": "geojson",
              //这里只有一个图层就是features[0],如果有多个图层需要自己写条件过滤
			  "data": features[0]
		   },
		  "click": true,
		  "paint": {
			 "fill-color": "#47C1D0",
			 "fill-opacity": 1
		  },
			
		});
	});

解释一下上面的代码，首先通过map.on绑定click事件，得到了回调参数e，e里面包含很多东西，mapbox官方为我们提供了一个API：queryRenderedFeatures来获取当前点击得到的features，只需要传入参数e的坐标就可以，我们获取到的features可能是多个的，因为