bf

yiming
1 parent 6c18bb5d
Showing 1 changed file with 141 additions and 82 deletions
bsthLineProfiles/src/main/resources/templates/system/line/map.html
@@ -56,22 +56,26 @@ body, html, #container {
 	color: #fff;
 	border-radius: 5px 0 0 5px;
 }
+.lf{
+	padding-left: 25px;
+}
 </style>
 <script
 	src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
 </head>
 <body>
-	<div class="info" style="width: 350px">
+	<div class="info" style="width: 450px">
 		<ul class="nav nav-tabs" role="tablist">
-			<li role="presentation" class="active"><a onclick="show('station','road','line')" role="tab" data-toggle="tab">站点查询</a></li>
-			<li role="presentation"><a onclick="show('road','station','line')" role="tab" data-toggle="tab">道路查询</a></li>
-			<li role="presentation"><a onclick="show('line','road','station')" role="tab" data-toggle="tab">途径线路</a></li>
+			<li role="presentation" class="active"><a onclick="show('station','road','line','area')" role="tab" data-toggle="tab">站点查询</a></li>
+			<li role="presentation"><a onclick="show('road','station','line','area')" role="tab" data-toggle="tab">道路查询</a></li>
+			<li role="presentation"><a onclick="show('line','road','station','area')" role="tab" data-toggle="tab">途径线路</a></li>
+			<li role="presentation"><a onclick="show('area','road','station','line')" role="tab" data-toggle="tab">区域查询</a></li>
 		</ul>
 		<form id="station">
 			<div class="row">
 				<h4></h4>
-				<label class="col-sm-3"><h4 style="text-align:right">站点</h4></label>
+				<label class="col-sm-3"><h4 class="lf">站点</h4></label>
 				<div class="col-sm-9" >
 					<input type="text"  class="form-control" id="stations">
 					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
@@ -80,7 +84,7 @@ body, html, #container {
 			</div>
 			<div class="row">
 				<h4></h4>
-				<label class="col-sm-3"><h4 style="text-align:right">范围</h4></label>
+				<label class="col-sm-3"><h4 class="lf">范围</h4></label>
 				<div class="col-sm-9">
 					<input id="distance" class="form-control" type="text" placeholder="单位米">
 				</div>
@@ -100,16 +104,16 @@ body, html, #container {
 		<form id="road" style="display: none">
 			<div class="row">
 				<h4></h4>
-				<label class="col-sm-3"><h4 style="text-align:right">路名</h4></label>
+				<label class="col-sm-3"><h4 class="lf">路名</h4></label>
 				<div class="col-sm-9">
-					<input id="searchRoad" class="form-control" type="text">
+					<input id="roadName" class="form-control" type="text">
 				</div>
 				<h4></h4>
 			</div>
 			<div class="row">
 				<h4></h4>
 				<div class="col-sm-4">
-					<button type="button" class="el-button el-button--primary el-button--mini" onclick="addLine();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
+					<button type="button" class="el-button el-button--primary el-button--mini" onclick="searchRoad();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
 				</div>
 				<div class="col-sm-4">
 					<button type="button" class="el-button el-button--default el-button--mini" onclick="reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
@@ -117,12 +121,15 @@ body, html, #container {
 			</div>
 		</form>
 		<form id="line"  style="display: none">
+
 			<div class="row">
 				<h4></h4>
-				<div id="bus" style="padding-left: 5px;">
+				<div class="row pre-scrollable">
+				<div id="bus" style="padding-left: 25px;width: 440px">
+				</div>
 				</div>
 				<h4></h4>
-				<div  style="padding-left: 5px;">
+				<div  class="lf">
 					<i class="fa fa-minus " style="color:#5298ff" id="c1"></i>
 					<i class="fa fa-minus " style="color:#E0312A" id="c2"></i>
 					<i class="fa fa-minus " style="color:#30e868" id="c3"></i>
@@ -131,7 +138,27 @@ body, html, #container {
 				</div>
 				<h4></h4>
 				<div class="col-sm-4">
-					<button type="button" class="el-button el-button--default el-button--mini" onclick="location.reload();"><!----><i class="el-icon-refresh"></i><span>清除线路</span></button>
+					<button type="button" class="el-button el-button--default el-button--mini" onclick="clearline();"><!----><i class="el-icon-refresh"></i><span>清除线路</span></button>
+				</div>
+
+			</div>
+		</form>
+		<form id="area" style="display: none">
+			<div class="row">
+				<h4></h4>
+				<label class="col-sm-3"><h4 class="lf">范围</h4></label>
+				<div class="col-sm-9">
+					<input id="distance2" class="form-control" type="text" placeholder="单位米">
+				</div>
+				<h4></h4>
+			</div>
+			<div class="row">
+				<h4></h4>
+				<div class="col-sm-4" >
+					<button type="button" class="el-button el-button--primary el-button--mini" onclick="searchArea()"><!----><i class="el-icon-search"></i><span>搜索</span></button>
+				</div>
+				<div class="col-sm-4">
+					<button type="button" class="el-button el-button--default el-button--mini" onclick="$.form.reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
 				</div>
 			</div>
 		</form>
