mapbox-gl:数据多样式显示

简介: mapbox-gl:数据多样式显示

mapbox gl中,大多数的数据,通过图层的形式加入进去,用layout 和 paint 两个属性,控制显示图层的显示样式,通过在属性中,写入Expressions表达式,实现图层的多样式显示。
样式的帮助api参见网址:
https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-string

样式的控制,能够根据地图中的属性,比如缩放(zoom)等,进行控制显示,也能够根据图层中的属性数据,根据不同属性进行设置。

例如:下边是一个根据图层中属性控制显示圆形图标不同颜色,使用的是match表达式,其中get是获得图层中的属性值,下边是根据属性值不同,设置圆形图标的颜色,类似于switch case的形式,当然mapbox中也提供了case的写法形式,需要注意的是最后都需要一个默认值(“其他部分”)。

'circle-color': [

'match',

['get', 'ethnicity'],

'White', '#fbb03b',

'Black', '#223b53',

'Hispanic', '#e55e5e',

'Asian', '#3bb2d0',

/* 其他*/ '#ccc'

]

这是地图上的显示效果:
image.png
在鼠标移动在图层的对象上,变换图层单个对象的样式,也能通过设置表达式实现,下边是一个根据鼠标放在对象上和移出对象时,控制图层对象的透明度,通过修改state中的 hover值,控制对象的透明度。

"fill-opacity": ["case",

["boolean", ["feature-state", "hover"], false],

1,

0.5

]

//地图鼠标移入移出的事件控制

map.on("mousemove", "state-fills", function(e) {

if (e.features.length > 0) {

if (hoveredStateId) {

map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: false});

}

hoveredStateId = e.features[0].id;

map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: true});

}

});

// When the mouse leaves the state-fill layer, update the feature state of the

// previously hovered feature.

map.on("mouseleave", "state-fills", function() {

if (hoveredStateId) {

map.setFeatureState({source: 'states', id: hoveredStateId}, { hover: false});

}

hoveredStateId =  null;

});

下图是鼠标移入的效果:
image.png
在mapbox gl网站的例子中,都能找到上述代码,对于表达式的使用,要有平常做开发的一些常用逻辑思想,参照API文档,就能拼接出相应的表达式。

相关文章
|
6月前
|
前端开发 定位技术 API
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦...... 恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
|
6月前
|
Oracle Java 关系型数据库
课时4:JDK的安装与配置
课时4:JDK的安装与配置 摘要: 1. JDK安装:从Oracle官网下载适合操作系统的JDK版本,确保关闭防火墙,选择正确的位数(如64位),并进行一键式安装。 2. JDK配置:将JDK的bin目录路径(如D:\Java\jdk1.8.0_74\bin)添加到系统环境变量PATH中,确保Java开发命令(如javac、java)可用。配置完成后,重启命令行工具验证安装是否成功。 通过以上步骤,确保Java开发环境的正确搭建。
276 0
npm 启动报错 解决 events.js:174 throw er; // Unhandled 'error' event 的报错问题
npm 启动报错 解决 events.js:174 throw er; // Unhandled 'error' event 的报错问题
npm 启动报错 解决 events.js:174 throw er; // Unhandled 'error' event 的报错问题
|
11月前
|
存储 前端开发 JavaScript
通过dem2terrain生成MapboxGL地形服务
通过dem2terrain生成MapboxGL地形服务
243 8
|
11月前
|
Web App开发 开发者
|
存储 关系型数据库 数据管理
在 Postgres 中使用 Create Table
【8月更文挑战第11天】
1140 0
在 Postgres 中使用 Create Table
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
网络架构 Windows
windows电脑开机自动启动FRP客户端CMD代码,增加延时15秒功能
经常使用FRP客户端的都知道,FRP客户端启动时需要电脑有网络,否则会自动退出。我们的电脑在启动时,受路由器网络的影响,很多时间并不能第一时间建立起网络来,所以很容易受到网络影响,让FRP客户端自动启动发生故障。而这里的解决办法就是增加一段代码,可以延时15秒再执行。
|
JavaScript 数据可视化 定位技术
vue项目中mapboxgl的几个经典操作代码示例
vue项目中mapboxgl的几个经典操作代码示例
445 0