youxiw2000 / bsthLineProfiles · Commits

Commit 6c18bb5df90068d665862ee055a7c966d4de5a30

Authored by yiming
1 parent 829f99f1
build: skipped

bf

Inline Side-by-side
Showing 2 changed files with 167 additions and 141 deletions
bsthLineProfiles/src/main/resources/static/img/station_icon.png 0 → 100644
View file @6c18bb5

296 Bytes
bsthLineProfiles/src/main/resources/templates/system/line/map.html
  View file @6c18bb5
... ... @@ -34,15 +34,38 @@ body, html, #container {
34 34 top: 100px;
35 35 display: none;
36 36 }
  37 +
  38 +.tangram-suggestion-main {
  39 + z-index: 999999;
  40 +}
  41 +.subContainer {
  42 + position: relative;
  43 + padding-bottom: 10px;
  44 +}
  45 +.opt {
  46 + position: relative;
  47 + padding-top: 10px;
  48 +}
  49 +.optTitle {
  50 + width: 60px;
  51 + height: 28px;
  52 + line-height: 28px;
  53 + font-size: 14px;
  54 + text-align: center;
  55 + background: #c5464a;
  56 + color: #fff;
  57 + border-radius: 5px 0 0 5px;
  58 +}
37 59 </style>
38 60 <script
39 61 src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
40 62 </head>
41 63 <body>
42   - <div class="info">
  64 + <div class="info" style="width: 350px">
43 65 <ul class="nav nav-tabs" role="tablist">
44   - <li role="presentation" class="active"><a onclick="show('road','station')" role="tab" data-toggle="tab">站点查询</a></li>
45   - <li role="presentation"><a onclick="show('station','road')" role="tab" data-toggle="tab">道路查询</a></li>
  66 + <li role="presentation" class="active"><a onclick="show('station','road','line')" role="tab" data-toggle="tab">站点查询</a></li>
  67 + <li role="presentation"><a onclick="show('road','station','line')" role="tab" data-toggle="tab">道路查询</a></li>
  68 + <li role="presentation"><a onclick="show('line','road','station')" role="tab" data-toggle="tab">途径线路</a></li>
46 69 </ul>
47 70  
48 71 <form id="station">
... ... @@ -50,9 +73,8 @@ body, html, #container {
50 73 <h4></h4>
51 74 <label class="col-sm-3"><h4 style="text-align:right">站点</h4></label>
52 75 <div class="col-sm-9" >
53   - <select id='stations' >
54   - <option value=""></option>
55   - </select>
  76 + <input type="text" class="form-control" id="stations">
  77 + <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
56 78 </div>
57 79 <h4></h4>
58 80 </div>
... ... @@ -75,42 +97,47 @@ body, html, #container {
75 97 </div>
76 98 </form>
77 99  
78   - <form id="road" style="display:none;">
  100 + <form id="road" style="display: none">
79 101 <div class="row">
80 102 <h4></h4>
81 103 <label class="col-sm-3"><h4 style="text-align:right">路名</h4></label>
82 104 <div class="col-sm-9">
83   - <input id="roadName" class="form-control" type="text">
  105 + <input id="searchRoad" class="form-control" type="text">
84 106 </div>
85 107 <h4></h4>
86 108 </div>
87 109 <div class="row">
88 110 <h4></h4>
89 111 <div class="col-sm-4">
90   - <button type="button" class="el-button el-button--primary el-button--mini" onclick="searchRoad();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
  112 + <button type="button" class="el-button el-button--primary el-button--mini" onclick="addLine();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
91 113 </div>
92 114 <div class="col-sm-4">
93 115 <button type="button" class="el-button el-button--default el-button--mini" onclick="reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
94 116 </div>
95 117 </div>
96 118 </form>
  119 + <form id="line" style="display: none">
  120 + <div class="row">
  121 + <h4></h4>
  122 + <div id="bus" style="padding-left: 5px;">
  123 + </div>
  124 + <h4></h4>
  125 + <div style="padding-left: 5px;">
  126 + <i class="fa fa-minus " style="color:#5298ff" id="c1"></i>
  127 + <i class="fa fa-minus " style="color:#E0312A" id="c2"></i>
  128 + <i class="fa fa-minus " style="color:#30e868" id="c3"></i>
  129 + <i class="fa fa-minus " style="color:#A80FE4" id="c4"></i>
  130 + <i class="fa fa-minus " style="color:#0010eb" id="c5"></i>
  131 + </div>
  132 + <h4></h4>
  133 + <div class="col-sm-4">
  134 + <button type="button" class="el-button el-button--default el-button--mini" onclick="location.reload();"><!----><i class="el-icon-refresh"></i><span>清除线路</span></button>
  135 + </div>
  136 + </div>
  137 + </form>