@@ -147,20 +174,30 @@ body, html, #container {
 	<th:block th:include="include :: bootstrap-suggest-js" />
 	<th:block th:include="include :: select2-js" />
 	<script>
+		//tab栏控制
+		function show(id1,id2,id3,id4){
+			$('#'+id1).attr("style","display:show;");
+			$('#'+id2).attr("style","display:none;");
+			$('#'+id3).attr("style","display:none;");
+			$('#'+id4).attr("style","display:none;");
+		}
+
+		//地图的初始化
 		var map = new BMapGL.Map('container'); // 创建Map实例
 		map.centerAndZoom(new BMapGL.Point(121.528733, 31.237425), 12); // 初始化地图,设置中心点坐标和地图级别
 		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
-		map.addEventListener('click', function(e) {
+		/*map.addEventListener('click', function(e) {
 			if (e.overlay) {
 				return; // 存在覆盖物退出
 			}
 		});
-
 		var stations
+		*/
+		//地点查询
 		function searchStation(){
 			var station=$('#stations').val();
 			var distance=$("#distance").val()
@@ -170,23 +207,36 @@ body, html, #container {
 			// 将地址解析结果显示在地图上，并调整地图视野
 			myGeo.getPoint(station, function(point){
 				map.clearOverlays();
-				map.centerAndZoom(point, 18);
+				map.centerAndZoom(point, 17);
 				a(point.lng,point.lat,distance)
 			}, '上海市')
 		}
+
+		//道路查询
 		function searchRoad(){
 			var roadName=$('#roadName').val();
-			var distance=1000000000;
+			var distance=20000;
 			//创建地址解析器实例
 			var myGeo = new BMapGL.Geocoder();
 			// 将地址解析结果显示在地图上，并调整地图视野
 			myGeo.getPoint(roadName, function(point){
 				map.clearOverlays();
-				map.centerAndZoom(point, 18);
+				map.centerAndZoom(point, 17);
 				b(point.lng,point.lat,distance,roadName)
 			}, '上海市')
 		}
+		//区域查询
+		function searchArea(){
+			var distance=$("#distance2").val();
+			map.clearOverlays();
+			var lng=p.latLng.lng;
+			var lat=p.latLng.lat;
+			map.centerAndZoom(new BMapGL.Point(lng,lat), 17);
+			a(lng,lat,distance);
+		}
+
+		//站点标注
 		function a(lng,lat,distance){
 			$.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
 					+lng + "&lat=" + lat + "&dis="
@@ -238,7 +288,6 @@ body, html, #container {
 					}
 					document.getElementById('bus').innerHTML=str;
-
 					// 绘制圆
 					var circle = new BMapGL.Circle(new BMapGL.Point(lng,lat), distance/2, {
 						strokeColor: 'blue',
@@ -250,11 +299,13 @@ body, html, #container {
 			});
 		}
+		//站点标注用来查道路的 多了个站点筛选和 去除 圆形范围
 		function b(lng,lat,distance,roadName){
 			$.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
 					+lng + "&lat=" + lat + "&dis="
 					+ distance / 1000, function(data) {
 				if (data.code == "200") {
+					var bus=new Array();
 					for ( var i in data.data) {
 						(function(){
 							var station = data.data[i];
@@ -268,55 +319,50 @@ body, html, #container {
 								title: station.stationName
 							};
-							var  lineList=data.data[i].lineList;
-							var arr=lineList.split("、")
-							var str='';
-							for ( var j in arr) {
-								str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
-							}
-							var info = "";
-							info += "<span>站点名称：" +  data.data[i].stationName
-									+ "</span><br/>";
-							info += "<span>行业编码：" +  data.data[i].standardStationCode
-									+ "</span><br/>";
-							info += "<span>站点编码：" +  data.data[i].stationCode
-									+ "</span><br/>";
-							info += "<span>经过线路：" +  str
-									+ "</span><br/>";
-							info += "<span>道路名称：" +  data.data[i].roadName
-									+ "</span><br/>";
-
-							var infoWindow = new BMapGL.InfoWindow(info, opts);
-
-
-							marker.addEventListener('click', function() {
-								map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
-							});
 							if(data.data[i].roadName==roadName){
+								var  lineList=data.data[i].lineList;
+								var arr=lineList.split("、");
+								Array.prototype.push.apply(bus, arr);
+								var str='';
+								for ( var j in arr) {
+									str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
+								}
+								var info = "";
+								info += "<span>站点名称：" +  data.data[i].stationName
+										+ "</span><br/>";
+								info += "<span>行业编码：" +  data.data[i].standardStationCode
+										+ "</span><br/>";
+								info += "<span>站点编码：" +  data.data[i].stationCode
+										+ "</span><br/>";
+								info += "<span>经过线路：" +  str
+										+ "</span><br/>";
+								info += "<span>道路名称：" +  data.data[i].roadName
+										+ "</span><br/>";
+
+								var infoWindow = new BMapGL.InfoWindow(info, opts);
+
+
+								marker.addEventListener('click', function() {
+									map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
+								});
 								map.addOverlay(marker);
 							}
 						})();
 					}
-				}
-			});
-		}
-
-		function searchBus(busName){
-			var busline = new BMapGL.BusLineSearch(map,{
-				renderOptions:{map:map,panel:"r-result"},
-				onGetBusListComplete: function(result){
-					if(result) {
-						var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
-						busline.getBusLine(fstLine);
+					bus=Array.from(new Set(bus));
+					var str='';
+					for ( var j in bus) {
+						str+="<a onClick='searchBus(\""+bus[j]+"\")'>"+bus[j]+"</a>、";
 					}
+					document.getElementById('bus').innerHTML=str;
 				}
 			});
-			busline.getBusList(busName);
 		}
-		// 百度地图API功能
+
+		//百度下拉列表
 		function G(id) {
 			return document.getElementById(id);
 		}
@@ -350,7 +396,6 @@ body, html, #container {
 			setPlace();
 		});
