map.html 6.94 KB
< <link href="/pages/base/stationroute/css/bmap_base.css" rel="stylesheet" type="text/css" /> 
<div class="portlet-body">
	<!-- 地图 -->
	<div  id="bmap_basic" class="bmaps"></div>	
	<!-- 右边添加栏 -->
	<div class="portlet box protlet-box" style="top:20px;border-radius: 6px !important;box-shadow: 10px 10px 5px #888888;float:right;">
		<div class="portlet-title" style="background-color:#12527f;">
			<div class="caption">
				<!-- 途径站点  -->
			</div>
			<div class="tools">
				<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
			</div>
		</div>
		<!-- 左边栏 -->
		<div class="portlet-body" id="scrllmouseEvent"  style="border: 1px solid rgb(255, 255, 255); display: block;min-height: 300px">
			<div class="row">
	            <div class="portlet-body">
	            	<div class="table-toolbar" style="text-align:center;">
						<button class="btn btn-circle blue" id="uploadRoute" ><i class="fa fa-plus"></i> 生成路线 </button>
						<button class="btn btn-circle blue hidden" id="cutSection"><i class="fa fa-level-up"></i> 提交路段</button>
						<button class="btn btn-circle blue hidden" id="Undo"><i class="fa fa-remove"></i> 撤销切点</button>
	            	</div>
	            	<div class="portlet-body" >
	            		<div class="defeat-scroll" style="height: auto;max-height: 400px;overflow-y:auto;">
							<table class="table table-striped table-bordered table-hover table-checkable " id="section_table">
								<thead>
									<tr role="row" class="heading">
										<th >截取路段</th>
									</tr>
								</thead>
								<tbody ></tbody>
							</table>
						</div>
	            	</div>				
				</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() {
		layer.confirm('提交会把原有的站点和路段覆盖,您确定要提交吗?', {
			btn: ['提交','取消'] //按钮
		}, function(){
			if(WorldsBMapLine.getPointIndex() > 0) {
				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("没有截取路段,不可以删除!!!");
		}
	});	
});
</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>