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
| <!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>echarts 3d map</title>
<style>
* {
margin: 0;
padding: 0;
}
.echarts-map {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url("./background.png") no-repeat;
}
</style>
</head>
<body>
<div class="echarts-map" id="3dMap"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="./china.js"></script>
<script src="./geoAtlasJson.js"></script>
<script>
let mapEcharts = null;
let historyList = [];
let timeFn = null;
if (mapEcharts) {
mapEcharts.dispose(); // 销毁实例，实例销毁后无法再被使用。
}
// 初始化图表
mapEcharts = echarts.init(document.getElementById("3dMap"));
historyList.push({
code: "china",
name: "中国",
});
// 加载效果
mapEcharts.showLoading();
initMap(china, "china", "中国");
mapEcharts.on("click", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
timeFn = setTimeout(function () {
if (
allAreaCode.filter((item) => item.name.indexOf(params.name) > -1)[0]
) {
let areaCode = allAreaCode.filter(
(item) => item.name.indexOf(params.name) > -1
)[0].code;
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`
)
.then((data) => {
initMap(data, areaCode);
})
.catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}.json`
)
.then((res) => {
initMap(res, areaCode);
})
.catch(() => {});
});
historyList.push({
code: areaCode,
name: params.name,
});
let result = [];
let obj = {};
for (let i = 0; i < historyList.length; i++) {
if (!obj[historyList[i].code]) {
result.push(historyList[i]);
obj[historyList[i].code] = true;
}
}
historyList = result;
}
}, 250);
});
mapEcharts.on("dblclick", (params) => {
// 当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
if (historyList.length == 1) {
alert("已经到达最上一级地图了");
return;
}
let map = historyList.pop();
console.log(historyList[historyList.length - 1])
if (historyList[historyList.length - 1].code == "china") {
initMap(china, "china", "中国");
} else {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}_full.json`
)
.then((data) => {
initMap(data, historyList[historyList.length - 1].code);
})
.catch(() => {
loadMap(
`https://geo.datav.aliyun.com/areas_v3/bound/${
historyList[historyList.length - 1].code
}.json`
)
.then((res) => {
initMap(res, historyList[historyList.length - 1].code);
})
.catch(() => {});
});
}
});
mapEcharts.on("georoam", (params) => {
let option = mapEcharts.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
mapEcharts.setOption(option); //设置option
});
// 地图数据请求
async function loadMap(url, pathName) {
return await $.getJSON(url);
}
// 地图初始化
function initMap(mapData, mapName) {
// 注册地图
echarts.registerMap(mapName, mapData);
// 配置项
let options = {
geo: {
map: mapName, //地图类型。
zoom: 1,
roam: true,
animation: false,
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "#105781", //地图区域的阴影颜色。
shadowOffsetX: 0,
shadowOffsetY: 10,
},
},
series: [
{
name: "map",
type: "map", // 地图
map: mapName, // 加载注册的地图
selectedMode: false, // 不让单独选中
roam: true, // 开始鼠标事件，scale缩放、move移动
// 图形上的文本标签
label: {
show: true,
color: "#000a3c",
},
// 地图样式
itemStyle: {
// 区域样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 3,
colorStops: [
{
offset: 0,
color: "rgba(223, 231, 242, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
borderWidth: 1, // 边框大小
borderColor: "rgba(104, 152, 190, 1)", // 边框样式
shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
shadowOffsetX: -2, // 阴影水平方向上的偏移距离
shadowOffsetY: 2, // 阴影垂直方向上的偏移距离
shadowBlur: 10, // 文字块的背景阴影长度
},
// 选中状态下样式
emphasis: {
label: {
color: "#ffffff",
},
itemStyle: {
areaColor: "#a5d4fe",
},
},
},
],
};
mapEcharts.setOption(options); // 实例配置项与数据
// 隐藏loading
mapEcharts.hideLoading();
}
</script>
</html>
|
