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

最新推荐文章于 2024-08-06 14:47:35 发布

ProgrammarQin

最新推荐文章于 2024-08-06 14:47:35 发布

阅读量2.4w

点赞数 2

分类专栏： Js CSS 图表文章标签：高德地图 HTML CSS JS

本文链接：https://blog.csdn.net/ProgramarQin/article/details/79473536

版权

Js 同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

图表

5 篇文章 0 订阅

订阅专栏

需求：

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

实现：

在高德地图上绘制围栏：

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