echart 三维可视化地图_在 ECharts GL 中绘制三维地图

ECharts 前段时间发布了超亮眼的 GL,相对于之前已经圈粉无数的 ECharst-X 而言,ECharst GL更是帅到爆,无论是性能、颜值、类型都有了巨大的飞跃。但是对于小编这样的设计师来说是不是更易上手呢?答案是肯定的,我们除了能够根据数据画出诸如三维地图等三维的可视化图之外,只需要在项目中加入几个简单的配置项,就能配制出想要的风格的高质量画面效果。

作为设计师的小编贡献此教程,希望通过在 Gallery 里绘制一个有丰富的光效、阴影的写实风格的三维地图的例子,简单介绍一些ECharts GL与画质相关的配置项,最终效果见http://gallery.echartsjs.com/editor.html?c=xBkY4tpszb(下图为最后的效果)。太高深专业的算法?代码?什么什么的小设计师我实在是不会,所以这个仅仅能当GL入门级教程使用哦~

绘制一个基础的三维地图

首先我们在 Gallery 中用 ECharts GL 画一个基础的三维地图。注意因为 GL 是 ECharts 的一个扩展,所以我们需要在 Gallery 中额外引入 GL 的脚本文件。

「引入文件」只需要在 Gallery中新建作品,然后在「脚本」的配置中加入这行地址就行了。

如果要绘制世界地图的话还需要引入上面「常用脚本」的世界地图文件。(引入内容如下截图)

做好准备工作后我们就可以开始画一个三维的世界地图了,GL 中画三维地图的配置项跟画普通的二维地图一样,只是系列名称从原来的 map 改成 map3D。

我们先用下面的最基础配置项,基于引入的脚本,生成一个最基础的三维地图系列。

option = {

series: [{

type: 'map3D',

map: 'world'

}]

};

是不是很简单,当然画出来的效果也是非常基础和简陋的。

接下来就我们需要做的就是一步一步的添加光照、阴影、后期的配置项把这个三维地图画得更漂亮。

添加更丰富的灯光

GL 中大部分组件都支持灯光的配置,这些灯光会影响到组件中的所有图形,灯光的配置项需要统一在组件 light 属性下设置。

light: {

main: {

intensity: 1

},

ambient: {

intensity: 0

}

}

通常情况下组件中默认会有一个主光源 main 和一个全局的环境光ambient 。主光源起到了主要的照明作用,可以让我们刚才画出来的三维地图产生基础的明暗对比,从而使图形产生真实的立体感。全局的环境光可以为整个场景提供全局照亮和统一材质的效果。(添加光照效果如下图)

我们可以通过 intensity 属性设置不同光源的强度。例如在上面的代码中我们将主光源的强度设成 2,环境光源的强度设成 0 后可以得到更加强烈的明暗对比。

默认的环境光只是单纯的对所有图形都加上一个固定的亮度,所以会显得很平淡,如果把主光源去掉(intensity 设为 0)的话,整个地图场景会变成黑色。所以为了更丰富的光照效果,我们可以使用 GL 提供的更为强大的 ambientCubemap 作为环境光源。

ambientCubemap 是指使用一张全景贴图作为环境光源。一般全景的环境光贴图大概是下面这样。

大家使用手机的全景模式中就可以拍出类似的全景照片。不过小编建议去寻找专业的 HDR 格式的全景图资源。这里推荐一个有不少免费的HDR全景图资源的网站 http://www.hdrlabs.com/sibl/archive.html。

找到合适的全景图片后,我们可以在 Gallery 的「导入数据」中上传该图片。

得到在Gallery 上该图片地址链接后插入到 ambientCubemap 的 texture 属性中。

light: {

main: {

intensity: 1

},

ambient: {

intensity: 0

},

ambientCubemap: {

diffuseIntensity: 1,

texture: '/asset/get/s/data-1497251035660-HkVJTnsMW.hdr'

}

}

设置了 texture 属性后 GL 就会自动启用环境光贴图作为环境光源。

因为全景贴图的每个像素都会被计算到光照里,所以相比普通的环境光,使用环境光贴图会让整个光照会显得更真实和丰富。

