bf

yiming
1 parent 829f99f1
Showing 2 changed files with 167 additions and 141 deletions
bsthLineProfiles/src/main/resources/static/img/station_icon.png
bsthLineProfiles/src/main/resources/templates/system/line/map.html
@@ -34,15 +34,38 @@ body, html, #container {
 	top: 100px;
 	display: none;
 }
+
+.tangram-suggestion-main {
+	z-index: 999999;
+}
+.subContainer {
+	position: relative;
+	padding-bottom: 10px;
+}
+.opt {
+	position: relative;
+	padding-top: 10px;
+}
+.optTitle {
+	width: 60px;
+	height: 28px;
+	line-height: 28px;
+	font-size: 14px;
+	text-align: center;
+	background: #c5464a;
+	color: #fff;
+	border-radius: 5px 0 0 5px;
+}
 </style>
 <script
 	src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
 </head>
 <body>
-	<div class="info">
+	<div class="info" style="width: 350px">
 		<ul class="nav nav-tabs" role="tablist">
-			<li role="presentation" class="active"><a onclick="show('road','station')" role="tab" data-toggle="tab">站点查询</a></li>
-			<li role="presentation"><a onclick="show('station','road')" role="tab" data-toggle="tab">道路查询</a></li>
+			<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>
 		</ul>
 		<form id="station">
@@ -50,9 +73,8 @@ body, html, #container {
 				<h4></h4>
 				<label class="col-sm-3"><h4 style="text-align:right">站点</h4></label>
 				<div class="col-sm-9" >
-					<select id='stations' >
-						<option value=""></option>
-					</select>
+					<input type="text"  class="form-control" id="stations">
+					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
 				</div>
 				<h4></h4>
 			</div>
@@ -75,42 +97,47 @@ body, html, #container {
 			</div>
 		</form>
-		<form id="road" style="display:none;">
+		<form id="road" style="display: none">
 			<div class="row">
 				<h4></h4>
 				<label class="col-sm-3"><h4 style="text-align:right">路名</h4></label>
 				<div class="col-sm-9">
-					<input id="roadName" class="form-control" type="text">
+					<input id="searchRoad" 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="searchRoad();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
+					<button type="button" class="el-button el-button--primary el-button--mini" onclick="addLine();"><!----><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>
 				</div>
 			</div>
 		</form>
+		<form id="line"  style="display: none">
+			<div class="row">
+				<h4></h4>
+				<div id="bus" style="padding-left: 5px;">
+				</div>
+				<h4></h4>
+				<div  style="padding-left: 5px;">
+					<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>
+					<i class="fa fa-minus " style="color:#A80FE4" id="c4"></i>
+					<i class="fa fa-minus " style="color:#0010eb" id="c5"></i>
+				</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>
+				</div>
+			</div>
+		</form>
 	</div>
-	<!-- <div class="info col-lg-6">
-		<div class="input-group">
-			<input type="text" class="form-control" id="text">
-			<div class="input-group-btn">
-				<button type="button" class="btn btn-white dropdown-toggle"
-					data-toggle="dropdown">
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu dropdown-menu-right" role="menu">
-				</ul>
-			</div>
-		</div>
-	</div> -->
-
 	<div class="info stationInfo">
 		<div id="stationInfo"></div>
 	</div>
@@ -124,41 +151,20 @@ body, html, #container {
 		map.centerAndZoom(new BMapGL.Point(121.528733, 31.237425), 12); // 初始化地图,设置中心点坐标和地图级别
 		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
+
+
 		map.addEventListener('click', function(e) {
 			if (e.overlay) {
 				return; // 存在覆盖物退出
 			}
-
-
 		});
 		var stations
-		$.ajax({
-			// get请求地址
-			url: "../line/getStations",
-			dataType: "json",
-			type:'POST',
-			success: function (data) {
-				stations=data.stations;
-				var arr = new Array();
-				for (var i = 0; i < stations.length; i++) {
-					var station=new Object();
-					station.id=stations[i];
-					station.text=stations[i];
-					station.value=stations[i];
-					arr.push(station);
-				}
-				$("#stations").select2({
-					data: arr,
-					placeholder:'请选择',
-					allowClear:true
-				})
-			}
-		});
 		function searchStation(){
-			var station=$('#stations').select2('val');
+			var station=$('#stations').val();
 			var distance=$("#distance").val()
+
 			//创建地址解析器实例
 			var myGeo = new BMapGL.Geocoder();
 			// 将地址解析结果显示在地图上，并调整地图视野
@@ -166,19 +172,7 @@ body, html, #container {
 				map.clearOverlays();
 				map.centerAndZoom(point, 18);
 				a(point.lng,point.lat,distance)
-				/*if(point){
-					map.centerAndZoom(point, 16);
-					map.addOverlay(new BMapGL.Marker(point, {title: station}))
-				}else{
-					alert('您选择的地址没有解析到结果！');
-				}*/
 			}, '上海市')
-		/*	var station=$('#stations').select2('val');
-			console.log(station);
-			var local = new BMapGL.LocalSearch(map, {
-				renderOptions:{map: map}
-			});
-			local.search(station);*/
 		}
 		function searchRoad(){
 			var roadName=$('#roadName').val();
@@ -190,26 +184,19 @@ body, html, #container {
 				map.clearOverlays();
 				map.centerAndZoom(point, 18);
 				b(point.lng,point.lat,distance,roadName)
-				/*if(point){
-					map.centerAndZoom(point, 16);
-					map.addOverlay(new BMapGL.Marker(point, {title: station}))
-				}else{
-					alert('您选择的地址没有解析到结果！');
-				}*/
 			}, '上海市')
 		}
