echart实现3d地图_3D飞线效果——让线“飞”起来的秘密

636906fe159b8cd8d11ac61a01e62f6f.png

在城市规划、统计、交通等行业,地图可视化已成为最直接也最吸引眼球的一种表达方式。例如人群迁徙、人口流动、OD出行、职住分析、客流来源等众多场景都需要用到飞线效果呈现。

4125afcc23fdb812c1e10d7bedb09b95.gif
2D飞线效果图

随着可视化技术的进一步发展,传统的2D飞线效果略显单调,而3D飞线可以展示更丰富、更直观、更炫酷的效果。

63791e476c6a38c5c0295355cec3816c.gif
3D飞线效果图

前不久,百度地图慧眼结合地图可视化技术发布了《帝都24小时图鉴》(戳这里查看原文),该项目受到行业内许多技术爱好者的一致好评,更有小伙伴前来咨询:文中炫酷的3D飞线效果是如何实现的?今天,就让百度地图慧眼前端工程师带你探寻“3D飞线”飞起来的秘密。

01 元素准备

为了实现上图的3D飞线效果,我们需要先分析一下飞线的构成元素。大致上来说,一个完整的飞线效果,无论是2D还是3D,都是由地点、连接线和连接线上的动画点缀构成的。下面,带大家一步步来看看每个部分的实现过程。

02 地点圆的实现

e0b88c26392215b1693c5c44d42c0db1.gif

地点圆的组成元素有两样,一个静态的圆形和一个向外逐渐扩散并变透明的圆环。画出这两个图形并不难,但是怎么让这个扩散的圆环动起来呢?

要实现动画,我们可以首先想象一个场景:在一个小本子上的每一页都画一个一模一样的没有腿的小人儿,再在每一页给这个小人画上位置不同的腿,然后快速翻动本子,就可以看到小人儿奔跑的动画了。

现在圆形和圆环都已经画好了,为了让圆环动起来,就需要使用一个名为requestAnimationFrame的函数,简称rAF,rAF是浏览器里专门用于动画效果的一个函数。所以接下来我们在全局设置一个rAF让它一直循环,然后在其中进行一些动画操作,比如这里修改圆环的大小和透明度。而这个rAF就是“画腿”的过程。

03 连接线的实现

画完了点,我们就要开始准备连接线了。画一条连接线很简单,但是这里为了让它的效果更丰富,就需要处理了一下线条的细节:

1)通过贝塞尔曲线算法,将直线拉成曲线,在3D视角下看起来更有张力。

2)给组成曲线的每个顶点赋值不同的颜色,达到颜色、透明度渐变的效果,使其看起来不那么单调。

db8ede391d6376c404d2b495c05b1b74.png

04 让线“飞起来”

完成了上述的准备工作,接下来才是重头戏。

首先,我们在连接线的轨迹上再给它附着上一根带有宽度的线作为点缀,为了避免这根点缀的线看起来太呆,我们用三角函数处理一下它的宽度,让它看起来扭曲一点。然后,我们就要用到上文所说的rAF让它动起来了!

23696bf5027a95fc20cc58e3ff30c48e.gif

那么问题来了,控制颜色和透明度很简单,该怎么控制它按轨迹移动以及出现与消失呢?

这里用到一个小技巧,我们知道“线”有一个实线与虚线的属性,在这里我们把这根点缀线设置成虚线,然后通过在rAF里修改虚线的dashOffset属性,让它沿着连接线的轨迹一直偏移,就可以在视觉上造成移动的效果了~另外,还可以在rAF里同时改变点缀线的宽度,造成一种“呼吸感”的动画效果,这样上面的动画就完成了。

可是这样的效果还略显呆板,太过整齐划一的动画看久了容易审美疲劳,所以我们再给这个虚线的长度加一份随机的偏移,让它们有一种不规律感。这样,最终版3D飞线就完成了!

cb6270197d2f1331a75dab9ef7cb5160.gif

05 更多可能效果

之所以说在3D场景,飞线的效果更丰富,就是因为在上面的基础上,我们可以继续发挥,做出更多效果、适配更多场景的飞线~

8665aff18fe2761a741ad5ab13541f73.gif
换个贴图后的样子

3bc5d7a23512232a727a76c6312add83.gif
模仿喷泉的样子

7dbccaa787326da8250f8efd314927ba.gif
模仿流星的样子

06 应用成效

