本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中对地理数据进行可视化操作时，一般都需要加载地图底图。
在ECharts中加载百度地图底图需要使用到bmap组件。
需要注意的是，因为加载的是百度地图底图，因此其坐标系为BD09，后续如需加载数据，需要确保两者的坐标系一致。
-
注册百度地图开放平台：
绘制百度地图底图首先需要前往以下地址注册【百度地图开放平台】：
1https://lbsyun.baidu.com/
注册完成后创建一个应用，然后就可以在我的应用栏看到相应内容，后续需要使用到AK值。
-
引入用于加载地图底图的脚本文件：
1https://github.com/apache/echarts/tree/master/dist/extension
下载完成后保存在本地，然后在代码中引入即可。
-
引入百度地图开放平台接口服务：
通过以下方式引入百度地图开放平台接口服务，将之前创建应用得到的ak值进行替换即可：
1<script src="https://api.map.baidu.com/getscript?v=3.0&ak=替换成自己的ak值&services=&t=20200327103013"></script>
下面就可以加载百度地图底图了。
在加载地图前，先进行如下设置，使得加载的地图可以全屏显示：
1<!DOCTYPE html>
2<html style="height:100%">
3
4<head>
5 ......
6</head>
7
8<body style="height: 100%; margin: 0">
9 <div id="container" style="height:100%"></div>
10 ......
11</body>
12
13</html>
加载百度地图底图需要使用到bmap组件，代码如下所示：
1<!DOCTYPE html>
2<html style="height:100%">
3
4<head>
5 <meta charset="utf-8">
6 <!-- 引入下载的 echarts.js 文件 -->
7 <script type="text/javascript" src="js/echarts.js"></script>
8 <!-- 引入下载的 bmap.js 文件 -->
9 <script type="text/javascript" src="js/bmap.js"></script>
10 <!-- 引入百度地图开放平台接口服务 -->
11 <script src="https://api.map.baidu.com/getscript?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&services=&t=20230614151358"></script>
12 <title>ECharts图表</title>
13</head>
14
15<body style="height: 100%; margin: 0">
16 <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
17 <div id="container" style="height:100%"></div>
18 <script type="text/javascript">
19 // 基于准备好的dom，初始化echarts实例
20 var myChart = echarts.init(document.getElementById('container'));
21
22 // 设置图表的参数
23 var option = {
24 // bmap组件
25 bmap:{
26 center:[117.135561,36.678781], // 地图中心点坐标
27 zoom:8, // 地图层级
28 roam:true // 可以对地图进行缩放
29 },
30
31 title: {
32 text: "百度地图底图"
33 },
34
35 // 图例
36 legend: {},
37
38 // 数据系列
39 series: [{}],
40 };
41
42
43 // 使用指定的配置项和数据显示图表
44 myChart.setOption(option);
45 </script>
46</body>
47
48</html>
可视化结果如下图所示：
其中，中心点坐标可以使用百度地图拾取坐标系统得到：
1https://api.map.baidu.com/lbsapi/getpoint/index.html
此时加载的是，百度地图默认样式，如需调整地图底图的样式，可以通过bmap组件下的mapStyle配置项进行设置，样式代码可以使用百度地图开放平台上的【个性化地图编辑平台】进行设置：
1https://lbsyun.baidu.com/index.php?title=open/custom
可以使用官方给到的一些样式，也可以根据需要自己调整，设置完成后点击【编辑JSON】，复制样式代码。
将复制的样式代码添加到styleJson配置项处：
1 bmap: {
2 center: [118.118600, 24.520422],
3 zoom: 13,
4 roam: true,
5 mapStyle: {
6 styleJson: 样式代码
7 }
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 // bmap组件
4 bmap: {
5 center: [117.135561, 36.678781], // 地图中心点坐标
6 zoom: 8, // 地图层级
7 roam: true, // 可以对地图进行缩放
8 // 地图底图样式设置
9 mapStyle: {
10 styleJson: [{
11 featureType: 'water',
12 elementType: 'all',
13 stylers: {
14 color: '#d1d1d1'
15 }
16 },
17 {
18 featureType: 'land',
19 elementType: 'all',
20 stylers: {
21 color: '#f3f3f3'
22 }
23 },
24 {
25 featureType: 'railway',
26 elementType: 'all',
27 stylers: {
28 visibility: 'off'
29 }
30 },
31 {
32 featureType: 'highway',
33 elementType: 'all',
34 stylers: {
35 color: '#fdfdfd'
36 }
37 },
38 {
39 featureType: 'highway',
40 elementType: 'labels',
41 stylers: {
42 visibility: 'off'
43 }
44 },
45 {
46 featureType: 'arterial',
47 elementType: 'geometry',
48 stylers: {
49 color: '#fefefe'
50 }
51 },
52 {
53 featureType: 'arterial',
54 elementType: 'geometry.fill',
55 stylers: {
56 color: '#fefefe'
57 }
58 },
59 {
60 featureType: 'poi',
61 elementType: 'all',
62 stylers: {
63 visibility: 'off'
64 }
65 },
66 {
67 featureType: 'green',
68 elementType: 'all',
69 stylers: {
70 visibility: 'off'
71 }
72 },
73 {
74 featureType: 'subway',
75 elementType: 'all',
76 stylers: {
77 visibility: 'off'
78 }
79 },
80 {
81 featureType: 'manmade',
82 elementType: 'all',
83 stylers: {
84 color: '#d1d1d1'
85 }
86 },
87 {
88 featureType: 'local',
89 elementType: 'all',
90 stylers: {
91 color: '#d1d1d1'
92 }
93 },
94 {
95 featureType: 'arterial',
96 elementType: 'labels',
97 stylers: {
98 visibility: 'off'
99 }
100 },
101 {
102 featureType: 'boundary',
103 elementType: 'all',
104 stylers: {
105 color: '#fefefe'
106 }
107 },
108 {
109 featureType: 'building',
110 elementType: 'all',
111 stylers: {
112 color: '#d1d1d1'
113 }
114 },
115 {
116 featureType: 'label',
117 elementType: 'labels.text.fill',
118 stylers: {
119 color: '#999999'
120 }
121 }
122 ]
123 }
124 },
125
126 title: {
127 text: "百度地图底图"
128 },
129
130 // 图例
131 legend: {},
132
133 // 数据系列
134 series: [{}],
135 };
可视化结果如下图所示：
可以将设置好的地图底图样式代码保存为单独的JSON文件，然后通过异步加载的方式加载进来，这样方便后续重复使用。
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
