记录使用Echarts-gl实现3D地图

作者：Cpp五条 | 2024-02-15 08:51:48

踩

echarts-gl

一、前言

最近项目需要做个大屏展示的，开始做了第一版用户觉得地图太过于单调了，给我发了一个视频，让我参考着做。我看着视频上的地图旋转了方向、地图有标记、看着像是3D的（视频上的地图使用多个图层叠加起来、CSS样式做了旋转，echarts.series进行数据标记的）

就一股脑的往3D方面开发……各种调整就是不能在地图上做标记，在网上查资料，也没找到想要的（可能是查找的姿势不对）
期间找到过：修改geojson数据进行旋转，但是旋转后的数据不能用在3D地图上，如果地图数据有岛屿会出现阴影

也想过不使用3D地图，按照视频的方式开发一个。但是想到我都在这耗了这么久，就这么放弃有点不甘心，想起视频上使用图层叠加的方式，有了思路，琢磨起来就快了。

注：有啥问题看看文档，或者换着思路来，本文仅供参考！

二、使用组件

获取echarts.min.js方法：Echarts（图表）
Echats 配置文档：Echats 配置文档
获取echarts-gl.min.js方法：Echarts-gl（3D图表）
Echats-gl 配置文档：Echats-gl 配置文档
获取GeoJson方法：GeoJson（国内地图数据）

三、相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广东省业务数据平台</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.min.js"></script>
</head>
<body>
<!-- 3D地图容器 -->
<div id="main" style="width: 100%; height: 900px;"></div>
<script>
    // 初始化图表
    var myChart = echarts.init(document.getElementById('main'));
    var guangdong = "json/440000_full.json";
    //文字显示坐标数据，可自行调整
    var mapData = [
        {name: '广州市', value: [113.40, 23.20],code:'440100'}
        , {name: '省本级', value: [113.405775, 23.502733],code:'449900'}
        , {name: '韶关市', value: [113.591544, 24.701322],code:'440200'}
        , {name: '深圳市', value: [114.1, 22.55],code:'440300'}
        , {name: '珠海市', value: [113.3, 22.05],code:'440400'}
        , {name: '汕头市', value: [116.6, 23.25],code:'440500'}
        , {name: '佛山市', value: [112.822717, 22.908762],code:'440600'}
        , {name: '江门市', value: [112.504942, 22.190431],code:'440700'}
        , {name: '湛江市', value: [110.004977, 21.074898],code:'440800'}
        , {name: '茂名市', value: [110.719229, 21.909751],code:'440900'}
        , {name: '肇庆市', value: [112.072529, 23.351546],code:'441200'}
        , {name: '惠州市', value: [114.412599, 23.199404],code:'441300'}
        , {name: '梅州市', value: [115.9, 24],code:'441400'}
        , {name: '汕尾市', value: [115.40, 22.90],code:'441500'}
        , {name: '河源市', value: [114.697802, 23.799996],code:'441600'}
        , {name: '阳江市', value: [111.575107, 21.899222],code:'441700'}
        , {name: '清远市', value: [112.801544, 24.041322],code:'441800'}
        , {name: '东莞市', value: [113.78, 22.9],code:'441900'}
        , {name: '中山市', value: [113.382391, 22.521113],code:'442000'}
        , {name: '潮州市', value: [116.7, 23.7],code:'445100'}
        , {name: '揭阳市', value: [115.95, 23.3],code:'445200'}
        , {name: '云浮市', value: [111.644439, 22.729801],code:'445300'}

    ];
    //3D地图旋转主要配置
    var viewControl={
        alpha: 50, // 上下旋转的角度
        beta: -2, // 左右旋转的角度
        rotateSensitivity: 3, // 旋转操作的灵敏度
        panSensitivity: 3,
        panMouseButton: 'right',
        distance: 180,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 100, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: 25, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        animation: false, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
    }
    $.get(guangdong, function (result) {
        // 注册 echarts 地图
        echarts.registerMap('广东省', result);
        var option = {
            backgroundColor:'#000d4a',
            geo3D: {
                map: '广东省',
                show: false,
                boxWidth: 200,
                boxHeight: 15, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
                regionHeight: 5,
                shading: 'lambert',
                top: -15,//文字悬浮高度
                viewControl: viewControl
            },
            series: [
                {
                    type: 'map3D',
                    map: '广东省',
                    show: true,
                    boxWidth: 200,
                    boxHeight: 15, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
                    regionHeight: 5,
                    shading: 'lambert',
                    itemStyle: {
                        color: "#1CA7FC",
                        opacity: 1,
                        borderWidth: 3,
                        borderColor: "#50e6fd",
                    },
                    emphasis: {
                        label: {
                            show: false,
                            distance: 2,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            color: "#50e6fd",
                        }
                    },
                    light: {
                        main: {
                            shadow: true,
                            shadowQuality: 'ultra',
                        }
                    },
                    viewControl: viewControl,
                },
                {
                    type: 'scatter3D',
                    coordinateSystem: 'geo3D',
                    zlevel: 3,
                    symbol: 'circle',
                    symbolSize: 22,//圆点大小
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            textStyle: {
                                color: '#fff',
                                fontSize: 22
                            },

                        }
                    },
                    data: mapData,
                    itemStyle: { //坐标点颜色
                        color: '#fff',
                        shadowBlur: 20,
                        shadowColor: '#fff'
                    },
                    emphasis: {
                        itemStyle: { //坐标点颜色
                            color: '#ffb800'
                        },
                    }
                }
            ]
        };
        myChart.setOption(option);
    });
    // 点击事件（图层原因，会输出两条数据）
    myChart.on('click', function (params) {
        console.log(params);
    });
</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

四、效果展示

在这里插入图片描述

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