碼上快樂

相關內容    簡體    繁體

天地圖專題六：復雜操作，天地圖上標注點的連線以及模擬點擊事件

本文轉載自   查看原文   2017-03-01 15:01   1759    天地圖

前面幾篇文章主要是講了加載天地圖、在天地點上循環加載標注點並給標注點添加事件、根據標注點坐標確定地圖的顯示范圍、在天地圖顯示坐標軌跡以及 在天地圖上畫多邊形，電子范圍。

 

本文再講一點復雜操作。

1.在地圖上展示一些標注點，這些標注點兩兩相連。 在線與不在線是兩種不同顏色的圖標。

2.如果標注點之間距離大於60千米，用紅色虛線連接。如果標注點之間的距離小於60千米剛用藍色虛線連接。

3.點擊線條，在兩個標注點顯示兩個標注點的距離，將兩個點用實線連接。並且給相連的兩個標注點大圖標來表示，大圖標也根據在線不在線使用不同的顏色。點擊此標注點的時候，其他標注點恢復原狀。

4.輸入起點和終點，地圖上連接兩個點，並用實線連接兩個點，兩個點的圖標用比較醒目的圖標。

 

步驟：

1.准備數據。

點數據：

 

[javascript]  view plain  copy
 
  1. //標注點數據  
  2. var lnglats = [  
  3. {"B":"23.2","L":"113.4","PName":"2222","Status":1},  
  4. {"B":"23.7","L":"113.8","PName":"第四個點","Status":0},  
  5. {"B":"23.1","L":"113.7","PName":"7777","Status":1},  
  6. {"B":"23.5","L":"113.3","PName":"8888","Status":1}];  


讓標注點兩兩相連。線條數據。這里手工添，也可以寫個函數來生成。 注意這里數據的組織。

 

 

[javascript]  view plain  copy
 
  1.               //兩兩相連的數據。第一個點和第二個點是一條線。第三個點和第四個點是一條線……依次類推  
  2. var LinePoints = [  
  3. {"B":"23.2","L":"113.4","PName":"2222","Status":1},  
  4. {"B":"23.7","L":"113.8","PName":"第四個點","Status":1},  
  5. {"B":"23.2","L":"113.4","PName":"2222","Status":1},  
  6. {"B":"23.1","L":"113.7","PName":"7777","Status":1},  
  7. {"B":"23.2","L":"113.4","PName":"2222","Status":1},  
  8. {"B":"23.5","L":"113.3","PName":"8888","Status":1},  
  9. {"B":"23.7","L":"113.8","PName":"第四個點","Status":1},  
  10. {"B":"23.1","L":"113.7","PName":"7777","Status":1},  
  11. {"B":"23.7","L":"113.8","PName":"第四個點","Status":1},  
  12. {"B":"23.5","L":"113.3","PName":"8888","Status":1},  
  13. {"B":"23.1","L":"113.7","PName":"7777","Status":1},  
  14. {"B":"23.5","L":"113.3","PName":"8888","Status":1}  
  15. ];  


2.根據坐標點計算中心點和縮放級別，並加載天地圖。參見前面的文章。略。

 

 

3.把標注點和點名加載到地圖上。參見前面的文章。 略

 

4.連線操作。以及給天地圖上的線添加點擊事件。

 

 