为了得到更真实的环境光效果,注意此处建议使用.hdr格式的图片,因为hdr也就是高动态范围图像,它比其他格式的图像有更大亮度的数据存储。对比一下同一张图片HDR和PNG格式照亮的不同效果。

添加阴影

有光的地方就会有阴影,阴影给了光照更多的层次,失去了阴影的光照是没有灵魂的,是平淡乏味的。

在 GL 中可以简单的加上 shadow: true 为主光源添加阴影。同时为了让三维地图有一种放在地面上的立体模型的感觉,我们再显示一个地面groundPlane。

light: {

main: {

intensity: 1,

shadow: true

},

ambient: {

intensity: 0

},

ambientCubemap: {

diffuseIntensity: 1,

texture: '/asset/get/s/data-1491896094618-H1DmP-5px.hdr'

}

},

groundPlane: {

show: true

}

通过阴影还可以更容易得感受到光照的方向,我们可以通过设置主光源 alpha、beta 两个属性设置不同的光照角度,来查看阴影的变化。

main: {

intensity: 1,

shadow: true,

alpha: 150,

beta: 70

}

这样就可以实现之前设计圈非常流行的一种长阴影的风格。

更丰富的颜色

到这里我们得到的效果跟最初那个简陋的画面已经是天壤之别了,小编作为一个设计师是很钟情于白模的效果的,但是如果你手里有一份数据的话更是锦上添花。

数据的上传和转换可以通过echarts提供的表格数据转换工具实现,

http://echarts.baidu.com/spreadsheet.html,数据部分内容不在此多述。如果暂时没有现成数据,可以直接先复制教程实例中的数据,见左侧代码区域var regionData = [{……}];内的全部内容,直接复制粘贴即可进行之后操作。

将次份数据导入并写入配置项里,

接下来,我们可以使用 ECharts 中视觉映射「visualMap」组件将地图中的每块区域赋予不同的颜色。

在 ECharts GL 中使用 visualMap 和在ECharts中并没有任何的不同:

visualMap: {

show: false,

min: 0,

max: 15,

inRange: {

color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']

}

}

就是这样子每个国家根据不同数据就呈现出不同的颜色啦。

后期处理

看到后期可能大家第一个想到的就是使用 PS 调色,小编这次主要用到的确实是调色。但其实GL 中除了调色之外,还有例如景深 、描边等诸多的后期效果能让整个画面呈现出你需要的效果,大家之后可以大胆的尝试。

不知道大家是否能感受到其实此时得到的图片整体明度偏暗,色相偏蓝。就如我们在拍完照片后发现色调和曝光不理想需要再次调整图片一样,我们也需要对这张的画面进行后期处理和调色。

后期处理的配置项都是在组件的「 postEffect 」下。首先可以通过 enable 属性开启。

postEffect: {

enable: true

}

开启后 GL 会自动对整个画面调整曝光到合适的颜色。

当然如果这个画面并不能让我们满意的话,我们还可以通过 postEffect 下的 colorCorrection 配置项去手动的调整颜色。 colorCorrection 下有常见的曝光 exposure、亮度 brightness、对比度 contrast 和饱和度 saturation 选项。

但是这次小编要教大家使用这里面更强大的颜色查找表功能 lookupTexture。这个功能可以让我们在 PS 等自己用着顺手的图像处理软件里处理好图片之后再到 GL 里复现我们在 PS 里调整的颜色曲线。

给大家提供了一张颜色查找表,把该查找表和你的作品截图一起放入 Photoshop 中(可以把作品截图拖入查找表图层的上方,注意需要保持查找表大小不变,作品截图是为了让我们直观的预览调整的效果,调到满意之后,删除作品图层,只保存查找表,之后在GL中载入查找表,查找表的颜色映射会直接在GL中复现)。

点击左下角「创建新的填充或调整工具」来选择自己需要调整的配置项,此时两个图层是可以同时调整的,这里可以自由调整各项参数来实现自己想要的效果。我在此使用的是「颜色查找」下自带的「Candlelight.cube」将图片调整成了一种蜡烛光照的复古风格,又调整了亮度和对比度使其更清晰。

