-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisualizaiton.html
109 lines (99 loc) · 3.4 KB
/
visualizaiton.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<title>Visualization</title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info" class="info" style="font-size:1.2rem"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4d6fc423b99d4d30fa6e76169e8edb73"></script>
<script src="https://webapi.amap.com/loca?v=1.3.2&key=4d6fc423b99d4d30fa6e76169e8edb73"></script>
<script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script src=".\result\congestion_prop.js"></script>
<script>
var map = new AMap.Map('container', {
mapStyle: 'amap://styles/whitesmoke',
features: ['bg','road'],
viewMode: '2D',
zoom: 13,
center: [102.716368,25.036598]
});
var layer = new Loca.LineLayer({
map: map,
fitView: true
});
var text = new Loca.LabelsLayer({
map: map,
collision: false
});
text.setData(data, {
lnglat: 'loc'
});
layer.setData(data, {
lnglat: 'path'
});
text.setOptions({
style: {
direction: 'center',
offset: [0, 0],
text: function (data) {
return data.value['id'] + " - " + data.value['proptime'] + " min"
},
fillColor: '#333333',
fontSize: 14,
fontWeight: "bold",
strokeColor: "rgba(255,255,255,0.85)",
}
});
var colors = ['#FF3300','#FF6600','#FF9900','#FFCC00','#FFFF00'];
layer.setOptions({
unit: 'meter',
style: {
borderWidth: 6,
width: 1,
color: function(data) {
var prop_time = data.value['proptime'];
if (prop_time < 0.001) {
return colors[0];
} else if (prop_time < 5) {
return colors[1];
} else if (prop_time < 10) {
return colors[2];
} else if (prop_time < 15) {
return colors[3];
} else {
return colors[4];
};
},
opacity: 1,
}
});
layer.render();
text.render();
function setTime(data) {
console.log(data['time'])
var hour = parseInt(data['time'] / 60);
var minute = data['time'] % 60;
var unit = data['unit'];
var newContent = document.createTextNode("当前展示时段: "+ hour + ":" + minute + " \u00A0\u00A0\u00A0" + "时间颗粒度: " + unit + "min");
var currentDiv = document.getElementById("info");
var object = currentDiv.appendChild(newContent);
}
console.log(setTime(data[0]));
</script>
</body>
</html>