[javascript]  view plain  copy
 
  1. //根據連線LinePoints數組進行兩兩相連。  
  2. //給線條添加點擊事件。  
  3. function showSLine() {  
  4.   
  5.     var lineconfig={  
  6.         strokeColor: "rgb(0,68,102)",  
  7.         strokeWeight: 2,  
  8.         strokeOpacity: 1,  
  9.         strokeStyle:"dashed"  
  10.     };  
  11.   
  12.     var disconfig = {//測距工具的配置  
  13.             strokeColor:"blue", //折線顏色  
  14.             strokeWeight:"3px", //折線的寬度，以像素為單位  
  15.             strokeOpacity:0.5,  //折線的透明度，取值范圍0 - 1  
  16.             strokeStyle:"solid" //折線的樣式，solid或dashed  
  17.         };  
  18.     //創建測距工具對象  
  19.     lineTool = new TPolylineTool(map,disconfig);  
  20.         //循環遍歷線條數組  
  21.     for (var i = 0; i < LinePoints.length; i = i + 2) {  
  22.         var j=i+1;  
  23.         var k=i/2;  
  24.         points[k]=[];  
  25.         points[k].push(new TLngLat(LinePoints[i].L, LinePoints[i].B));  
  26.         points[k].push(new TLngLat(LinePoints[j].L, LinePoints[j].B));  
  27.         SLine[k] = new TPolyline(points[k],lineconfig);//創建線條的對象  
  28.         points[k].dis=lineTool.getDistance(points[k]);//計算一條線兩個點之間距離  
  29.         if(points[k].dis>60000){//大於60的用紅色  
  30.             SLine[k].setStrokeColor("red");  
  31.         }  
  32.         SLine[k].id=k;  
  33.         SLine[k].distance=LinePoints[i].distance;  
  34.         SLine[k].LineName=LinePoints[i].PName+"-"+LinePoints[j].PName;//給線條命名。就是兩個點名中間多一個“-”.用來在模擬點擊的時候知道是模擬點擊到的哪一條線。  
  35.   
  36.         (function() {//給線條添加點擊事件。  
  37.             var l=SLine[k];  
  38.             SLineclick[k] = TEvent.addListener(l, "click",function() {//線的點擊事件  
  39.                 //點擊線的第一件是是把地圖上的線條恢復到原始狀態。就是把所有的線變成虛線。  
  40.                 for(var i=0;i<SLine.length;i++){  
  41.                     SLine[i].setStrokeStyle("dashed");  
  42.                 }  
  43.                 l.setStrokeStyle("solid");//把當前線設為實線。  
  44.                 var thepoints=l.getLngLats();//獲取線兩端的點，  
  45.                 thepointL1=thepoints[0][0]/100000;  
  46.                 thepointL2=thepoints[1][0]/100000;  
  47.                 thepointL1=thepointL1.toFixed(3);  
  48.                 thepointL2=thepointL2.toFixed(3);//ie5.5+  
  49.                 var  dispoints=[];  
  50.                 var discenterArr=[];  
  51.                 var discenterP={};//線兩個端點點的中心坐標，在這里添加距離顯示  
  52.                 for(var j=0;j<lnglats.length;j++){  
  53.                     //點擊線，把地圖上的標注恢復到原始狀態。  
  54.                     if (lnglats[j].Status == 1) {//恢復初始圖標  
  55.                         iconMaker[j].setIcon(icon);  
  56.                     } else {  
  57.                         iconMaker[j].setIcon(icon1);  
  58.                     }  
  59.                     //如果lnglats數組中的點的L值與線條的端點的L值相差在0.01以內，我們就認為它是同一個點。  
  60.                     //也就是說我們點線條的時候，這個標注點將作為線條的端點來進行變化。  
  61.                     if(Math.abs(lnglats[j].L-thepointL1)<0.01){  
  62.                         if(lnglats[j].Status == 1){  
  63.                             iconMaker[j].setIcon(icon2);  
  64.                         }else{  
  65.                             iconMaker[j].setIcon(icon3);  
  66.                         }  
  67.                           
  68.                         dispoints.push(new TLngLat(lnglats[j].L, lnglats[j].B));  
  69.                         discenterArr.push(lnglats[j]);  
  70.                     }  
  71.                     if(Math.abs(lnglats[j].L-thepointL2)<0.01){  
  72.                         if(lnglats[j].Status == 1){  
  73.                             iconMaker[j].setIcon(icon2);  
  74.                         }else{  
  75.                             iconMaker[j].setIcon(icon3);  
  76.                         }  
  77.                         dispoints.push(new TLngLat(lnglats[j].L, lnglats[j].B));  
  78.                         discenterArr.push(lnglats[j]);  
  79.                     }  
  80.                 }  
  81.                 //點擊線時，在線條的中心位置，顯示兩個點的距離，也就是線條長度。  
  82.                 discenterP.L=(parseFloat(discenterArr[0].L)+parseFloat(discenterArr[1].L))/2;  
  83.                 discenterP.B=(parseFloat(discenterArr[0].B)+parseFloat(discenterArr[1].B))/2;  
  84.   
  85.                 var distance=lineTool.getDistance(dispoints);  
  86.                 distance=distance/1000;  
  87.                 distance=distance.toFixed(1);  
  88.   
  89.                 var disconfig = {  
  90.                     text:distance+'KM',  
  91.                     offset:new TPixel(10,10),  
  92.                     position:new TLngLat(discenterP.L,discenterP.B)  
  93.                 };  
  94.                      //創建地圖文本對象  
  95.                      map.removeOverLay(disLabel);  
  96.                      disLabel=new TLabel(disconfig);  
  97.                      disLabel.setBorderColor("rgb(40,150,205)");  
  98.                      map.addOverLay(disLabel);  
  99.                     });  
  100.         })();  
  101.             //向地圖上添加線  
  102.             map.addOverLay(SLine[k]);  
  103.         }  
  104.     }  



