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

2024-07-15 02:19| 来源: 网络整理| 查看: 265

需求：

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

实现：

在高德地图上绘制围栏：

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

直接贴入代码如下：

编辑折线、多边形、圆 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(); }

补充：清除围栏（判断是否已经存在，添加按钮）

//删除围栏 $(".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直接进行编辑，只能通过多边形编辑工具进行编辑，因此，很好奇是否可以把多边形矩形对象转为矩形对象，或者在哪里能获取到最后绘制出来的矩形对象？？？最后，关于围栏取值原理就是将矩形四个点的经纬度传给后台，后台接口返回这四个经纬度范围内的相关数据，前端拿出来渲染到地图上，具体不详细讲解~关于上面的问题请教大伙，自己也会继续研究寻找方案~

【本文地址】

公司简介

联系我们