map.html
7.1 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
<
<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 class="defeat-scroll"
style="height: auto; max-height: 600px; overflow-y: auto; border-left: 10px;">
<table class="table table-bordered table-hover table-checkable "
id="section_table" style="color: #B7B7B7;">
<thead>
<tr role="row" class="heading">
<th>截取路段</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="table-toolbar" style="text-align: center;">
<button class="btn btn-circle blue" id="cutSection">提交选项</button>
<button class="btn btn-circle blue" id="Undo">撤销切点</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="section_list">
{{each list as obj i }}
<tr>
<td style="vertical-align: middle;">
{{obj.name}}:[{{obj.section[0].lng}},{{obj.section[0].lat}}],[{{obj.section[1].lng}},{{obj.section[1].lat}}]
</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;
// 如果线路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);
});
// 提交截取事件
$('#cutSection').on('click', function() {
if(WorldsBMapLine.getPointIndex() > 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]);
});
/* layer.confirm('提交会把原有的站点和路段覆盖,您确定要提交吗?', {
btn: ['提交','取消'] //按钮
}, function(){
var sectionList = WorldsBMapLine.getSectionList();
var data = {};
var section = EditSectionObj.getEitdSection();
var josnSectionList = JSON.stringify(sectionList);
section.cutSectionList = josnSectionList;
$.post('/section/sectionCut', section, function(resuntDate){
if(resuntDate.status=='SUCCESS') {
// 弹出添加成功提示消息
layer.msg('提交成功,跳转到线路详情页面!');
window.location.href = "/pages/base/stationroute/list.html?no="+id+","+EditRoute.getLineObj().dir;
WorldsBMapLine.initCutSectionPoint();
WorldsBMapLine.setPointIndex(0);
}else {
// 弹出添加失败提示消息
layer.msg('提交失败...');
}
});
}); */
} 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 ) {
// 点总数-1
var pointIndex = WorldsBMapLine.getPointIndex() - 1;
WorldsBMapLine.setPointIndex(pointIndex);
var firstPoint = WorldsBMapLine.getFirstPoint();
WorldsBMapLine.deleteCutSectionPoint(firstPoint);
WorldsBMapLine.setIsCutSection(false);
} else {
layer.msg("没有截取路段,不可以撤销!!!");
}
});
// 滚动轴监听事件
$('#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/line-list-map.js"></script>
<!-- 函数与方法 -->
<script src="/pages/base/line/js/line-list-function.js"></script>
<!-- 修改路段对象类 -->
<script src="/pages/base/stationroute/js/editsection.js"></script>
<!-- 绘图类 -->
<script src="/pages/base/stationroute/js/drawingManager.js"></script>
<!-- ajax请求类 -->
<script src="/pages/base/stationroute/js/stationroute-ajax-getdata.js"></script>