youxiw2000 / bsthLineProfiles · Commits

Commit dd6d81c38e2c45889e6d1a6224cbb237f3bd516f

Authored by yiming
1 parent 6c18bb5d
build: skipped

bf

Inline Side-by-side
Showing 1 changed file with 141 additions and 82 deletions
bsthLineProfiles/src/main/resources/templates/system/line/map.html
  View file @dd6d81c
... ... @@ -56,22 +56,26 @@ body, html, #container {
56 56 color: #fff;
57 57 border-radius: 5px 0 0 5px;
58 58 }
  59 +.lf{
  60 + padding-left: 25px;
  61 +}
59 62 </style>
60 63 <script
61 64 src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
62 65 </head>
63 66 <body>
64   - <div class="info" style="width: 350px">
  67 + <div class="info" style="width: 450px">
65 68 <ul class="nav nav-tabs" role="tablist">
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>
  69 + <li role="presentation" class="active"><a onclick="show('station','road','line','area')" role="tab" data-toggle="tab">站点查询</a></li>
  70 + <li role="presentation"><a onclick="show('road','station','line','area')" role="tab" data-toggle="tab">道路查询</a></li>
  71 + <li role="presentation"><a onclick="show('line','road','station','area')" role="tab" data-toggle="tab">途径线路</a></li>
  72 + <li role="presentation"><a onclick="show('area','road','station','line')" role="tab" data-toggle="tab">区域查询</a></li>
69 73 </ul>
70 74  
71 75 <form id="station">
72 76 <div class="row">
73 77 <h4></h4>
74   - <label class="col-sm-3"><h4 style="text-align:right">站点</h4></label>
  78 + <label class="col-sm-3"><h4 class="lf">站点</h4></label>
75 79 <div class="col-sm-9" >
76 80 <input type="text" class="form-control" id="stations">
77 81 <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
... ... @@ -80,7 +84,7 @@ body, html, #container {
80 84 </div>
81 85 <div class="row">
82 86 <h4></h4>
83   - <label class="col-sm-3"><h4 style="text-align:right">范围</h4></label>
  87 + <label class="col-sm-3"><h4 class="lf">范围</h4></label>
84 88 <div class="col-sm-9">
85 89 <input id="distance" class="form-control" type="text" placeholder="单位米">
86 90 </div>
... ... @@ -100,16 +104,16 @@ body, html, #container {
100 104 <form id="road" style="display: none">
101 105 <div class="row">
102 106 <h4></h4>
103   - <label class="col-sm-3"><h4 style="text-align:right">路名</h4></label>
  107 + <label class="col-sm-3"><h4 class="lf">路名</h4></label>
104 108 <div class="col-sm-9">
105   - <input id="searchRoad" class="form-control" type="text">
  109 + <input id="roadName" class="form-control" type="text">
106 110 </div>
107 111 <h4></h4>
108 112 </div>
109 113 <div class="row">
110 114 <h4></h4>
111 115 <div class="col-sm-4">
112   - <button type="button" class="el-button el-button--primary el-button--mini" onclick="addLine();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
  116 + <button type="button" class="el-button el-button--primary el-button--mini" onclick="searchRoad();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