97 138 </div>
98 139  
99 140  
100   - <!-- <div class="info col-lg-6">
101   - <div class="input-group">
102   - <input type="text" class="form-control" id="text">
103   - <div class="input-group-btn">
104   - <button type="button" class="btn btn-white dropdown-toggle"
105   - data-toggle="dropdown">
106   - <span class="caret"></span>
107   - </button>
108   - <ul class="dropdown-menu dropdown-menu-right" role="menu">
109   - </ul>
110   - </div>
111   - </div>
112   - </div> -->
113   -
114 141 <div class="info stationInfo">
115 142 <div id="stationInfo"></div>
116 143 </div>
... ... @@ -124,41 +151,20 @@ body, html, #container {
124 151 map.centerAndZoom(new BMapGL.Point(121.528733, 31.237425), 12); // 初始化地图,设置中心点坐标和地图级别
125 152 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
126 153  
  154 +
  155 +
127 156 map.addEventListener('click', function(e) {
128 157 if (e.overlay) {
129 158 return; // 存在覆盖物退出
130 159 }
131   -
132   -
133 160 });
134 161  
135 162 var stations
136   - $.ajax({
137   - // get请求地址
138   - url: "../line/getStations",
139   - dataType: "json",
140   - type:'POST',
141   - success: function (data) {
142   - stations=data.stations;
143   - var arr = new Array();
144   - for (var i = 0; i < stations.length; i++) {
145   - var station=new Object();
146   - station.id=stations[i];
147   - station.text=stations[i];
148   - station.value=stations[i];
149   - arr.push(station);
150   - }
151   - $("#stations").select2({
152   - data: arr,
153   - placeholder:'请选择',
154   - allowClear:true
155   - })
156 163  
157   - }
158   - });
159 164 function searchStation(){
160   - var station=$('#stations').select2('val');
  165 + var station=$('#stations').val();
161 166 var distance=$("#distance").val()
  167 +
162 168 //创建地址解析器实例
163 169 var myGeo = new BMapGL.Geocoder();
164 170 // 将地址解析结果显示在地图上，并调整地图视野
... ... @@ -166,19 +172,7 @@ body, html, #container {
166 172 map.clearOverlays();
167 173 map.centerAndZoom(point, 18);
168 174 a(point.lng,point.lat,distance)
169   - /*if(point){
170   - map.centerAndZoom(point, 16);
171   - map.addOverlay(new BMapGL.Marker(point, {title: station}))
172   - }else{
173   - alert('您选择的地址没有解析到结果！');
174   - }*/
175 175 }, '上海市')
176   - /* var station=$('#stations').select2('val');
177   - console.log(station);
178   - var local = new BMapGL.LocalSearch(map, {
179   - renderOptions:{map: map}
180   - });
181   - local.search(station);*/
182 176 }
183 177 function searchRoad(){
184 178 var roadName=$('#roadName').val();
... ... @@ -190,26 +184,19 @@ body, html, #container {
190 184 map.clearOverlays();
191 185 map.centerAndZoom(point, 18);
192 186 b(point.lng,point.lat,distance,roadName)
193   - /*if(point){
194   - map.centerAndZoom(point, 16);
195   - map.addOverlay(new BMapGL.Marker(point, {title: station}))
196   - }else{
197   - alert('您选择的地址没有解析到结果！');
198   - }*/
199 187 }, '上海市')
200 188 }
  189 +
