【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现

        最近项目上涉及到地图，考虑到精度等问题，最终选择了51ditu。要实现电子围栏等等功能，经过几天努力，大致有了个雏形，由于是第一次接触HTML和JavaScript编程，三天下来脑袋大了不少，碰到了一些问题，暂时还在挣扎当中，现在我将雏形工程发布出来，目的在于向大家学习，希望得到各位的指点和教导，以期我的工程能够日益完美。   


一、相关文件说明：


        (1) 工程文件我已经放到了http://download.csdn.net/detail/zhangyuehua123/3704087上，免积分下载(可以进入我的资源列表，排在第一个的就是)。为了方便阅读和交流，我在下面也贴出了完整的代码。
        (2) 实时交流方式：QQ--1803220843， MSN--yichangzyh@163.com。期盼讨论、指教！谢谢~~~

  

二、工程运用目的：
 
         因工程项目需要，用C#设计一个车辆监控软件，其中重要的一部分就是将地图嵌入到软件界面当中。我的思路是运用其强大的webbrowser控件来实现嵌入地图功能。因此，调试Javascript描述的HTML网页就成了工作当中的第一步。


三、地图功能需求：

     (1) 测距离。在地图上点击任意两个位置，计算出物理距离。
     (2) 测面积。在地图上拖拽一个多边形，计算出面积。
     (3) 电子围栏。在地图上拖拽一个矩形框，当车辆(暂时用标注marker来模拟)在矩形框内的时候，处于正常状态；当车辆驶出矩形框外的时候，报警。
     (4)实时路况。提供部分城市的实时路况信息。这个功能51dituAPI支持。
     (5)逆地理编码详细描述。在地图上点击任意一个标注(marker)，信息浮窗提示当前位置的具体地点。这个功能51dituAPI支持。
     (6)地图鹰眼。
     (7)历史轨迹播放。首先选择车辆，然后选择历史轨迹时间(如从2011-10-18-21:00到2011-10-19-21:00)，再选择播放速度，点击播放按钮，就可以在地图上播放出历史行车轨迹。
      (8)鼠标右键。放大、缩小、添加标注功能。


四、雏形版本功能：

(1) 功能：测距离。
      状态：已经完美解决。
      问题：无。


(2) 功能：测面积。 
     状态：已经完美解决。
     问题：无。


(3) 功能：电子围栏。
      状态：已经解决大部分，可以拖拽一个矩形框，用标注(marker)模拟一辆车，当marker在矩形框内的时候，提示没有越界，矩形框显示绿色；当marker拖拽出矩形框时，提示车辆越界，此时矩形框呈红色。
     问题：① 只能先拖拽矩形框，然后才能拖拽标注(marker)，否则提示出错。
                 ② 想用更多的标注(marker)来模拟汽车，用鼠标右键来实现添加标注功能。但是marker能够添加进去，但是不能实现类似可以拖拽的marker那样提示经纬度的功能，所以暂时只能通过拖拽地图上唯一的一个“可以拖拽的标注(marker)”来模拟汽车时候越界。


(4) 功能：实时路况。 
     状态：已经完美解决。
     问题：无。

(5)功能：逆地理编码详细描述。 
     状态：已经完美解决。
    问题：标注还是太少，最好是能用更多的“动态的marker”来模拟汽车，在每个marker上单击就可以显示当前的地理位置信息提示窗。


(6) 功能：地图鹰眼。 
      状态：已经完美解决。
      问题：无。   


(7)功能：历史轨迹播放。 
     状态：还没开始做。
     问题：我的思路是：
                 ①将车辆信息(主要是经纬度数据)存储在本地Xml文件中，然后用javascript读取经纬度数据，调用51ditu的API，在地图上添加marker，设置系统时间(添加一个定时器)，用于地图刷新，这样可以实现“播放速度”功能，选择播放速度实际上就是选择不同的定时器时间。
                 ②至于“选择历史轨迹的起止时间”，暂时的想法也是通过javascript从Xml文件中读取历史信息，选择不同的时间段，获取其时间段内的经纬度值，然后在地图上marker出来。

