-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
155 lines (144 loc) · 5.36 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>map</title>
<style>
#map {
width: 100%;
height: 550px;
}
#popup {
display: none;
position: absolute;
padding: 15px;
background-color: rgba(0, 0, 0, .6);
color: #fff;
}
.cancel {
position: absolute;
top: 2px;
right: 4px;
text-decoration: none;
font-size: 14px;
}
.cancel:after {
content: 'X';
}
</style>
</head>
<body>
<button onclick="myMap.renderPoint()">打点</button>
<button onclick="myMap.renderArea()">渲染区域</button>
<button onclick="myMap.renderHeatLayer()">热力图</button>
<button onclick="myMap.bubbleOverlay(data)">冒泡</button>
<button onclick="myMap.startTrail()">轨迹播放</button>
<button onclick="myMap.stopTrail()">暂停轨迹播放</button>
<button onclick="myMap.continueTrail()">继续轨迹播放</button>
<button onclick="myMap.startDraw('')">画区</button>
<button onclick="myMap.removeAllFeature();myMap.removeAllArea();">清空画布</button>
<button onclick="changeSize()">改变尺寸</button>
<button onclick="myMap.startEffectLine()">线动画</button>
<div id="map"></div>
<!--点详情弹框-->
<div id="popup">
<div class="content"></div>
<a class="cancel" onclick="myMap.closePointModal()"></a>
</div>
<script>
window.onload = function () {
const dataType = ['cr', 'sms', 'lu'];
const type = ['unOperate', 'operated'];
// 点数据模拟
function getPointData(isAgg, num) {
const data = [];
for (let i = 0; i < num; i++) {
data[i] = {
'prop_terminalId': Math.floor(Math.random() * 2),
'prop_crId': Math.random(),
'gpsPosition': isAgg ? JSON.stringify([Math.random() * 180, Math.random() * 90]) : '',
'aggreCount': isAgg ? Math.ceil(Math.random() * 10) : 1,
'gps': JSON.stringify([Math.random() * 180, Math.random() * 60]),
'type': type[Math.floor(Math.random())],
'prop_dataType': dataType[Math.floor(Math.random() * 2)]
};
}
return data;
}
window.aggreData = getPointData(true, 10); // 带有聚合点的数据
window.data = getPointData(false, 10); // 无聚合点数据（轨迹播放用）
// 组件的使用方法与echarts相近
window.myMap = olMap.init('map');
const option = {
useOSM: true,
mapCenter: [97.03125, 29.362721750200926],
data: window.data,
draw: {
showArea: true,
showMultiArea: false
},
area: {
// type: 'bigscreen',
showTooltip: true,
showCancelBtn: true,
showSearchBtn: true,
data: [{
areaType: 2,
areaName: '圆形',
areaDetail: '圆形区域详情',
center: '80, 30',
radius: '2000'
}, {
areaLocation: "-90,60,-90,20,90,20,90,60",
areaName: '多边形',
areaDetail: '多边形区域详情'
}]
},
pointModal: {
autoClose: 'zoom',
autoPan: false
},
effectLine: {
lineData: [
{label: 1, gps: [[20, 20], [80, 30]]},
{label: '2222', gps: [[30, 40], [80, 30]]},
{label: '2222', gps: [[-175, 40], [175, 30]]}
],
pointData: [
{label: '中国', gps: [80, 30]}
]
}
};
myMap.setOption(option);
myMap.on('pointclick', (ev) => {
const gps = ev.get('aggreGPS');
const popup = document.querySelector('#popup');
const content = document.querySelector('.content');
myMap.renderPointModal(gps, 'popup');
popup.style.display = 'block';
content.innerHTML = 'gps:' + gps;
console.log('pointclick', ev);
});
myMap.on('lineclick', (ev) => {
const popup = document.querySelector('#popup');
const content = document.querySelector('.content');
myMap.renderPointModal(ev.coords[1], 'popup');
popup.style.display = 'block';
content.innerHTML = 'count:' + ev.feature.get('label');
console.log('lineclick', ev);
});
myMap.on('drawstart', (ev) => console.log('drawstart', ev));
myMap.on('drawend', (ev) => console.log('drawend', ev));
myMap.on('areacancel', (ev) => console.log('areacancel', ev));
myMap.on('areasearch', (ev) => console.log('areasearch', ev));
myMap.on('trailend', (ev) => console.log('trailfinish', ev));
myMap.on('modalclose', (ev) => console.log('modalclose', ev));
myMap.on('moveend', (ev) => console.log('moveend', ev));
window.changeSize = function () {
document.getElementById("map").style.height = "400px";
myMap.map.updateSize();
};
}
</script>
</body>
</html>