调整完成之后,隐藏作品截图的图层,只需保存颜色查找表(如下图)

将该图在gallery内上传数据,得到在Gallery 上该图片地址链接后插入到 colorCorrection 的 lookupTexture中即可。

到此,在ECharts GL中配置一个三维地图的步骤就完成啦,还想解锁更多GL技能的话, 可以直接去ECharts官网查看GL超多酷炫的实例,或者去查看GL的配置项手册http://echarts.baidu.com/option-gl.html#globe尽情的尝试吧~

总结

本文我们介绍了如何在 ECharts GL 中配置出一张好看的写实风格三维地图。小编要偷偷地告诉你,用 ECharts GL 生成的效果图你还可以直接用来做图片素材哦,如果你还在为PPT 或者自己的设计作品找不到合适的配图素材发愁的话,快来试试直接在 Gallery 里用 ECharts GL 直接生成一张吧。

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

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

相关文章

重磅!阿里达摩院发布《2020十大科技趋势》

来源:雷锋网2019年,是新兴科技发展史上的重要年份。 这一年,各大公司的AI、云计算、大数据走向下沉市场,空中博弈进入到地面作战,技术的商业化成为生意成败的重要考量。其间,产业与场景成为大漏斗&#xff…

【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-8底层驱动之RTC

视频简介:该视频介绍iCore3应用开发平台中RTC的基本配置方法以及在应用开发平台中的实时显示。 源视频包下载地址:链接:http://pan.baidu.com/s/1o80jHvc 密码:f8ri银杏科技优酷视频发布区:http://i.youku.com/gingko8…

linux net 伪指令码,1.2.2. ldr pWTCON

伪指令,就是“伪”的指令,是针对“真”的指令而言的。真的指令就是那些常见的指令,比如上面说的arm的ldr,bic,msr等等指令,是arm体系架构中真正存在的指令,你在arm汇编指令集中找得到对应的含义…

下一个10年,可能改变世界的5项重大发现!真正革命性的进步

来源:博科园在过去的十年里,科学上出现了一些真正革命性的进步,从发现希格斯玻色子到使用CRISPR进行科幻风格的基因编辑。但是,还有哪些更大的突破还在后面呢?《Live Science》采访了所在领域的几位专家,他…

idea整合jboos_在 idea 中 启动 jboss 后, 没有运行部署(通过idea部署)的ssm项目,打开后项目404...

在 idea 中 启动 jboss 后, 没有运行部署(通过idea部署)的ssm项目,打开后项目404,暂时的解决办法每次启动 jboss 都需要是手动登录到 9999 管理端,添加部署 Create an unmanaged deployment,这样很麻烦,每次…

arm linux漏洞,GitHub - armjirawat/linux-kernel-exploits: linux-kernel-exploits Linux平台提权漏洞集合...