201 190 function a(lng,lat,distance){
202 191 $.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
203 192 +lng + "&lat=" + lat + "&dis="
204 193 + distance / 1000, function(data) {
205 194 if (data.code == "200") {
  195 + var bus=new Array();
206 196 for ( var i in data.data) {
207 197 (function(){
208 198 var station = data.data[i];
209 199 var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});
210   - /* var label = new BMapGL.Label(station.stationName);
211   -
212   - marker.setLabel(label);*/
213 200  
214 201 marker.station = data.data[i];
215 202  
... ... @@ -220,6 +207,7 @@ body, html, #container {
220 207 };
221 208 var lineList=data.data[i].lineList;
222 209 var arr=lineList.split("、")
  210 + Array.prototype.push.apply(bus, arr);
223 211 var str='';
224 212 for ( var j in arr) {
225 213 str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
... ... @@ -237,14 +225,27 @@ body, html, #container {
237 225 + "</span><br/>";
238 226  
239 227 var infoWindow = new BMapGL.InfoWindow(info, opts);
240   -
241   -
242 228 marker.addEventListener('click', function() {
243 229 map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
244 230 });
245 231 map.addOverlay(marker);
246 232 })();
247 233 }
  234 + bus=Array.from(new Set(bus));
  235 + var str='';
  236 + for ( var j in bus) {
  237 + str+="<a onClick='searchBus(\""+bus[j]+"\")'>"+bus[j]+"</a>、";
  238 + }
  239 + document.getElementById('bus').innerHTML=str;
  240 +
  241 +
  242 + // 绘制圆
  243 + var circle = new BMapGL.Circle(new BMapGL.Point(lng,lat), distance/2, {
  244 + strokeColor: 'blue',
  245 + strokeWeight: 2,
  246 + strokeOpacity: 0.5
  247 + });
  248 + map.addOverlay(circle);
248 249 }
249 250 });
250 251 }
... ... @@ -258,9 +259,6 @@ body, html, #container {
258 259 (function(){
259 260 var station = data.data[i];
260 261 var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});
261   - /* var label = new BMapGL.Label(station.stationName);
262   -
263   - marker.setLabel(label);*/
264 262  
265 263 marker.station = data.data[i];
266 264  
... ... @@ -306,7 +304,6 @@ body, html, #container {
306 304 }
307 305  
308 306 function searchBus(busName){
309   - console.log(busName)
310 307 var busline = new BMapGL.BusLineSearch(map,{
311 308 renderOptions:{map:map,panel:"r-result"},
312 309 onGetBusListComplete: function(result){
... ... @@ -318,78 +315,107 @@ body, html, #container {
318 315 });
319 316 busline.getBusList(busName);
320 317 }
321   - /* $("#text").bsSuggest({
322   - url : "/system/line/getListForMap",
323   - effectiveFields : [ "lineName" ],
324   - searchFields : [ "lineName", "halfwayStation" ],
325   - effectiveFieldsAlias : {
326   - lineName : "线路名"
327   - },
328   - clearable : true,
329   - idField : "id",
330   - keyField : "lineName",
331   - processData : function(json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
332   - var data = {
333   - 'value' : []
334   - };
335   -
336   - for ( var i in json) {
337   - data.value.push(json[i]);
338   - }
339 318  
340   - //字符串转化为 js 对象
341   - return data;
342   - }
343   - }).on('onDataRequestSuccess', function(e, result) {
344   - console.log('onDataRequestSuccess: ', result);
345   - }).on('onSetSelectValue', function(e, selectedData, selectedRawData) {
346   -
347   - busline.getBusList(e.target.value);
348   -
349   - }).on('onUnsetSelectValue', function() {
350   - console.log('onUnsetSelectValue');
351   - }).on('onShowDropdown', function(e, data) {
352   - console.log('onShowDropdown', e.target.value, data);
353   - }).on('onHideDropdown', function(e, data) {
354   - console.log('onHideDropdown', e.target.value, data);
  319 + // 百度地图API功能
  320 + function G(id) {
  321 + return document.getElementById(id);
  322 + }
  323 + var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
  324 + {"input" : "stations"
  325 + ,"location" : map
  326 + });
  327 + ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
  328 + var str = "";
  329 + var _value = e.fromitem.value;
  330 + var value = "";
  331 + if (e.fromitem.index > -1) {
  332 + value = _value.province + _value.city + _value.district + _value.street + _value.business;
  333 + }
  334 + str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  335 +
  336 + value = "";
  337 + if (e.toitem.index > -1) {
  338 + _value = e.toitem.value;
  339 + value = _value.province + _value.city + _value.district + _value.street + _value.business;
  340 + }
  341 + str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  342 + G("stations").innerHTML = str;
  343 + });
  344 +
  345 + var myValue;
  346 + ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
  347 + var _value = e.item.value;
  348 + myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  349 + G("stations").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  350 +
  351 + setPlace();
  352 + });
  353 +
  354 + function setPlace(){
  355 + map.clearOverlays(); //清除地图上所有覆盖物
  356 + function myFun(){
  357 + var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  358 + map.centerAndZoom(pp, 18);
  359 + map.addOverlay(new BMapGL.Marker(pp)); //添加标注
  360 + }
  361 + var local = new BMapGL.LocalSearch(map, { //智能搜索
  362 + onSearchComplete: myFun
355 363 });
  364 + /*local.search(myValue);*/
  365 + }
