转载~高德地图绘制图形并得到面积

原文链接：https://blog.csdn.net/winny0323/article/details/120787955

本文为高德地图在vue项目中的实际应用
需求：可绘制矩形/多边形/圆形 并取得对应图形的面积

我这里是截取了转载文章的部分。完整可看原文

var map = //初始化的map，看官网或者搜索初始化一下就可以，下文的map都是指此初始化的map
methods：{
	
	drawTypeChange(item,index){// 这是一个专门绘制图形的方法，绘制完成调用计算面积方法
      let self = this
      console.log(item,'ppp');
      self.childrenIndex = index
      self.pathArr = []
      switch(item.id){
        case 1:{	// 我这里1是线段，线段没有面积，就没有调用面积计算方法
          // console.log(item.name);
          this.mouseTool.polyline({
            strokeColor: "#3366FF", 
            strokeOpacity: 1,
            strokeWeight: 6,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            // strokeDasharray: [10, 5],
          })
          break
        }
        case 2:{
          // console.log(item.name);
          this.mouseTool.polygon({
            strokeColor: "#FF33FF", 
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: '#1791fc',
            fillOpacity: 0.4,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
          })
          self.graphType = 1
          self.getFuGaiWu(self)
          break
        }
        case 3:{
          // console.log(item.name);
          this.mouseTool.rectangle({
            strokeColor:'red',
            strokeOpacity:0.5,
            strokeWeight: 6,
            fillColor:'blue',
            fillOpacity:0.5,
            // strokeStyle还支持 solid
            strokeStyle: 'solid',
            // strokeDasharray: [30,10],
          })
          self.graphType = 2
          self.getFuGaiWu(self)
          break
        }
        case 4:{
          // console.log(item.name);
          this.mouseTool.circle({
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillColor: '#1791fc',
            fillOpacity: 0.4,
            strokeStyle: 'solid',
            // 线样式还支持 'dashed'
            // strokeDasharray: [30,10],
          })
          self.graphType = 3
          self.getFuGaiWu(self)
          break
        }
      }
    },
	getFuGaiWu (self) {//1：多边形、2：矩形、3：圆形 。 这是一个封装方法，主要是计算相应图形的面积
      // 这里记得携带传参vue 的 this，以便拿到绘制图形的类型
      let mo = self.mouseFunObj
      this.mouseTool.off('draw',mo.leftClickfun)
      this.mouseTool.on('draw',mo.leftClickfun = function (event) {
        console.log(self,'使用地图实践方法的时候主要 `this` 的指向，默认指向map地图',this);
        if (self.graphType == 1) {  // 1：多边形
          console.log('self.graphType == 1');
          var path = event.obj.getOptions().path
          var lng = path[0].lng
          var lat = path[0].lat
          // 计算区域面积
          var area = Math.round(AMap.GeometryUtil.ringArea(path));
          var text = new AMap.Text({
            position: new AMap.LngLat(lng, lat),
            text: '区域面积' + area + '平方米',
            offset: new AMap.Pixel(-20, -20),

          })
           event.obj.on("click", function () {	// 点击所绘形状的回调函数
           	this.hide();
          	text.hide();
           })
          map.add(text);
          map.setFitView();
        }
        else if (self.graphType == 2) { // 2：矩形
          console.log('self.graphType == 2');
          var path = event.obj.getOptions().path
          var lng = path[0].lng
          var lat = path[0].lat
          // 计算区域面积
          var area = Math.round(AMap.GeometryUtil.ringArea(path));
          var text = new AMap.Text({
            position: new AMap.LngLat(lng, lat),
            text: '区域面积' + area + '平方米',
            offset: new AMap.Pixel(-20, -20)
          })
          // event.obj.on("click", function () {
          //   this.hide();
          //   text.hide();
          // })
          map.add(text);
          // map.setFitView();
        }
        else if (self.graphType == 3) { // 3：圆形
          console.log('self.graphType == 3');
          var lng = event.obj.getOptions().center.lng
          var lat = event.obj.getOptions().center.lat
          var r = event.obj.getOptions().radius;//获取圆的半径
          var area = Math.round(3.1415926 * r * r)
          var text = new AMap.Text({
            position: new AMap.LngLat(lng, lat),
            text: '区域面积' + area + '平方米',
            offset: new AMap.Pixel(-20, -20),
            icon: new AMap.Icon({
              size: new AMap.Size(19, 81),//图标大小
              imageSize: new AMap.Size(19, 31),
              image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
            })
          })
          // event.obj.on("click", function () {
          //   this.hide();
          //   text.hide();
          // })
           map.add(text);
           map.setFitView();
        } 
        // event.obj 为绘制出来的覆盖物对象
        console.info(event.obj.getBounds(), '获取矩形范围')
        console.info(event.obj.getOptions(), '获取矩形的属性')
      })
    },
}