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

原文链接 (82条消息) 高德地图图形面积计算_☆→winny←☆的博客-CSDN博客_高德地图计算面积

本文为高德地图在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(), '获取矩形的属性')
  })
},
}