首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Mapbox GL map.setFilter中使用`in`表达式

在Mapbox GL中,map.setFilter方法用于设置图层的过滤器,以控制图层中要显示的要素。in表达式是一种常用的过滤器表达式,用于匹配属性值是否在指定的一组值中。

使用in表达式的语法如下:

代码语言:txt
复制
map.setFilter(layerId, ['in', propertyName, value1, value2, ...]);

其中,layerId是要设置过滤器的图层的ID,propertyName是要过滤的属性名称,value1, value2, ...是要匹配的属性值。

in表达式的作用是筛选出具有指定属性值的要素。例如,如果要筛选出属性值为'A'、'B'、'C'的要素,可以使用以下代码:

代码语言:txt
复制
map.setFilter(layerId, ['in', 'propertyName', 'A', 'B', 'C']);

这样就会将图层中属性值为'A'、'B'、'C'的要素显示出来,其他要素将被隐藏。

in表达式的优势在于可以一次性匹配多个属性值,方便快捷。它适用于需要根据属性值进行筛选的场景,例如按照不同的分类显示要素。

以下是一个示例应用场景:

假设有一个地图图层,其中包含了不同类型的建筑物要素,每个要素都有一个属性buildingType表示建筑物的类型。现在需要根据不同的建筑物类型显示不同的样式。

可以使用in表达式来实现这个需求,代码如下:

代码语言:txt
复制
map.setFilter('building-layer', ['in', 'buildingType', 'residential', 'commercial']);

上述代码将会显示属性buildingType为'residential'和'commercial'的建筑物要素,其他类型的建筑物将被隐藏。