CVE-2017-1000367  [Sudo](Sudo 1.8.6p7 - 1.8.20)CVE-2017-1000112  [a memory corruption due to UFO to non-UFO path switch]CVE-2017-16939  [UAF in Netlink socket subsystem – XFRM](Linux kernel before 4.13.11)CVE-2017-7494  [Samba Remote execution](Sa…

shell脚本参数中有空格

shell脚本参数中有空格 在shell脚本中如果有空格的处理如下: sh test.sh "hello word" echo $1 得到的是hello,而不是hello word. 正确的写法如下: vi test.sh #!/bin/bash source /etc/profile echo "$1" echo "$2…

python科学计算三剑客_机器学习三剑客之Numpy

NumpyNumPy是Python语言的一个扩充程序库。支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机器学习框架的基础库!Numpy简单创建数组import numpy as np# 创建简单的列表…

“不确定性问题”(Nondeterministic Problem,NP)与哥德尔不完全定理“

来源:柳渝科学网博客1931年哥德尔证明:任何无矛盾的公理体系,只要包含初等算术的陈述,则必定存在一个不可判定命题,用这组公理不能判定其真假。虽然哥德尔不完全定理只是针对包含数论的公理体系而言的,由于…

SecureCRT使用本地公钥 SSH 免密码登录Linux

其原理与Linux系统之间的SSH通道原理是一样的 下文中如果创建公钥的格式是:标准公钥和VanDyke私钥格式,需要用ssh-keygen -i -f 转换。如果是OpenSSH密钥格式可直接修改文件名 1 、打开会话选项,在 分类 中选择 SSH2,在右边的 身…

linux la 的使用方法,Linux简介及常用命令使用4--linux高级命令与技巧(示例代码)

top几个磁盘fdisk -l磁盘空间 df -lhdf -al查看进程:ps -ef“grep java杀死进程:kill -9 进程号more中过滤more xxx |grep www.makaidong.com安装linux后配置ipVim /etc/sysconfig/network-scripts/ifcfg-eth5IPADDR192.168.42.142NETMASK255.255.255.0G…

深度学习不能取代计算机视觉技术背后的真正原因

来源:电子发烧友深度学习只是一种计算机视觉工具,而不是包治百病的良药,不要因为流行就一味地使用它。传统的计算机视觉技术仍然可以大显身手,了解它们可以为你省去很多的时间和烦恼;并且掌握传统计算机视觉确实可以让…

java 切换主线程_Java线程状态及切换、关闭线程的正确姿势分享

前言在讲线程之前有必要讨论一下进程的定义:进程是程序在一个数据集合上运行的过程,它是系统进行资源分配和调度的一个独立单位。进程实体由程序段, 数据段 PCB(进程控制块)组成。线程又是什么?线程可以看做轻量级进程&#xff0c…

win10控制面板快捷键_你没玩过的全新版本Win10,这些操作你知多少?

不知不觉,Windows 10与我们相伴已经整整四个年头了,从最开始的组团抗拒到现在的默默接受,个中滋味相信谁心里都有个数。近日微软开始推送“Win10更新五月版”,那么Win10中到底都有哪些“骚”操作?一起来看看吧。1、夜间…

1.编写登录接口

需求:.编写登录接口输入用户名密码认证成功后显示欢迎信息输错三次后锁定 # Author rendeleiwhile True: list1 [] list2 [] count int(3) f open("login.txt",‘w’) for line in f: hostname str(line.split(\t)…

Linux redis故障,linux – Redis Stall故障排除

我们在服务器上运行了几个redis实例.还有多个Web层服务器连接到那些同时遇到停顿的实例.我们当时正在进行数据包捕获,确定在TX和RX流量中存在停顿,如下面的wireshark IO图:redis调用有一个相关的峰值,但我怀疑这是一个影响,而不是由于时滞造成的原因:使用…

吴恩达邀请9位AI大牛畅想2020:李开复看好医疗教育,LeCun强调自监督学习

来源:凹非寺2020,AI的研究会有哪些突破?2020,AI的应用又会有什么变化?吴恩达DeepLearning.ai旗下的THE BATCH刊物,分享了包括Yann LeCun、李开复、周志华、还有他们的老板吴恩达在内的10位AI大佬的新年寄语…

ivx中字体显示_iVX云服务费用优化 · 上篇

本文全文字数: 3308预计阅读时间: 10 分钟本文篇幅较长,建议亲亲能够完成阅读,将会学到不少干货哦~❤️本文目录一虚拟机->我们为何关闭了之前的虚拟机服务?->是否有新的虚拟机计划?二流量优化-&…

R pdf大小_限时免费获取 Mac上PDF压缩工具《Enolsoft PDF Compressor》

文章末尾有获取方式,按照以下步骤就能得到。我们不破解软件,所有优秀软件均来源于网络你的pdf文件太大使用不方便吗?赶紧来试试专业PDF压缩工具Enolsoft PDF Compressor破解版吧!可以快速的压缩PDF文件的大小,支持批量…

未来十年有望改变世界的五大发现

来源:科技日报 浮云一别后,流水十年间!21世纪第二个十年已悄然离开。过去十年,不少革命性突破和发现给人类生活和认知带来重大变革:希格斯玻色子填补了“标准模型”最后一块拼图,深化了人类对物质本质的理解…