借助echarts制作酷炫3d地球动画
借助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下载地址