参考地址 高德地图实现矩形围栏绘制和编辑
需求:
在地图上实现围栏绘制,并在围栏区域显示相应的数据,围栏可编辑
实现:
在高德地图上绘制围栏:
绘制围栏和编辑围栏使用高德自带的插件AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool
直接贴入代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>编辑折线、多边形、圆</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="开始绘制矩形" onClick="editor.startDrawPolygon()"/>
<input type="button" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
<input type="button" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
</div>
<script>
var editorTool, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.403322, 39.900255],//地图中心点
zoom: 13 //地图显示的缩放级别
});
var editor={};
map.setFitView();
//绘制多边形
var mouseTool = new AMap.MouseTool(map);
editor.startDrawPolygon = function(){
mouseTool.rectangle();
}
//编辑多边形
editor.startEditPolygon=function(){
editor._polygonEditor= new AMap.PolyEditor(map, map.getAllOverlays('polygon')[0]);
//注意通过map.getAllOverlays("polygon")对象获得的是一个数组,故取数组第一个对象
editor._polygonEditor.open();
}
editor.closeEditPolygon=function(){
editor._polygonEditor.close();
}
</script>
</body>
</html>
补充:清除围栏(判断是否已经存在,添加按钮<button class="btn-polydelete"></button>)
//删除围栏
$(".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直接进行编辑,只能通过多边形编辑工具进行编辑,因此,很好奇是否可以把多边形矩形对象转为矩形对象,或者在哪里能获取到最后绘制出来的矩形对象???最后,关于围栏取值原理就是将矩形四个点的经纬度传给后台,后台接口返回这四个经纬度范围内的相关数据,前端拿出来渲染到地图上,具体不详细讲解~关于上面的问题请教大伙,自己也会继续研究寻找方案~