map.html 7.1 KB
<
<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>