vue2+高德地图绘制多个圆形覆盖物和多边形覆盖物

直接贴代码

1. 添加复选款

 <el-checkbox v-model="checkedAri" @change="banAriFly">查看限飞区</el-checkbox>

2. 为复选款添加事件

banAriFly () {
      // console.log(this.map, "这个事点击的")
      // console.log("这个是未添加括号的：" + this.mapMoveend, "这个是添加括号的：" + this.mapMoveend())
      if (this.checkedAri) {
        //绑定事件（不加括号绑定的就是一个函数，加了括号就是直接执行了那个函数）
        this.map.on('movestart', this.mapMovestart);
        this.map.on('mapmove', this.mapMove);
        this.map.on('moveend', this.mapMoveend)
      } else {
        //解除绑定事件（不加括号绑定的就是一个函数，加了括号就是直接执行了那个函数）
        this.map.off('movestart', this.mapMovestart);
        this.map.off('mapmove', this.mapMove);
        this.map.off('moveend', this.mapMoveend)
        if (this.circlesList.length > 0) {
          for (var i = 0; i < this.circlesList.length; i++) {
            let circle = this.circlesList[i]
            this.map.remove(circle);
          }

        }
        if (this.polygonList.length > 0) {
          for (var i = 0; i < this.polygonList.length; i++) {
            let polygon = this.polygonList[i]
            this.map.remove(polygon);
          }
        }
      }
    },

3. 接口请求封装

    //接口请求数据
    getData (params) {
      let url = "you request api";
      return axios.get(url, { params: params }).then(response => {
        return response.data;
      })
    },

4. 调用接口，根据接口请求返回的数据进行实例化覆盖物对象并添加到地图

 //地图移动结束事件s
    mapMoveend () {
      console.log("地图移动结束")
      console.log(this.center.split(","))
      this.ariPlane.lat = this.center.split(",")[1]
      this.ariPlane.lng = this.center.split(",")[0]
      console.log(this.ariPlane, "这个是打印经纬度")
      const params = {
        lng: this.ariPlane.lng,
        lat: this.ariPlane.lat,
      }

      this.getData(params).then(res => {
        // 数据渲染前，先把上一次赋值的进行清空操作
        if (this.circlesList.length > 0) {
          for (var i = 0; i < this.circlesList.length; i++) {
            let circle = this.circlesList[i]
            this.map.remove(circle);
          }

        }
        if (this.polygonList.length > 0) {
          for (var i = 0; i < this.polygonList.length; i++) {
            let polygon = this.polygonList[i]
            this.map.remove(polygon);
          }
        }
        this.circlesList = []
        this.polygonList = []
        this.ariPlaneAreas = res.areas
        this.ariPlaneAreas.map((item) => {
          if (item.sub_areas == null || item.sub_areas.length == 1) {
            // 创建圆形覆盖物
            let circleItem = this.createCircle(item)
            this.circlesList.push(circleItem)
          } else {
            item.sub_areas.map(items => {
              let polygonItem = this.createPolygon(items)
              this.polygonList.push(polygonItem)

            })
          }
        })

        if (this.circlesList.length > 0 && this.polygonList.length > 0) {
          console.log("circlesList=", this.circlesList)
          this.map.add(this.circlesList)
          this.map.add(this.polygonList)
        }
      });
    },

5. 封装圆形覆盖物以及多边形覆盖物实例函数

    // 创建圆形 
    createCircle (data) {
      this.circle = new AMap.Circle({
        center: [data.lng, data.lat],
        radius: data.radius,
        strokeColor: data.color,
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: data.color,
        fillOpacity: 0.35
      });
      return this.circle;
    },

    //创建多边形
    createPolygon (data) {
      let pathPolygon = data.polygon_points[0]
      this.polygon = new AMap.Polygon({
        path: pathPolygon,//设置多边形边界路径
        strokeColor: data.color, //线颜色
        strokeOpacity: 0.5, //线透明度
        strokeWeight: 2,    //线宽
        fillColor: data.color, //填充色
        fillOpacity: 0.35//填充透明度
      });
      return this.polygon;
    },

6.注意每次请求发完以后获取到的数据将覆盖物画完以后需要清除掉，不然每次请求的数据有重复的返回数据就会导致界面所画的覆盖物重复绘画导致一个覆盖物绘制多次，使得界面发现卡顿现象