356 366  
  367 + function show(id1,id2,id3){
  368 + $('#'+id1).attr("style","display:show;");
  369 + $('#'+id2).attr("style","display:none;");
  370 + $('#'+id3).attr("style","display:none;");
  371 + }
357 372  
358   - var busline = new BMapGL.BusLineSearch(map, {
359   - renderOptions : {
360   - map : map,
361   - panel : "r-result"
362   - },
363   - onGetBusListComplete : function(result) {
364   - if (result) {
365   -
366   - for(var i in result._listItems){
367   - if(result._listItems[i].name.indexOf($("#text").val()) > -1){
368   - var fstLine = result.getBusListItem(i);//获取第一个公交列表显示到map上
369   - busline.getBusLine(fstLine);
370   - return;
371   - }
372   - }
373   -
374   - }else{
375   - return;
376   - }
377   - },
378   - onMarkersSet:function(array){
379   -
380   - for(var i in array){
381   -
382   - const overlay = array[i];
383   -
384   -
385   - }
386   -
  373 +
  374 + var ll=new Array();//存放折线
  375 + var sl=new Array();//存放站点
  376 + var colors=['#5298ff','#E0312A','#30e868','#A80FE4','#0010eb']
  377 + var bus = new BMapGL.BusLineSearch(map, {
  378 + renderOptions:{map:map,panel:"r-result"},
  379 + onGetBusListComplete: function onGetBusListComplete (result) {
  380 + let fstLine = result.getBusListItem(0);
  381 + bus.getBusLine(fstLine);
  382 + },onPolylinesSet: function onPolylinesSet(polyline){//添加公交线时候回调函数.参数：ply:Polyline 公交线路几何对象
  383 + //通过删除api自带的折线 然后改变颜色重新渲染
  384 + map.clearOverlays();
  385 + polyline.setStrokeColor(colors[ll.length]);
  386 + polyline.setStrokeWeight(4);
  387 + polyline.setStrokeOpacity(0.9);
  388 + ll.push(polyline);
  389 + for(let i in ll){
  390 + var polyline2=ll[i];
  391 + map.addOverlay(polyline2); //添加折线覆盖物
387 392 }
388   - }); */
389   - function show(id1,id2){
390   - $('#'+id1).attr("style","display:none;");
391   - $('#'+id2).attr("style","display:show;");
  393 + },onMarkersSet : function onMarkersSet(array){//添加公交站点时候回调函数.参数：sts:Array 公交站坐标组成的Marker对象数组
  394 + Array.prototype.push.apply(sl, array);
  395 + for(var i in sl){
  396 + map.addOverlay(sl[i]);
  397 + }
  398 + }
  399 + });
  400 +
  401 + var readyAdd=new Array();
  402 + function searchBus(line){
  403 + this.color='E0312A';
  404 + if (readyAdd.length>=5) {
  405 + alert("最多5条线路");
  406 + return false
  407 + }
  408 + if ($.inArray(line, readyAdd) == -1) {
  409 + bus.getBusList(line);
  410 + readyAdd.push(line); //readyAdd为空数组，用于存储已添加的线路名
  411 + document.getElementById('c'+readyAdd.length).innerHTML=line;
  412 + } else {
  413 + alert("该路线已添加");
  414 + }
  415 +
392 416 }
  417 +
  418 +
393 419 </script>
394 420  
395 421  
... ...