bick_back/src/components/AreaMap/index.vue

<template>
  <div class="container">
    <div id="container"></div>
    <div class="input-card-left">
      <div style="color: red;">tips：双击区域可重新编辑</div>
      <div style="color: red;">点击新建--左键开始建立停车区--右键完成建立--点击结束编辑才会最终生效</div>
    </div>
    <div class="input-card-right">
      <el-button @click="createPolygon()">新建</el-button>
      <!-- <el-button @click="polyEditor.open()">开始编辑</el-button> -->
      <el-button @click="editClose">结束编辑</el-button>
      <el-button @click="changeMapStyle()">切换地图</el-button>
      <el-button @click="clearPolygon()">清除多边形</el-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig'
var polyEditor = "";
function calculateCenter(mapList) {
  var total = mapList.length;
  var X = 0,
    Y = 0,
    Z = 0;
  mapList.map((item) => {
    var lng = (item[0] * Math.PI) / 180;
    var lat = (item[1] * Math.PI) / 180;
    var x, y, z;
    x = Math.cos(lat) * Math.cos(lng);
    y = Math.cos(lat) * Math.sin(lng);
    z = Math.sin(lat);
    X += x;
    Y += y;
    Z += z;
  });
  X = X / total;
  Y = Y / total;
  Z = Z / total;
  var Lng = Math.atan2(Y, X);
  var Hyp = Math.sqrt(X * X + Y * Y);
  var Lat = Math.atan2(Z, Hyp);
  let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
  return center;
}

export default {
  name: "AreaMap",
  data() {
    return {
      map: null,
      // polyEditor: null,
      coordList: "",
      timer: "",
      status:true,
    };
  },
  props: ["pathList", "dataId"],
  mounted() {
    if (this.dataId) {
      this.start();
      console.log("修改");
    } else {
      this.echart();
      console.log("添加");
    }
  },
  methods: {
    clearPolygon() {
      this.status=false
      if (polyEditor) {
        polyEditor.close();  // 关闭多边形编辑器
      }

      // 移除地图上的所有多边形对象
      this.map.getAllOverlays('polygon').forEach(polygon => {
        this.map.remove(polygon);
      });

      // 如果需要，也可以清空与多边形相关的其他状态或数据
      this.coordList = '';
      this.$emit("mapList", '');

      this.$emit("center", '');
    },
    changeMapStyle() {
      // 创建一个默认的图层组件
      let defaultLayer = new AMap.TileLayer();
      // 创建一个卫星图图层组件
      let satelliteLayer = new AMap.TileLayer.Satellite();
      let roadNetLayer = new AMap.TileLayer.RoadNet();
      // 将默认图层添加到地图中
      this.map.add(defaultLayer);
      // 获取当前地图显示的图层
      let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
      // 切换图层
      if (this.type == 'default') {
        // console.log(1111111)
        //获取地图图层数据
        this.map.setLayers([defaultLayer]); // 切换回默认图层
        this.type = 'Satellite';
      } else {
        console.log(222222)
        this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
        this.type = 'default';
      }
    },
    start() {
      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    async echart() {
      clearInterval(this.timer);
      console.log("接收参数", this.pathList);
      // console.log(typeof JSON.parse(this.pathList));
      await AMapLoader.load({
        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 18, //初始化地图级别
          center: [120.356031, 26.94088], //初始化地图中心点位置--大嵛山岛
        });
        this.map.setFitView();
      })
        .catch((e) => {
          console.log(e);
        });
      this.initEditor();

    },
    initEditor() {
      var path1 = []
      if (this.dataId) {
        path1 = JSON.parse(this.pathList) || [];

      }

      var polygon1 = new AMap.Polygon({
        path: path1,
      });
      this.map.add([polygon1]);
      polyEditor = new AMap.PolygonEditor(this.map);
      // console.log(polyEditor);
      // console.dir(polyEditor);
      polyEditor.on("add", (data) => {
        // console.log(data);
        this.coordList = data.lnglat;
        var polygon = data.target;
        polygon.on("dblclick", () => {
          polyEditor.setTarget(polygon);
          polyEditor.open();
        });
      });
      polygon1.on("dblclick", () => {
        polyEditor.setTarget(polygon1);
        polyEditor.open();
      });

      return polyEditor;
    },
    createPolygon() {
      this.status=true
      polyEditor.close();
      polyEditor.setTarget();
      polyEditor.open();
    },
    editClose: function () {
      // console.log("this", this);

      let that = this;
      polyEditor.on("end", function (event) {
        // event.target 即为编辑后的多边形对象
        //多边形的坐标
        this.coordList = event.target.getPath();
        // console.log("coordList", this.coordList);
        let mapList = [];
        this.coordList.forEach((v) => {
          // console.log("v", v.lng, "--", v.lat);
          mapList.push([v.lng, v.lat]);
        });
        let center = calculateCenter(mapList);
        console.log(mapList,'mapListmapList');
        that.$emit("mapList", mapList);

        that.$emit("center", center);

      });
      polyEditor.close();
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
}

.container {
  position: relative;
  border: 1px solid rgb(204, 204, 204);

  .input-card-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
  .input-card-left {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 13px;
    line-height: 20px;
  }
}
</style>