全网最酷南极路线图

雪龙2号航线

这个是36次南极考察队雪龙2号的路线图。

问题来了，请问要做一个这样三维可交互式的地图总共分几步。

答案是三步。

第一步：打开公众号

第二步：认真看完本篇内容，并下载全部脚本及素材

第三步：关上公众号

ECharts

话不多说直接讲，这种类型的页面是依托ECharts制作的。

Echarts是什么？

下面是来自官网(https://echarts.apache.org/zh/index.html)的介绍：ECharts，一个使用 JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

展示方式非常丰富，常规的有折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

里面很多类型的图都可以用作地学的可视化中。像GL矢量场图可以做风、浪的可视化；散点图可以做站点的可视化，比如空气质量；热力图可以做格点数据的二维展示，比如温度。

3D地球

今天先介绍ECharts的3D地球。

官网有一个实例，感兴趣的同学可以先去看看。

具体如何自己搭建？一个html，一个js脚本就够了，操作如下。

首先新建一个html文件，比如叫echarts_map.html，将下面脚本复制进去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="echarts-gl.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 2000px;height:1000px;"></div>
    <!-- 加载ECharts准备一个具备大小（宽高）的Dom -->
    <script src="echarts3d.js"></script>
</body>
</html>

上面html中引入的echarts.min.js和echarts-gl.min.js都是ECharts的核心功能。echarts3d.js是我们主要配置可视化方式的主要文件。新建一个名为echarts3d.js的文件将下面的脚本复制进去。

var myChart = echarts.init(document.getElementById('main'));
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
    width: 4000, height: 2000
});
mapChart.setOption({
    series : [
        {
            type: 'map',
            map: 'world',
            name: 'world_map',
            itemStyle: {
                areaColor: 'rgba(255, 253, 250, 0)', //地图区域颜色#146d97
                borderColor: 'rgba(255, 253, 250, 1)', //地图区域边线颜色
            },
            // 绘制完整尺寸的echarts实例
            top: 0, left: 0,
            right: 0, bottom: 0,
            boundingCoords: [[-180, 90], [180, -90]]
        }
    ]
});
// 指定图表的配置项和数据
var option = {
    backgroundColor: '#000',
    globe: {
        baseTexture: "./earth.jpg",
        heightTexture: './bathymetry_bw_composite_4k.jpg',

        displacementScale: 0.1,

        shading: 'lambert',

        environment: './starfield.jpg',
        
        viewControl:{
            autoRotate: false,
            // 定位到上海
            targetCoord: [121.47, 31.23]
        },

        light: {
            ambient: {
                intensity: 0.1
            },
            main: {
                intensity: 1.5
            }
        },

        layers: [{
            type: 'blend',
            blendTo: 'emission',
            texture: './night.jpg'
        }, {
            type: 'overlay',
            texture: './clouds.png',
            shading: 'lambert',
            distance: 5
        }],
    },
    series: [
                {
                    type: 'lines3D',
                    effect: {
                        show: true,
                        period: 3,//速度
                        trailLength: 0.5//尾部阴影
                    },
                    lineStyle: {//航线的视图效果
                        color: '#9ae5fc',
                        width: 3,
                        opacity: 0.9
                    },
                    // convertData 在这里添加你自己的路线数据
                    data: [[[121.47, 31.23], [123.19, 31.1]],
                            [[123.19, 31.1], [123, 28.5]],
                            [[123, 28.5], [116.75, 22.33]], 
                            [[116.75, 22.33], [114.05, 22.55]],
                            [[114.05, 22.55], [122, 19.83]],
                            [[122, 19.83], [148.47, 0]]]
                }
            ]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

js脚本中加载了几张图片，包括地图、云、城市灯光等一些图片，我把他们和脚本打包到一起，放到文末。把所有文件放在一个文件夹下，用IE浏览器打开html就能看到你自己的地球了(用Chrome浏览器一直没法成功加载，还没找到原因)。

后面有机会给大家介绍Python版的ECharts：pycharts，用来做在网页上做交互式的展示特别合适。

参考内容

https://echarts.apache.org/zh/index.html

脚本链接

脚本链接：https://pan.baidu.com/s/1ypP64yOZc5pOAOHm362jcA

提取码：x9p6