-
 		function setPlace(){
 			map.clearOverlays();    //清除地图上所有覆盖物
 			function myFun(){
@@ -361,30 +406,41 @@ body, html, #container {
 			var local = new BMapGL.LocalSearch(map, { //智能搜索
 				onSearchComplete: myFun
 			});
-			/*local.search(myValue);*/
-		}
-
-		function show(id1,id2,id3){
-			$('#'+id1).attr("style","display:show;");
-			$('#'+id2).attr("style","display:none;");
-			$('#'+id3).attr("style","display:none;");
 		}
+		//多线路查询
 		var ll=new Array();//存放折线
 		var sl=new Array();//存放站点
+		var readyAdd=new Array();//存放线路
+
+		function searchBus(line){
+			if (readyAdd.length>=5) {
+				alert("最多5条线路");
+				return false
+			}
+			if ($.inArray(line, readyAdd) == -1) {
+				bus.getBusList(line);
+				readyAdd.push(line); //readyAdd为空数组，用于存储已添加的线路名
+				document.getElementById('c'+readyAdd.length).innerHTML=line;
+			} else {
+				alert("该路线已添加");
+			}
+		}
+
 		var colors=['#5298ff','#E0312A','#30e868','#A80FE4','#0010eb']
 		var bus = new BMapGL.BusLineSearch(map, {
 			renderOptions:{map:map,panel:"r-result"},
 			onGetBusListComplete: function onGetBusListComplete (result) {
-				let fstLine = result.getBusListItem(0);
+				let fstLine = result.getBusListItem(0);//通过线路名查询线路列表默认第一条
 				bus.getBusLine(fstLine);
 			},onPolylinesSet: function onPolylinesSet(polyline){//添加公交线时候回调函数.参数：ply:Polyline 公交线路几何对象
 				//通过删除api自带的折线 然后改变颜色重新渲染
 				map.clearOverlays();
-				polyline.setStrokeColor(colors[ll.length]);
-				polyline.setStrokeWeight(4);
-				polyline.setStrokeOpacity(0.9);
+				//https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0
+				polyline.setStrokeColor(colors[ll.length]);//颜色
+				polyline.setStrokeWeight(4);//宽度
+				polyline.setStrokeOpacity(0.9);//透明度
 				ll.push(polyline);
 				for(let i in ll){
 					var polyline2=ll[i];
@@ -398,24 +454,27 @@ body, html, #container {
 			}
 		});
-		var readyAdd=new Array();
-		function searchBus(line){
-			this.color='E0312A';
-			if (readyAdd.length>=5) {
-				alert("最多5条线路");
-				return false
-			}
-			if ($.inArray(line, readyAdd) == -1) {
-				bus.getBusList(line);
-				readyAdd.push(line); //readyAdd为空数组，用于存储已添加的线路名
-				document.getElementById('c'+readyAdd.length).innerHTML=line;
-			} else {
-				alert("该路线已添加");
+
+		//右键标记坐标
+		var p;
+		map.addEventListener('rightclick', function(e){
+			var pt = e.latlng;
+			var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
+			map.removeOverlay(p);
+			p=marker;
+			map.addOverlay(p);
+		})
+
+		function clearline(){
+			ll=new Array();//存放折线
+			sl=new Array();//存放站点
+			readyAdd=new Array();//存放线路
+			map.clearOverlays();
+			for(var i=1;i<=5;i++){
+				document.getElementById('c'+i).innerHTML='';
 			}
 		}
-
-
 	</script>