推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Godot Engine:跨平台游戏开发的新境界 | 开源日报 No.92

    它支持 React / Angular / Vue / 纯 JavaScript,并提供了标准网格所需的所有特性,列交互、分页、排序和行选择等。...mapbox/mapbox-gl-js[3] Stars: 10.1k License: NOASSERTION picture Mapbox GL JS 是一个在浏览器中使用矢量切片和 WebGL...高效渲染:通过利用 WebGL 技术,Mapbox GL JS 能够快速加载和渲染大规模矢量切片数据,在保证流畅体验同时节省资源消耗。...易于启用/禁用:需要显式地在 plugins 启用每个想要使用的插件,在安装部分有详细说明。这种方式让用户能够自由选择所需功能并避免不必要负担。.../mapbox-gl-js: https://github.com/mapbox/mapbox-gl-js [4] Dao-AILab/flash-attention: https://github.com

    51510

    云服务商正在杀死开源商业模式

    但是昨天看到了一个让我震惊的新闻:最新版本的Mapbox GL JS将不再是开源的!!!...在我的想法,这是一个在当下重名利的世界,保持着那颗开源的心,一直以开源做为自己的商业模式,持续走下去的童话故事,而Mapbox就是故事的主角, 去年的时候我也写过关于Mapbox商业模式的文章,就是他即提供了一种免费开源的版本...我们先回到Mapbox的例子,在Mapbox GL JS使用的案例Mapbox最早的决定是,开源其基于浏览器的地图渲染器的最早的两个版本(像我们熟知的Snap-Maps、纽约时报和CNN都用过)。...使用Mapbox GL JS的功能,支持复杂几何图形的自由形式绘图,最终的成品是可以在地图上形成形状,也就是说是我的标记是被投影到地球上的一个真实位置,而不是简单的仅仅是悬浮在想象的二维空间。...回到Mapbox上,至少已经有一家云服务商公开的将Mapbox的代码复制并粘贴到他们的收费服务: Azure,微软的云服务 去年,Azure发布了由Mapbox GL JS支持的地图样式,它是Azure

    2.6K10

    (数据科学学习手札156)地图可视化神器kepler.gl 3.0版本发布

    ,今天的文章,我就将为大家介绍kepler.gl新版本的主要更新内容。...:   譬如光线阴影特效,可以通过设置精确的时区、时间等参数,来为地图中的三维要素配置逼真的光影效果:   或是开启放大镜效果:   且多种特效可以相互叠加使用,功能非常的强大~ 2.2 新增GeoArrow...而在新版本,kepler.gl新增了对Apache Arrow特有的GeoArrow格式的支持,在官方的测试示例,读取及解析百万行级别的多边形矢量表数据,arrow格式速度比geojson快了超过...底层是基于React、Mapbox以及deck.gl等框架进行功能构建,但由于Mapbox从1.13版本开始修改了其开源协议,变成了闭源商业地图框架,因此为了避免被不再开源的Mapbox限制其发展,kepler.gl...从3.0版本开始正式将底层地图框架更换成相兼容的开源高性能地图框架Maplibre(这也是费老师我在日常GIS平台研发工作中使用的主力框架,强烈推荐)。

    43110

    初识mapbox GL

    一、概述 最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发、有所收获...2.如何快速认识 打开maobox GL官网,如下图所示: ? 快速认识mapbox GL,我们只需要快速看一下Overview和Example两个部分即可。...2.2 Example Example 是官方提供的有关maoboxl GL功能比较全面的一个展示,对于一个初次接触的人来说,通过Example,一方面我们能够快速的获取mapbox GL的表现,另一方面...,通过Example代码,可以对框架的使用有一个初步的认识。...url": "mapbox://mapbox.terrain-rgb" }); 5.layer layer在mapbox GL是非常重要的,我觉得mapbox GL的设计NB之处也在于此。

    2.3K30

    地图开发WebGL着色器32位浮点数精度损失问题

    但是对于一些覆盖物,比如marker、polyline、label使用的都是经纬度,经纬度小数点后位数比较多,从js的数字传入到gl使用gl.FLOAT是32位浮点数,小数点只能保证到后4位或者5位...[strip] 文章中提到了几种解决方案,像mapbox使用的是第二种方案,将覆盖物比如marker、polyline、polygon都按照瓦片切分,经纬都转换成瓦片网格里面的0-256数字。...继续尝试发现mapbox也有类似问题:https://github.com/mapbox/mapbox-gl-js/issues/7268 mapbox这里也是使用了转换到视空间。...( map.renderEngin.gl.VERTEX_SHADER, map.renderEngin.gl.HIGH_FLOAT ) [1240] 解决 最终从deck.gl中找到了一种解决方案,也是将传入的数据拆分成一个高位和低位...[1240] project_uCoordinateOrigin使用的是地图中心点的经纬度坐标 [1240] 其中着色器的一部分关键是project_uCommonUnitsPerWorldUnit和

    1.6K51

    空间数据可视化神器,Pydeck!

    使用文档: https://pydeck.gl/index.html GitHub: https://github.com/visgl/deck.gl/tree/master/bindings/pydeck...与Mapbox上的卫星图像叠加以突出地形如何影响农业。 通用样式,一幅世界地图。 通过geopandas的数据,绘制世界地图。 其中geopandas安装起来有点费劲,建议使用whl安装包。...使用AWS开放数据和Mapbox卫星图像制作一个地形图。 旧金山市内各种公共交通站点的名称,在站点的位置上标出。 一辆共享单车在旧金山的骑行情况,从开始到逐渐消失。...这里小F用到了Mapbox地图,是需要自行去注册,获取token。...地址: https://account.mapbox.com/ 然后在pydeck的deck方法,将token添加到api_keys参数即可。

    1.8K50

    Mapbox GL JS学习探索系列(1) - Map

    本文链接:https://blog.csdn.net/j_bleach/article/details/102211813 摘要 本文旨在分享自己在mapbox的学习过程使用经验,通过介绍mapbox...fire:mapbox文档没有写明这个方法,但是这个方法也非常好用,作用是主动触发订阅的方法,在mapbox-gl.js做扩展的时候,这个方法作用非常大,因为mapbox的方法订阅是标准的发布订阅模式...这里之前遇到一个坑是在这个方法调用了地图楼层和一些区域配置的一些参数,诸如bbox等等,没有成功,原因是这些配置项并不属于地图必须加载的资源配置,因此在使用这个方法要格外注意,如果有额外的自定义的样式资源请求...data 表示的是地图资源放生改变时触发的方法,这个方法在图层渲染,资源更改时使用频率非常高,因为load只是首次触发的方法,在后续对地图(图层)资源进行修改的过程,需要使用data方法来就行判定,在这个方法返回的是一个...里面包含了数据类型等信息,这个在实际开发使用场景也很多,之后在介绍layer板块的时候,会举一个data方法的实际用例。

    2.8K10

    nuxt使用antv-l7踩坑

    nuxt.js 下使用 antv-l7 实在是有太多的坑了,官方文档也不是很全,只能不断摸索和尝试,下面我把这些坑记录下来,也许能帮到你。...如果你有更好的解决方案,欢迎留言;如果未来官方修复了这些问题,或者提供了更好的使用方法,那请忽略这篇文章。...$l7 的方式使用 const { Scene, Popup } = this.$l7 const { GaodeMap, Mapbox } = this....://github.com/mapbox/mapbox-gl-js/issues/3265),是由于 MapBox 初次加载时长宽一定为 300 * 400,必须经过一次 map.resize() 才能正确获得目标...的 resize 也被触发了,MapBox 的大小也就正常了 地图的 scene 的 on load 读取 vuex 的值无效 不知道原因,在组件 mounted 的时候去读 vuex 的屏幕宽度

    2.1K30

    使用 plotly 绘制 Choropleth 地图

    需要注意此参数中值的顺序需要和 locations 保持一致,一一对应,河南在 locations 的索引是 9,那么河南的确诊人数在 z 的索引也必须是 9。...需要注意的是当你使用以下风格之一时,你就需要指定 mapbox_token(关于如何获取 token 详细可参见这里): ["basic", "streets", "outdoors", "light...在 plot express 的各个绘图方法,DataFrame 其实是最为方便的格式,也是官方推荐的格式,官方的大部分示例都是使用的这个格式。...center:和 update_layout mapbox_center 对应。 zoom:和 update_layout mapbox_zoom 对应。 最终的效果如图: ?...有时间我会继续写一写如何在 dash 融入这些地图,并实时更新。

    14.2K41
    领券