百度地图慧眼3D飞线可视化技术,使得人群迁徙、人口流动、OD出行、职住分析、客流来源等场景得以生动、形象表达,有助于城市规划、统计、交通等行业的可视化管理。下图是百度地图慧眼人口监测可视化大屏的效果样例:

42db70dab248922e79cc3fba34274a8e.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ad域管理与维护_在NAS SMB卷上使用VisualSVN Server维护代码库

VisualSVN Server[1] 是 Windows 平台上流行的 SVN 形式的代码管理工具。以下我们将介绍把 NAS SMB 卷作为 VisualSVN 代码库存储中心时会遇到的几个问题以及相应的解决方法。1. 安装错误的解决方法我们以 VisualSVN Server 3.3.1 版本为例,在安装 VisualSVN Server…

android 开发art,Android应用开发之Android 系统启动原理(art 虚拟机)

本文将带你了解Android应用开发之Android 系统启动原理(art 虚拟机),希望本文对大家学Android有所帮助。Android 系统启动原理(art 虚拟机)一、虚拟机的启动Android 是一个 Linux 的虚拟机,当虚拟机启动的时候,会执行手机根目录下的 init.r…

电脑文件夹可以分屏的软件_电脑上什么便签软件可以添加音频?

提及便签,很多人都会很自然地想到手机便签。这是因为随着智能手机和移动互联网的发展,现在很多手机上都有了系统自带的便签app。其实,除了手机便签外,还有电脑便签呢!这不,Win7及其以上版本的电脑上还有系统…

jsp form提交到后台中文乱码_JSP与servlet之间的数据传递

【51】Jsp与Servlet之间的传值有两种,一种是Jsp传值给Sevlet,另一种是Servlet传值给Jsp;使用request、response对象完成传值,具体实现如下:Jsp与Servlet之间的传值有两种,一种是Jsp传值给Sevlet&#xff0c…

android jni 中jnienv,android JNI中JNIEnv類型和jobject類型的解釋

JNIEXPORT void JNICALL Java_com_jni_demo_JNIDemo_sayHello (JNIEnv *env, jobject obj){cout<}對於這個方法參數中的JNIEnv* env參數的解釋:JNIEnv類型實際上代表了Java環境&#xff0c;通過這個JNIEnv* 指針&#xff0c;就可以對Java端的代碼進行操作。例如&#xff0c;…

yang模型中rpc_领域驱动模型(DDD)设计讲解

一. 什么是领域驱动模型(DDD)&#xff1f;领域驱动模型一种设计思想&#xff0c;我们又称为DDD设计思想。是一种为了解决传统设计思想带来的维护困难&#xff0c;沟通困难和交互困难而产生的一种新的思想。也解决了在部分公司中&#xff0c;一个项目组就是一套服务&#xff0c;…

鸿蒙系统操作界面跟苹果很像,鸿蒙手机UI界面曝出!图标拟物化、操作逻辑近似苹果iOS13...

原标题&#xff1a;鸿蒙手机UI界面曝出&#xff01;图标拟物化、操作逻辑近似苹果iOS13​【IT爆料王-原创文章-具备版权效力】就在近日&#xff0c;笔者收到了网友的匿名私信&#xff0c;提供给笔者华为鸿蒙系统的UI界面截图&#xff0c;以及搭载鸿蒙系统的华为手机的曝光图片。…

python3中的int类型占64位,有没有什么办法来强制Python来使用64位整数的Windows?

I’ve noticed that whenever any integer surpasses 2^31-1 my number heavy code suffers a large slowdown, despite the fact I’m using a 64 bit build of Python on a 64bit version of Windows. This seems to be true on Python 2.7 and Python 3. I’ve read that Wi…

crtsiii型无砟轨道板_无砟轨道裂缝破损怎么修补

随着高速铁路、客运专线、城市地铁的快速发展&#xff0c;无砟轨道轨道板&#xff08;道床板&#xff09;广泛应用&#xff0c;但施工中和运营期都发现轨道板混凝土存在不同程度的微细裂缝&#xff0c;对无砟轨道造成了一定的病害。高铁轨道板裂缝是不可避免的。为确保无砟轨道…

c调用python第三方库_Python使用ctypes模块调用DLL函数之C语言数组与numpy数组传递...

在Python语言中&#xff0c;可以使用ctypes模块调用其它如C语言编写的动态链接库DLL文件中的函数&#xff0c;在提高软件运行效率的同时&#xff0c;也可以充分利用目前市面上各种第三方的DLL库函数&#xff0c;以扩充Python软件的功能及应用领域&#xff0c;减少重复编写代码、…

