-
Notifications
You must be signed in to change notification settings - Fork 22
/
map3D.html
320 lines (303 loc) · 10.6 KB
/
map3D.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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>eChart-map3D</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
}
body{
position: relative;
height: 100vh;
background: url('./images/bg.png');
}
.chart-wrapper{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.center-title{
height: 90px;
font-weight: normal;
background: url(./images/title-bg.png) no-repeat center center;
overflow: hidden;
position: relative;
z-index: 2;
}
.btn-home {
position: absolute;
width: 60px;
height: 60px;
background: url(./images/home.png) no-repeat center center;
bottom: 10px;
right: 25px;
outline: none;
border: none;
cursor: pointer;
}
h1{
margin: 0;
line-height: 70px;
font-family: Source Han Sans CN;
font-size: 40px;
font-weight: bold;
color: transparent;
text-align: center;
// text-shadow: 1px 6px 7px #005C69;
background: linear-gradient(0deg, #BFF5FF 0%, #00ECE4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.select-panel{
position: absolute;
z-index: 2;
color: #ffffff;
}
</style>
</head>
<body>
<div class="center-title">
<h1>Echarts-3D城市地图</h1>
<!-- <a href="./map3D.html">-->
<!-- <button class="btn btn-home"></button>-->
<!-- </a>-->
</div>
<div class="select-panel">
省：<select name="province" id="province-select"></select>
市：<select name="city" value="" id="city-select"></select>
</div>
<div class="chart-wrapper" id="chart-city"></div>
<!--<script type="text/javascript" src="./lib/echarts/echarts-4.9.0/echarts.js"></script>-->
<script type="text/javascript" src="./lib/echarts/echarts-4.9.0/echarts.min.js"></script>
<script type="text/javascript" src="./lib/echarts/echarts-gl.min.js"></script>
<script type="text/javascript" src="./map/geoCitys.js"></script>
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script>
console.log('cityList:', cityList);
var myChart = null;
let cityCodeArr = []; // 全国
// let cityCodeArr = ["5100"]; // 省 四川
// let cityCodeArr = ["5100", '5101']; // 四川 成都
setProvinceOptions();
setCityOptions(cityCodeArr);
// 设置省选项
function setProvinceOptions() {
var provinceOptions = cityList.map(function (province) {
return `<option value="${province.code}">${province.name}</option>`
})
$('#province-select').html(provinceOptions.join(''));
};
// 设置市选项
function setCityOptions(options) {
const provinceCode = options[0];
const cityCode = options[1];
var currentProvince = cityList.find(item => item.code == provinceCode) || {};
const cities = currentProvince.cities || [];
var citysOptions = cities.map(function (city) {
return `<option value="${city.code}">${city.name}</option>`
})
$('#city-select').html(citysOptions.join(''));
$('#province-select').val(provinceCode);
$('#city-select').val(cityCode);
}
// 省下拉框值变化
$('#province-select').on('change', function (e) {
console.log(e.target.value);
var provinceCode = e.target.value;
cityCodeArr[0] = provinceCode;
cityCodeArr.splice(1, 1);
setCityOptions(cityCodeArr)
setCityChart();
});
// 市下拉框值变化
$('#city-select').on('change', function (e) {
console.log(e.target.value);
var cityCode = e.target.value;
cityCodeArr[1] = cityCode;
setCityChart();
})
setCityChart();
function setCityChart() {
const allAreaData = []; // 所有区县的统计数据
// const cityCodeArr = ["5100", "5101"]; // ["5100", "5101"] [省、市]
console.log('cityCodeArr', cityCodeArr)
if (myChart) {
myChart.dispose(); // 销毁实例，实例销毁后无法再被使用。
}
// 初始化图表
myChart = echarts.init(document.getElementById('chart-city'));
// JSON文件(地图数据)路径
var loadedDataURL = '';
let cityCode = '';
if (cityCodeArr.length == 2) { // 选择了 省市两级 只展示市
cityCode = (cityCodeArr[1]).toString().slice(0,4) + '00'; // 市级城市json码 4位 后面+00
loadedDataURL = `./map/geometryCouties/${cityCode}.json`;
}else if (cityCodeArr.length == 1) {// 只选择省
cityCode = (cityCodeArr[0]).toString().slice(0,2); // 省json只有前两位数字
loadedDataURL = `./map/geometryProvince/${cityCode}.json`;
}else {
loadedDataURL = `./map/china.json`;
cityCode = 'china';
}
// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
myChart.showLoading();
let mapName = cityCode;
// 引入JSON文件
$.getJSON(loadedDataURL, function (geoJson) {
const data = geoJson.features.map((item, index) => {
const geoAreaName = item.properties.name; // geo文件中的地理名称
const currentArea = allAreaData.find(item => {
return item.name == geoAreaName
})
let taskNumber = index, volunteerNumber = index;
if (currentArea) {
taskNumber = currentArea.taskNumber;
volunteerNumber = currentArea.volunteerNumber;
}
return {
name: geoAreaName,
value: volunteerNumber,
taskNumber: taskNumber, // 活动总数
volunteerNumber: volunteerNumber * 10, // 志愿者总数
// coord: item.properties.center,
coord: item.properties.centroid,
selected: true
// x: 150,
// y: 150
}
})
console.log('geoJson:', geoJson)
// 注册地图名字(tongren)和数据(geoJson)
echarts.registerMap(mapName, geoJson);
// 隐藏动画加载效果。
myChart.hideLoading();
// 图表配置项
var option = {
// title: { // 标题
// top: '2%',
// text: '3D地图',
// subtext: '',
// x: 'center',
// textStyle: {
// color: '#ccc'
// }
// },
selectedMode : 'multiple', // 选中效果固话
tooltip: { // 提示框
show: true,
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
series: [{
name: 'map3D',
type: "map3D", // map3D / map
map: mapName,
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
// distance: 5, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
//formatter:, // 标签内容格式器
textStyle: { // 标签的字体样式
color: '#ffffff', // 地图初始化区域字体颜色
fontSize: 14, // 字体大小
opacity: 1, // 字体透明度
backgroundColor: 'rgba(0,23,11,0.5)' // 字体背景色
},
// normal:{
// show:true,
// formatter:function(params){ //标签内容
// // console.log(params)
// return params.name;
// },
// // lineHeight: 20,
// backgroundColor:'rgba(255,255,255,.9)',
// borderColor:'#80cffd',
// borderWidth:'1',
// padding:[5,15,4],
// color:'#000000',
// fontSize: 12,
// fontWeight:'normal',
// },
emphasis: {
show: true
}
},
tooltip: { //提示框组件。
alwaysShowContent:true,
hoverAnimation: true,
trigger: 'item', //触发类型 散点图
enterable: true, //鼠标是否可进入提示框
transitionDuration: 1, //提示框移动动画过渡时间
triggerOn: 'click',
formatter: function (params) {
// console.log(params.name, 'params.name')
if (params.name) {
var str = `
<div class="map-tooltip">
<div class="city-name">${params.name}</div>
<div class="city-info">志愿者人数：<span class="city-num">${params.data.volunteerNumber}</span></div>
<div class="city-info">活动总数：<span class="city-num">${params.data.taskNumber}</span></div>
</div>
`
return str;
}
},
// backgroundColor: 'rgba(30, 54, 124,1)',
// backgroundColor: '#01FEDD',
borderWidth: '1px',
borderRadius: '4',
borderColor: '#00B2AC',
textStyle: {
color: 'rgba(255,255,255,1)'
},
padding: [5, 10]
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
// areaColor: 'rgba(95,158,160,0.5)', // 地图板块的颜色
areaColor: '#10786c', // 地图板块的颜色
opacity: 0.3, // 图形的不透明度 [ default: 1 ]
borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: '#5CFFE0' // 图形描边的颜色。[ default: #333 ]
},
data: data,
// 3d地图添加 markPoint 位置不对
/*markPoint:{
symbolSize: 45,
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z',
itemStyle: {
normal: {
borderColor: '#33CBFF',
color:'#33CBFF',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: true
}
}
},
data: data
}*/
}],
};
// 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
myChart.setOption(option);
// 动态显示tootip /*map3D中 不生效*/
// setTimeout(() => {
// console.log('dispatchAction');
// myChart.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: 1
// });
// }, 3000);
});
}
</script>
</body>
</html>