+
 		function a(lng,lat,distance){
 			$.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];
 							var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});
-						/*	var label = new BMapGL.Label(station.stationName);
-
-							marker.setLabel(label);*/
 							marker.station = data.data[i];
@@ -220,6 +207,7 @@ body, html, #container {
 							};
 							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>、";
@@ -237,14 +225,27 @@ body, html, #container {
 									+ "</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);
 						})();
 					}
+					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;
+
+
+					// 绘制圆
+					var circle = new BMapGL.Circle(new BMapGL.Point(lng,lat), distance/2, {
+						strokeColor: 'blue',
+						strokeWeight: 2,
+						strokeOpacity: 0.5
+					});
+					map.addOverlay(circle);
 				}
 			});
 		}
@@ -258,9 +259,6 @@ body, html, #container {
 						(function(){
 							var station = data.data[i];
 							var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});
-							/*	var label = new BMapGL.Label(station.stationName);
-
-                                marker.setLabel(label);*/
 							marker.station = data.data[i];
@@ -306,7 +304,6 @@ body, html, #container {
 		}
 		function searchBus(busName){
-			console.log(busName)
 			var busline = new BMapGL.BusLineSearch(map,{
 				renderOptions:{map:map,panel:"r-result"},
 				onGetBusListComplete: function(result){
@@ -318,78 +315,107 @@ body, html, #container {
 			});
 			busline.getBusList(busName);
 		}
-		/* 		$("#text").bsSuggest({
-				url : "/system/line/getListForMap",
-				effectiveFields : [ "lineName" ],
-				searchFields : [ "lineName", "halfwayStation" ],
-				effectiveFieldsAlias : {
-					lineName : "线路名"
-				},
-				clearable : true,
-				idField : "id",
-				keyField : "lineName",
-				processData : function(json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
-					var data = {
-						'value' : []
-					};
-
-					for ( var i in json) {
-						data.value.push(json[i]);
-					}
-					//字符串转化为 js 对象
-					return data;
-				}
-			}).on('onDataRequestSuccess', function(e, result) {
-				console.log('onDataRequestSuccess: ', result);
-			}).on('onSetSelectValue', function(e, selectedData, selectedRawData) {
-
-			            busline.getBusList(e.target.value);
-						
-					}).on('onUnsetSelectValue', function() {
-				console.log('onUnsetSelectValue');
-			}).on('onShowDropdown', function(e, data) {
-				console.log('onShowDropdown', e.target.value, data);
-			}).on('onHideDropdown', function(e, data) {
-				console.log('onHideDropdown', e.target.value, data);
+		// 百度地图API功能
+		function G(id) {
+			return document.getElementById(id);
+		}
+		var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
+				{"input" : "stations"
+					,"location" : map
+				});
+		ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
+			var str = "";
+			var _value = e.fromitem.value;
+			var value = "";
+			if (e.fromitem.index > -1) {
+				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+			}
+			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
+
+			value = "";
+			if (e.toitem.index > -1) {
+				_value = e.toitem.value;
+				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+			}
+			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
+			G("stations").innerHTML = str;
+		});
+
+		var myValue;
+		ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
+			var _value = e.item.value;
+			myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
+			G("stations").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
+
+			setPlace();
+		});
+
+		function setPlace(){
+			map.clearOverlays();    //清除地图上所有覆盖物
+			function myFun(){
+				var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
+				map.centerAndZoom(pp, 18);
+				map.addOverlay(new BMapGL.Marker(pp));    //添加标注
+			}
+			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 busline = new BMapGL.BusLineSearch(map, {
-				renderOptions : {
-					map : map,
-					panel : "r-result"
-				},
-				onGetBusListComplete : function(result) {
-					if (result) {
-						
-						for(var i in result._listItems){
-							if(result._listItems[i].name.indexOf($("#text").val()) > -1){
-								var fstLine = result.getBusListItem(i);//获取第一个公交列表显示到map上
-								busline.getBusLine(fstLine);
-								return;
-							}
-						}
-						
-					}else{
-						return;
-					}
-				},
-				onMarkersSet:function(array){
-					
-					for(var i in array){
-						
-						 const overlay = array[i];
-						 	
-						
-					}
-					
+
+		var ll=new Array();//存放折线
+		var sl=new Array();//存放站点
+		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);
+				bus.getBusLine(fstLine);
+			},onPolylinesSet: function onPolylinesSet(polyline){//添加公交线时候回调函数.参数：ply:Polyline 公交线路几何对象
+				//通过删除api自带的折线 然后改变颜色重新渲染
+				map.clearOverlays();
+				polyline.setStrokeColor(colors[ll.length]);
+				polyline.setStrokeWeight(4);
+				polyline.setStrokeOpacity(0.9);
+				ll.push(polyline);
+				for(let i in ll){
+					var polyline2=ll[i];
+					map.addOverlay(polyline2); //添加折线覆盖物
 				}
-			}); */
-		function show(id1,id2){
-			$('#'+id1).attr("style","display:none;");
-			$('#'+id2).attr("style","display:show;");
+			},onMarkersSet : function onMarkersSet(array){//添加公交站点时候回调函数.参数：sts:Array 公交站坐标组成的Marker对象数组
+				Array.prototype.push.apply(sl, array);
+				for(var i in sl){
+					map.addOverlay(sl[i]);
+				}
+			}
+		});
+
+		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("该路线已添加");
+			}
+
 		}
+
+
 	</script>