-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
134 lines (131 loc) · 3.78 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>合并地图区域demo</title>
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
<script src="echarts.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,
body,
#container {
width: 100%;
height: 100%;
}
.tools {
position: fixed;
z-index: 9;
right: 100px;
bottom: 100px;
}
button{
cursor: pointer;
}
#on-select-tools{
display: none;
}
#input-area{
display: block;
}
#on-select-tools button{
float: right;
margin: 10px 10px 0 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="tools">
<button id="btn-select" style="display: block" onclick="onSelectArea()">
选择区域合并
</button>
<div id="on-select-tools">
<input id="input-area" placeholder="请输入合并区域名称" type ="text"/>
<button onclick="mergeArea()">合并</button>
<button onclick="cancelSelectArea()"> 取消 </button>
</div>
</div>
<script>
const request = (url) => fetch(url).then((res) => res.json());
const chartDom = document.getElementById("container");
const selectBtn = document.getElementById("btn-select");
const selectTools = document.getElementById("on-select-tools")
const inputDom = document.getElementById("input-area");
var geoData;
var myChart = echarts.init(chartDom);
request("./geo/100000_full.json").then((res) => {
geoData = res;
console.log(res);
echarts.registerMap("testMap", res);
myChart.setOption({
series: [
{
name: "china",
type: "map",
roam: true,
map: "testMap",
},
],
});
});
const mergeArea = () => {
const names = Object.keys(myChart.getOption().series[0].selectedMap);
console.log('已选中区域',names)
const polygons = [];
geoData.features = geoData.features.filter((i) => {
let tempFlag = true;
names.forEach((n) => {
if (i.properties.name.includes(n)) {
tempFlag = false;
const points = i.geometry.coordinates;
console.log(points);
polygons.push(turf.multiPolygon(points));
}
});
return tempFlag;
});
let unionGeo = polygons.reduce((pre, cur) => turf.union(pre, cur)); // union只支持两个参数，当选择多个多边形时需要重复合并
unionGeo.properties.name = inputDom.value || '自定义区域'
geoData.features.push(unionGeo);
echarts.registerMap("new Map", geoData);
myChart.setOption({
series:[{
map:"new Map"
}]
})
cancelSelectArea()
};
const onSelectArea = () => {
console.log("on select");
selectBtn.style.display = "none";
selectTools.style.display = "block"
myChart.setOption({
series:[
{selectedMode:'multiple'}
]
})
};
const cancelSelectArea = () => {
selectBtn.style.display = "block";
selectTools.style.display = "none"
inputDom.value=""
myChart.setOption({
series:[
{selectedMode:'single',selectedMap:null}
]
})
console.log("cancel");
myChart.off("click");
};
</script>
</body>
</html>