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

2020-03-18 21:14:50

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

需求:

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


实现:


在高德地图上绘制围栏:






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



  • 2019-11-26 11:08:02

    多边型无序点排序(地图绘制多边形)

    任务需求要做一个区域高亮的功能,用到地图,想到了高德地图的多边形API,但是多边形顶点的顺序是要有序的,需求是无序,在API查找无果的情况下,只能手动实现点集合排序。

  • 2019-11-26 11:11:59

    正多边形的编程绘制(javascript)

    如何用程序来绘制正多边形? 在一般情况下,会使用 x = radius * Math.cos(angle), y = radius * Math.sin(angle) 来进行绘制,但这是关于x轴对称的,如果遇到正多边形的边数为奇数,而你又希望它是以y轴对称时,可按照下面的方法。

  • 2019-11-26 13:36:28

    Vue组件命名找不到的问题以及如何给vue组件命名

    首先,Vue 会将 template 中的内容插到 DOM 中,以方便解析标签。由于 HTML 标签不区分大小写,所以在生成的标签名都会转换为小写。例如,当你的 template 为 <MyComponent></MyComponent> 时,插入 DOM 后会被转换为 <mycomponent></mycomponent>。 然后,通过标签名寻找对应的自定义组件。匹配的优先顺序从高到低为:原标签名、camelCase化的标签名、PascalCase化的标签名。例如 <my-component>会依次匹配 my-component、myComponent、MyComponent。camelCase 和 PascalCase 的代码

  • 2019-11-28 11:00:35

    Vue子组件调用父组件的方法

    下面有三种方法,我自己重点推荐第一种,毕竟这种简单粗暴好用好理解,不过这个有一个弊端,再组件嵌套组件的时候,尤其是用第三方组件里面调用自己的子组件的时候,其实已经是孙子组件了,这个时候就要parent.parent。。。。,这样就不好了,我们就得考虑其他方法了,具体怎么判断是父组件,还是爷爷组件,我会单独出一篇文章讲述。

  • 2019-11-29 13:04:47

    计算一个多边形的重心点坐标(准确版)

    在之前的 《如何判断一个多边形是否合法》 一文中有提到,用无人机规划飞行路线前,往往需要框选一个多边形的区域。 而在地图控件上显示这个多边形区域时,往往会遇到这样一个需求:需要把所要测绘的多边形区域移动到地图中心。 实现这个需求的基本思路就是:获取到多边形区域的重心点坐标,然后利用地图控件的 setCenter方法,就可以把地图的显示中心移动到多边形区域重心了。那么问题来了,如何求出一个多边形的重心点坐标呢?