- 浏览: 530286 次
文章分类
最新评论
-
chaodilei:
我可以提个意见吗?作为前端工程师,写博客应该注意段落标题的ba ...
我的前端之路 -
zhuchao_ko:
大家一起二。
我的前端之路
【开源】电子围栏-测距离-测面积-拉框放大-实时路况-逆地理编码的实现
最近项目上涉及到地图,考虑到精度等问题,最终选择了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)功能:鼠标右键。
状态:解决了一部分。
问题:功能单一,还需扩展。
五、雏形版本截图:
六、附源代码:
<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="电子围栏区域坐标为:\n"; str+="起点:"+bounds.getXmin()+","+bounds.getYmax()+"\n"; str+="终点:"+bounds.getXmax()+","+bounds.getYmin()+"\n"; 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="标注被拖动到:\n"; str+="经度:"+point.getLongitude()+"\n"; str+="纬度:"+point.getLatitude()+ "\n"; 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;width: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>
相关推荐
开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列开源GIS---java系列...
Lua游戏服务器框架开源源码-----crossover
天若OCR开源本地版-可离线使用 天若OCR开源本地版-可离线使用 天若OCR开源本地版-可离线使用 天若OCR开源本地版-可离线使用天若OCR开源本地版-可离线使用 天若OCR开源本地版-可离线使用 天若OCR开源本地版-可离线...
开源时代 1-4 开源时代 1-4 开源时代 1-4 开源时代 1-4 开源时代 1-4 开源时代 1-4
传入经纬度,解析出地址信息,性能:4ms/条 地址精度到乡镇街道,包含城市等级,精度满足一般的需求,如对精度要求极高请勿下载
开源时代5-8 开源时代5-8 开源时代5-8 开源时代5-8 开源时代5-8
帝国cms开源版utf-8,非常强大的php+mysql的cms
开源BBS--JForum 源码 开源BBS--JForum 源码
前端开源库-electron-installer-dmg电子安装程序dmg,为您的电子应用程序创建dmg安装程序。
开源项目-didip-stopwatch.zip,用于测量事物延迟的小型库
Java Geocoder关于PinPoint地理编码项目Java Geocoder是基于Java,Spring,Hibernate,PostgreSQL,美国人口普查数据和辛苦工作建立的开源地理编码服务! 通过添加Geocoder模块,该应用程序分为多个层:控制器,服务...
前端开源库-lazy-dependable懒惰可靠,通过懒惰依赖解析实现可靠
前端开源库-js-md5JS-MD5是一个简单的用于JavaScript的MD5哈希函数,支持UTF-8编码。
前端开源库-es6-promise-poolES6 Promise池,在限制并发性的池中运行Promise。
JavaEE主流开源框架-Struts部分rmvb格式. JavaEE主流开源框架-Struts部分rmvb格式. JavaEE主流开源框架-Struts部分rmvb格式. JavaEE主流开源框架-Struts部分rmvb格式. JavaEE主流开源框架-Struts部分rmvb格式. ...
开源CPU--OpenRISC架构介绍。 基于OpenRISC的开发板设计与实现。 以及FPGA Free training计划。
前端开源库-fast-sass-loader-chinaFast Sass Loader China,用于Webpack的Fast Sass Loader
适用于Android的开源Messenger应用 - 能实时消息收发,语音和视频通话
前端开源库-ipld-rawipld raw,ipld raw格式的javascript实现。
Greenplum开源数据仓库-实现100亿监控数据的秒级分析-萧少聪 Greenplum开源数据仓库 在阿里云中Greenplum的扩展