天地图专题五：在天地图上绘制电子区域并保存数据

版权声明：本文为博主原创文章，转载请注明出处。

上一文章讲了如何在天地图上显示坐标轨迹。

本文介绍如何在天地图上绘制电子区域（电子范围或电子栅栏），并且，我们要将我们绘制的电子区域的坐标数据保存到数组里，以用于提交到后台，或根据数据来绘制电子区域。    天地图中有绘制多边形的接口跟绘制矩形的接口。 我们就从这里入手。

 

调用接口其实不难。这里稍微要绕一下的地方是如何在调用 绘制多边形接口的同时把我们绘制的多边形的顶点坐标保存下来。


本文我们要实现。

1.绘制多边形并保存多边形各顶点的数据到数组中。

2.清除我们绘制的多边形。

3.根据我们保存的多边形顶点数据来重现我们刚才清除掉的多边形。

 

步骤：

 

1.加载地图。在地图上设置按钮。 选择范围 清除所画 查看刚才所画的。

 

[javascript] view plain copy
 
  1. //加载基本地图和导航  
  2. function loadMap(){  
  3.     try {  
  4.            map = new TMap("mapDiv"); //初始化地图对象  
  5.             map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//中国  
  6.         map.enableHandleMouseScroll(); //允许鼠标双击放大地图     
  7.        } catch(err) {  
  8.         alert('图加载不成功，请稍候再试！你可以先使用其他功能！');  
  9.        }  
  10.    }  

[html] view plain copy
 
  1. <div class = 'btn-wrap'>  
  2.     <input type="button" id="btn1" value="选择范围"/>  
  3.     <input type="button" id="btn2" value="清除所画"/>  
  4.     <input type="button" id="btn3" value="查看刚才画的"/>  
  5. </div>  

2.加载多边形测距工具。

 

[javascript] view plain copy
 
  1. //加载多边形测距工具。  
  2. function loadPolygonTool(){  
  3.     var config = {  
  4.         strokeColor:"blue", //折线颜色  
  5.         fillColor:"#FFFFFF",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果  
  6.         strokeWeight:"3px", //折线的宽度，以像素为单位  
  7.         strokeOpacity:0.5,  //折线的透明度，取值范围0 - 1  
  8.         fillOpacity:0.5,        //填充的透明度，取值范围0 - 1  
  9.         showLabel:false             //是否显示页面，默认为true.  
  10.     };  
  11.     //创建测面工具对象  
  12.     polygonTool = new TPolygonTool(map,config);  
  13.     //注册测面工具绘制完成后的事件  
  14.     TEvent.addListener(polygonTool,"draw",onDrawPolygon);  
  15. }  


 


3.绘制多边形，保存顶点数据。  保存的方法是，当我们点击按钮的时候，就给鼠标注册一个 点击事件。 绘制多边形的时候每点击地图一次，就调用点击事件获取点击的位置的经纬度坐标保存进数组。  也就一边绘制多边形，一边得到多边形的顶点坐标。   最后双击结束绘制，这个时候，在同一个位置点击两次，会获取到两个同样的经纬度，所以要给最后得到的顶点坐标去掉最后两位。  结束绘制的时候清除地图的点击事件。  

 

[javascript] view plain copy
 
  1. //绘制多边形  
  2. function drawPolygon() {　  
  3.     polygonTool.clear();//清除所画的多边形  
  4.     map.clearOverLays();  
  5.     polygonTool.open();  
  6.     PolygonPoints.length=0;  //清零保存的坐标  
  7.     if(mapclick!=""){  
  8.         TEvent.removeListener(mapclick); //避免加载多次点击事件  
  9.     }  
  10.   
  11.     mapclick = TEvent.addListener(map,"click",function(p){  
  12.         polygonTool.open();  
  13.         var lnglat = map.fromContainerPixelToLngLat(p);//获取点击处的坐标  
  14.         PolygonPoints.push(lnglat.getLng());  
  15.         PolygonPoints.push(lnglat.getLat());  
  16.         if(PolygonPoints.length>20){  
  17.             alert("不能超过10个点！请重新选择范围。");  
  18.             polygonTool.close();  
  19.             PolygonPoints.length=0;  
  20.             TEvent.removeListener(mapclick);  
  21.         }  
  22.     });  
  23. }  



 

点击按钮选择范围  

 

双击结束时调用 保存坐标到PolygonPoints中。

 

 

[javascript] view plain copy
 
  1. //关闭测面工具时触发  
  2. function onDrawPolygon(bounds,line)  
  3. {  
  4.     polygonTool.close();  
  5.     PolygonPoints.length=PolygonPoints.length-2;//最后双击会把最后一个坐标保存两次。  
  6.     TEvent.removeListener(mapclick);//关闭单击事件（保存坐标）  
  7. }  

 

经过上面的步骤就可以 实现绘制 区域，并得到顶点坐标。   很多应用中就可以把得到的坐标提交保存到数据库去，以备后用了。

本demo中就不保存到后台 ，直接用我们得到的坐标数据把我们刚刚绘制的地图 重现出来。

 

4.清除地图。polygonTool.clear();map.clearOverLays();

 

5.根据上面得到的数组重新  调用天地图api画出我们刚得到的多边形状。

 

[javascript] view plain copy
 
  1. function  drawPolygonByPoint(){　//根据点坐标来画多边形  
  2.     map.removeOverLay(polygon);  
  3.     var points = [];  
  4.     if(PolygonPoints.length!=0){  
  5.         for(var i=0;i<PolygonPoints.length;i=i+2){  
  6.             points.push(new TLngLat(PolygonPoints[i],PolygonPoints[i+1]));  
  7.         }  
  8.         //创建面对象  
  9.         polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.5});  
  10.             //向地图上添加面  
  11.             map.addOverLay(polygon);  
  12.         }else{  
  13.             alert("没有选择区域！");  
  14.         }  
  15.   
  16.     }  

6.按钮事件委托。

 

[javascript] view plain copy
 
  1. //给几个按钮添加点击事件。事件委托。  
  2. $(".btn-wrap").click(function(event) {  
  3.     var target = event.target;  
  4.     var id = target.id;  
  5.     switch(id){  
  6.         case 'btn1':  
  7.         polygonTool.close();  
  8.         TEvent.removeListener(mapclick);  
  9.         drawPolygon();  
  10.         break;  
  11.         case 'btn2':  
  12.         polygonTool.close();  
  13.         TEvent.removeListener(mapclick);  
  14.         polygonTool.clear();  
  15.         map.clearOverLays()  
  16.         break;  
  17.         case 'btn3':  
  18.         polygonTool.close();  
  19.         TEvent.removeListener(mapclick);  
  20.         drawPolygonByPoint();  
  21.         break;  
  22.     }  
  23. });  


 

 

天地图绘制多边形效果图：

 

 

到这里，我们就实现了在天地图上绘制多边形状。  绘制矩形也很类似。  其实是很简单的。

唯一值得一提的大概就是 在绘制的时候前添加 了点击事件来保存顶点坐标。

 

项目下载地址：https://github.com/liusaint/tiandituMap

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

更多天地图api运用的内容请关注本系列后续文章。转载请注明出处

posted @ 2017-03-01 14:59  疯子110  阅读(5221)  评论(1)  编辑  收藏  举报