没有合适的资源?快使用搜索试试~ 我知道了~
mapboxgl 中插值表达式的应用场景.doc
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 142 浏览量
2022-07-08
22:58:32
上传
评论
收藏 4.6MB DOC 举报
温馨提示
试读
21页
mapboxgl 中插值表达式的应用场景.doc
资源推荐
资源详情
资源评论
mapboxgl 中插值表达式的应用场景
interpolate 是 mapboxgl 地图样式中用于插值的表达式,能对颜色和数字进行插值。
它的应用场景有两类:1、对地图数据进行颜色拉伸渲染。2、在地图缩放时对图形属性进
行插值。
这篇文章就把 mapboxgl 中 interpolate 插值工具的常见应用场景介绍一下。
目录一、前言二、语法三、对地图颜色进行拉伸渲染 1. 热力图 2. 轨迹图 2. 模型网格渲
染四、随着地图缩放对图形属性进行插值五、interpolate 的高阶用法六、总结
一、前言
interpolate 是 mapboxgl 地图样式中用于插值的表达式,能对颜色和数字进行插值。
它的应用场景有两类:
对地图数据进行颜色拉伸渲染。常见的应用场景有:热力图、轨迹图、模型网格渲染等。
在地图缩放时对图形属性进行插值。具体为,随着地图的缩放,在改变图标大小、建筑物
高度、图形颜色等属性时,对属性进行插值,从而实现平滑的过渡效果。
这篇文章就把 mapboxgl 中 interpolate 插值工具的常见应用场景介绍一下。
二、语法
先看一下 interpolate 插值工具的语法。
interpolate 表达式要求至少有 5 个参数,分别是表达式名称、插值类型、输入值、判断值、
输出值。
[“interpolate”, //表达式名称
interpolation: [“linear”] | [“exponential”, base] | [“cubic-bezier”, x1, y1, x2, y2 ], //插值类
型
input: number, //输入值
stop_input_1: number, stop_output_1: OutputType, //一组判断值和输出值
stop_input_n: number, stop_output_n: OutputType, ... //一组判断值和输出值
]: OutputType (number, array, or Color) //返回插值完的结果
其中插值类型会在后面详细介绍,这里先不多说。
判断值、输出值是“一组”的关系,它们必须两两出现。
还有一点需要注意,就是判断值必须遵循升序规则。
下面我们结合实际场景理解起来会更容易一些,先说第一类应用场景:对地图数据进行颜
色拉伸渲染。
三、对地图颜色进行拉伸渲染
这个和 ArcGIS 中对栅格数据进行颜色拉伸渲染是一个意思。
地图颜色拉伸渲染的本质,是根据网格的属性值为网格设置颜色,当网格足够小、足够密
时,就容易产生颜色平滑过渡的效果。
前面说到,常见的应用场景有:热力图、轨迹图、模型网格渲染等。
在 mapboxgl 中,热力图和轨迹图它们虽然看上去不像是由网格组成的,但在计算机图形
学的框架下,任何在屏幕上显示的内容,都是由像素来呈现的,而像素是规律排列的网格,
所以可以把热力图和轨迹也看成是由网格组成的。
这一点在 WebGL 开发时尤为明显,因为需要自己写片元着色器定义每个像素的颜色。
mapboxgl 提供了热力图和轨迹图的像素属性值计算工具:
热力图中为 heatmap-density 表达式,用来计算热力图上每个像素的热力值。
轨迹线中为 line-progress 表达式,用来计算在当前线段上每个像素的行进百分比。
模型网格渲染时,网格需要自己生成,网格中的属性值也需要自己计算,通常在项目上这
些是由模型完成的,如:EFDC 水动力模型、高斯烟羽大气污染扩散模型等。
模型输出的结果就是带属性值的网格,interpolate 表达式的任务仍然是根据网格的属性值
为网格设置颜色。
1. 热力图
实现效果:
数据使用的是北京市公园绿地无障碍设施数量。
代码为:
//添加图层
map.addLayer({
“id”: “park”,
“type”: “heatmap”,
“minzoom”: 0,
“maxzoom”: 24,
“source”: “park”,
“paint”: {
“heatmap-weight”: 1,
“heatmap-intensity”: 1,
‘heatmap-opacity’:0.4,
‘heatmap-color’: [//热力图颜色
‘interpolate’,
[‘linear’],
[‘heatmap-density’],
0,’rgba(255,255,255,0)’,
0.2,’rgb(0,0,255)’,
0.4, ‘rgb(117,211,248)’,
0.6, ‘rgb(0, 255, 0)’,
0.8, ‘rgb(255, 234, 0)’,
1, ‘rgb(255,0,0)’,
]
}
});
上述代码中,使用 interpolate 表达式进行线性插值,输入值是 heatmap-density 热力图密度,
热力图密度的值在 0-1 之间,输出值是热力图中各个像素的颜色。
‘heatmap-color’: [
‘interpolate’,
[‘linear’],
[‘heatmap-density’],
0,’rgba(255,255,255,0)’,
0.2,’rgb(0,0,255)’,
0.4, ‘rgb(117,211,248)’,
0.6, ‘rgb(0, 255, 0)’,
0.8, ‘rgb(255, 234, 0)’,
1, ‘rgb(255,0,0)’,
]
表达式详解:
密度为 0 或小于 0,输出颜色’rgba(255,255,255,0)’
密度为 0-0.2,输出颜色在’rgba(255,255,255,0)’和’rgb(0,0,255)’之间
密度为 0.2,输出颜色’rgb(0,0,255)’
密度为 0.2-0.4,输出颜色在’rgb(0,0,255)’和’rgb(117,211,248)’之间
密度为 0.4,输出颜色’rgb(117,211,248)’
密度为 0.4-0.6,输出颜色在’rgb(117,211,248)’和’rgb(0, 255, 0)’之间
密度为 0.6,输出颜色’rgb(0, 255, 0)’
密度为 0.6-0.8,输出颜色在’rgb(0, 255, 0)’和’rgb(255,0,0)’之间
密度为 0.8,输出颜色’rgb(255, 234, 0)’
密度为 0.8-1,输出颜色在’rgb(255, 234, 0)’和’rgb(255,0,0)’之间
密度为 1 或大于 1,输出颜色’rgb(255,0,0)’
在线示例:http://gisarmory.xyz/blog/index.html?demo=mapboxglStyleInterpolate1
和颜色拉伸渲染对应的另一种渲染方式,是使用 step 表达式对数据进行颜色分类渲染。
颜色分类渲染的实现方式在上面示例的代码中就有,只是被注释了,可以把代码下载下来
自行尝试。
实现效果如下:
2. 轨迹图
mapboxgl 官网上提供了一个示例,是用颜色来表达轨迹行进的进度,效果图如下:
它是用线的 line-gradient 属性来实现的,其中用到了插值表达式 interpolate 和线进度表达
式 line-progress,interpolate 表达式在这里的作用依旧是对属性值进行颜色拉伸渲染,代码如
下:
map.addLayer({
type: ‘line’,
source: ‘line’,
id: ‘line’,
paint: {
剩余20页未读,继续阅读
资源评论
书博教育
- 粉丝: 1
- 资源: 2835
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功