cesium three性能比较_mapboxgl + three 动画 — 网格热图
一、前言
最近工作上需要实现一个地图动画效果,简单的动画效果,是的,简单;不过在此之前,我并不认为它简单,需要有一点点的webgl、three.js的基础。
效果大概就是一个网格起伏热力图的动画,像心跳一样、heartbeat……,像这样。
上面这个动效,它好像是基于一个gltf模型来做的,它不给地图交互,现在我们也想实现类似的效果,我们最后实现的效果跟这个效果比还有点差距,我们慢慢靠近它,然后再做的更好。
现在有8个月的道路违法停车数据,基于这八个月的数据,做空间插值,生成规则网格。基于规则网格数据,使用mapboxgl和three.js来实现类似的这个效果。我的github地址。
https://github.com/limzgiser/mapbox-gl-grid-heatmapgithub.com
二、数据准备
通过空间插值、生成渔网、统计网格违停数量,网格转出矩阵点,重复处理八个月的数据。熟悉ArcMap或QGIS的同学,这些数据处理过程应该比较熟悉的,如何服务化处理这个过程是需要考虑的。或者你采用一些图像处理的方式,来处理这些数据。这里不介绍数据处理过程。列出数据处理后的结果数据。
-9999 是空值
经度
为了方便后面绘图,将八个月的数据合并为一个文件,每条记录表示一个网格点,分别为:经度坐标、维度坐标、一到八月违停数量。
经度
三、绘制网格
再确认一下,我们的数据结构。一共201行、198列,共39789个点 ,每条记录包含如下信息。
经度
1、坐标转换
在mapboxgl中绘制的是投影坐标,我们读取数据将数据转换为投影坐标。threebox是mapboxgl的一个插件,他可以帮助我们在mapboxgl中使用three.js开发扩展。
// tb - threebox对象,连接mapboxgl和three.js的插件
2、获取网格线
我的网格是按列排序的,网格点的索引是按照列向递增的。最终绘制的是网格线,所以需要提取网格线。如果,我们有一个画笔,可以一笔画出一个201*198的棋盘吗?答案是可以的,只不过会出现重复的路径,你可以从性能优化的方面考虑,在这里做优化,绘制几根线,尽量少点。为了简单,我就绘制201行+198列 = 399条线来生成网格。
function
3、绘制网格线
画线的时候,需要注意,我们绘制的线有点特殊,每个节点都有高度和颜色属性。线段的节点颜色不同,webgl在光栅化的时候,线段中间的颜色会根据节点颜色进行插值。网格热图的效果就是这么做的。
function
节点的颜色和高度自然就根据每个网格点的违停插值量来计算。提前定制一个色带,因为,我不想每个颜色都去创建一个THREE.Color对象。如果你嫌太高,可以在上面Z值乘上一个Z方向的缩放系数。
let
4、绘制结果
结果是这样的,看起来,是我们预期的结果。
四、网格动画
动画就是“补间”,弥补中间值。某一个网格点从一月的违停数量 1 增加到 10 ,我们希望它这个过程用时两秒,就需要中间插值。插多少呢?如果,我们希望一秒达到55幁,当然一秒能不能达到55,这是由浏览器决定的,假如我们机器跟得上。想要网格点用时两秒从1平缓的变到10,我需要在中间插值110个点左右。
1、补间插值
tween.js 是一个很不错的补间动画库。例如:endPointIndex 从0增长到60 ,这个过程希望用3秒的时间。同时可以监测到值变化的中间过程,和动画完成后的回调函数。
let
给每一条线添加一个索引index,这样,我们遍历每一条线的时候可以快速找到每条线对于的顶点坐标。
alllines
2、计算中间值
遍历所有线,修改每一条线顶点的高度和颜色。直接使用违法停车量来作为顶点高度,这个值太大,我们乘上一个缩放系数scale。动画插值的过程,中间值(高度):
- begain :起始值,案例中表示当前网格点一月份的违停量
- end :终点值,案例中表示当前网格点二月份的违停量
- timeInCount:补间/插值数量
let
3、连续2月动画
tween.js支持动画链接,可以将多个动画链接起来,tween1.chain(tween2);我们把一月份和二月份动画链接起来,1->2->1,结果像这样,看起来像那么回事儿了。
lineGroup
4、连续8月动画
同理:我们把八个月的数据链接起来,效果像这样。
五、颜色混合
如何去除值为零的点,如果从数据层面来讨论这个问题,稍有繁琐,就是我们在绘制线的时候直接跳过值为零的点。这里使用颜色混合的方式来去除值为零的点。
如果你学习过webgl,那你应该知道gl.blendFunc()函数。three.js材质Material的blending属性可以用来控制纹理的叠加方式。three.js中提供了几种颜色混合方式:
- THREE.NormalBlending:.blending属性默认值
- THREE.AdditiveBlending:加法融合模式
- THREE.SubtractiveBlending:减法融合模式
- THREE.MultiplyBlending:乘法融合模式
- THREE.CustomBlending:自定义融合模式
我不太了解颜色混合的模型和算法。加法混合模式,为什么会是颜色变亮?我需要去补补这方面的知识。我将零值网格点的颜色设置为(0,0,0)黑色。采用加法混合的方式,可以将零值点去掉。不过,我本来设置的色带会变的更亮,所以我们的从新设置色带颜色,来使得我们的动画好看一点,尽管我最后配置的颜色还是并不理想。
let
最后的结果是像这样。
六、总结
工作中编写的案例,分享一下,如何你也有要实现类似的效果,希望对你有所帮助。首先,对数据要求是规则的网格,你可以使用arcmap,qgis类似的软件,来处理数据,也可以是自己编写的数据处理工具;地图使用mapboxg;动画实现方面,使用了three.js + tween.js。需要对webgl和three.js有了解,就可以实现类似的动画效果。
cesium three性能比较_mapboxgl + three 动画 — 网格热图相关推荐
- View的进阶,自定义一款自带动画的雷达图
/ 今日科技快讯 / 近日工信部发放四张5G商用牌照,中国联通.中国移动.中国电信和中国广播电视网络有限公司各得到一张牌照.中国的5G商用元年正式开启.5G牌照的发放,将推升产业链的成熟.加快 ...
- 一般是指用计算机绘制的画面,()一般指用计算机绘制的画面,如直线、圆、圆弧、矩形、任意曲线和图表等。A、图形B、图像C、动画D、图...
()一般指用计算机绘制的画面,如直线.圆.圆弧.矩形.任意曲线和图表等.A.图形B.图像C.动画D.图 更多相关问题 minf(X)=x12+3x22一3x1x2+4x1-12x2 电子束焊设备应装置 ...
- [原创]Java性能优化权威指南读书思维导图
[原创]Java性能优化权威指南读书思维导图 书名:Java性能优化权威指南 原书名:Java performance 作者: (美)Charlie Hunt Binu John 译者: 柳飞 ...
- 如何用Seaborn描绘线图,分面网格关联图,密度图,连接图,热力图,线性回归图,分面网格绘图
事前准备请看之前的文章0o0! 线图 data = {'apple':[4,0,7,8],'orange':[3,5,6,7],'bananas':[6,4,5,3] } df = pd.DataFr ...
- 如何用Seaborn描绘柱状图(条形图),箱线图,小提琴图,分类散点图,分面网格分类图,散点图(3)
柱状图 x = ['金融','农业','制造业','新能源'] y = [163,86,125,58] sns.barplot(x,y) y = ['金融','农业','制造业','新能源'] x = ...
- 关于网站性能优化,一张思维导图够了
关于网站性能优化,一张思维导图够了
- CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
目录 transform-style: preserve-3d perspective perspective-origin rotate translate 纯CSS3动画正方体贴图小项目链接和GI ...
- python划分网格区域_分面网格分类图_Python数据分析与科学计算数据可视化篇:Matplotlib和Seaborn_机器学习视频-51CTO学院...
购买本课程所在专题<Python数据分析师:0基础到数据分析达人>https://edu.51cto.com/topic/2570.html,赠送一本"Python相关图书&qu ...
- C4D动画,贴图不跟着物体动。贴图变形。贴图投射模式uvw和立方体
<C4D的十万个为什么>首发于 公众号:苦七君 免费搜索查看更多问题:kuqijun.com 问题: C4D动画,贴图不跟着物体动.贴图变形.贴图投射模式uvw和立方体 答案: 最近群里总 ...
最新文章
- 【Android】5.3 单选和复选
- 科技产品下一个重大突破将来自芯片堆叠技术
- 图灵奖公布:高性能计算先驱、为超算铺平道路的Jack Dongarra获奖
- 不显示调用super_让不懂编程的人爱上iPhone开发(2017秋iOS11+Swift4+Xcode9版)-第7篇
- C++ 成员函数做友元
- JAVA入门[22]—thymeleaf
- php如何求同列元素之和_求得这个数组中各个元素之和
- python3 array为什么不能放不同类型的数据_来自俄罗斯的凶猛彪悍的分析数据库ClickHouse...
- Linux重定向的理解
- hbase可视化工具_做数据可视化,三大热门BI工具试用总结
- 吃瓜笔记 | 旷视研究院解读Light-Head R-CNN:平衡精准度和速度
- 2016打算做运维的人员必知必晓的知识
- 用计算机模拟实验技术路线,自然科学基金申请书模板
- 关于Linux查询ip地址时出现乱码
- Java后端集成发送短信功能(用的是阿里云的短信服务)
- 服务器与Linux初体验
- 微软键鼠外设八款齐发 创新蓝色LED光源
- python爬取4K超清画质手机壁纸,壁纸这东西当然是越多越好啦~
- 由于被检测到对外攻击,已阻断该服务器对其它服务器端口(TCP:6379)的访问,阻断预计将在2018-03-23 07:34:26时间内结束,请及时进行安全自查。若有疑问,请工单或电话联系阿里云售后。
- iMX6系列-iMX6Q 开发板 Python 移植
热门文章
- Mockito框架实现学习之when(dummy)
- 把Windows上的文件拷贝到AWS Linux系统上
- Kubernetes pod状态出现ImagePullBackOff的原因
- 如何在Github里创建organization和代码仓库
- ue4缓存位置怎么改_怎么从蓝图节点跳转到C++源码?
- java项目设计_java项目设计
- 不同路径 IIPython解法
- Hive中实现有序,有序concat拼接,有序集合,hive方法操作命令,与自带方法列表
- 基站定位php,SIM800C支持基站定位功能了。。。
- 做方差分析需要正态性检验吗_检验工序要做PFMEA吗?检验如何做PFMEA?