使用echartgl构建3D中国地图_echarts 3d中国地图

先上个最终效果图：

这周研究了 3D 地图，并在地图上添加柱状图，带有涟漪特效动画的散点图，过程比较波折，遇到不少坑，所以在此记录一下。

**坑一：**涟漪特效的水波纹是二维图表effectScatter，不能用在 echarts 中 geo3D 上，解决方法，把二维地图加上effectScatter，整体作为 geo3D 的背景纹理，贴在上面。

注意： 使用在colorMaterial 属性仅在 shading属性为’color’时有效。

geo3D: {
	map: 'china',
    shading: `color`,
    colorMaterial: {
         detailTexture: mapBg, // 纹理贴图
         textureTiling: 1 // 默认为1，也就是拉伸填满。大于 1 的时候，数字表示纹理平铺重复的次数
     },
}
1
2
3
4
5
6
7
8

注意： 使用平铺需要 detailTexture 的高宽是 2 的 n 次方。例如 512512，如果是 200200 的纹理无法使用平铺。

const canvas = document.createElement(`canvas`);
var mapBg = echarts.init(canvas, null, {
    width: 1024,
    height: 1024
});
const chartOption = LoadMapping(name, data);
mapBg.setOption(chartOption);
1
2
3
4
5
6
7

loadMapping 里是 geo 的地图配置。

这里有一个问题，尽管 mapBg 设置的 1024*1024，textureTiling选择的也是拉伸填满，依然没有铺满，研究了好久，发现 geo里也要设置宽度为 1024 才可以。

geo: {
     map: 'china',
     top: '0',
     width: 1024,
}
1
2
3
4
5

坑二： 需求需要地图上的柱子是圆柱形，bar3D 默认长方体柱子，找了好久，没找到能做成圆柱体的方法，只能通过bevelSize， bevelSmoothness 这两个属性配合形成圆柱（不太标准的圆柱）

{
       type: "bar3D",
        coordinateSystem: 'geo3D',
        barSize: 1.2,
        bevelSize: 1,
        bevelSmoothness: 10,
}
1
2
3
4
5
6
7

**坑三：**地图旋转一周就停了，通过设置 minBeta，maxBeta的值，设置 360 的多少倍就旋转多少圈。

minAlpha: -360000,
maxAlpha: 360000,
minBeta: -360000,
maxBeta: 360000,
1
2
3
4

**坑四：**下钻功能，click事件失效，网上搜到 getZr() 方法，但是只能获取到点击的x.y坐标，获取不到点击区域的名称，满足不了需求。

网上找到方法说换个版本：

https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js

试了下，用这个版本再配合 click 点击事件，果然可以，但是地图颜色失效，变成了白色。

这应该是echarts-gl.min.js包的问题，目前没有找到解决方法，好在点击柱子可以触发click，暂时先这样，大神们如有解决办法可以给我留言。

myChart.on('click', function (param) {
    console.log('下钻成功');
    console.log(param);
});
1
2
3
4

上完整js代码：

var convertData = function (data) {
    var res = [];
     for (var i = 0; i < data.length; i++) {
         var geoCoord = geoCoordMap[data[i][0].name];
         if (geoCoord) {
             res.push({
                 name: data[i][0].name,
                 value: geoCoord.concat(data[i][0].value)
             });
         }
     }
     console.log(res);
     return res;
 };
 const chinaName = 'china';
 const chinaData = convertData(chinaDatas);
 const myChart = echarts.init(document.getElementById('main'));

 LoadMap(chinaName, chinaData, myChart);

// 下钻
window.onload = function () {
   myChart.on('click', function (param) {
       console.log('下钻成功');
       console.log(param);
       // console.log(param.name);
   });
}

