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

            最近项目上涉及到地图，考虑到精度等问题，最终选择了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="电子围栏区域坐标为： ";      
    197.                         str+="起点："+bounds.getXmin()+","+bounds.getYmax()+" ";     
    198.                         str+="终点："+bounds.getXmax()+","+bounds.getYmin()+" ";    
    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="标注被拖动到： ";                          
    217.                             str+="经度："+point.getLongitude()+" ";             
    218.                             str+="纬度："+point.getLatitude()+ " ";              
    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;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>  


     
  • 相关阅读:
    碰到一个在app内部浏览器锚点异常的问题
    常用js方法
    preg_match_all正则表达式的基本使用
    无线路由器WDS 桥接设置方法
    链表和数组的区别在哪里?
    php报错： PHP Warning: PHP Startup: memcache: Unable to initialize module
    mysql修改密码
    快速排序
    vuex到底是个啥
    vue实现简单表格组件
  • 原文地址：https://www.cnblogs.com/jjg0519/p/6674072.html
Copyright © 2020-2023  润新知