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

zoukankan html css js c++ java

【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现
最近项目上涉及到地图，考虑到精度等问题，最终选择了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 ?

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<meta http-equiv="content-type" content="text/html; charset=GB2312"/>

<style type="text/css">v:*{behavior:url(#default#VML);}</style>

<style type="text/css">

html,body

{

    background:#FFFFFF;

    overflow : auto;

}

table

{

    font-size:12px;

    font-weight:bold;

    color:#E066FF;

}

input

{

    font-size: 12px;

    color:#E066FF;

}

</style>

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>

<script language="javascript" src="http://api.51ditu.com/js/traffic.js"></script>

<script language="javascript">

    var map;

    var mgr;

    var poit;

    var scaleControl;          /* 比例尺控件 */

    var icon;                  /* 标注自定义图标样式 */

     var mapText;               /* 添加文字标签 */

     var controlZoom;           /* 拉框放大控件 */

     var controlDistance;       /* 测距离控件 */

      var controlMianji;         /* 侧面积控件 */

      var aryRightMenu;         /* 右键菜单数组 */

      var zoomIn;                /* 右键放大 */

      var zoomOut;               /* 右键缩小 */

      var markerRightMenu;       /* 右键添加标注 */

      var menuRightMenu;         /* 添加右键菜单控件到地图上 */

      var LatMin;                /* 矩形框的边界值，最小维度  */

      var LatMax;                /* 矩形框的边界值，最大维度  */

      var LonMin;                /* 矩形框的边界值，最小经度  */

      var LonMax;                /* 矩形框的边界值，最大经度  */

      var rect;                  /* 矩形框对象 */

      var controlOfweilan;       /* 建立新的拉框查找控件对象 */

      var markerToDrag;          /* 可拖拽的标注对象 */









    /*===================== 主函数 ===================== */

    function onLoad()

    {

        map=new LTMaps("mapDiv");           /* 创建地图 */

        point = new LTPoint( 10645971,2956742 );

        map.centerAndZoom( point,2 );



        map.setMapCursor("hand","move");        /* 设置鼠标在地图上的形状 */

        map.addControl(new LTStandMapControl());

        map.addControl(new LTOverviewMapControl());     /* 添加鹰眼 */

        mgr = new LTTraffic(map);



        scaleControl=new LTScaleControl();             /* 添加比例尺 */

        scaleControl.units=[[1000,"km"],[1,"m"]];

        scaleControl.setColor("red");

        scaleControl.setLeft(280);

          map.addControl(scaleControl);



          map.handleMouseScroll(true);          /* 鼠标滚轮操作 */

          map.mapCartoonControl(true);          /* 滚轮操作时，地图动画效果展示放大和缩小 */

          LTEvent.bind(map,"dblclick",map,function(){{this.zoomIn()}});    /* 双击放大地图 */





         icon=new LTIcon("C:\centerPoi.gif",[24,24],[12,12]);     /* 添加标注 */

         var marker = new LTMarker( point,icon );

         map.addOverLay( marker );



         LTEvent.addListener( marker , "click" , doitForMarker);   /* 给标记添加点击事件，点击显示当前的详细地理位置 */





           mapText = new LTMapText( marker );      /* 为标注添加文字标签 */

           mapText.setLabel("{2}" );

           mapText.setBackgroundColor("#CAFF70");

           mapText.setFontColor("#D15FEE");

           map.addOverLay( mapText );





          var myHtml="我在这里,这是第1个标记";

      var infoWin=mapText.openInfoWinHtml(myHtml);

            infoWin.setTitle("这里是我的标记的标题");

             LTEvent.addListener( mapText , "click" ,getClickCallBack(mapText,myHtml));







          controlZoom =  new LTZoomInControl();

          controlZoom.setTop( 400 );

          controlZoom.setLeft( 30 );

          controlZoom.setLabel("拉框放大");            /*拉框放大*/

          map.addControl(controlZoom);







          controlDistance=new LTPolyLineControl();

           controlDistance.setTop( 350 );

           controlDistance.setLeft( 30 );

           controlDistance.setLabel(" 测距离 ");     /*测距离按钮*/

            controlDistance.lineColor="red";

            controlDistance.lineStroke=1;

            controlDistance.lineOpacity=1;

            controlDistance.lineStyle="ShortDash";

            controlDistance.lineArrow=["Open","Open"];

            map.addControl(controlDistance);

            LTEvent.addListener(controlDistance,"draw",onDraw);





          controlMianji = new LTPolygonControl();

           map.addControl( controlMianji );

           controlMianji.setTop( 300 );

           controlMianji.setLeft( 30 );

           controlMianji.setLabel(" 测面积 ");      /*测面积按钮*/





        aryRightMenu = new Array();



      zoomIn = new LTMenuItem();            /* 右键放大 */

      zoomIn.id = "zoomIn";

      zoomIn.menuText = "放大";

      zoomIn.functionName = mapZoomIn;

      aryRightMenu.push(zoomIn);



      zoomOut = new LTMenuItem();         /* 右键缩小 */

      zoomOut.id = "zoomOut";

      zoomOut.menuText ="缩小";

     zoomOut.functionName = mapZoomOut;

     aryRightMenu.push(zoomOut);



       markerRightMenu = new LTMenuItem();    /* 右键添加标注 */

       markerRightMenu.id = "marker";

       markerRightMenu.menuText ="在此添加标注";

       markerRightMenu.functionName = mapMarker;

       aryRightMenu.push(markerRightMenu);



       menuRightMenu = new LTMenuControl(aryRightMenu);  /* 添加右键菜单控件到地图上 */

       map.addMenuControl(menuRightMenu);







                    controlOfweilan = new LTZoomSearchControl("red","red",1,0.4);       /* 建立新的拉框查找控件 */

                    controlOfweilan.setTop( 450 );

                    controlOfweilan.setLeft( 30 );

                    controlOfweilan.setLabel("电子围栏" );

                    map.addControl(controlOfweilan);            /* 添加控件到地图 */



                    markerToDrag=new LTMarker(point);

                    markerToDrag.enableDrag();

                    map.addOverLay(markerToDrag);

                    LTEvent.addListener(markerToDrag,"dragend",onDragEnd);   /* 设置用户在拖拽标记之后执行onDragEnd函数 */

                    LTEvent.addListener(controlOfweilan,"mouseup",doit);               /* 设置在用户拉框完成之后执行doit函数 */











    }









    /*======================  在标记被点击的时候执行的函数,marker的onClick监听的事件 ====================== */

    function doitForMarker()

    {

        onClickForMarker();

    }





    /*======================  在标记被点击的时候执行的函数 ====================== */

    function onClickForMarker()

     {

    var reg=new LTRegoLoader();

     LTEvent.bind(reg,"loaded",reg,myLocation);

    reg.loadDescribe(point);

     }



     /*======================  onClickForMarker函数中，reg对象绑定的事件myLocation ====================== */

     function myLocation(obj)

     {

    var myHtml = obj.describe;   /* 逆地理信息描述 */

     var infoWin=mapText.openInfoWinHtml(myHtml);

     infoWin.setTitle("当前具体位置");

    }





      /*====================== 本函数是在用户每次拉框操作完成之后执行的操作，bounds是代表用户拉框选择的区域的范围 ====================== */

                    function doit(bounds)

                    {

                        var str="电子围栏区域坐标为： ";

                        str+="起点："+bounds.getXmin()+","+bounds.getYmax()+" ";

                        str+="终点："+bounds.getXmax()+","+bounds.getYmin()+" ";

                        alert(str);



                        LatMin  = bounds.getYmin();    /*  保存当前矩形框的经纬度值，在后面的判断中要用到 */

                        LatMax = bounds.getYmax();



                        LonMin = bounds.getXmin();

                        LonMax = bounds.getXmax();



                        rect = new LTRect(bounds);    /* 矩形框对象 */

                        map.addOverLay(rect);          /* 将矩形框对象添加到地图上 */



                    }





  /*====================== 本函数是在用户每次拖拽标注操作完成之后执行的操作 ======================*/

                        function onDragEnd(point)

                        {

                            var str="标注被拖动到： ";

                            str+="经度："+point.getLongitude()+" ";

                            str+="纬度："+point.getLatitude()+ " ";

                            alert(str);



                            if(point.getLongitude()>LonMin && point.getLongitude()<LonMax && point.getLatitude()<LatMax && point.getLatitude()>LatMin)

                             {

                                alert("您当前的位置在矩形内，OK！");

                                rect.setLineColor("blue");

                                 rect.setFillColor("green");

                                 rect.setLineStroke(3);

                             }

                            else

                            {

                                 alert("您的位置不在在矩形内，Warning！");

                                rect.setLineColor("red");

                                rect.setFillColor("red");

                                rect.setLineStroke(5);

                            }



                        }





    /*====================== 右键菜单====================== */

     function mapZoomIn(){  map.zoomIn();   }

      function mapZoomOut(){ map.zoomOut();   }

      function mapMarker(p){  var markerRightMenu0 = new LTMarker(p);  map.addOverLay(markerRightMenu0);  }







    /*====================== 测距====================== */

       function onDraw(points,length,polyline)

             {

                 alert("结束测距");

            }







    /*====================== 添加信息浮窗 ====================== */

            function getClickCallBack(mapText,myHtml)

             {

                return function()

                {

                    mapText.openInfoWinHtml( myHtml );

                }

             }





    /*====================== 打开实时交通 ====================== */

    function openTraffic()

    {

        mgr.addTips();     /* 显示路况提示信息*/

        if(mgr.getTrafficEnabled())     /* 判断实时交通是否开启,true为开启，false为关闭 */

        {

            alert("实时交通已经开启");

            return;

         }

        var city = document.getElementById("city");   /* 将地图定位到下拉菜单所显示的城市*/

        map.centerAndZoom(city.value,8);

        mgr.openTraffic(city.value);                                  /*打开实时交通*/



    }





    /*====================== 关闭时实交通 ======================*/

    function closeTraffic()

    {

        mgr.removeTips();      /*  显示路况提示信息 */

        mgr.closeTraffic();      /*  关闭时实交通 */

    }







    /*====================== 更换城市 ====================== */

    function changeCity()

    {



        if(mgr && mgr.getTrafficEnabled())  /*如果实时交通已打开，将其关闭*/

        {

            mgr.closeTraffic();

        }



        var city = document.getElementById("city");

        map.centerAndZoom(city.value,8);             /* 将地图定位到下拉菜单所显示的城市 */

   }







</script>

</head>

<body onLoad="onLoad()">

    <body   leftmargin= "0 "   topmargin= "0 "   marginwidth= "0"   marginheight= "0 ">

    <div id="mapDiv" style="position:absolute;100%; height:100%;"></div>

    <div id="trafficID" style="position:absolute;right:180px;">

        <table>

            <tr>

                <td>实时路况：

                    <select id="city" onChange="changeCity();">

                        <option value="beijing">北京</option>

                        <option value="shanghai">上海</option>

                        <option value="guangzhou">广州</option>

                        <option value="shenzhen">深圳</option>

                        <option value="chengdu">成都</option>

                        <option value="chongqing">重庆</option>

                        <option value="shenyang">沈阳</option>

                    </select>

                    <input type="button" name="button" value="开启" onClick="openTraffic();">

                    <input type="button" name="button" value="关闭" onClick="closeTraffic();">

                </td>

            </tr>

        </table>

    </div>

</body>

</html>
查看全文

相关阅读:
ASP日期格式化函数
 HTML友情链接代码
 JS判断是否为数字或为空
 ASP查询数据RS转换成COMMAND
PHP文本的读写
 负边距的应用
 EntityFramework数据持久化 Linq介绍
 EntityFramework数据持久化 Linq介绍
 EntityFramework数据持久化 Linq介绍
 EntityFramework数据持久化 Linq语法应用

原文地址：https://www.cnblogs.com/jjg0519/p/6674072.html