113 117 </div>
114 118 <div class="col-sm-4">
115 119 <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 {
117 121 </div>
118 122 </form>
119 123 <form id="line" style="display: none">
  124 +
120 125 <div class="row">
121 126 <h4></h4>
122   - <div id="bus" style="padding-left: 5px;">
  127 + <div class="row pre-scrollable">
  128 + <div id="bus" style="padding-left: 25px;width: 440px">
  129 + </div>
123 130 </div>
124 131 <h4></h4>
125   - <div style="padding-left: 5px;">
  132 + <div class="lf">
126 133 <i class="fa fa-minus " style="color:#5298ff" id="c1"></i>
127 134 <i class="fa fa-minus " style="color:#E0312A" id="c2"></i>
128 135 <i class="fa fa-minus " style="color:#30e868" id="c3"></i>
... ... @@ -131,7 +138,27 @@ body, html, #container {
131 138 </div>
132 139 <h4></h4>
133 140 <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>
  141 + <button type="button" class="el-button el-button--default el-button--mini" onclick="clearline();"><!----><i class="el-icon-refresh"></i><span>清除线路</span></button>
  142 + </div>
  143 +
  144 + </div>
  145 + </form>
  146 + <form id="area" style="display: none">
  147 + <div class="row">
  148 + <h4></h4>
  149 + <label class="col-sm-3"><h4 class="lf">范围</h4></label>
  150 + <div class="col-sm-9">
  151 + <input id="distance2" class="form-control" type="text" placeholder="单位米">
  152 + </div>
  153 + <h4></h4>
  154 + </div>
  155 + <div class="row">
  156 + <h4></h4>
  157 + <div class="col-sm-4" >
  158 + <button type="button" class="el-button el-button--primary el-button--mini" onclick="searchArea()"><!----><i class="el-icon-search"></i><span>搜索</span></button>
  159 + </div>
  160 + <div class="col-sm-4">
  161 + <button type="button" class="el-button el-button--default el-button--mini" onclick="$.form.reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
135 162 </div>
136 163 </div>
137 164 </form>
... ... @@ -147,20 +174,30 @@ body, html, #container {
147 174 <th:block th:include="include :: bootstrap-suggest-js" />
148 175 <th:block th:include="include :: select2-js" />
149 176 <script>
  177 + //tab栏控制
  178 + function show(id1,id2,id3,id4){
  179 + $('#'+id1).attr("style","display:show;");
  180 + $('#'+id2).attr("style","display:none;");
  181 + $('#'+id3).attr("style","display:none;");
  182 + $('#'+id4).attr("style","display:none;");
  183 + }
  184 +
  185 + //地图的初始化
150 186 var map = new BMapGL.Map('container'); // 创建Map实例
151 187 map.centerAndZoom(new BMapGL.Point(121.528733, 31.237425), 12); // 初始化地图,设置中心点坐标和地图级别
152 188 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
153 189  
154 190  
155 191  
156   - map.addEventListener('click', function(e) {
  192 + /*map.addEventListener('click', function(e) {
157 193 if (e.overlay) {
158 194 return; // 存在覆盖物退出
159 195 }
160 196 });
161   -
162 197 var stations
  198 + */
163 199  
  200 + //地点查询
164 201 function searchStation(){
165 202 var station=$('#stations').val();
166 203 var distance=$("#distance").val()
... ... @@ -170,23 +207,36 @@ body, html, #container {
170 207 // 将地址解析结果显示在地图上，并调整地图视野
171 208 myGeo.getPoint(station, function(point){
172 209 map.clearOverlays();
173   - map.centerAndZoom(point, 18);
  210 + map.centerAndZoom(point, 17);
174 211 a(point.lng,point.lat,distance)
175 212 }, '上海市')
176 213 }
  214 +
  215 + //道路查询
177 216 function searchRoad(){
178 217 var roadName=$('#roadName').val();
179   - var distance=1000000000;
  218 + var distance=20000;
180 219 //创建地址解析器实例
181 220 var myGeo = new BMapGL.Geocoder();
182 221 // 将地址解析结果显示在地图上，并调整地图视野
183 222 myGeo.getPoint(roadName, function(point){
184 223 map.clearOverlays();
185   - map.centerAndZoom(point, 18);
  224 + map.centerAndZoom(point, 17);
186 225 b(point.lng,point.lat,distance,roadName)
187 226 }, '上海市')
188 227 }
189 228  
  229 + //区域查询
  230 + function searchArea(){
  231 + var distance=$("#distance2").val();
  232 + map.clearOverlays();
  233 + var lng=p.latLng.lng;
  234 + var lat=p.latLng.lat;
  235 + map.centerAndZoom(new BMapGL.Point(lng,lat), 17);
  236 + a(lng,lat,distance);
  237 + }
  238 +
  239 + //站点标注
190 240 function a(lng,lat,distance){
191 241 $.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
192 242 +lng + "&lat=" + lat + "&dis="
... ... @@ -238,7 +288,6 @@ body, html, #container {
238 288 }
239 289 document.getElementById('bus').innerHTML=str;
240 290  
241   -
242 291 // 绘制圆
243 292 var circle = new BMapGL.Circle(new BMapGL.Point(lng,lat), distance/2, {
244 293 strokeColor: 'blue',
... ... @@ -250,11 +299,13 @@ body, html, #container {
250 299 });
251 300 }
252 301  
  302 + //站点标注用来查道路的 多了个站点筛选和 去除 圆形范围
253 303 function b(lng,lat,distance,roadName){
254 304 $.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
255 305 +lng + "&lat=" + lat + "&dis="
256 306 + distance / 1000, function(data) {
257 307 if (data.code == "200") {
  308 + var bus=new Array();
258 309 for ( var i in data.data) {
259 310 (function(){
260 311 var station = data.data[i];
... ... @@ -268,55 +319,50 @@ body, html, #container {
268 319 title: station.stationName
269 320 };
270 321  
271   - var lineList=data.data[i].lineList;
272   - var arr=lineList.split("、")
273   - var str='';
274   - for ( var j in arr) {
275   - str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
276   - }
277   - var info = "";
278   - info += "<span>站点名称：" + data.data[i].stationName
279   - + "</span><br/>";
280   - info += "<span>行业编码：" + data.data[i].standardStationCode
281   - + "</span><br/>";
282   - info += "<span>站点编码：" + data.data[i].stationCode
283   - + "</span><br/>";
284   - info += "<span>经过线路：" + str
285   - + "</span><br/>";
286   - info += "<span>道路名称：" + data.data[i].roadName
287   - + "</span><br/>";
288   -
289   - var infoWindow = new BMapGL.InfoWindow(info, opts);
290   -
291   -
292   - marker.addEventListener('click', function() {
293   - map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
294   - });
295 322  
296 323 if(data.data[i].roadName==roadName){
  324 + var lineList=data.data[i].lineList;
  325 + var arr=lineList.split("、");
  326 + Array.prototype.push.apply(bus, arr);
  327 + var str='';
  328 + for ( var j in arr) {
  329 + str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
  330 + }
  331 + var info = "";
  332 + info += "<span>站点名称：" + data.data[i].stationName
  333 + + "</span><br/>";
  334 + info += "<span>行业编码：" + data.data[i].standardStationCode
  335 + + "</span><br/>";
  336 + info += "<span>站点编码：" + data.data[i].stationCode
  337 + + "</span><br/>";
  338 + info += "<span>经过线路：" + str
  339 + + "</span><br/>";
  340 + info += "<span>道路名称：" + data.data[i].roadName
  341 + + "</span><br/>";
  342 +
  343 + var infoWindow = new BMapGL.InfoWindow(info, opts);
  344 +
  345 +
  346 + marker.addEventListener('click', function() {
  347 + map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
  348 + });
297 349 map.addOverlay(marker);
298 350 }
299 351  
300 352 })();
301 353 }
302   - }
303   - });
304   - }
305   -
306   - function searchBus(busName){
307   - var busline = new BMapGL.BusLineSearch(map,{
308   - renderOptions:{map:map,panel:"r-result"},
309   - onGetBusListComplete: function(result){
310   - if(result) {
311   - var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
312   - busline.getBusLine(fstLine);
  354 + bus=Array.from(new Set(bus));
  355 + var str='';
  356 + for ( var j in bus) {
  357 + str+="<a onClick='searchBus(\""+bus[j]+"\")'>"+bus[j]+"</a>、";
313 358 }
  359 + document.getElementById('bus').innerHTML=str;
314 360 }
315 361 });
316   - busline.getBusList(busName);
317 362 }
318 363  
319   - // 百度地图API功能
  364 +
  365 + //百度下拉列表
320 366 function G(id) {
321 367 return document.getElementById(id);
322 368 }
... ... @@ -350,7 +396,6 @@ body, html, #container {
350 396  
351 397 setPlace();
352 398 });
353   -
354 399 function setPlace(){
355 400 map.clearOverlays(); //清除地图上所有覆盖物
356 401 function myFun(){
... ... @@ -361,30 +406,41 @@ body, html, #container {
361 406 var local = new BMapGL.LocalSearch(map, { //智能搜索
362 407 onSearchComplete: myFun
363 408 });
364   - /*local.search(myValue);*/
365   - }
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 409 }
372 410  
373 411  
  412 + //多线路查询
