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
| <template>
| <div class="map-container">
| <div class="chart" ref="myMap" />
| </div>
| </template>
|
| <script>
| // import "echarts-gl";
| export default {
| name: 'Map',
| data() {
| return {
| mapBg: null // 地图背景图片
| }
| },
| mounted() {
| this.initMapBg();
| this.initMap();
| },
| methods: {
| // 初始化地图背景图片
| initMapBg() {
| // 创建一个 canvas 来生成背景图案
| const canvas = document.createElement('canvas');
| const ctx = canvas.getContext('2d');
| canvas.width = 8;
| canvas.height = 8;
|
| // 设置渐变
| const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
| gradient.addColorStop(0, 'rgba(0,24,106,0.8)');
| gradient.addColorStop(1, 'rgba(0,24,106,0.9)');
|
| // 绘制背景
| ctx.fillStyle = gradient;
| ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| // 添加网格效果
| ctx.strokeStyle = 'rgba(0,234,255,0.1)';
| ctx.lineWidth = 0.5;
| ctx.beginPath();
| ctx.moveTo(0, canvas.height / 2);
| ctx.lineTo(canvas.width, canvas.height / 2);
| ctx.moveTo(canvas.width / 2, 0);
| ctx.lineTo(canvas.width / 2, canvas.height);
| ctx.stroke();
|
| // 保存为base64图片
| this.mapBg = canvas.toDataURL();
| },
| initMap() {
| // json地图数据-需要根据需求下载引入对应名称文件
| let mapJson = require("@/utils/map/chongzhou.json");
| let myChart = this.$echarts.init(this.$refs.myMap);
| myChart.showLoading();
| myChart.hideLoading();
| this.$echarts.registerMap("myMap", mapJson);
|
| let option = {
| tooltip: {
| trigger: "none", // 关闭提示框
| },
| // 设置多层级地图实现立体效果
| geo: [
| {
| map: "myMap", // 使用注册的地图名称
| aspectScale: 1, // 地图长宽比
| zoom: 1, // 地图缩放比例
| top: "15%", // 距离容器顶部距离
| bottom: "10%", // 距离容器底部距离
| roam: false, // 禁用地图平移缩放
| z: 5, // 图层层级，数值大的在上层
| itemStyle: {
| areaColor: "transparent", // 区域透明
| borderColor: "#00eaff", // 边框颜色
| borderWidth: 1 // 边框宽度
| },
| select: {
| disabled: true // 禁用选中状态
| },
| tooltip: {
| show: false, // 关闭提示框
| },
| },
| {
| map: "myMap", // 第二层地图
| aspectScale: 1,
| zoom: 1,
| top: "16%", // 比第一层低一点
| bottom: "9%",
| roam: false,
| z: 4, // 层级比第一层低
| itemStyle: {
| areaColor: "transparent",
| borderColor: "#00eaff",
| borderWidth: 1
| },
| select: {
| disabled: true
| },
| tooltip: {
| show: false,
| },
| },
| {
| map: "myMap", // 第三层地图
| aspectScale: 1,
| zoom: 1,
| top: "17%", // 最底层
| bottom: "8%",
| roam: false,
| z: 3, // 最底层层级
| itemStyle: {
| areaColor: "transparent",
| borderColor: "#00eaff",
| borderWidth: 1
| },
| select: {
| disabled: true
| },
| tooltip: {
| show: false,
| },
| },
| ],
|
| series: [
| {
| type: "map", // 地图类型
| name: "地图", // 系列名称
| selectedMode: false, // 禁用选中模式
| aspectScale: 1, // 长宽比
| zoom: 1, // 缩放比例
| roam: false, // 禁用平移缩放
| regionHeight: 2, // 三维地图的厚度
| map: "myMap", // 使用的地图
| z: 10, // 最顶层
| top: "14%", // 主图层位置
| bottom: "11%",
| viewControl: { // 视角控制
| distance: 115, // 视角距离主体的距离
| alpha: 40, // 视角绕 x 轴，即上下旋转的角度
| rotateSensitivity: [0, 0], // 禁用旋转
| beta: 0, // 视角绕 y 轴，即左右旋转的角度
| },
| label: { // 标签样式
| normal: {
| show: true, // 显示标签
| textStyle: {
| color: "#fff", // 标签文字颜色
| fontSize: 16, // 文字大小
| fontWeight: "normal", // 文字粗细
| textShadowColor: "rgba(0,234,255,0.8)", // 文字阴影颜色
| textShadowBlur: 10, // 文字阴影模糊
| opacity: 1, // 文字透明度
| },
| },
| emphasis: {
| color: "#fff", // 悬浮时文字颜色
| },
| },
| itemStyle: { // 主图层样式
| areaColor: {
| image: this.mapBg, // 使用背景图片
| repeat: 'repeat' // 平铺模式
| },
| borderColor: "#00eaff", // 边框颜色
| borderWidth: 2, // 边框宽度
| borderType: 'solid',
| shadowColor: "#00eaff", // 阴影颜色
| shadowOffsetX: 0,
| shadowOffsetY: 0,
| shadowBlur: 20,
| opacity: 1
| },
| emphasis: {
| disabled: true // 禁用悬浮效果
| },
| select: {
| disabled: true
| },
| light: { // 光照相关的设置
| main: { // 主光源
| color: "#00eaff", // 光照颜色
| intensity: 1.2, // 增加光照强度
| shadow: true, // 是否显示阴影
| shadowQuality: "high", // 阴影质量
| alpha: 40,
| beta: 0,
| },
| ambient: { // 环境光
| color: "#00eaff", // 环境光颜色
| intensity: 0.3, // 减弱环境光以突出主光源
| },
| },
| },
| ],
| };
| myChart.setOption(option);
| }
| }
| }
| </script>
|
| <style scoped>
| .map-container {
| position: relative;
| width: 815px;
| height: 534px;
| }
|
| .chart {
| width: 100%;
| height: 100%;
| }
| </style>
|
|
