借助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下载地址