高德地图实现矩形围栏绘制和编辑

需求:

在地图上实现围栏绘制,并在围栏区域显示相应的数据,围栏可编辑

实现:

在高德地图上绘制围栏:

高德地图实现矩形围栏绘制和编辑_第1张图片

高德地图实现矩形围栏绘制和编辑_第2张图片

绘制围栏和编辑围栏使用高德自带的插件AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool

直接贴入代码如下:




    
    
    
    编辑折线、多边形、圆
    
    
    


补充:清除围栏(判断是否已经存在,添加按钮

//删除围栏
				$(".btn-polydelete").on("click",function(){
					var polyArr = map.getAllOverlays('polygon');	
					if(polyArr.length==0){$.msg("无围栏",5);}else{map.remove(polyArr);}
				});

绘制完毕后获取路径所在交叉点经纬度

				//绘制完毕
				mouseTool.on("draw",function(data){
					//得到绘制图形对象连接点经纬度
					console.log("polyArr",data.obj.getPath());
//ajax在此处处理
				}

现在有一问题,由于AMap.MouseTool绘制的矩形无论通过map.getAllOverlays('polygon')获取,或是通过监听draw事件获取得到的obj,均为一个多边形对象,而不是一个矩形对象,无法通过矩形编辑插件AMap.RectangleEditor直接进行编辑,只能通过多边形编辑工具进行编辑,因此,很好奇是否可以把多边形矩形对象转为矩形对象,或者在哪里能获取到最后绘制出来的矩形对象???最后,关于围栏取值原理就是将矩形四个点的经纬度传给后台,后台接口返回这四个经纬度范围内的相关数据,前端拿出来渲染到地图上,具体不详细讲解~关于上面的问题请教大伙,自己也会继续研究寻找方案~

你可能感兴趣的:(Js,CSS,图表)