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

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



  • 2017-05-12 16:33:24

    说说JSON和JSONP,也许你会豁然开朗

      JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

  • 2017-05-25 23:18:23

    webpack图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用场景。

  • 2017-06-17 18:33:17

    NodeJs使用asyncAwait两法

    async/await使用同步的方式来书写异步代码,将异步调用的难度降低到接近于0,未来必将大放异彩。然而在当下,由于标准化的缓存步伐,async/await尚在ES7的草案中。为了尝先,特试用了下面两种方式:

  • 2017-06-18 02:26:17

    Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F

    我们可以看到错误提示中的字符0xF0 0x9F 0x98 0x84 ,这对应UTF-8编码格式中的4字节编码(UTF-8编码规范)。正常的汉字一般不会超过3个字节,为什么为出现4个字节呢?实际上是它对应的是智能手机输入法中的表情。那为什么会报错呢?

  • 2017-06-18 02:34:22

    谈mysql中utf8和utf8mb4区别

    MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode。好在utf8mb4是utf8的超集,除了将编码改为utf8mb4外不需要做其他转换。当然,为了节省空间,一般情况下使用utf8也就够了。