/** * Author: mobai * http://mobai.blog.51cto.com/ * 转载请注明出处 */
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;} #allmap {margin-right: 300px;height: 100%;overflow: hidden;} #result {border-left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } p{font-size:12px;} dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } .red{color: red;} </style> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5E5EE28a7615536d1ffe2ce2a3667859"></script> <!--加载鼠标绘制工具--> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <!--加载检索信息窗口--> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /> <title>百度地图绘制多边型带编辑功能</title> </head> <body> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> <div id="showPanelBtn" style="position:absolute;font-size:14px;top:50%;margin-top:-95px;right:0px;width:20px;padding:10px 10px;color:#999;cursor:pointer;text-align:center;height:170px;rgba(255,255,255,0.9);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;font-family:'微软雅黑';font-weight:bold;">编辑多边形<br/><</div> <div id="panelWrap" style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"> <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;" id="showOverlayInfo">此处用于展示覆盖物信息</div> <div id="panel" style="position:absolute;"></div> </div> </div> <div id="result"> <dl> <dt>绘制工具功能</dt> <ul> <li><label><input type="radio" name="openClose1" οnclick="bmap.drawingManager.open()"/>打开</label> <label><input type="radio" name="openClose1" οnclick="bmap.drawingManager.close()" checked="checked"/>关闭</label></li> </ul> </dd> <dt>是否进行线或面积的计算(单位米)</dt> <ul> <li><label><input type="radio" name="openClose" οnclick="bmap.drawingManager.enableCalculate()"/>打开</label> <label><input type="radio" name="openClose" οnclick="bmap.drawingManager.disableCalculate()" checked="checked"/>关闭</label></li> </ul> </dd> <dt>绘制功能</dt> <dd> <ul> <li> <label><input type="radio" name="drawmode" οnclick="bmap.drawingManager.setDrawingMode(BMAP_DRAWING_MARKER)" checked="checked"/>画点</label> <input type="checkbox" id="isInfowindow"/> 是否带信息窗口 </li> <li> <label><input type="radio" name="drawmode" οnclick="bmap.drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE)"/>画圆</label> </li> <li> <label><input type="radio" name="drawmode" οnclick="bmap.drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)"/>画线</label> </li> <li> <label><input type="radio" name="drawmode" οnclick="bmap.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)"/>画多边形</label> </li> <li> <label><input type="radio" name="drawmode" οnclick="bmap.drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)"/>画矩形</label> </li> </ul> </dd> <dt>覆盖物操作</dt> <dd> <ul> <li> <input type="button" value="获取绘制的覆盖物个数" οnclick="bmap.getCount()"/> <input type="button" value="清除所有覆盖物" οnclick="bmap.clearAll()"/> <input type="button" value="获取最后一个覆盖物信息" οnclick="bmap.getOverLay()"/> </li> </ul> </dd> </dl> </div> <script type="text/javascript"> /** * Author: mobai * http://mobai.blog.51cto.com/ * 转载请注明出处 */ function $(id){ return document.getElementById(id); } var bmap = { status: false, map: '', point: '', overlays: [], overlaysCache: [], myPolygon: '', myOverlay: [], drawingManager: '', styleOptions: { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时,圆形将没有填充效果。 strokeWeight: 3, //边线的宽度,以像素为单位。 strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。 fillOpacity: 0.3, //填充的透明度,取值范围0 - 1。 strokeStyle: 'solid' //边线的样式,solid或dashed。 }, /** * 实例化 */ init: function(){ if(this.status){ return; } this.status = true; this.map = new BMap.Map('map'); this.point = new BMap.Point(116.307852,40.057031); var map = this.map; var styleOptions = this.styleOptions; map.centerAndZoom(this.point, 16); map.enableScrollWheelZoom(); //实例化鼠标绘制工具 this.drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8 //工具栏缩放比例 }, circleOptions: styleOptions, //圆的样式 polylineOptions: styleOptions, //线的样式 polygonOptions: styleOptions, //多边形的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件,用于获取绘制结果 this.drawingManager.addEventListener('overlaycomplete', bmap.overlaycomplete); /*加载一个已有的多边形*/ if (this.myOverlay) { this.loadMyOverlay(); }; map.addEventListener("rightclick",function(e){ alert(e.point.lng + "," + e.point.lat); }); }, loadMyOverlay: function(){ var map = this.map; this.clearAll(); map.centerAndZoom(this.point, 11); myPolygon = new BMap.Polygon(this.myOverlay, this.styleOptions); this.myPolygon = myPolygon; try{myPolygon.enableEditing();}catch(e){}; myPolygon.addEventListener("lineupdate",function(e){ console.log(e); bmap.showLatLon(e.currentTarget.ro); }); map.addOverlay(myPolygon); }, showLatLon: function(a){ console.log(a); var len=a.length; var s = ''; var arr = []; for(var i =0 ; i < len-1; i++){ /* $.each(a,function(){ arr.push(this.lng, this.lat]); console.log(this.lng+","+ this.lat); s += '<li>'+ this.lng +','+ this.lat +'<span class="red" title="删除" οnclick="bmap.delPoint('+i+')">X</span></li>'; }); */ arr.push([a[i].lng, a[i].lat]); console.log(a[i].lng+","+ a[i].lat); s += '<li>'+ a[i].lng +','+ a[i].lat +'<span class="red" title="删除" οnclick="bmap.delPoint('+i+')">X</span></li>'; } this.overlaysCache = arr; $("panelWrap").innerHTML = '<ul>'+ s +'</ul>'; }, delPoint: function(i){ if(this.overlaysCache.length <=3 ){ alert('不能再删除, 请保留3个以上的点.'); return; } this.overlaysCache.splice(i,1); var a = this.overlaysCache; var newOverlay = []; for(var i in a ){ newOverlay.push( new BMap.Point(a[i][0],a[i][1]) ); } this.myOverlay = newOverlay; this.loadMyOverlay(); }, /** *回调获得覆盖物信息 */ overlaycomplete: function(e){ bmap.overlays.push(e.overlay); e.overlay.enableEditing(); e.overlay.addEventListener("lineupdate",function(e){ bmap.showLatLon(e.currentTarget.W); }); }, /** * 清除覆盖物 */ clearAll: function() { var map = this.map; var overlays = this.overlays; for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } this.overlays.length = 0 map.removeOverlay(this.myPolygon); this.myPolygon = ''; }, /** *取覆盖物的经纬度 */ getOverLay: function(){ var box = this.myPolygon ? this.myPolygon : this.overlays[this.overlays.length - 1]; console.log(box.W); }, getCount: function(){ var n = 0; if (this.myPolygon) { n++; }; if (this.overlays) { n = n + this.overlays.length; }; console.log(n); } }; //显示结果面板动作 var isPanelShow = false; $("showPanelBtn").onclick = showPanel; function showPanel(){ if (isPanelShow == false) { isPanelShow = true; $("showPanelBtn").style.right = "230px"; $("panelWrap").style.width = "230px"; $("map").style.marginRight = "230px"; $("showPanelBtn").innerHTML = "编辑多边形<br/>>"; } else { isPanelShow = false; $("showPanelBtn").style.right = "0px"; $("panelWrap").style.width = "0px"; $("map").style.marginRight = "0px"; $("showPanelBtn").innerHTML = "编辑多边形<br/><"; } } //加载一个已有的多边形 bmap.myOverlay = [ new BMap.Point(116.256515,39.995242), new BMap.Point(116.502579,39.951893), new BMap.Point(116.256515,39.866882) ]; bmap.init(); </script> </body> </html>
百度地图绘制多边型带编辑功能
最新推荐文章于 2024-06-25 15:48:39 发布