欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

mapbox获取图层中要素的属性值

程序员文章站 2022-03-22 10:13:39
Mapbox GL JS提供了强大的查询检索功能,我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。例如:我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值,我们可以用mapbox的map.querySourceFeatures()方法搞定。该方法可以查询出某一图层的所有要素(包括要素的属性值),如果你想筛选部分要素,只需要在参数中设置Filter即可。使用方法如下:var relatedFeatures = map.querySourceFeatures('c...

Mapbox GL JS提供了强大的查询检索功能,我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。

例如:我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值,我们可以用mapbox的map.querySourceFeatures()方法搞定。

该方法可以查询出某一图层的所有要素(包括要素的属性值),如果你想筛选部分要素,只需要在参数中设置Filter即可。

使用方法如下:

var relatedFeatures = map.querySourceFeatures('counties', {
sourceLayer: 'original',
filter: ['in', 'COUNTY', feature.properties.COUNTY]
});

其中 counties 为某一个source的id 

'source-layer': 'original'与所要查询的图层相同

filter为选择器,后面是要查询的条件,很多时候,filter选择器用的好可以省掉后台很多工作。

参考:

官方文档https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures

官方Demo https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/

 

本文地址:https://blog.csdn.net/ScapeD/article/details/109240443

相关标签: Mapbox GL JS