本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_VisualizationECharts绘制三维图表，具体内容可以查看以下文章：本次将介绍如何在ECharts中加载三维地图底图。
-
echarts-gl.js脚本文件：用于提供3D图表支持； -
mapbox-gl.js脚本文件：用于使用mapbox地图服务； -
mapboxgl-token.js脚本文件：echarts官方提供的mapbox的sdk，也可以自己去申请mapbox的sdk； -
maptalks.min.js脚本文件：建立在mapbox之上的三维地图js库。
所需脚本文件均已下载并存放在配套代码中的js文件夹下，可以前往文章开头提到的获取途径获取。
<!-- 引入下载的js脚本文件 -->
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/echarts-gl.js"></script>
<script type="text/javascript" src="js/mapbox-gl.js"></script>
<script type="text/javascript" src="js/mapboxgl-token.js"></script>
<script type="text/javascript" src="js/maptalks.min.js"></script>
mapbox组件之前需要先将引入的mapbox官方token设置到 mapbox.accessToken上。// 将 token 设置到 mapboxgl.accessToken 上
mapboxgl.accessToken = mapboxglToken
// 将 token 设置到 mapboxgl.accessToken 上
mapboxgl.accessToken = mapboxglToken
// 设置图表的参数
var option = {
maptalks3D: {
center: [116.46, 39.92], // 地图中心点坐标
zoom: 6, // 缩放等级缩放等级
pitch: 50, // 视角俯视的倾斜角度。默认为0，也就是垂直于地图表面。最大的值是60
bearing: 30, // 地图的旋转角度
// 绑定URL模板
urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
altitudeScale: 1, // 海拔的缩放,默认为1
// 后处理特效的相关配置。
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果,可以让整个画面更富有质感。
postEffect: {
enable: true,
FXAA: {
enable: true
}
},
// 光照相关的设置
light: {
// 场景主光源的设置
main: {
intensity: 1, // 主光源的强度
shadow: true, // 主光源是否投射阴影。默认为关闭
shadowQuality: 'high' // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
},
// 全局的环境光设置
ambient: {
intensity: 0.2 // 环境光的强度
},
}
},
title: {
text: "三维地图底图",
left: "center",
textStyle:{color:"#000",fontSize:20},
},
// 图例
legend: {},
// 数据系列
series: [],
};
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
