高德地图画多边形地理围栏（完美修改版）

今天上午的时候菠菜园记录了一份《高德地图画多边形地理围栏并保存边界经纬度》，尽管实现了在高德地图上绘制多边形区域，但是在实际使用中灵活性不是很高。因此在查阅了高德相关API后，对上一篇笔记中的代码进行了二次修改。增加了多边形的拖动，拖动后边界经纬度的获取，多边形区域的清除和重绘。以便用户在绘制错误后，可以不用通过刷新页面就能随时、任意地修改。

高德地图画多边形地理围栏

新增图标：https://www.zkii.net/wp-content/uploads/2023/03/map_marker.png

参考源码：

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  6.     <title>编辑折线、多边形、圆</title>
  7.     <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
  8.     <script src="https://webapi.amap.com/maps?v=1.4.4&key=你申请的Key&plugin=AMap.PolyEditor"></script>
  9.     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  10.     <script src="https://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
  11.     <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  12.     <style type="text/css" media="screen">
  13.         .button-group {position: absolute;top: 0px;right: 20px;font-size: 12px;padding: 10px;}
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="container"></div>
  18. <div class="button-group">
  19.     <input type="button" class="button" value="清除当前区域" onClick="clearCurrentArea();"/>
  20.     <input type="button" class="button" value="区域编辑完成" onClick="closeEditPolygon();"/>
  21. </div>
  22. <script>
  23.     var storage = window.localStorage;
  24.     storage.removeItem('FenceRegion');
  25.     var editorTool, map = new AMap.Map("container", {
  26.         resizeEnable: true,
  27.         //center: [116.403322, 39.900255],//地图中心点
  28.         zoom: 13 //地图显示的缩放级别
  29.     });
  30.     var beginNum = 0;
  31.     var clickListener ;
  32.     var beginPoints;//存坐标的数组
  33.     var beginMarks ;
  34.     var polygonEditor;
  35.     var resPolygon = [];
  36.     var resNum = 0;
  37.     var editRegion = storage.getItem("FenceRegion");
  38.     var polygonObj;
  39.     init();
  40.     function init(){
  41.         beginPoints = [];
  42.         beginMarks = [];
  43.         beginNum = 0;
  44.         polygonEditor = '';
  45.         if(editRegion){
  46.             beginPoints = JsonToArray(editRegion);
  47.             console.log(beginPoints);
  48.             var polygon = createPolygon(beginPoints);
  49.             polygonEditor = createEditor(polygon);//如果是要不可编辑状态去掉此行
  50.         }else{
  51.             clickListener = AMap.event.addListener(map, "click", mapOnClick);
  52.         }
  53.     }
  54.     //清除当前区域选择，并支持重新划定区域
  55.     function clearCurrentArea() {
  56.         map.remove(polygonObj)
  57.         storage.removeItem('FenceRegion');
  58.         editRegion = storage.getItem("FenceRegion");
  59.         polygonEditor.close();
  60.         init()
  61.     }
  63.     function mapOnClick(e) {
  64.         beginMarks.push(addMarker(e.lnglat));
  65.         console.log(e.lnglat);
  66.         beginPoints.push(e.lnglat);
  67.         beginNum++;
  68.         if(beginNum == 3){
  69.             AMap.event.removeListener(clickListener);
  70.             var polygon = createPolygon(beginPoints);
  71.             polygonEditor = createEditor(polygon);
  72.             clearMarks();
  73.         }
  74.     };
  76.     /*创建多边形*/
  77.     function createPolygon(arr){
  78.         var polygon = this.polygon = new AMap.Polygon({
  79.             map: map,
  80.             path: arr,
  81.             strokeColor: "#f8484c",
  82.             strokeOpacity: 1,
  83.             strokeWeight: 3,
  84.             fillColor: "#f8484c",
  85.             fillOpacity: 0.35,
  86.             draggable:true
  87.         });
  88.         polygonObj = polygon;
  89.         return polygon;
  90.     }
  92.     function createEditor(polygon){
  93.         var polygonEditor = new AMap.PolyEditor(map, polygon);
  94.         polygonEditor.open();
  95.         AMap.event.addListener(polygonEditor,'end',polygonEnd);
  96.         AMap.event.addListener(polygon,'dragend',DragEnd);
  97.         return polygonEditor;
  98.     }
  99.     //多边形拖拽后，获取新的轮廓坐标
  100.     function DragEnd(r){
  101.         var pathArr = r.target.getPath();
  102.         var FenceRegion = [];
  103.         beginPoints = [];
  104.         pathArr.forEach(function (item) {
  105.             var lng = parseFloat(item['lng']);
  106.             var lat = parseFloat(item['lat']);
  107.             FenceRegion.push([lng,lat]);
  108.             beginPoints.push(item);
  109.         })
  110.         var newRegion = ObjectToJson(FenceRegion);
  111.         storage.setItem("FenceRegion",newRegion);
  112.     }
  114.     function closeEditPolygon(){
  115.         if(!polygonEditor){
  116.             console.log('未获取到地图');
  117.             return false;
  118.         }
  119.         //polygonEditor.close();//关闭编辑状态
  120.         var FenceRegion = [];
  121.         if(!beginPoints){
  122.             console.log('未获取到坐标');
  123.             return false;
  124.         }
  125.         beginPoints.forEach(function(item,index){
  126.             var lng = parseFloat(item['lng']);//经
  127.             var lat = parseFloat(item['lat']);//纬
  128.             FenceRegion.push([lng,lat]);
  129.         });
  130.         var newRegion = ObjectToJson(FenceRegion);
  131.         console.log(newRegion);
  133.         storage.setItem("FenceRegion",newRegion);
  134.     }
  136.     function polygonEnd(res){
  137.         resPolygon.push(res.target);
  138.         alert(resPolygon[resNum].contains([longitude, latitude]));
  139.         appendHideHtml(resNum,res.target.getPath());
  140.         resNum++;
  141.         init();
  142.     }
  144.     function clearMarks(){
  145.         map.remove(beginMarks);
  146.     }
  148.     function JsonToArray(json){
  149.         var arr = JSON.parse(json);
  150.         var res = [];
  151.         for (var i = 0; i < arr.length; i++) {
  152.             var line = [];
  153.             line.push(arr[i].lng);
  154.             line.push(arr[i].lat);
  155.             res.push(line);
  156.         };
  157.         return res;
  158.     }
  160.     // 实例化点标记
  161.     function addMarker(lnglat) {
  162.         var marker = new AMap.Marker({
  163.             icon: "https://www.zkii.net/wp-content/uploads/2023/03/map_marker.png",
  164.             position: lnglat
  165.         });
  166.         marker.setMap(map);
  167.         return marker;
  168.     }
  170.     function ObjectToJson(arr){
  171.         if(!arr.length) return null;
  172.         var i = 0;
  173.         len = arr.length,
  174.             array = [];
  175.         for(;i<len;i++){
  176.             array.push({"lng":arr[i][0],"lat":arr[i][1]});
  177.         }
  178.         return JSON.stringify(array);
  179.     }
  180. </script>
  181. </body>
  182. </html>

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！