// 配置二维地图贴图
function LoadMapping(name, data) {
    var chartOption = {
        geo: {
            show: true,
            map: name,
            top: '0',
            width: 1024,
            label: {
                position: 'top',
                distance: 5,
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: '#09132c' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#274d68'  // 100% 处的颜色
                        }],
                    },
                },
            },
            emphasis: {
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 13,
                        backgroundColor: 'rgba(0,23,11,1)'
                    }
                },
                itemStyle: {
                    areaColor: '#f00', // 高亮时地图板块颜色改变
                }
            },

        },

        series: [
            {
                type: `effectScatter`,
                coordinateSystem: `geo`,
                showEffectOn: 'render',
                zlevel: 1,
                rippleEffect: {
                    period: 5,
                    scale: 4,
                    brushType: 'fill'
                },

                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'bottom',
                        offset: [15, 0],
                        color: '#fff',
                        show: true,
                        fontSize: 16
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1DE9B6',
                        // color: function (value) { //随机颜色
                        //     return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
                        // },
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                symbolSize: 16,
                data: data,
            },

        ]
    }

    return chartOption;
}


function LoadMap(name, data, myChart) {
    // 先渲染贴图
	const canvas = document.createElement(`canvas`);
	var mapBg = echarts.init(canvas, null, {
	    width: 1024,
	    height: 1024
	});
    const chartOption = LoadMapping(name, data);
    mapBg.setOption(chartOption);
    // 3D地图渲染
    option = {
        backgroundColor: 'rgb(0,0,0,0)',
        visualMap: [{
            type: 'continuous',
            seriesIndex: 0,
            text: ['bar3D'],
            calculable: true,
            min: 1000,
            max: 5000,
            inRange: {
                color: ['#4ab2e5', '#5abead', '#f56321', '#f58f0e', '#d5b314', '#b9be23']
            }
        }],
        geo3D: {
            map: name,
            roam: true,
            shading: `color`,
            width: 1024,
            boxHeight: 20,
            itemStyle: {
                color: '#5a8dce',
                opacity: 1,
                borderWidth: 1,
                borderColor: '#96ebf7'
            },
            emphasis: { //当鼠标放上去  地区区域是否显示名称
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 13,
                        backgroundColor: 'rgba(0,23,11,1)'
                    }
                },
                itemStyle: {
                    areaColor: '#498fde', // 高亮时地图板块颜色改变
                }
            },
            colorMaterial: {
                detailTexture: mapBg, // 纹理贴图
                textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            },
            environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: '#176186' // 天空颜色
            }, {
                offset: 0.5, color: '#176186' // 地面颜色
            }, {
                offset: 1, color: '#07101b' // 地面颜色
            }], false),
            viewControl: {
                projection: 'perspective',
                autoRotate: true,//会有自动旋转查看动画出现,可查看每个维度信息
                autoRotateDirection: 'ccw',//物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                autoRotateSpeed: 2,//物体自传的速度
                autoRotateAfterStill: 1,//在鼠标间静止操作后恢复自动旋转的时间隔。在开启 autoRotate 后有效。
                // distance:90,//默认视角距离主体的距离(常用)
                // alpha:90,//视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                beta: 90,//视角绕 y 轴，即左右旋转的角度。
                // center:[]//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                // zlevel://组件所在的层。
                minAlpha: -360000,
                maxAlpha: 360000,
                minBeta: -360000,
                maxBeta: 360000,
                animation: true,
                animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                animationEasingUpdate: 'cubicInOut'
            },
            light: {
                main: {
                    intensity: 1,
                },
                ambient: {
                    intensity: 1,
                    quality: 'high'
                },
                ambientCubemap: {
                    exposure: 1.0,
                    diffuseIntensity: 2,
                    specularIntensity: 2
                }
            }
        },
        series: [
            {
                type: "bar3D",
                coordinateSystem: 'geo3D',
                barSize: 1.2, 
                bevelSize: 1,
                bevelSmoothness: 10,
                minHeight: 1,
                // shading: 'color',
                // shading: 'lambert',
                shading: "realistic",
                silent: false,//图形是否不响应和触发鼠标事件
                opacity: 0.6,
                itemStyle: {
                    opacity: 0.6,
                },
                label: {
                    show: false,
                    formatter: function (data) {
                        var res = '订单量：' + data.name + " " + data.value[2]
                        return res
                    },
                },
                data: data,
            },
        ],
    }
    myChart.setOption(option, true);
}


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