map.html
16.5 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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
<link href="/pages/base/line/css/bmap_base.css" rel="stylesheet"
type="text/css" />
<div class="portlet-body">
<!-- 地图 -->
<div id="bmap_basic" class="bmaps"></div>
<!-- 绘画工具栏 -->
<div class="leftUtils hidden">
<div class="btn-group" style="left: 100px;">
<a class="btn btn-sm green-seagreen dropdown-toggle" style="width: 98px;" href="javascript:;" data-toggle="dropdown" aria-expanded="false"> 绘制工具
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right" style="min-width:100px">
<li>
<a href="javascript:;" id="oppenDrawingManager"><i class="fa fa-pencil"></i> 打开 </a>
</li>
<li>
<a href="javascript:;" id = "closeDrawingManager"> <i class="fa fa-reply"></i> 关闭 </a>
</li>
</ul>
</div>
</div>
<!-- 右边显示栏 -->
<div class="cut-section" id="scrllmouseEvent_div">
<div class="portlet-title">
<div class="caption">途径站点</div>
</div>
<div class="portlet-body">
<div class="table-toolbar" style="text-align: center;" id="generationRoute_div">
<button class="btn btn-circle blue" id="generationRoute">
<i class="fa fa-plus"></i> 生成路线
</button>
</div>
<!-- 生成走向跳转的div -->
<div class="portlet-body hidden" id="route_show">
<div>
<ul class="nav nav-pills nav-justified steps">
<li class="active">
<a id="section"><span>路段</span></a>
</li>
<li>
<a class="station" id="station"><span>站点</span></a>
</li>
</ul>
</div>
<div id="section_list_div" class="active" style="margin: 5px;">
<!-- 上传gps生成路段div -->
<div id="gpsSection">
<div class="defeat-scroll"
style="height: 400px; overflow-y: auto; ">
<table class="table table-bordered table-hover table-checkable "
id="section_table" style="color: white;">
<thead>
<tr role="row" class="heading">
<th>截取路段的名称</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="table-toolbar">
<a class="btn btn-circle blue" id="Undo">撤销切点</a>
<a class="btn btn-circle blue" id="cutSection">提交选项</a>
</div>
</div>
<!-- 引用当前版本路段div -->
<!--<div id="citeSection">
<div class="defeat-scroll"
style="height: 400px; overflow-y: auto; ">
</div>
<div class="table-toolbar">
<a class="btn btn-circle blue" id="findSection">查看路段</a>
<a class="btn btn-circle blue" id="addSection">添加路段</a>
<a class="btn btn-circle blue" id="submitOptions">提交选项</a>
</div>
</div>-->
</div>
<div id="station_list_div" class="hidden">
<div class="defeat-scroll"
style="height: 400px; overflow-y: auto; ">
</div>
<div class="table-toolbar">
<a class="btn btn-circle blue" id="addStation">添加站点</a>
<a class="btn btn-circle blue" id="findStation">查看站点</a>
<a class="btn btn-circle blue" id="updateStation">修改站点</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧悬浮框截取路段List -->
<script type="text/html" id="section_list">
{{each list as obj i }}
<tr>
<td style="vertical-align: middle;">
{{obj.name}}
</td>
{{/each}}
{{if list.length < 0}}
<tr>
<td colspan=13><h6 class="muted">沒有相关数据</h6></td>
</tr>
{{/if}}
</script>
<!--上传GPS坐标生成路线监听事件 -->
<script type="text/javascript">
$(function(){
// 关闭左侧栏
if (!$('body').hasClass('page-sidebar-closed')) {$('.menu-toggler.sidebar-toggler').click();}
// 线路id
var id = $.url().param('no');
// 方向 (0:上行;1:下行)默认上行
var direction = 0;
// 站点Map
var stationRouteMap = new Map();
// 路段Map
var sectionRouteMap = new Map();
var upIs = false,downIs = false;
// 查询上行路段信息
$get('/sectionroute/findCacheSection',{'lineId':id, 'dir':0},function(data) {
if(data.length>0){upIs = true;}
});
// 查询下行路段信息
$get('/sectionroute/findCacheSection',{'lineId':id, 'dir':1},function(data) {
if(data.length>0){downIs = true;}
});
// 刷新页面初始化数据
var refreshPage = function (lineId,dir){
// 清除地图覆盖物
WorldsBMapLine.clearMarkAndOverlays();
var params = {};
params.lineId = lineId;
params.dir = dir;
// 查询路段信息
$get('/sectionroute/findCacheSection',params,function(data) {
// 在地图上画出线路走向
PublicFunctions.linePanlThree(lineId,data,dir);
});
$('#route_show').removeClass('hidden');
$('#generationRoute_div').addClass('hidden');
EditRoute.setLineId(id);
EditRoute.setLineDir(dir);
// 刷新路段列表
$('#section').click();
layer.open({title: '友情提示'
,content: '生成路线成功,生成的线路可能会有误差。请先单击路段,拖动编辑、然后双击保存!'});
};
// 如果线路ID不为空
if(id) {
var styleOptions = {
strokeColor : "blue",//边线颜色。
fillColor : "blue",//填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight : 3,//边线的宽度,以像素为单位。
strokeOpacity : 0.8,//边线透明度,取值范围0 - 1。
fillOpacity : 0.6,//填充的透明度,取值范围0 - 1。
strokeStyle : 'solid' //边线的样式,solid或dashed。
};
// 等候500毫秒执行
setTimeout(function(){
/** 初始化线路标题 @param:<id:线路ID> */
PublicFunctions.setTiteText(id);
/** 初始化地图对象map @return:Map对象 */
var map_ = WorldsBMapLine.init();
/** 初始化绘图工具类 @param:<map_:map对象;styleOptions:绘图样式对象> @return:DrawingManager对象 */
DrawingManagerObj.init(map_,styleOptions);
if(upIs || downIs){
var index = layer.confirm('回到上次上传修改的路线?', {
btn: ['上行','下行',"重新生成"], //按钮
time: 0, //不自动关闭
// shade: false //不显示遮罩
btn1 : function(){
if(upIs){
refreshPage(id,0);
layer.close(index);
} else {
layer.msg('没有上行记录,请刷新后选择下行!!!');
}
},btn2 : function(){
if(downIs){
refreshPage(id,1);
layer.close(index);
} else {
layer.msg('没有下行记录,请刷新后选择上行!!!');
}
},btn3 : function(){
//关闭提示框
// layer.close(index);
$("#generationRoute").click();
// layer.msg('请生成路线!!!');
}});
} else
layer.msg('请生成路线!!!');
},500);
}else {
// 缺少ID
layer.confirm('【ID缺失,请点击返回,重新进行操作】', {btn : [ '返回' ],icon: 3, title:'提示' }, function(index){
// 关闭提示弹出层
layer.close(index);
// 返回线路list页面
loadPage('/pages/base/line/list.html');
});
}
// 上传GPS坐标生成路线事件
$('#generationRoute').on('click', function() {
EditRoute.setLineId(id);
// EditRoute.setLineDir(direction);
$.get('editRoute.html', function(m){
$(pjaxContainer).append(m);
$('#edit_route_mobal').trigger('editRouteMobal.show',[TransGPS,EditRoute,WorldsBMapLine,DrawingManagerObj,MapGetAjaxData,PublicFunctions]);
});
// 更新section_table 和缓存中的切点
WorldsBMapLine.initCutSectionPoint();
WorldsBMapLine.setPointIndex(0);
WorldsBMapLine.setFirstPoint(null);// 删除点后清空数据(第一个点坐标)
});
// 提交截取事件
$('#cutSection').on('click', function() {
if(WorldsBMapLine.getSectionList().length != 0) {
var sectionList = WorldsBMapLine.getSectionList();
var data = {};
var section = EditSectionObj.getEitdSection();
var josnSectionList = JSON.stringify(sectionList);
section.cutSectionList = josnSectionList;
// 版本号
$.get('/lineVersions/findCurrentVersion',{'lineId':id},function(versions){
section.versions = versions;
layer.confirm('提交马上会把原有的站点和路段覆盖,您确定要提交吗?', {
btn: ['提交','取消'] //按钮
}, function(index){
layer.close(index);
$.post('/section/sectionCut', section, function(resuntDate){
if(resuntDate.status=='SUCCESS') {
// 弹出添加成功提示消息
layer.msg('提交成功,跳转到线路详情页面!');
window.location.href = "/pages/base/stationroute/list.html?no="+section.sectionrouteLine+","+section.sectionrouteDirections;
}else {
// 弹出添加失败提示消息
layer.msg('提交失败...');
}
});
});
});
// $.get('submit_select.html', function(m){
// $(pjaxContainer).append(m);
// $('#submit_select_mobal').trigger('submitSelectMobal.show',[section,EditRoute]);
// });
} else {
layer.msg("请先截取路段!!!");
}
//});
});
// 删除最后一个路段
$('#Undo').on('click', function() {
if(WorldsBMapLine.getPointIndex() > 1) {
// 点总数-1
var pointIndex = WorldsBMapLine.getPointIndex() - 1;
WorldsBMapLine.setPointIndex(pointIndex);
// 截取的路段list
var sectionList = WorldsBMapLine.getSectionList();
var sectionListLen = sectionList.length;
// 要删除的点
var point = sectionList[sectionListLen-1].section[1];
sectionList.splice(sectionListLen-1,1);
WorldsBMapLine.setSectionList(sectionList);
WorldsBMapLine.deleteCutSectionPoint(point);
WorldsBMapLine.refreshCutSectionTable();
} else if(WorldsBMapLine.getPointIndex() == 1 ) {
var pointIndex = WorldsBMapLine.getPointIndex() - 1;
WorldsBMapLine.setPointIndex(pointIndex);
var firstPoint = WorldsBMapLine.getFirstPoint();
WorldsBMapLine.deleteCutSectionPoint(firstPoint);
WorldsBMapLine.setIsCutSection(false);
WorldsBMapLine.setFirstPoint(null);// 删除点后清空数据
} else {
layer.msg("没有截取路段,不可以撤销!!!");
}
});
// 监听右侧悬浮框导航栏事件
$('#section').on('click',function(){
$('#station').parent().removeClass('active');
$('#section').parent().addClass('active');
$('#station_list_div').removeClass('active');
$('#station_list_div').addClass('hidden');
$('#section_list_div').removeClass('hidden');
$('#section_list_div').addClass('active');
var generationType = EditRoute.getLineGenerationType();
// 更具生成类型展示不同页面
if(generationType == 'cite'){
$('#gpsSection').addClass('hidden');
} else if(generationType == 'uploadGPS') {
$('#citeSection').addClass('hidden');
}
// 清除地图覆盖物
WorldsBMapLine.clearMarkAndOverlays();
var params = {};
var line = EditRoute.getLineObj();
params.lineId=line.id;
params.dir = line.dir;
// 查询路段信息
$get('/sectionroute/findCacheSection',params,function(data) {
/*var section_radio_html = '<div id="section_radio">';
var cont = 1;
var check = 'checked="checked"';
$.each(data,function(){
sectionRouteMap[this.sectionrouteId] = this;
section_radio_html += '<div class="radio"><label class="radio_label section"><input name="sectionRadio" type="radio" class="radioclass" value="'+this.sectionrouteId+'" '+(cont==1?check:"")+' />'+this.sectionName+"</label></div>";
cont++;
});
section_radio_html += '</div>';
$("#section_list_div #citeSection .defeat-scroll").html(section_radio_html);*/
// 在地图上画出线路走向
PublicFunctions.linePanlThree(line.id,data,line.dir);
});
});
// 监听右侧悬浮框导航栏事件
$('#station').on('click',function(){
$('#section').parent().removeClass('active');
$('#station').parent().addClass('active');
$('#station_list_div').removeClass('hidden');
$('#station_list_div').addClass('active');
$('#section_list_div').removeClass('active');
$('#section_list_div').addClass('hidden');
// 清除地图覆盖物
WorldsBMapLine.clearMarkAndOverlays();
var params = {};
var line = EditRoute.getLineObj();
params.lineId=line.id;
params.dir = line.dir;
$.get('/stationroute/findCachePoint',params,function(data){
var station_radio_html = '<div id="station_radio">';
var cont = 1;
var check = 'checked="checked"';
$.each(data,function(){
stationRouteMap[this.stationRouteId] = this;
station_radio_html += '<div class="radio"><label class="radio_label station"><input name="stationRadio" type="radio" class="radioclass" value="'+this.stationRouteId+'" '+(cont==1?check:"")+' />'+this.stationRouteStationName+"</label></div>";
cont++;
});
station_radio_html += '</div>';
$("#station_list_div .defeat-scroll").html(station_radio_html);
});
});
// 查询路段
$('#findSection').on('click', function(){
var id = $(".section input[type='radio']:checked").val();
var sectionRoute = sectionRouteMap[id];
if(id && sectionRoute){
WorldsBMapLine.drawingSection(sectionRoute);
} else if(id && !sectionRoute){
layer.msg('您选择的路段不存在,请重新选择!');
}else{
layer.msg('请先选择要查看的路段!');
}
});
// 添加站点
$('#addStation').on('click', function(){
$.get('addstation_select.html', function(m){
$(pjaxContainer).append(m);
$('#addstation_select_mobal').trigger('AddSelectMobal.show', [WorldsBMapLine, DrawingManagerObj, MapGetAjaxData, EditRoute, PublicFunctions]);
});
});
// 查询站点
$('#findStation').on('click', function(){
var id = $(".station input[type='radio']:checked").val();
var stationRoute = stationRouteMap[id];
if(id && stationRoute){
// 站点形状
var shapesType = stationRoute.stationShapesType;
// 如果是圆
if(shapesType =='r') {
// 百度地图画圆
WorldsBMapLine.pointsCircle(stationRoute);
// 如果是多变行
}else if(shapesType == 'd') {
// 百度地图画多边形
WorldsBMapLine.pointsPolygon(stationRoute);
}
} else if(id && !stationRoute){
layer.msg('您选择的站点不存在,请重新选择!');
}else{
layer.msg('请先选择要查看的站点!');
}
});
// 修改站点
$('#updateStation').on('click', function(){
var id = $(".station input[type='radio']:checked").val();
var stationRoute = stationRouteMap[id];
if(id && stationRoute){
$.get('editstation_select.html', function(m){
$(pjaxContainer).append(m);
$('#editstation_select_mobal').trigger('editStationSelectMobal_show', [WorldsBMapLine, PublicFunctions, DrawingManagerObj, stationRoute]);
});
} else if(id && !stationRoute){
layer.msg('您选择的站点不存在,请重新选择!');
}else{
layer.msg('请先选择要编辑的站点!');
}
});
// 监听打开鼠标绘制工具按钮事件.
$('#oppenDrawingManager').on('click',function() {
DrawingManagerObj.drawingManagerOpen();
});
// 监听关闭鼠标绘制工具按钮事件.
$('#closeDrawingManager').on('click',function() {
DrawingManagerObj.drawingManagerClose();
});
// 滚动轴监听事件
$('#scrllmouseEvent_div').on('mousemove',function() {
$('.defeat-scroll').css('overflow','auto');
}).on('mouseleave',function() {
$('.defeat-scroll').css('overflow','hidden');
});
});
</script>
<!--编辑路线类 -->
<script src="/pages/base/line/js/editRoute.js"></script>
<!--坐标转换类 -->
<script src="/pages/base/line/js/transGPS.js"></script>
<!-- 地图类 -->
<script src="/pages/base/line/js/map.js"></script>
<!-- 函数与方法 -->
<script src="/pages/base/line/js/map-function.js"></script>
<!-- 修改路段对象类 -->
<script src="/pages/base/stationroute/js/editsection.js"></script>
<!-- 绘图类 -->
<script src="/pages/base/line/js/drawingManager.js"></script>
<!-- ajax请求类 -->
<!-- <script src="/pages/base/stationroute/js/stationroute-ajax-getdata.js"></script> -->
<!-- ajax请求类 -->
<script src="/pages/base/line/js/map-ajax-getdata.js"></script>