shuili-vue/src/views/dike/runManage/enginerring/components/GaoDeMap.vue

<!-- 高德地图 -->
<template>
  <div style="height: 100%">
    <div
      id="container"
      @mouseenter="showTooltip = true"
      @mouseout="showTooltip = false"
      @mousemove="updateTooltipPosition"
      style="zoom: calc(1 / 0.8)"
    >
      <div
        class="tooltip"
        v-if="showTooltip"
        :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }"
      >
        左键选点，双击结束绘制，右键取消绘制
      </div>

      <Drawer
        :drawer-visible="drawerVisible"
        @close-drawer="drawerVisible = !drawerVisible"
      ></Drawer>
    </div>
    <el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true"
      >展开抽屉</el-button
    >
    <div class="box">
      <el-button size="mini" @click="addPoint = true">
        <svg-icon icon-class="icon-line" />
        绘制线路</el-button
      >
      <el-button
        :disabled="checkpoints.length < 1"
        style="width: 29px; padding: 7px"
        size="mini"
        @click="clearLine"
        ><svg-icon icon-class="icon-clear"
      /></el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  postDFInspectionRoute,
  postSZInspectionRoute,
  getDFInspectionRoute,
  getSZInspectionRoute,
  postDFInspectionRecordsTrajectoryList,
  postSZInspectionRecordsTrajectoryList,
} from "@/api/management";
import Drawer from "./Drawer.vue";
export default {
  name: "map-view",
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  components: { Drawer },
  data() {
    return {
      drawerVisible: false, //抽屉开关
      addPoint: false, //是否允许添加点位
      showTooltip: false, //展示鼠标提示
      addSum: 0,
      tooltipLeft: 0,
      tooltipTop: 0,
      checkpoints: [
        // {
        //   name: '检查点1',
        //   location: [113.431415, 23.104388]
        // },
        // {
        //   name: '检查点2',
        //   location: [113.432021, 23.1038]
        // },
        // {
        //   name: '检查点3',
        //   location: [113.431747, 23.102794]
        // }
      ],
      AMap: {},
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    // 获取鼠标位置
    updateTooltipPosition(event) {
      this.tooltipLeft = event.clientX - ((296 + 15) / 8) * 10;
      this.tooltipTop = event.clientY - (174 / 8) * 10;
    },
    // 渲染线段
    renderedPolyline() {
      this.map.remove(this.map.getAllOverlays("polyline"));
      if (this.checkpoints.length > 1) {
        const polyline = new this.AMap.Polyline({
          path: this.checkpoints.map((checkpoint) => checkpoint.location),
          strokeColor: "#37E4FF",
          strokeWeight: 4,
          strokeOpacity: 1,
          bubble: true,
        });
        polyline.setMap(this.map);
      }
    },
    // 添加点位
    addCheckpoint(name, location) {
      const icon = new this.AMap.Icon({
        size: new this.AMap.Size(20, 20),
        image: require("@/assets/image/map-point.png"),
        imageSize: new AMap.Size(20, 20),
        anchor: "center",
      });
      const marker = new this.AMap.Marker({
        position: location,
        title: name,
        icon,
        anchor: "bottom-center",
        bubble: true,
        label: { content: name, direction: "top" },
      });
      marker.on("mouseover", () => {
        this.showTooltip = true;
      }),
        marker.on("mouseout", () => {
          this.showTooltip = true;
        }),
        marker.setMap(this.map);
      this.checkpoints.push({ name, location, marker });
      this.renderedPolyline();
    },
    // 修改选中点位
    selectCheckpoint(checkpoint) {
      const icon = new this.AMap.Icon({
        size: new this.AMap.Size(20, 20),
        image: require("@/assets/image/map-point.png"),
        imageSize: new AMap.Size(20, 20),
        anchor: "center",
      });
      this.map.setCenter(checkpoint.location);
      this.map.setZoom(18);
      this.checkpoints.forEach((cp) => {
        const marker = cp.marker;
        if (cp === checkpoint) {
          marker.setIcon(
            "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
          );
        } else {
          marker.setIcon(icon);
        }
      });
    },
    // 清空路线
    clearLine() {
      // this.removeLastCheckpoint();
      this.addSum = 0;
      this.checkpoints.forEach((checkpoint) => {
        checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除
      });
      this.checkpoints = []; // 清空 checkpoints 数组
      this.renderedPolyline(); // 清空连线
      this.saveInspectionRoute(); // 保存
    },
    // 删除最后一个点位
    removeLastCheckpoint() {
      const lastCheckpoint = this.checkpoints.pop();
      const marker = lastCheckpoint.marker;
      marker.setMap(null);
      this.renderedPolyline();
    },
    // 保存巡查路线
    saveInspectionRoute() {
      let data = [];
      this.checkpoints.forEach((element) => {
        let a = {
          longitude: element.location[0],
          latitude: element.location[1],
        };
        data.push(a);
      });
      switch (this.type) {
        case "DF":
          postDFInspectionRoute(this.$route.query.id, data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          });
          break;

        case "SZ":
          postSZInspectionRoute(this.$route.query.id, data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
          });
          break;

        default:
          console.log("未选中");
          break;
      }
    },
    // 加载地图
    initAMap() {
      AMapLoader.load({
        key: "67533ae78bf28afc2a3da3d10d308fa1", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          var satellite = new AMap.TileLayer.Satellite(); // 创建卫星图层
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            doubleClickZoom: false, // 禁用双击放大
            layers: [satellite],
            center: [112.9, 23.36], // 初始化地图中心点位置
          });

          // 在地图加载完成后执行操作
          this.map.on("complete", () => {
            console.log("🚀地图加载完毕🚀");
            if (this.$route.query.editor) {
              // 添加点位
              switch (this.type) {
                case "DF":
                  getDFInspectionRoute(this.$route.query.id).then((res) => {
                    res.data.forEach((element, index) => {
                      this.addCheckpoint("检查点" + (index + 1), [
                        element.longitude,
                        element.latitude,
                      ]);
                    });
                  });
                  break;

                case "SZ":
                  getSZInspectionRoute(this.$route.query.id).then((res) => {
                    res.data.forEach((element, index) => {
                      this.addCheckpoint("检查点" + (index + 1), [
                        element.longitude,
                        element.latitude,
                      ]);
                    });
                  });
                  break;

                default:
                  console.log("未选中");
                  break;
              }
            } else {
              switch (this.type) {
                case "DF":
                  postDFInspectionRecordsTrajectoryList({
                    data: {
                      timeView: {
                        timeField: "create_time",
                      },
                      recordId: this.$route.query.id,
                    },
                    cv: {
                      name: "name",
                      type: "like",
                    },
                    pageSize: 100,
                    pageNum: 1,
                  }).then((res) => {
                    console.log("🚀res🚀", res);
                    res.records.forEach((element, index) => {
                      this.addCheckpoint("检查点" + (index + 1), [
                        element.longitude,
                        element.latitude,
                      ]);
                    });
                  });
                  break;

                case "SZ":
                  postSZInspectionRecordsTrajectoryList({
                    data: {
                      timeView: {
                        timeField: "create_time",
                      },
                      recordId: this.$route.query.id,
                    },
                    cv: {
                      name: "name",
                      type: "like",
                    },
                    pageSize: 100,
                    pageNum: 1,
                  }).then((res) => {
                    console.log("🚀res🚀", res);
                    res.records.forEach((element, index) => {
                      this.addCheckpoint("检查点" + (index + 1), [
                        element.longitude,
                        element.latitude,
                      ]);
                    });
                  });
                  break;

                default:
                  console.log("未选中");
                  break;
              }
            }
            // 给点位添加连接线
            if (this.checkpoints.length > 1) {
              this.renderedPolyline();
            }
          });
          if (this.$route.query.editor) {
            // 点击添加检查点
            this.map.on("click", (e) => {
              if (this.addPoint) {
                this.addSum++;
                const { lng, lat } = e.lnglat;
                const name = `检查点${this.checkpoints.length + 1}`;
                this.addCheckpoint(name, [lng, lat]);
              } else {
                this.$message({
                  message: "请先点击绘制线路",
                  type: "warning",
                });
              }
            });
            // 双击保存
            this.map.on("dblclick", () => {
              if (this.addPoint) {
                this.addSum = 0;
                this.saveInspectionRoute();
                console.log("双击保存", this.checkpoints);
                this.addPoint = false;
              }
            });
            // 右键取消保存
            this.map.on("rightclick", () => {
              for (let i = 0; i < this.addSum; i++) {
                this.removeLastCheckpoint();
              }
              this.addSum = 0;
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  position: relative;
}

.open-drawer-btn {
  position: fixed;
  top: 135px;
  right: 16px;
}

.tooltip {
  position: absolute;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
}

.box {
  position: absolute;
  top: 10px;
  left: 26px;
  display: flex;
  flex-wrap: wrap;
  z-index: 9;
}

/deep/.amap-marker-label {
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
}
</style>