mapbox-gl：图层过滤显示

在mapbox-gl中加载图层时，要控制显示和隐藏其中的某些元素，需要使用mapbox-gl的图层过滤接口。
每种类型图层的layout中有visibility属性，但是这个在api文档中，只支持基本函数，达不到控制图层中特定元素显示和隐藏的功能，只能控制当前图层全部元素的显示和隐藏。
map.setLayoutProperty(‘图层id’, ‘visibility’,‘枚举属性’);

mapbox-gl图层过滤有单独的api说明setFilter：
https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfilter
根据图层中的数据属性，控制图层my-layer中名称为name的元素显示：
map.setFilter(‘my-layer’, [’==’, [‘get’, ‘name’], ‘name’]);
如要控制多个元素的显示和隐藏，可以使用多条件控制语句，示例中是显示名称不是name1、name2的其他元素：

map.setFilter('my-layer',  [ "all",  ["!=", ["get", "name"], "name1"], ["!=", ["get", "name"], "name2"] ]);

mapbox-gl的表达式语句参照官方说明文档：
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
图层过滤还能控制数据源中的空间类型，在mapbox-gl中加载的一个geosjon数据源中包含多种几个空间类型，如point、linestring和polygon，使用过滤语句，可以在加载图层时，设置加载某一类型的数据，写法如下：

map.addLayer({id: 'measure-points',type: 'circle',source: 'geojson',paint: {'circle-radius': 5,'circle-color': '#000'},//加载点数据源filter: ['in', '$type', 'Point']});

mapbox-gl提供的图层方式，还是能够很方便的控制图层元素的操作，更多使用的方式参见官方的API文档。

参考文档：
https://docs.mapbox.com/mapbox-gl-js/example/measure/
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/

更多文章请关注公众号查看！

mapbox-gl：图层过滤显示相关推荐

mapbox 图层顺序显示
mapbox 图层顺序显示 1. 第一种方式创建图层的时候控制图层的层级示例将markerPoint放在图层之上 map.addLayer({'id': id,'type': 'line','s ...
进阶mapbox GL之paint和filter
概述通过前面的文章初识mapbox GL我们对mapbox GL有了一个相对比较全面的认识,本节结合一些示例,重点讲述一下mapbox GL里面的filter和paint的用法. 说明本文中的示例 ...
Mapbox GL JS介绍及使用
Mapbox GL JS介绍及使用:(以web端基本交互实现为例) Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox st ...
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
Mapbox GL JS本地化实践
最近在搞android Mapbox SDK,一直想要本地化,看到这篇文章,赶紧转载一下,后面要用,非常感谢作者! 作者:猿基地链接:https://www.jianshu.com/p/693f38 ...
初识mapbox GL
一.概述最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发.有 ...
Mapbox GL JS 表达式概述
表达式(expressions)是Mapbox GL JS的一个高级功能,它为数据的添加和渲染展示提供了更多的灵活性. 表达式的功能包括: 数据驱动样式:根据一个或多个数据属性指定样式规则. 算术:对 ...
Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...
GIS开发：mapbox gl几种底图的加载
mapbox gl除了加载客户端可控制样式的底图,也能够加载常规的影像底图. 这里指发布的影像或者矢量地图切片,在线经常使用的有天地图,谷歌地图.高德百度等,底图的加载,mapbox gl中,主要是修 ...

mapbox-gl：图层过滤显示

mapbox-gl：图层过滤显示相关推荐

最新文章

热门文章