5.模擬點擊事件。搜索兩個點的點名，觸發兩個點之間連線的點擊事件。地圖上將兩個點突出顯示。並用實線將兩個點相連。在兩個點中間位置顯示距離。

 

[javascript]  view plain  copy
 
  1.    var LineName=[];  
  2.    $(document).ready(function(){  
  3. //輸入兩個點名。地圖上顯示兩個點相連的效果。  
  4.     $("#user_loadq_icon").click(function(){  
  5.         var start_point=$("#start_point").val();  
  6.         var end_point=$("#end_point").val();  
  7.         if(start_point==""||end_point==""){  
  8.             return;  
  9.         }  
  10.   
  11.         var pointName=start_point+"-"+end_point;  
  12.         var pointName1=end_point+"-"+start_point;  
  13.   
  14.         LineName.length=0;  
  15.         LineName.push(pointName);  
  16.         LineName.push(pointName1);  
  17.   
  18.     //遍歷SLine。查找名字。  
  19.         for(var i=0;i<SLine.length;i++){  
  20.             if(SLine[i].LineName ==LineName[0] || SLine[i].LineName ==LineName[1] ){  
  21.                 TEvent.trigger(SLine[i],"click");//找到名字之后模擬點擊線條。觸發點擊事件。連接兩個點。  
  22.             }  
  23.   
  24.         }  
  25.     })  
  26.    })  


到這里就基本實現了要達到的效果。

 

效果圖：

初始狀態：

點擊線條：

搜索連接（模擬點擊事件）：

 

天地圖系列暫時先到這里。 其實天地圖有時候不是特別穩定。 可能其他地圖會好一點點。

其實就是對接口的靈活運用而已。說難不難，說簡單也不簡單。

同樣的接口，在不同的人手里可以發揮出不同的作用。

 

 

歡迎交流。

 

如果對它感興趣可以下載，項目下載地址：https://github.com/liusaint/tiandituMap

演示地址：http://runningls.com/demos/tianditu/index.html?to=loadline


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 天地圖專題四：在天地圖上顯示運行軌跡 天地圖專題三：根據標注點的范圍確定天地圖的中心點和縮放級別 天地圖專題一：加載天地圖 天地圖專題五：在天地圖上繪制電子區域並保存數據 基礎地圖-在線地圖-天地圖（標注） 基於Vue的天地圖入門專題(二) 基於Vue的天地圖入門專題(一) 天地圖 天地圖：加載天地圖 基礎地圖-在線地圖-天地圖（無標注）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM