echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

作者：繁依Fanyi0 | 2024-02-15 08:57:21

踩

echarts-gl

echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图

一、使用插件

echarts@5.2.2、echarts-gl@2.0.8、jquery;jquery 是使用ajax加载json文件的。

二、准备地图json文件

因为找了一圈，网上的地图js文件都需要花钱去购买，json文件可以在阿里云数据可视化平台下载，下载链接为：免费地图json文件下载

ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用使用示例：

// javascript引入示例
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12

// json引入示例
$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
1
2
3
4
5
6
7
8
9
10
11

三、上代码（含详细注释）

文件目录

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3d地图</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .chart{
      width: 100vw;
      height: 100vh;
      background-color: #020202;
    }
  </style>
</head>
<body>
  <div class="chart" id="chart"></div>
  <!-- 引入jq -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="./mapData/echarts.js"></script>
  <script src="./mapData/echarts-gl.js"></script>

  <script>
    let chart = null;
    // 图表配置
    let options = {};
    // 地图贴图图片
    let bg = '';
    // 视图容器
    const chartEle = document.getElementById('chart');
    // geo3d + map3d公用图表配置
    const setting = {
      top: '0%',
      right: '0%',
      bottom: '-20%',
      distance: 90,
      alpha: 50,
      beta: 5,
      regionHeight: 6,
    }
    // 地图上显示的数据
    const mapData = {
      geoCoordMap: {
          广东省: [113.429919, 23.334643, 50],
          云南省: [101.485106, 25.008643, 50],
          辽宁省: [122.604994, 41.299712, 50],
        },
        projectData: [
          { name: '广东省', value: (Math.random() * 300).toFixed(2), projectName: 'OA系统' },
          { name: '云南省', value: (Math.random() * 300).toFixed(2), projectName: '项目管理系统' },
          { name: '辽宁省', value: (Math.random() * 300).toFixed(2), projectName: '人工智能园区' },
        ],
    }
    // 适配不同尺寸浏览器，避免地图上的字号过小或过大
    function getSize(res) {
      const docEl = document.documentElement;
      const clientWidth = window.innerWidth || document.documentElement.clientWidth
      || document.body.clientWidth;
      if (!clientWidth) return;
      const fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    }
    // 转化已有数据到地图上显示的配置数据
    function convertData(data) {
      const res = [];
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < data.length; i++) {
        const geoCoord = mapData.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            projectName: data[i].projectName,
            label: {
              show: true,
              position: 'top',
              distance: -5,
              formatter(param) {
                return `{sty1|${param.data.projectName}}`;
              },
              rich: {
                sty1: {
                  padding: getSize(0.07),
                  backgroundColor: 'rgba(7, 28, 38, 0.7)',
                  borderWidth: 1,
                  borderColor: '#FF771A',
                  borderRadius: 2,
                  fontSize: getSize(0.14),
                },
              },
              textStyle: {
                color: '#ffffff',
              },
            },
            emphasis: {
              label: {
                show: true,
                position: 'top',
                distance: 0,
                formatter(param) {
                  return `{sty1|${param.data.projectName}}`;
                },
                rich: {
                  sty1: {
                    padding: 7,
                    backgroundColor: 'rgba(7, 28, 38, 0.7)',
                    borderWidth: 1,
                    borderColor: '#FF771A',
                    borderRadius: 2,
                    fontSize: getSize(0.14),
                  },
                },
                textStyle: {
                  color: '#ffffff',
                },
              },
            },
          });
        }
      }
      return res;
    }
    // 获取图表配置
    function getOptions() {
      const options = {
        tooltip: {
          show: false,
          trigger: 'item',
        },
        textStyle: {
          color: '#ffffff', // 高亮时标签颜色变为 白色
          fontSize: 6, // 高亮时标签字体 变大
        },
        // 地图主要配置
        geo3D: {
          show: true,
          map: 'map',
          boxHeight: 10,
          top: setting.top,
          right: setting.right,
          left: '0%',
          bottom: setting.bottom,
          regionHeight: setting.regionHeight, // 三维高度
          shading: 'realistic',
          realisticMaterial: {
            detailTexture: bg, // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
          },
          label: { // 标签的相关设置
            show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
            distance: 20,
            formatter(param) {
              const city = (param.name).substr(0, 2);
              return `{sty1|${city}}`;
            },
            rich: {
              sty1: {
                color: '#ffffff',
                fontSize: getSize(0.14),
                align: 'center',
              },
            },
            textStyle: { // 标签的字体样式
              color: '#ffffff', // 地图初始化区域字体颜色
              opacity: 1, // 字体透明度
            },
          },
          itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: '#FE9D0B', // 地图板块的颜色
            // color: '#00F6FF',
            opacity: 1, // 图形的不透明度 [ default: 1 ]
            borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
            borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]
          },
          emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
            label: { // label高亮时的配置
              show: true,
              textStyle: {
                color: '#fff', // 高亮时标签颜色变为 白色
                fontSize: getSize(0.15), // 高亮时标签字体 变大
              },
            },
          },
          light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。
          // 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
            main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#ffeeee', // 主光源的颜色。[ default: #fff ]
              intensity: 1.1, // 主光源的强度。[ default: 1 ]
              shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
              alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
              beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
            },
            ambient: { // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.1, // 环境光的强度。[ default: 0.2 ]
            },
          },
          viewControl: {
            projection: 'perspective',
            distance: setting.distance,
            beta: setting.beta,
            alpha: setting.alpha,
          },
        },
        series: [
          // 叠加地图上需要显示的数据，插牌
          {
            type: 'scatter3D',
            name: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
            symbolSize: [4, 28],
            itemStyle: {
              color: '#FF771A',
              opacity: 1,
            },
            data: convertData(mapData.projectData),
          },
          // 使用和geo3d的配置数据，叠加一层暗沉的厚度
          {
            name: 'map3D', // series名称
            type: 'map3D', // series图表类型
            map: 'map',
            top: setting.top,
            right: setting.right,
            left: '0%',
            bottom: setting.bottom,
            regionHeight: setting.regionHeight - 0.2, // 三维高度
            label: { // 标签的相关设置
              show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
            },
            itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
              color: '#95830A', // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以清晰的区分每个区域
              borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]
            },
            emphasis: { // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
              label: { // label高亮时的配置
                show: false,
              },
            },
            viewControl: {
              projection: 'perspective',
              distance: setting.distance,
              beta: setting.beta,
              alpha: setting.alpha,
            },
          },
        ],
      };
      return options;
    }
    // 初始化图标
    function init() {
      const that = this;
      if (chart) {
        chart.clear();
      }
      // 加载贴图材质图片
      const img = document.createElement('img');
      img.src = 'mapData/ebg.jpg';
      bg = img;
      // 初始化
      chart = echarts.init(chartEle);
      chart.showLoading({
        maskColor: 'rgba(0, 0, 0, 0.2)',
      });
      // 获取地图数据
      $.getJSON('mapData/nation.json', (json) => {
        echarts.registerMap('map', json);
        chart.hideLoading();
        options = getOptions();
        chart.setOption(options);
        setTimeout(() => {
          window.addEventListener('resize', () => {
            that.chart.resize();
            that.init();
          });
        }, 200);
      });
    }
    // 执行
    init();
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291

效果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/82927