借助echarts制作酷炫3d地球动画

我们知道echarts具有很强的功能，如制作饼状图、柱状图、折线图，但对其扩展插件的功能不是很了解，今天我们借助echarts扩展插件ECharts GL，实现3d地球酷炫动画。
ECharts GL新增了三维的笛卡尔坐标系、地理坐标系，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括散点图 scatter3D、折线图 line3D、柱状图 bar3D、曲面图 surface、飞线图 lines3D以及地图 map3D。
在准备前，一定要将echarts.min.js升级到最新，如果版本过老，在测试时会出现报错

 <script type="text/javascript" src="echarts.min.js"></script><script type="text/javascript" src="echarts-gl.min.js"></script><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript">$(function () {$.getJSON('3dmap/flights.json', function (data) {var airports = data.airports.map(function (item) {return {coord: [item[3], item[4]]}});function getAirportCoord(idx) {return [data.airports[idx][3], data.airports[idx][4]];}// Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]var routesGroupByAirline = {};data.routes.forEach(function (route) {var airline = data.airlines[route[0]];var airlineName = airline[0];if (!routesGroupByAirline[airlineName]) {routesGroupByAirline[airlineName] = [];}routesGroupByAirline[airlineName].push(route);});var pointsData = [];data.routes.forEach(function (airline) {pointsData.push(getAirportCoord(airline[1]));pointsData.push(getAirportCoord(airline[2]));});var series = data.airlines.map(function (airline) {var airlineName = airline[0];var routes = routesGroupByAirline[airlineName];if (!routes) {return null;}return {type: 'lines3D',name: airlineName,effect: {show: true,trailWidth: 2,trailLength: 0.15,trailOpacity: 1,trailColor: 'rgb(30, 30, 60)'},lineStyle: {width: 1,color: 'rgb(50, 50, 150)',// color: 'rgb(118, 233, 241)',opacity: 0.1},blendMode: 'lighter',data: routes.map(function (item) {return [airports[item[1]].coord, airports[item[2]].coord];})};}).filter(function (series) {return !!series;});series.push({type: 'scatter3D',coordinateSystem: 'globe',blendMode: 'lighter',symbolSize: 2,itemStyle: {color: 'rgb(50, 50, 150)',opacity: 0.2},data: pointsData});var map=document.getElementById("map");var myChart=echarts.init(map);myChart.setOption({legend: {selectedMode: 'single',show:false,left: 'left',data: Object.keys(routesGroupByAirline),orient: 'vertical',textStyle: {color: '#fff'}},globe: {environment:'3dmap/starfield.jpg', //'none',环境贴图，支持純颜色值，渐变色，全景贴图的 url,设置为none，变成透明色heightTexture: '3dmap/timg.jpg',//timg.jpg//地球的高度纹理。高度纹理可以用于凹凸贴图表现地球表面的明暗细节displacementScale: 0.1,//地球顶点位移的大小displacementQuality: 'high',//地球顶点位移的质量baseColor: '#000',shading: 'realistic',realisticMaterial: {    //roughness属性用于表示材质的粗糙度，0为完全光滑，1完全粗糙，中间的值则是介于这两者之间roughness: 0.2,metalness: 0},postEffect: {enable: true,depthOfField: {         //景深效果是模拟摄像机的光学成像效果，在对焦的区域相对清晰，原理对焦的区域则会逐渐模糊enable: false,focalDistance: 50}},temporalSuperSampling: {enable: true},light: {ambient: {intensity: 0},main: {intensity: 0.1,shadow: false},ambientCubemap: {texture: '3dmap/lake.hdr',exposure: 1,diffuseIntensity: 0.5,specularIntensity: 2}},viewControl: {autoRotate: false,distance:250        //缩放地图视角，如果感觉地球太大，可以设置该值，默认150},silent: true},series: series});window.addEventListener('keydown', function () {series.forEach(function (series, idx) {myChart.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: idx});})});});})</script><div id="map" style="height:600px;width:800px;border:1px solid red;margin:auto;"></div>

以上不懂得属性，可以去官方API查询即可，所制作的3d动画如图所示：

3d地球动画Demo下载地址

借助echarts制作酷炫3d地球动画相关推荐

html5基于canvas制作酷炫,应用HTML5 Canvas制作酷炫科技背景动画特效
更多特效代码请添加HTML5前端交流群111645711 看这性感的线条,激情的律动! 废话不多说,上代码! 源代码需要文档版本源码,可以加我的HTML5前端交流群111645711 * { mar ...
Python制作酷炫的动画效果
1 引言利用Python的Matplotlib-Animation库可以制作酷炫的数学公式动画,官方教程可访问链接. 本文为了清晰说明如何利用Animation类来实现动画效果,这里采用介绍一个点沿 ...
html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效点击跳转到演示地址点击进入资源下载地址
python做动画视频教程_Python+Kepler.gl轻松制作酷炫路径动画的实现示例
1. 简介 Kepler.gl相信很多人都听说过,作为Uber几年前开源的交互式地理信息可视化工具,kepler.gl依托WebGL强大的图形渲染能力,可以在浏览器端以多种形式轻松展示大规模数据集. ...
html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?（代码实例）
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
css svg做动图,用SVG制作酷炫动态图标的方法
用SVG制作酷炫动态图标的方法发布时间:2020-09-14 14:56:39 来源:亿速云阅读:160 作者:小新用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的.希 ...
opencv极坐标转换成直角坐标_媲美 PS，用 Python 制作酷炫极坐标全景图
点击上方"Python数据之道",选择"星标公众号" 收藏文章的同时,不要忘记「在看」媲美 PS, 用 Python 制作酷炫极坐标全景图 0 概述今天要 ...
[转]收集android上开源的酷炫的交互动画和视觉效果：Interactive-animation
原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...
提供 Android 酷炫的开屏动画 (awesome-opening-animation)
FancyView 项目地址:wongzy/FancyView 简介:提供 Android 酷炫的开屏动画 (awesome-opening-animation) 更多:作者提 Bug 标签: ...
酷炫的交互动画和视觉效果
收集android上开源的酷炫的交互动画和视觉效果. 收集android上开源的酷炫的交互动画和视觉效果. 地址

借助echarts制作酷炫3d地球动画

借助echarts制作酷炫3d地球动画

借助echarts制作酷炫3d地球动画相关推荐

最新文章

热门文章