vue2实现高德地图测距测面工具

data() {
    return {
      // 测距相关
      distanceMakers: [],
      distanceLine: [],
      distanceText: [],
      // 测面
      areaMakers: [],
      areaPolygons: [],
      areaText: [],
      message: "",
    };
  },

 // 测距
    BalanceUse() {
      const map = this.map;
      const _this = this;
      let distance = null;
       // 创建起点
      function addMarker(lnglat) {
        const marker = new AMap.Marker({
          position: lnglat,
          map: map,
        });
        _this.distanceMakers.push(marker);
      }
      // 创建线对象
      function drawLine() {
        const path = _this.distanceMakers.map((marker) => marker.getPosition());
        const polyline = new AMap.Polyline({
          path: path,
          strokeColor: "#3366FF",
          strokeWeight: 2,
          map: map,
        });
        _this.distanceLine.push(polyline);
      }
      // 创建线节点文本
      function drawVertex() {
        // 创建文本标签
        const textLabel = new AMap.Text({
          position:
            _this.distanceMakers[_this.distanceMakers.length - 1].getPosition(),
          text: "距离为" + spaceDistance(_this.distanceMakers) + "公里",
          anchor: "bottom", // 设置文本标签锚点为底部
          offset: new AMap.Pixel(0, -30), // 设置文本标签的偏移量，使其显示在点的正上方
          style: {
            fontSize: "14px",
            fontWeight: "normal",
            fillColor: "white", // 文本颜色
            strokeWidth: 0,
            border: "none",
          },
          map: map,
        });
        _this.distanceText.push(textLabel);
      }
      // 计算距离
      function spaceDistance(markers) {
        const path = markers.map((marker) => marker.getPosition());
        if (path.length >= 2) {
          const res = Math.round(AMap.GeometryUtil.distanceOfLine(path));
          distance = res / 1000;
          console.log("distance", distance);
          
        }
        return distance.toFixed(2);
      }
      // 监听地图单击事件
      map.on("click", handleClick);
      function handleClick(e) {
        addMarker(e.lnglat);
        drawLine();
        if (_this.distanceMakers.length > 1) {
          drawVertex();
        }
      }
      // 监听地图双击事件
      map.on("rightclick", handleRightClick);
      function handleRightClick(event) {
        // console.log("rightclick", event);
        map.setDefaultCursor("default");
        if (_this.distanceMakers.length == 1) {
          clear();
          map.setDefaultCursor("crosshair");
        } else {
          clear();
          unRegisterEvents();
        }
      }
      // 解除鼠标事件
      function unRegisterEvents() {
        map.off("click", handleClick);
        // map.off("mousemove", handleMove);
        map.off("rightclick", handleRightClick);
      }
      // 清除测距
      function clear() {
       for (let i = 0; i < _this.distanceMakers.length; i++) {
          _this.distanceMakers[i].setMap(null);
        }
        _this.distanceMakers = [];
        for (let i = 0; i < _this.distanceLine.length; i++) {
          _this.distanceLine[i].setMap(null);
        }
        _this.distanceLine = [];
        for (let i = 0; i < _this.distanceText.length; i++) {
          _this.distanceText[i].setMap(null);
        }
        _this.distanceText = [];
      }
    },

    // 测面
    AreaUse() {
    const map = this.map;
      const _this = this;
      let area = null;
      // 创建起点
      function addMarker(lnglat) {
        const marker = new AMap.Marker({
          position: lnglat,
          map: map,
          content:
            '<div style="background-color: #92E7F7; width: 6px; height: 6px;"></div>',
        });
        _this.areaMakers.push(marker);
      }
      // 创建线对象
      function draw_polygon() {
        const path = _this.areaMakers.map((marker) => marker.getPosition());
        const polygon = new AMap.Polygon({
          path: path,
          strokeColor: "#3366FF",
          strokeWeight: 2,
          map: map,
        });
        _this.areaPolygons.push(polygon);
      }
      // 创建线节点文本
      function drawVertex() {
        // 创建文本标签
        const textLabel = new AMap.Text({
          position: _this.areaMakers[_this.areaMakers.length - 1].getPosition(),
          text: "区域面积" + spaceArea(_this.areaMakers) + "平方米",
          anchor: "bottom", // 设置文本标签锚点为底部
          offset: new AMap.Pixel(-20, -20),
          style: {
            fontSize: "14px",
            fontWeight: "normal",
            fillColor: "white", // 文本颜色
            strokeWidth: 0,
            border: "none",
          },
          map: map,
        });
        _this.areaText.push(textLabel);
      }
      // 计算面积
      function spaceArea(markers) {
        const path = markers.map((marker) => marker.getPosition());
        if (path.length >= 3) {
          area = Math.round(AMap.GeometryUtil.ringArea(path));
          console.log("area", area);
        }
        return area.toFixed(2);
      }
      // 监听地图单击事件
      map.on("click", handleClick);
      function handleClick(e) {
        addMarker(e.lnglat);
        draw_polygon();
        if (_this.areaMakers.length > 2) {
          drawVertex();
        }
      }
      // 监听地图双击事件
      map.on("rightclick", handleRightClick);
      function handleRightClick(event) {
        // console.log("rightclick", event);
        map.setDefaultCursor("default");
        if (_this.areaMakers.length == 1) {
          clear();
          map.setDefaultCursor("crosshair");
        } else {
          clear();
          unRegisterEvents();
        }
      }
      // 解除鼠标事件
      function unRegisterEvents() {
        map.off("click", handleClick);
        map.off("rightclick", handleRightClick);
      }
      function clear() {
        // 清除提示提示框
       for (let i = 0; i < _this.areaMakers.length; i++) {
          _this.areaMakers[i].setMap(null);
        }
        _this.areaMakers = [];
        for (let i = 0; i < _this.areaPolygons.length; i++) {
          _this.areaPolygons[i].setMap(null);
        }
        _this.areaPolygons = [];
        for (let i = 0; i < _this.areaText.length; i++) {
          _this.areaText[i].setMap(null);
        }
        _this.areaText = [];
      }
    },