妲己机器人怎么升级固件_台湾重金设计的3D妲己,亮瞎了

大家还记得前几天米醋分享的国内首档二次元选秀&#xff0c;遭网友疯狂吐槽&#xff1a;不知道怎么形容的丑&#xff01;当米醋看到了这档综艺的宣传海报时瞬间被这一批选手的颜值所吸引&#xff01;太魔幻了&#xff01;没成想看到3D人物效果时米醋却被这盛世丑颜丑到裂开&…

go语言通道插入0_Go语言入门必知教程-通道

Golang提供了一种称为通道的机制&#xff0c;用于在协程之间共享数据。当函数作为协程执行并发活动时&#xff0c;需要它们共享资源或数据&#xff0c;通道便充当协程之间的管道(管道)&#xff0c;提供一种确保同步交换数据的机制。需要在声明通道时指定数据类型&#xff0c;可…

aes加密字符串c++_springboot2.2.X手册:防抓包?快速实现API接口数据加密

溪云阁&#xff1a;专注编程教学&#xff0c;架构&#xff0c;JAVA&#xff0c;Python&#xff0c;微服务&#xff0c;机器学习等&#xff0c;欢迎关注上一篇&#xff1a;springboot2.2.X手册&#xff1a;redis的7种类型100个方法全解析有没有遇到这样子的接口&#xff0c;放到…

鸿蒙系统打造完备终端,搭载鸿蒙系统的手机很快推出,华为生态更加完善

2019年的8月9日&#xff0c;在华为开发者大会上华为向大家正式的发布了一款操作系统——鸿蒙系统。这个系统备受大家的关注&#xff0c;鸿蒙2.0的发布也在时刻期待中。因为在目前的操作系统中&#xff0c;华为的鸿蒙操作系统是仅次于安卓、ios的存在&#xff0c;而今日&#xf…

curl socket 访问_使用Curl、socket、file_get_contents三种方法POST提交数据 | 学步园

# <?php # /**# * Socket版本# * 使用方法&#xff1a;# * $post_string "appsocket&versionbeta";# * request_by_socket(facebook.cn,/restServer.php,$post_string);# */# function request_by_socket($remote_server,$remote_path,$post_string,$port …

html 标签 r语言,从R中的字符串中删除html标签

我正在尝试将网页源代码读入R并将其作为字符串处理。我正在尝试删除段落并从段落文本中删除html标签。我遇到了以下问题&#xff1a;我尝试实现一个功能来删除html标签&#xff1a;cleanFunfunction(fullStr){#find location of tags and citationstagLoccbind(str_locate_all(…

python给图片加半透明水印_Python 批量加水印就这么简单!

工作的时候&#xff0c;尤其是自媒体&#xff0c;我们必备水印添加工具以保护我们的知识产权,网上有许多的在线/下载的水印添加工具&#xff0c;但他们或多或少都存在以下问题&#xff1a; 在线工具需要将图片上传到对方服务器&#xff0c;信息不安全。 很多工具不具备批量处理…

html 选中状态,html默认选中状态

html中标签用法解析及如何设置selec标签定义和用法 select 元素可创建单选或多选菜单。当提交表单时&#xff0c;浏览器会提交选定的项目&#xff0c;或者收集用逗号分隔的多个选项&#xff0c;将其合成一个单独的参数列表&#xff0c;并且在将 表单数据提交给服务器时包括 nam…

nemesis什么车_nemesis是什么意思_nemesis的翻译_音标_读音_用法_例句_爱词霸在线词典...

全部报应Was he aiming at Bryant, his old nemesis and a favorite target in the past?他是不是暗指科比, 一直的“竞争对手”和过去最中意的目标?期刊摘选After the defeat of their old arch nemesis, the Turtle have grown apart as a family.在击败旧时强敌后, 忍者神…

wxpython制作表格界面_[Python] wxPython 菜单栏控件学习总结(原创)

1、总结 1、大体创建过程 1、创建一个 菜单栏 : menuBar wx.MenuBar()相当于这个白色地方&#xff0c;没有File这个菜单 2、创建 菜单 : fileMenu wx.Menu()这两个不是直接“用的”&#xff0c;叫菜单。既用来分类其他 菜单项 的文件夹样 3、创建 菜单项 : newItem wx.MenuI…