addstationstemplate.html
7.58 KB
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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!-- 手动添加站点 -->
<div class="modal fade" id="add_station_template_mobal" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">手动添加站点</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="save_station_template_form" action="/module" method="post">
<div class="alert alert-danger display-hide"> <button class="close" data-close="alert"></button>
您的输入有误，请检查下面的输入项
</div>
<!-- 站点名称 -->
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">
<span class="required"> * </span> 站点名称：
</label>
<div class="col-md-9">
<textarea class="form-control" rows="12" name="stations" id="stationsInput" placeholder="站点名称"></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="alert alert-info font-blue-chambray" style="background-color: #2C3E50">
<h5 class="block"><span class="help-block" style="color:#1bbc9b;"> * 手动添加站点规划说明： </span></h5>
<p>
<span class="help-block" style="color:#1bbc9b;">
请在文本域中按站点顺序依次输入站点名称（如果已有站点GPS坐标，请将坐标跟在站点名称后面用【Tab】键隔开）,每输入完一个站名时请按回车键【Enter】换行.
例如：<br><br>
<!-- <HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3> -->
浦东大道金桥路 121.496612 31.238960<br>
浦东大道居家桥路 121.496618 31.238957<br>
浦东大道德平路 121.496622 31.238948<br>
</span>
</p>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal" id="addMobalHiden">取消</button>
<button type="button" class="btn btn-primary" id="templateSaveData">提交数据</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#add_station_template_mobal').on('AddStationTempMobal.show', function(e,map,ajaxd,dir,line,fun){
// 延迟加载显示mobal
setTimeout(function(){$('#add_station_template_mobal').modal({show : true,backdrop: 'static', keyboard: false});},200);
// 获取表单元素
var form = $('#save_station_template_form');
// 获取错误提示信息元素
var error = $('.alert-danger', form);
// 提交数据点击事件
$('.modal-footer #templateSaveData').on('click',function() {
// 表单提交
form.submit();
});
// 表单验证
form.validate({
errorElement : 'span',
errorClass : 'help-block help-block-error',
focusInvalid : false,
rules : {
'stations' : {
required : true,
}
},
invalidHandler : function(event, validator) {
error.show();
App.scrollTo(error, -200);
},
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight : function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
success : function(label) {
label.closest('.form-group').removeClass('has-error');
},
submitHandler : function(f) {
// 隐藏手动规划弹出层
$('#add_station_template_mobal').modal('hide');
var directionData = dir;
// 上行
if(directionData==0){
// 隐藏上行规划
$('#upToolsMobal').hide();
// 下行
}else if(directionData==1){
// 隐藏上行规划
$('#downToolsMobal').hide();
}
// 弹出正在加载层
var i = layer.load(0,{offset:['200px', '280px']});
// 表单序列画
var params = form.serializeJSON();
// 站点名称字符串切割
var paramsStationsArray = params.stations.split('\r\n');
var stationList = [];
var len = paramsStationsArray.length;
if(len>0) {
for(var k =0;k<len;k++) {
debugger;
if(paramsStationsArray[k]=="")
continue;
var tempStr = paramsStationsArray[k].split('\t');
if(tempStr.length<2){
stationList.push({name:paramsStationsArray[k]+"公交车站",wgs:{x:'',y:''}});
}else {
stationList.push({name:tempStr[0]+"公交车站",wgs:{x:tempStr[1], y:tempStr[2]}});
}
}
}else {
layer.msg('请按说明规则输入站点!');
return;
}
console.log(stationList);
// 根据站点名称获取百度坐标
map.stationsNameToPoints(stationList,function(resultJson) {
console.log(resultJson);
debugger;
// 根据坐标点获取两点之间的时间与距离
map.getDistanceAndDuration(resultJson,function(stationdataList) {
// 根据坐标点获取两点之间的折线路段
map.getSectionListPlonly(stationdataList,function(sectiondata) {
var addLine = LineObj.getLineObj();
// 设置第一个站的距离
stationdataList[0].distance = '';
// 设置第一个站的时间
stationdataList[0].duration = '';
// 定义站点信息JSON字符串
var stationJSON = JSON.stringify(stationdataList);
// 定义路段信息字符串
var sectionJSON = JSON.stringify(sectiondata);
// 参数集合
var params = {};
// 站点信息JSON字符串
params.stationJSON = stationJSON;
// 线路ID
params.lineId = addLine.id;
// 方向
params.directions = directionData;
// 原始坐标类型
params.dbType = 'b';
// 圆形半径
params.radius = '100';
// 限速
params.speedLimit = '60';
// 图形类型（r：圆形；p：多边形）
params.shapesType = 'r';
// destroy：是否撤销
params.destroy = '0';
// versions：版本号
params.versions = '1';
// 路段信息JSON字符串
params.sectionJSON = sectionJSON;
// 保存
ajaxd.manualSave(params,function(rd) {
if(rd.status='SUCCESS') {
layer.msg('保存成功！');
}else {
layer.msg('保存失败！');
}
// 关闭弹出层
layer.closeAll();
// 清除地图覆盖物
map.clearMarkAndOverlays();
// 刷新树
fun.resjtreeDate(addLine.id,directionData);
// 查询上行路段信息
ajaxd.getSectionRouteInfo(addLine.id,directionData,function(data) {
// 在地图上画出线路走向
fun.linePanlThree(data,directionData);
});
});
});
});
});
}
});
});
</script>