374 413 var ll=new Array();//存放折线
375 414 var sl=new Array();//存放站点
  415 + var readyAdd=new Array();//存放线路
  416 +
  417 + function searchBus(line){
  418 + if (readyAdd.length>=5) {
  419 + alert("最多5条线路");
  420 + return false
  421 + }
  422 + if ($.inArray(line, readyAdd) == -1) {
  423 + bus.getBusList(line);
  424 + readyAdd.push(line); //readyAdd为空数组，用于存储已添加的线路名
  425 + document.getElementById('c'+readyAdd.length).innerHTML=line;
  426 + } else {
  427 + alert("该路线已添加");
  428 + }
  429 + }
  430 +
376 431 var colors=['#5298ff','#E0312A','#30e868','#A80FE4','#0010eb']
377 432 var bus = new BMapGL.BusLineSearch(map, {
378 433 renderOptions:{map:map,panel:"r-result"},
379 434 onGetBusListComplete: function onGetBusListComplete (result) {
380   - let fstLine = result.getBusListItem(0);
  435 + let fstLine = result.getBusListItem(0);//通过线路名查询线路列表默认第一条
381 436 bus.getBusLine(fstLine);
382 437 },onPolylinesSet: function onPolylinesSet(polyline){//添加公交线时候回调函数.参数：ply:Polyline 公交线路几何对象
383 438 //通过删除api自带的折线 然后改变颜色重新渲染
384 439 map.clearOverlays();
385   - polyline.setStrokeColor(colors[ll.length]);
386   - polyline.setStrokeWeight(4);
387   - polyline.setStrokeOpacity(0.9);
  440 + //https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0
  441 + polyline.setStrokeColor(colors[ll.length]);//颜色
  442 + polyline.setStrokeWeight(4);//宽度
  443 + polyline.setStrokeOpacity(0.9);//透明度
388 444 ll.push(polyline);
389 445 for(let i in ll){
390 446 var polyline2=ll[i];
... ... @@ -398,24 +454,27 @@ body, html, #container {
398 454 }
399 455 });
400 456  
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("该路线已添加");
  457 +
  458 + //右键标记坐标
  459 + var p;
  460 + map.addEventListener('rightclick', function(e){
  461 + var pt = e.latlng;
  462 + var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
  463 + map.removeOverlay(p);
  464 + p=marker;
  465 + map.addOverlay(p);
  466 + })
  467 +
  468 + function clearline(){
  469 + ll=new Array();//存放折线
  470 + sl=new Array();//存放站点
  471 + readyAdd=new Array();//存放线路
  472 + map.clearOverlays();
  473 + for(var i=1;i<=5;i++){
  474 + document.getElementById('c'+i).innerHTML='';
414 475 }
415 476  
416 477 }
417   -
418   -
419 478 </script>
420 479  
421 480  
... ...