map.html 9.82 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>
					<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>