天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件

前面几篇文章主要是讲了加载天地图、在天地点上循环加载标注点并给标注点添加事件、根据标注点坐标确定地图的显示范围、在天地图显示坐标轨迹以及 在天地图上画多边形，电子范围。

 

本文再讲一点复杂操作。

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

posted @ 2017-03-01 15:01  疯子110  阅读(5132)  评论(0)  编辑  收藏  举报