雪龙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