(8)功能：鼠标右键。 
     状态：解决了一部分。
     问题：功能单一，还需扩展。


五、雏形版本截图：

 

 

六、附源代码：

[javascript] view plain copy
 
 print?
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  2. <head>  
  3. <meta http-equiv="content-type" content="text/html; charset=GB2312"/>  
  4. <style type="text/css">v\:*{behavior:url(#default#VML);}</style>  
  5. <style type="text/css">  
  6. html,body  
  7.  {  
  8.     background:#FFFFFF;  
  9.     overflow : auto;  
  10. }  
  11. table  
  12. {  
  13.     font-size:12px;  
  14.     font-weight:bold;  
  15.     color:#E066FF;    
  16. }  
  17. input  
  18. {  
  19.     font-size: 12px;      
  20.     color:#E066FF;  
  21. }  
  22. </style>  
  23. <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>  
  24. <script language="javascript" src="http://api.51ditu.com/js/traffic.js"></script>  
  25. <script language="javascript">  
  26.     var map;  
  27.     var mgr;  
  28.     var poit;  
  29.     var scaleControl;          /* 比例尺控件 */  
  30.     var icon;                  /* 标注自定义图标样式 */            
  31.      var mapText;               /* 添加文字标签 */                 
  32.      var controlZoom;           /* 拉框放大控件 */               
  33.      var controlDistance;       /* 测距离控件 */                  
  34.       var controlMianji;         /* 侧面积控件 */                  
  35.       var aryRightMenu;         /* 右键菜单数组 */                
  36.       var zoomIn;                /* 右键放大 */                     
  37.       var zoomOut;               /* 右键缩小 */                    
  38.       var markerRightMenu;       /* 右键添加标注 */              
  39.       var menuRightMenu;         /* 添加右键菜单控件到地图上 */      
  40.       var LatMin;                /* 矩形框的边界值，最小维度  */     
  41.       var LatMax;                /* 矩形框的边界值，最大维度  */     
  42.       var LonMin;                /* 矩形框的边界值，最小经度  */    
  43.       var LonMax;                /* 矩形框的边界值，最大经度  */     
  44.       var rect;                  /* 矩形框对象 */                   
  45.       var controlOfweilan;       /* 建立新的拉框查找控件对象 */   
  46.       var markerToDrag;          /* 可拖拽的标注对象 */            
  47.       
  48.       
  49.       
  50.       
  51.     /*===================== 主函数 ===================== */  
  52.     function onLoad()  
  53.     {  
  54.         map=new LTMaps("mapDiv");           /* 创建地图 */    
  55.         point = new LTPoint( 10645971,2956742 );  
  56.         map.centerAndZoom( point,2 );   
  57.           
  58.         map.setMapCursor("hand","move");        /* 设置鼠标在地图上的形状 */   
  59.         map.addControl(new LTStandMapControl());  
  60.         map.addControl(new LTOverviewMapControl());     /* 添加鹰眼 */        
  61.         mgr = new LTTraffic(map);  
  62.           
  63.         scaleControl=new LTScaleControl();             /* 添加比例尺 */    
  64.         scaleControl.units=[[1000,"km"],[1,"m"]];  
  65.         scaleControl.setColor("red");  
  66.         scaleControl.setLeft(280);   
  67.           map.addControl(scaleControl);   
  68.             
  69.           map.handleMouseScroll(true);          /* 鼠标滚轮操作 */                                   
  70.           map.mapCartoonControl(true);          /* 滚轮操作时，地图动画效果展示放大和缩小 */                                 
  71.           LTEvent.bind(map,"dblclick",map,function(){{this.zoomIn()}});    /* 双击放大地图 */    
  72.             
  73.             
  74.          icon=new LTIcon("C:\\centerPoi.gif",[24,24],[12,12]);     /* 添加标注 */                                   
  75.          var marker = new LTMarker( point,icon );                                                                                                  
  76.          map.addOverLay( marker );           
  77.            
  78.          LTEvent.addListener( marker , "click" , doitForMarker);   /* 给标记添加点击事件，点击显示当前的详细地理位置 */  
  79.           
  80.              
  81.            mapText = new LTMapText( marker );      /* 为标注添加文字标签 */                                                                                            
  82.            mapText.setLabel("{2}" );                                                                                                             
  83.            mapText.setBackgroundColor("#CAFF70");   
  84.            mapText.setFontColor("#D15FEE");   
  85.            map.addOverLay( mapText );        
  86.                      
  87.               
  88.           var myHtml="我在这里,这是第1个标记";   
  89.       var infoWin=mapText.openInfoWinHtml(myHtml);   
  90.             infoWin.setTitle("这里是我的标记的标题");   
  91.              LTEvent.addListener( mapText , "click" ,getClickCallBack(mapText,myHtml));    
  92.           
  93.           
  94.             
  95.           controlZoom =  new LTZoomInControl();  
  96.           controlZoom.setTop( 400 );      
  97.           controlZoom.setLeft( 30 );      
  98.           controlZoom.setLabel("拉框放大");            /*拉框放大*/                      
  99.           map.addControl(controlZoom);   
  100.           
  101.             
  102.             
  103.           controlDistance=new LTPolyLineControl();   
  104.            controlDistance.setTop( 350 );     
  105.            controlDistance.setLeft( 30 );      
  106.            controlDistance.setLabel(" 测距离 ");     /*测距离按钮*/                                 
  107.             controlDistance.lineColor="red";      
  108.             controlDistance.lineStroke=1;         
  109.             controlDistance.lineOpacity=1;        
  110.             controlDistance.lineStyle="ShortDash";    
  111.             controlDistance.lineArrow=["Open","Open"];   
  112.             map.addControl(controlDistance);      
  113.             LTEvent.addListener(controlDistance,"draw",onDraw);   
  114.                
  115.            
  116.           controlMianji = new LTPolygonControl();    
  117.            map.addControl( controlMianji );    
  118.            controlMianji.setTop( 300 );      
  119.            controlMianji.setLeft( 30 );     
  120.            controlMianji.setLabel(" 测面积 ");      /*测面积按钮*/             
  121.            
  122.            
  123.         aryRightMenu = new Array();           
  124.   
  125.       zoomIn = new LTMenuItem();            /* 右键放大 */     
  126.       zoomIn.id = "zoomIn";    
  127.       zoomIn.menuText = "放大";   
  128.       zoomIn.functionName = mapZoomIn;   
  129.       aryRightMenu.push(zoomIn);   
  130.   
  131.       zoomOut = new LTMenuItem();         /* 右键缩小 */            
  132.       zoomOut.id = "zoomOut";   
  133.       zoomOut.menuText ="缩小";   
  134.      zoomOut.functionName = mapZoomOut;  
  135.      aryRightMenu.push(zoomOut);   
  136.   
  137.        markerRightMenu = new LTMenuItem();    /* 右键添加标注 */           
  138.        markerRightMenu.id = "marker";   
  139.        markerRightMenu.menuText ="在此添加标注";   
  140.        markerRightMenu.functionName = mapMarker;   
  141.        aryRightMenu.push(markerRightMenu);   
  142.   
  143.        menuRightMenu = new LTMenuControl(aryRightMenu);  /* 添加右键菜单控件到地图上 */     
  144.        map.addMenuControl(menuRightMenu);   
  145.   
  146.        
  147.            
  148.                     controlOfweilan = new LTZoomSearchControl("red","red",1,0.4);       /* 建立新的拉框查找控件 */        
  149.                     controlOfweilan.setTop( 450 );      
  150.                     controlOfweilan.setLeft( 30 );       
  151.                     controlOfweilan.setLabel("电子围栏" );      
  152.                     map.addControl(controlOfweilan);            /* 添加控件到地图 */     
  153.   
  154.                     markerToDrag=new LTMarker(point);     
  155.                     markerToDrag.enableDrag();    
  156.                     map.addOverLay(markerToDrag);     
  157.                     LTEvent.addListener(markerToDrag,"dragend",onDragEnd);   /* 设置用户在拖拽标记之后执行onDragEnd函数 */       
  158.                     LTEvent.addListener(controlOfweilan,"mouseup",doit);               /* 设置在用户拉框完成之后执行doit函数 */       
  159.   
  160.           
  161.           
  162.           
  163.           
  164.     }  
  165.       
  166.       
  167.       
  168.       
  169.     /*======================  在标记被点击的时候执行的函数,marker的onClick监听的事件 ====================== */  
  170.     function doitForMarker()  
  171.     {  
  172.         onClickForMarker();       
  173.     }  
  174.       
  175.       
  176.     /*======================  在标记被点击的时候执行的函数 ====================== */  
  177.     function onClickForMarker()  
  178.      {  
  179.     var reg=new LTRegoLoader();    
  180.      LTEvent.bind(reg,"loaded",reg,myLocation);   
  181.     reg.loadDescribe(point);  
  182.      }  
  183.   
  184.      /*======================  onClickForMarker函数中，reg对象绑定的事件myLocation ====================== */  
  185.      function myLocation(obj)  
  186.      {  
  187.     var myHtml = obj.describe;   /* 逆地理信息描述 */  
  188.      var infoWin=mapText.openInfoWinHtml(myHtml);   
  189.      infoWin.setTitle("当前具体位置");             
  190.     }     
  191.       
  192.       
  193.       /*====================== 本函数是在用户每次拉框操作完成之后执行的操作，bounds是代表用户拉框选择的区域的范围 ====================== */  
  194.                     function doit(bounds)     
  195.                     {    
  196.                         var str="电子围栏区域坐标为：\n";      
  197.                         str+="起点："+bounds.getXmin()+","+bounds.getYmax()+"\n";     
  198.                         str+="终点："+bounds.getXmax()+","+bounds.getYmin()+"\n";    
  199.                         alert(str);    
  200.   
  201.                         LatMin  = bounds.getYmin();    /*  保存当前矩形框的经纬度值，在后面的判断中要用到 */       
  202.                         LatMax = bounds.getYmax();     
  203.   
  204.                         LonMin = bounds.getXmin();     
  205.                         LonMax = bounds.getXmax();    
  206.   
  207.                         rect = new LTRect(bounds);    /* 矩形框对象 */                         
  208.                         map.addOverLay(rect);          /* 将矩形框对象添加到地图上 */           
  209.   
  210.                     }              
  211.   
  212.   
  213.   /*====================== 本函数是在用户每次拖拽标注操作完成之后执行的操作 ======================*/                 
  214.                         function onDragEnd(point)                                              
  215.                         {     
  216.                             var str="标注被拖动到：\n";                          
  217.                             str+="经度："+point.getLongitude()+"\n";             
  218.                             str+="纬度："+point.getLatitude()+ "\n";              
  219.                             alert(str);                                           
  220.   
  221.                             if(point.getLongitude()>LonMin && point.getLongitude()<LonMax && point.getLatitude()<LatMax && point.getLatitude()>LatMin)     
  222.                              {        
  223.                                 alert("您当前的位置在矩形内，OK！");     
  224.                                 rect.setLineColor("blue");      
  225.                                  rect.setFillColor("green");             
  226.                                  rect.setLineStroke(3);     
  227.                              }                     
  228.                             else      
  229.                             {           
  230.                                  alert("您的位置不在在矩形内，Warning！");     
  231.                                 rect.setLineColor("red");     
  232.                                 rect.setFillColor("red");      
  233.                                 rect.setLineStroke(5);           
  234.                             }                                    
  235.   
  236.                         }         
  237.       
  238.       
  239.     /*====================== 右键菜单====================== */  
  240.      function mapZoomIn(){  map.zoomIn();   }   
  241.       function mapZoomOut(){ map.zoomOut();   }   
  242.       function mapMarker(p){  var markerRightMenu0 = new LTMarker(p);  map.addOverLay(markerRightMenu0);  }           
  243.       
  244.       
  245.       
  246.     /*====================== 测距====================== */  
  247.        function onDraw(points,length,polyline)   
  248.              {     
  249.                  alert("结束测距");     
  250.             }    
  251.       
  252.       
  253.       
  254.     /*====================== 添加信息浮窗 ====================== */  
  255.             function getClickCallBack(mapText,myHtml)       
  256.              {  
  257.                 return function()  
  258.                 {  
  259.                     mapText.openInfoWinHtml( myHtml );  
  260.                 }      
  261.              }  
  262.       
  263.       
  264.     /*====================== 打开实时交通 ====================== */  
  265.     function openTraffic()  
  266.     {  
  267.         mgr.addTips();     /* 显示路况提示信息*/          
  268.         if(mgr.getTrafficEnabled())     /* 判断实时交通是否开启,true为开启，false为关闭 */  
  269.         {  
  270.             alert("实时交通已经开启");  
  271.             return;  
  272.          }  
  273.         var city = document.getElementById("city");   /* 将地图定位到下拉菜单所显示的城市*/       
  274.         map.centerAndZoom(city.value,8);          
  275.         mgr.openTraffic(city.value);                                  /*打开实时交通*/  
  276.           
  277.     }  
  278.       
  279.       
  280.     /*====================== 关闭时实交通 ======================*/  
  281.     function closeTraffic()  
  282.     {  
  283.         mgr.removeTips();      /*  显示路况提示信息 */  
  284.         mgr.closeTraffic();      /*  关闭时实交通 */        
  285.     }  
  286.       
  287.       
  288.       
  289.     /*====================== 更换城市 ====================== */   
  290.     function changeCity()  
  291.     {  
  292.           
  293.         if(mgr && mgr.getTrafficEnabled())  /*如果实时交通已打开，将其关闭*/  
  294.         {  
  295.             mgr.closeTraffic();  
  296.         }  
  297.                   
  298.         var city = document.getElementById("city");       
  299.         map.centerAndZoom(city.value,8);             /* 将地图定位到下拉菜单所显示的城市 */       
  300.    }  
  301.       
  302.      
  303.      
  304. </script>  
  305. </head>  
  306. <body onLoad="onLoad()">  
  307.     <body   leftmargin= "0 "   topmargin= "0 "   marginwidth= "0"   marginheight= "0 ">    
  308.     <div id="mapDiv" style="position:absolute;width:100%; height:100%;"></div>  
  309.     <div id="trafficID" style="position:absolute;right:180px;">  
  310.         <table>  
  311.             <tr>  
  312.                 <td>实时路况：  
  313.                     <select id="city" onChange="changeCity();">  
  314.                         <option value="beijing">北京</option>  
  315.                         <option value="shanghai">上海</option>  
  316.                         <option value="guangzhou">广州</option>  
  317.                         <option value="shenzhen">深圳</option>  
  318.                         <option value="chengdu">成都</option>  
  319.                         <option value="chongqing">重庆</option>  
  320.                         <option value="shenyang">沈阳</option>  
  321.                     </select>  
  322.                     <input type="button" name="button" value="开启" onClick="openTraffic();">  
  323.                     <input type="button" name="button" value="关闭" onClick="closeTraffic();">                    
  324.                 </td>  
  325.             </tr>           
  326.         </table>  
  327.     </div>              
  328. </body>  
  329. </html>  


 

posted @ 2017-04-06 16:24  网络蚂蚁  阅读(622)  评论(0)  编辑  收藏  举报