-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
231 lines (196 loc) · 6.67 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gs00r5tgNZG32bkjCnE5BWdyaSxeI18V"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<title>热力图功能示例</title>
<style type="text/css">
ul,
li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#container {
height: 650px;
width: 100%;
margin-top: 5px;
}
#r-result {
width: 100%;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
</head>
<body>
<select onchange="Timer(this.value)">
<option value="Stop">Stop</option>
<option value="Start">Start</option>
</select>
<select onchange="Change(this.value)">
<option value="Heatmap">Heatmap</option>
<option value="DataChart">DataChart</option>
<option value="DataType">DataType</option>
<option value="PipCharts">PipCharts</option>
</select>
<div class="Begin">
<div class="left-element" id="CurTime" , style="text-align:center">
Current Time:00:00-00:59
</div>
</div>
<div id="container"></div>
<div id="r-result">
</div>
ChooseDayTime:
<input type="text" id="ChooseDayTime" style="margin-right: 10px" value="">
<input type="button" onclick="ChooseDayTime()" value="Submit">
<input type="button" onclick="Change()" value="Change">
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.418261, 39.921984);
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
var points = [
// { "lng": "116.43410492", "lat": "39.96931839", "count": "100" },
// { "lng": "116.43395233", "lat": "39.97468948", "count": "100" },
];
if (!isSupportCanvas()) {
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
//参数说明如下:
/* visible 热力图是否显示,默认为true
* opacity 热力的透明度,1-100
* radius 势力图的每个点的半径大小
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0~1.
value 为颜色值.
*/
heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({ data: points, max: 100 });
closeHeatmap();
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function setGradient() {
/*格式如下所示:
{
0:'rgb(102, 255, 0)',
.5:'rgb(255, 170, 0)',
1:'rgb(255, 0, 0)'
}*/
var gradient = {};
var colors = document.querySelectorAll("input[type='color']");
colors = [].slice.call(colors, 0);
colors.forEach(function(ele) {
gradient[ele.getAttribute("data-key")] = ele.value;
});
heatmapOverlay.setOptions({ "gradient": gradient });
}
function openHeatmap() {
heatmapOverlay.show();
console.log("show heat map");
}
function closeHeatmap() {
heatmapOverlay.hide();
}
function ChooseDayTime() {
socket.emit('DayTime', $('#ChooseDayTime').val());
$('#ChooseDayTime').val('');
}
window.onload = function() {
openHeatmap()
}
var filename_index = 0;
var t;
var WhetherStart = 0;
//循环控制
function Start() {
var filename = "./Data/20170226/" + filename_index + ".json"
console.log(filename_index);
var timedisplay;
if(filename_index<10){
timedisplay="Current Time:0"+filename_index.toString() +":00-0"+filename_index.toString()+":59"
}
else{
timedisplay="Current Time:"+filename_index.toString()+":00-"+filename_index.toString()+":59"
}
document.getElementById('CurTime').innerHTML=timedisplay
filename_index++;
if (filename_index == 24) {
filename_index = 0;
}
socket.emit('StartChange', filename);
t = setTimeout("Start()", 2000);
}
function Stop() {
clearTimeout(t)
}
function Timer(selectedValue) {
console.log(selectedValue)
if (selectedValue == "Start") {
Start();
} else {
Stop()
}
}
function Change(selectedValue) {
if (selectedValue == "Heatmap") {
window.location.href = "/"
}else if(selectedValue == "DataChart"){
window.location.href = "/DataChart.html"
}else if(selectedValue == "DataType"){
window.location.href = "/DataType.html"
}else {
window.location.href = "/PipCharts.html"
}
// socket.emit('Display', 1); //display chart table
}
socket.on('SendData', function(msg) {
//console.log(11)
points = []
for (var index in msg) {
//console.log(msg[index].lat)
//console.log(msg[index].lng)
var p = {};
p.lng = msg[index].lng
p.lat = msg[index].lat
p.count = 100
points.push(p)
}
heatmapOverlay.setDataSet({ data: points, max: 100 });
//console.log(leng(points))
});
</script>
</body>
</html>