使用AMap.Polygon和AMap.PolyEditor插件绘制和编辑多边形
使用MouseTool插件可以在地图上绘制Marker、Polyline、Polygon和Circle
官方文档
1.gif

MouseTool结合AMap.PolyEditor实现动态画区域及区域编辑

  1. <script src="https://webapi.amap.com/maps?
  2.     v=1.4.15&key=key&plugin=AMap.MouseTool,AMap.PolyEditor"></script>


  1. <el-form-item label="添加区域" prop="sceneRange">
  2.     <el-button  :disabled="noClick" @click="addArea" size="mini" v-model="addForm.sceneRange" >添加区域</el-button>
  3. </el-form-item>

  • 用mouseTool添加区域后开启编辑区域

    1. methods:{
    2.   addArea(){
    3.       if (this.noClick == false) {
    4.           this.noClick = true
    5.           var self = this；
    6.           var mouseTool = null;
    7.           mouseTool = new AMap.MouseTool(this.map);
    8.          //同Polygon的Option设置
    9.           mouseTool.polygon({
    10.               fillColor:'#00b0ff',
    11.               strokeColor:'#80d8ff'
    12.           });
    13.           var edit;//开启区域编辑
    14.           var arr = [];//区域经纬度数据
    15.           //添加MouseTool事件监听
    16.           AMap.event.addListener( mouseTool,'draw',function(e){
    17.               //mouseTool每次只能画一个区域
    18.               if(self.map.getAllOverlays('polygon').length>0){
    19.                   mouseTool.close(false);//true为清除覆盖物
    20.               }
    21.               //获取mouseTool画区域的经纬度
    22.               var mouseToolPoint = e.obj.getPath();
    23.               for (let i = 0; i < mouseToolPoint.length; i++) {
    24.                   arr.push([mouseToolPoint[i].lng,mouseToolPoint[i].lat]);
    25.               }
    26.               //获取需要编辑的覆盖物
    27.               edit = new AMap.PolyEditor(self.map, self.map.getAllOverlays('polygon')[0]);
    28.               //编辑多边形
    29.               edit.open();
    30.               edit.on('adjust', function(event) {
    31.                   arr = [];
    32.                   for(var i=0;i<mouseToolPoint.length;i++){
    33.                       arr.push([mouseToolPoint[i].lng,mouseToolPoint[i].lat]);
    34.                   }
    35.                   //判断点是否在当前区域内
    36.                   self.isNei(arr);
    37.               })
    38.           })
    39.       }
    40.   }
    41. }

  • 编辑获取后端返回的区域数据画区域及编辑区域

    1. var polygonList = [[lon,lat],[lon,lat],[lon,lat]];
    2. this.creatPolygon(polygonList);
    1. creatPolygon(path){
    2.    var path_ = path;
    3.    var polygon = new AMap.Polygon({
    4.        map: this.map,
    5.        path: path_,//设置多边形边界路径
    6.        strokeColor: "#FF33FF", //线颜色
    7.        strokeOpacity: 0.2, //线透明度
    8.        strokeWeight: 3,    //线宽
    9.        fillColor: "#1791fc", //填充色
    10.        fillOpacity: 0.35//填充透明度
    11.    });
    12.   polygon['layerType'] = '区域矩形';
    13.   //也可以经度纬度单独相加除经纬度的个数求平均值就是中心点
    14.   this.map.setZoomAndCenter(11, [path[0].lng, path[0].lat]);
    15.   var arr = [];
    16.   var self = this;
    17.   setTimeout(()=>{
    18.      this.isNei(this.initpath);//编辑初始化
    19.      var allOverlay = this.map.getAllOverlays();
    20.      for (let i = 0; i < allOverlay.length; i++) {
    21.          if(allOverlay[i].layerType == '区域矩形'){
    22.              var cur = allOverlay[i];
    23.              var edit = new AMap.PolyEditor(this.map, cur);
    24.              edit.open();
    25.              let polygonPath =  polygon.getPath();
    26.              edit.on('adjust', function(event) {
    27.                  arr = [];
    28.                  for(var i=0;i<polygonPath.length;i++){
    29.                      arr.push([polygonPath[i].lng,polygonPath[i].lat]);
    30.                  }
    31.                  self.isNei(arr);
    32.              })
    33.          }
    34.      }
    35.  },1000);
    36. }

  • isNei 判断marker覆盖物是否处于多边形区域内，在区域内的点更换样式

    1. isNei(){
    2.   for (let i = 0; i < this.lucePoint.length; i++) {
    3.       var selectPoint = [];//当前区域内的点
    4.       //高德后端数据需要转换一次02坐标
    5.       let gcj02 = wgs84togcj02(Number(this.lucePoint[i].longitude), Number(this.lucePoint[i].latitude));
    6.       var point = [gcj02[0],gcj02[1]];
    7.       //isPointInRing为true 当前坐标则在当前多边形区域内
    8.       var isPointInRing = AMap.GeometryUtil.isPointInRing(point,polygonArr);
    9.       if(isPointInRing){  
    10.            selectPoint.push(this.lucePoint[i]);
    11.       }
    12.   }
    13.  //划区域结束后对框选的点进行样式更改 区域内的点更换样式图片
    14.   for (let i = 0; i < this.markerList.length; i++) {
    15.       var curId =  this.markerList[i].getExtData().id;
    16.       //所有坐标先初始化最初样式
    17.       this.markerList[i].setContent('<div style="position: relative;width: 20px;height: 36px;">' +
    18.        '<div style="width: 20px;">' +
    19.        '<img style="width: 25px;height: 38px;" src="'+iDefault+'">' +
    20.        '</div>' +
    21.        '</div>');
    22.     for (let k = 0; k < selectPoint.length; k++) {
    23.          //循环都是当前区域内的点
    24.           if(curId == selectPoint[k].rspId){
    25.               this.markerList[i].setContent('<div>' +
    26.                   '<div style="width: 20px;">' +       
    27.                     '<img style="width: 25px;height: 38px;" src="'+select+'">' +
    28.                   '</div>' +
    29.                   '</div>')
    30.           }
    31.       }
    32.   }
    33. }

    高德2.0版本变化

  • 多边形编辑工具名称的变化PolyEditor - PolygonEditor

    注意：重置清空区域 的话 编辑状态开启是没法清除掉的 需要edit.close()关闭编辑状态在清除 1.4.x没这个问题，直接就能全清除掉; 2.0 编辑状态 白色点是坐标点 蓝色是未生成的点 需要拖拽一次变成自己的白色点后在拖动才会生效 

  1. <script src="https://webapi.amap.com/maps?
  2.         v=2.0&key=key&plugin=AMap.MouseTool,AMap.PolygonEditor"></script>

  • 添加区域

    1. addArea() {
    2.   if (this.lucePoint.length > 0) {
    3.     if (this.noClick == false) {
    4.       this.noClick = true
    5.       var self = this
    6.       var mouseTool = null
    7.       mouseTool = new AMap.MouseTool(this.map)
    8.       mouseTool.polygon({
    9.         fillColor: '#00b0ff',
    10.         strokeColor: '#80d8ff'
    11.         // 同Polygon的Option设置
    12.       })
    13.       var edit
    14.       var arr = []
    15.       /*
    16.         2.0变化
    17.       */ 
    18.       mouseTool.on('draw', function(e) {
    19.             if (self.map.getAllOverlays('polygon').length > 0) {
    20.                 mouseTool.close(false)// true为清除覆盖物
    21.             }
    22.              /*
    23.                 2.0变化
    24.              */ 
    25.             edit = new AMap.PolygonEditor(self.map, self.map.getAllOverlays('polygon')[0])
    26.             // 编辑多边形
    27.             edit.open();
    28.             var mouseToolPoint = e.obj.getPath();
    29.             for (let i = 0; i < mouseToolPoint.length; i++) {
    30.                 arr.push([mouseToolPoint[i].lng, mouseToolPoint[i].lat])
    31.             }
    32.             self.isNei(arr)
    34.             edit.on('adjust', function(e) {
    35.                 var temp = [];
    36.                  /*
    37.                     2.0变化 需要拿到编辑后区域最新的坐标组
    38.                   */ 
    39.                 let newPolygon = self.map.getAllOverlays('polygon')[0].getPath();
    40.                 for (let i = 0; i < newPolygon.length; i++) {
    41.                     temp.push([newPolygon[i].lng,newPolygon[i].lat])
    42.                 };
    43.                  self.isNei(temp)
    44.             })
    45.         })
    46.     }
    47.   } else {
    48.     this.noClick = false
    49.     this.map.clearMap()
    50.     this.$message({
    51.       message: '当前区域没有路侧点',
    52.       type: 'warning'
    53.     })
    54.   }
    55. },

  • 编辑获取后端返回的区域数据画区域及编辑区域

    1. var polygonList = eval(this.row.sceneRange);
    2. this.creatPolygon(polygonList);
    1. creatPolygon(path) {
    2.    var path_ = path;
    3.      console.log('path_',path_);
    4.      var polygon = new AMap.Polygon({
    5.      map: this.map,
    6.      path: path_, // 设置多边形边界路径
    7.      strokeColor: '#FF33FF', // 线颜色
    8.      strokeOpacity: 0.2, // 线透明度
    9.      strokeWeight: 3, // 线宽
    10.      fillColor: '#1791fc', // 填充色
    11.      fillOpacity: 0.35// 填充透明度
    12.    })
    13.    polygon['layerType'] = '区域矩形'
    14.    this.map.setZoomAndCenter(11, [path[0].lng, path[0].lat])
    16.    var arr = []
    17.    var self = this
    19.    setTimeout(() => {
    20.      this.isNei(this.initpath)// 编辑初始化
    21.      var allOverlay = this.map.getAllOverlays()
    22.      for (let i = 0; i < allOverlay.length; i++) {
    23.        if (allOverlay[i].layerType == '区域矩形') {
    24.          var cur = allOverlay[i]
    25.          var edit = new AMap.PolygonEditor(this.map, cur)
    26.          edit.open()
    28.          edit.on('adjust', function(event) {
    29.              /*
    30.                 2.0变化 需要拿到编辑后区域最新的坐标组
    31.              */ 
    32.              var temp = [];
    33.              let newPolygon = self.map.getAllOverlays('polygon')[0].getPath();
    34.              for (let i = 0; i < newPolygon.length; i++) {
    35.                  temp.push([newPolygon[i].lng,newPolygon[i].lat])
    36.              };
    37.              self.isNei(temp)
    38.          })
    39.        }
    40.      }
    41.    }, 1000)
    42.  },

    区域查找中心点

  • 经度纬度单独相加除经纬度的个数求平均值就是中心点

    1. //经纬度平均数找中心点
    2. sumLngLat(arr) {
    3. var s = 0;
    4. var d = 0;
    5. for (var i = arr.length - 1; i >= 0; i--) {
    6.   s += arr[i].lng;
    7.   d += arr[i].lat
    8. }
    9. var lnglat = [s / arr.length, d / arr.length];
    10. return lnglat;
    11. },