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

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



  • 2018-12-13 17:17:02

    轻松实现动态获取Android手机CPU架构类型

    .so文件是unix的动态连接库,是二进制文件,作用相当于windows下的.dll文件。 他使用了C/C++代码编写的可以操作硬件比java更高级的 底层代码,执行速度和效率比其他语言要高。 在Android中调用动态库文件(*.so)都是通过jni的方式。

  • 2018-12-13 22:48:48

    Android MultiDex实践:如何绕过那些坑?

    MultiDex, 顾名思义,是指多dex实现,大多数App,解压其apk后,一般只有一个classes.dex文件,采用MultiDex的App解压后可以看到有classes.dex,classes2.dex,… classes(N).dex,这样每个dex都可以最大承载65k个方法,很大限度地缓解了单dex方法数限制。

  • 2018-12-14 13:32:18

    解决chrome调试手机模式没有鼠标问题

    F12后,切换到手机模式,方向没有鼠标,这对于调试前端页面来说无疑是一大难题,看不见只能盲点, 以为是浏览器问题,清理缓存,升级浏览器,清除插件等都不好使。 后来查到资料说是显卡问题。果然还真是显卡问题。

  • 2018-12-14 17:12:51

    Android APP适配全面屏手机的技术要点

    全面屏是手机业界对于超高屏占比手机设计的一个宽泛的定义。从字面上解释就是,手机的正面全部都是屏幕,四个边框位置都是采用无边框设计,追求接近100%的屏占比。但受限于目前的技术,还不能做到手机正面屏占比100%的手机。现在业内所说的全面屏手机是指真实屏占比可以达到80%以上,拥有超窄边框设计的手机。

  • 2018-12-14 17:15:50

    Android适配刘海屏沉浸式状态栏的一些坑

    18年简直是刘海元年,所有手机都在跟风刘海屏,甚至每个厂商还有自己的一套适配规范。我的初始需求很简单,就是做一个全屏显示的页面,一般情况下只需要开启Android规范的全屏模式就好:

  • 2018-12-16 12:12:12

    android:windowSoftInputMode属性具体解释

    android:windowSoftInputMode属性一共同拥有9个取值。各自是: stateUnspecified,stateUnchanged。stateHidden,stateAlwaysHidden。stateVisible,stateAlwaysVisible,adjustUnspecified,adjustResize。adjustPan。

  • 2018-12-16 18:14:23

    Android在代码中设置状态栏半透明/全透明

    顶部是有文字,小图标等,如果直接用透明半透明 状态栏上的东西会与内容重叠(你觉得无所谓也可以直接用上面2部分代码),这样我们就想做成类似支付宝这样的效果: