forked from ggary9424/taipei-burglary-pattern-2015
-
Notifications
You must be signed in to change notification settings - Fork 0
/
changePatternDiv.js
160 lines (147 loc) · 5.63 KB
/
changePatternDiv.js
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
function patternClick(t,r){
if($("#li_pattern").attr("class") == "active"){
return;
}
markPatternClick(2,0);
document.getElementById("li_time").setAttribute("class","");
document.getElementById("li_pattern").setAttribute("class","active");
document.getElementById("li_about").setAttribute("class","");
document.getElementById("right_box_down").innerHTML =
'<div id="div_pattern">'+
' <input name=T type="text" class="input" id="input_T" placeholder="請輸入時間" value="'+t+'">天內'+
' <input name=R type="text" class="input" id="input_R" placeholder="請輸入半徑" value="'+r+'">公里內(可小數)'+
' <input type="submit" class="myButton" value="Submit" onclick="parent_submitClick()">'+
'</div>'+
'<br>'+
'<font size="3" color="#CD853F"style="margin-left: 15px;">*2 Thefts Pattern 意即Pattern發生竊盜案件數有2起的清單'+'</font>'+
'<br>'+
'<font size="3" color="#CD853F"style="margin-left: 20px;">座標數如不符合則代表某座標點有多起案件'+'</font>';
var html_pattern_num ='';
for(var i=0; i<pattern.length; i++){
if(i == 0){
html_pattern_num += '<li><a href="#" class="active" value = "2" id="pattern_num_2" onclick="pattern_numClick(2)">'+'2 Thefts Pattern</a></li>';
}
else{
html_pattern_num += '<li><a href="#" class="" value = "'+(i+2)+'" id="pattern_num_'+(i+2)+'" onclick="pattern_numClick('+(i+2)+')">'+(i+2)+' Thefts Pattern</a></li>';
}
}
document.getElementById("pattern").innerHTML =
'<div id="thefts_list" class="scroll_list">'+
'<div id = "pattern_menu">'+
' <ol class="pattern_num">'+
html_pattern_num+
' </ol>'+
'</div>'+
'</div>'+
'<div id="pattern_list" class="scroll_list">'+
' <div id="pattern_list_inner">'+
' </div>'+
'</div>';
pattern_list(2);
}
function parent_submitClick(){
var t = document.getElementById('input_T').value;
var r = document.getElementById('input_R').value;
var r1 = /^[0-9]*[1-9][0-9]*$/ //正整數
var r2 = /^[0-9]*[\.]?[0-9]*$/
var alert_str = "";
var isRetrun = false;
if(t > 20 || t < 1 || !(r1.test(t))){
alert_str = '天數請輸入1~20間的正整數';
isRetrun = true;
}
if(r > 5 || r <= 0 || !(r2.test(r))){
if(isRetrun){
alert_str += '\n';
}
alert_str += '直徑請輸入0~5間的數字(大於0可小數)';
isRetrun = true;
}
if(isRetrun){
alert(alert_str);
return;
}
window.location = "test?T="+t+"&R="+r;
}
function pattern_numClick(num){
for(var i=0; i<pattern.length; i++){
document.getElementById("pattern_num_"+(i+2)).setAttribute("class","");
}
document.getElementById("pattern_num_"+num).setAttribute("class","active");
pattern_list(num);
markPatternClick(num,0);
}
function pattern_list(num){
document.getElementById("");
var btn_color = ["btn red", "btn blue", "btn orange", "btn purple", "btn green", "btn yellow"];
var html_pattern_list_inner = "";;
for(var i=0; i<pattern[num-2].length; i++){
if(i == 0){
html_pattern_list_inner += '<a id="btn_pattern_active" value = "0" class="'+btn_color[i%6]+'" onclick="markPatternClick('+num+','+i+')">Pattern '+(i+1)+'</a>';
}
else{
html_pattern_list_inner += '<a id="btn_pattern_'+i+'" value = '+i+' class="'+btn_color[i%6]+'" onclick="markPatternClick('+num+','+i+')">Pattern '+(i+1)+'</a>';
}
}
document.getElementById("pattern_list_inner").innerHTML = html_pattern_list_inner;
}
function markPatternClick(num, p_num){ //("pattern數目(ex:2,3,4)","的第幾個")
var btn_name = '#btn_pattern_'+p_num;
$('#btn_pattern_active').attr("id",'btn_pattern_'+$('#btn_pattern_active').attr('value'));
$(btn_name).attr("id","btn_pattern_active");
var marker_array = [];
var addr0 = 0.0;
var addr1 = 0.0;
for(var i=0; i<num; i++){
var id = parseInt(pattern[num-2][p_num][i]);
var str = ""+data[id][3]+"-"+data[id][4];
var bool = false;
for(var j=0; j<marker_array.length; j++){
if(marker_array[j]['addr'][0] == data[id][3] && marker_array[j]['addr'][1] == data[id][4]){
marker_array[j]['text'] = marker_array[j]['text'] + "<br>犯罪類型: " + data[id][1] + " 時間: " + data[id][2];
bool = true;
}
}
if(bool == false){
marker_array.push({'addr':[data[id][3],data[id][4]], 'text': "犯罪類型: " + data[id][1] + " 時間: " + data[id][2]});
}
addr0 += parseFloat(data[id][3]);
addr1 += parseFloat(data[id][4]);
}
addr0 = addr0/parseFloat(num);
addr1 = addr1/parseFloat(num);
var radius;
if('R' in getPara){
radius = getPara['R'];
}
else{
radius = 1;
}
var map = $(".map");
map.tinyMap('clear');
map.tinyMap('panTo', [addr0, addr1]);
map.tinyMap('modify', {
'circle': [{
'center':[addr0, addr1],
'radius': radius*500,
'color': '#B22222',
'fillcolor': '#B0E0E6',
}],
'marker': marker_array,
});
}
function aboutClick(){
if($("#li_about").attr("class") == "active"){
return;
}
document.getElementById("li_time").setAttribute("class","");
document.getElementById("li_pattern").setAttribute("class","");
document.getElementById("li_about").setAttribute("class","active");
document.getElementById("right_box_down").innerHTML =
'<font size="5" color="#FF6A6A" style="margin-left: 30px; font-weight: 600;">使用技術:</font><br>'+
'<font size="4" color="#FF6A6A" style="margin-left: 80px; font-weight: 500;">1.Node.js後端</font><br>'+
'<font size="4" color="#FF6A6A" style="margin-left: 80px; font-weight: 500;">2.運用分散式Spark計算Pattern</font><br>'+
'<font size="4" color="#FF6A6A" style="margin-left: 80px; font-weight: 500;">3.Data visualization</font><br>'+
'<font size="4" color="#1E90FF" style="margin-left: 30px; font-weight: 500;">(資料來源:台北市政府開放資料)</font>';
document.getElementById("pattern").innerHTML = "";
}