map.html
9.82 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
<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="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="upload">
<button class="btn btn-circle blue" id="uploadRoute">
<i class="fa fa-plus"></i> 生成路线
</button>
</div>
<div class="portlet-body hidden" id="upload_show">
<div>
<ul class="nav nav-pills nav-justified steps">
<li class="active">
<a id="section"><span>路段</span></a>
</li>
<li>
<a id="station"><span>站点</span></a>
</li>
</ul>
</div>
<div id="section_list_div" class="active" style="margin: 5px;">
<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 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="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();
// 如果线路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);
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坐标生成路线事件
$('#uploadRoute').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,GetAjaxData,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('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("没有截取路段,不可以撤销!!!");
}
});
// 监听右侧悬浮框导航栏事件
$('#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 on"><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);
});
});
$('#findStation').on('click', function(){
var id = $("input[type='radio']:checked").val();
var stationRoute = stationRouteMap[id];
// 站点形状
var shapesType = stationRoute.stationShapesType;
// 如果是圆
if(shapesType =='r') {
// 百度地图画圆
WorldsBMapLine.pointsCircle(stationRoute);
// 如果是多变行
}else if(shapesType == 'd') {
// 百度地图画多边形
WorldsBMapLine.pointsPolygon(stationRoute);
}
});
$('#updateStation').on('click', function(){
var id = $("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, DrawingManagerObj, stationRoute]);
});
} else if(id && !stationRoute){
layer.msg('您选择的站点不存在,请重新选择!');
}else{
layer.msg('请先选择要编辑的站点!');
}
});
$('#section').on('click',function(){
$('#station').parent().removeClass('active');
$('#section').parent().addClass('active');
$('#section_list_div').removeClass('hidden');
$('#section_list_div').addClass('active');
$('#station_list_div').removeClass('active');
$('#station_list_div').addClass('hidden');
// 清除地图覆盖物
WorldsBMapLine.clearMarkAndOverlays();
var line = EditRoute.getLineObj();
lineid=line.id;
directions = line.dir;
// 查询路段信息
$get('/sectionroute/findSectionCache',{'line.id_eq' : lineid , 'directions_eq' : directions},function(data) {
// 在地图上画出线路走向
PublicFunctions.linePanlThree(lineid,data,directions);
});
});
// 滚动轴监听事件
$('#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/line-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>