高德地图——态势标绘，创建点、移动位置、缩放、旋转、保存、删除

• 拖动左侧图标到地图上某个位置，在地图上创建该类型的点，存储在list
• 拖拽点移动，重新更新其坐标
• 编辑点的大小及角度，清除之前的重新创建新的点
• 删除点，清除点，但数据不能清除，更改show
• 最后保存list数据并截图保存
• 下次进来渲染点重新编辑

<template>
  <div class="index5 w100 h100 white relative">
    <canvas
      id="myCanvas"
      style="display: none; width: 100vw; height: 100vh"
    ></canvas>
    <img
      src="./components/img/home.png"
      alt=""
      class="home pointer"
      @click="$router.back()"
    />
    <!-- 地图区域 -->
    <div id="containerMap" class="w100 h100" ref="htmlImg"></div>
    <!-- 左侧菜单 -->
    <div
      v-show="showMenu"
      class="left h80 absolute animate__animated animate__slideInLeft animate__fast"
    >
      <div class="w100 pdRem-20 h100">
        <dv-border-box-8
          :color="['rgba(2, 208, 249,.5)', '#0dcff2']"
          backgroundColor="rgba(4, 33, 66,.8)"
        >
          <div class="plrRem-20 ptbRem-10 flex flex-column w100 h100">
            <div class="title flex_l mtb-20">
              <img src="./components/img/index1-title.png" alt="" />
              作战标绘
            </div>
            <div class="flex flex-wrap w100">
              <div
                class="item plr-20 text-center mb-20 pointer"
                style="width: 50%"
                v-for="(item, index) in tab"
                :key="index"
              >
                <!-- ☆☆☆☆☆ 拖拽图片默认会打开窗口预览，换成背景图即可 -->
                <!-- <img :src="item.icon" alt="" style="width: 50px" /> -->
                <div
                  draggable="true"
                  @dragstart="onDragStart"
                  @dragend="onDragEnd"
                  :data-index="index"
                  class="img-bg"
                  :style="{
                    backgroundImage: `url(${item.icon})`,
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center',
                    backgroundSize: 'cover',
                    backgroundAttachment: 'local',
                  }"
                ></div>

                <div class="mt-4">{{ item.text }}</div>
              </div>
            </div>
            <img
              src="./components/img/index5-btn4.png"
              alt=""
              style="width: 140px; margin: 60px auto 20px"
              @click="issueImg"
              class="pointer"
            />
          </div>
        </dv-border-box-8>
      </div>
    </div>
    <!-- 右下控制 -->
    <div
      v-show="showMenu && showEdit"
      class="right absolute animate__animated animate__slideInLeft animate__fast pdRem-20"
    >
      <div class="w100 h100 editBox ptRem-14 pbRem-10 plRem-10 prRem-20">
        <div class="plrRem-20 ptbRem-10 flex flex-column w100 h100 editContent">
          <div class="title flex_l mtb-10">
            <img src="./components/img/index1-title.png" alt="" />
            标绘属性
          </div>
          <div class="plrRem-20 mbRem-20 flex flex-column">
            <div class="flex1">
              <div style="width: 60px; font-size: 0.2rem">缩放：</div>
              <div class="flex-1">
                <el-slider
                  :max="10"
                  :min="0.5"
                  :step="0.5"
                  v-model="scale"
                  @change="editMarker"
                ></el-slider>
              </div>
            </div>
            <div class="flex1">
              <div style="width: 60px; font-size: 0.2rem">角度：</div>
              <div class="flex-1">
                <el-slider
                  :max="360"
                  :step="5"
                  v-model="rotate"
                  @change="editMarker"
                ></el-slider>
              </div>
            </div>
          </div>
          <div class="w100 center mb-20">
            <!-- <img
              src="./components/img/index5-btn1.png"
              alt=""
              style="width: 140px"
              @click="saveImg"
              class="pointer"
              v-if="isSave"
            /> -->
            <img
              src="./components/img/index5-btn3.png"
              alt=""
              style="width: 120px"
              @click="removeMarker"
              class="pointer"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

import "./components/js/flexible.js";
import {
  getPoliceDetailApi,
  uploadHtmlImg,
  dispatchHtmlImg,
} from "./components/js/api";

import AMapLoader from "@amap/amap-jsapi-loader";
import icon1 from "./components/img/index5-1.png";
import icon2 from "./components/img/index5-2.png";
import icon3 from "./components/img/index5-3.png";
import icon4 from "./components/img/index5-4.png";
import icon5 from "./components/img/index5-5.png";
import icon6 from "./components/img/index5-6.png";
import icon7 from "./components/img/index5-7.png";
import icon8 from "./components/img/index5-8.png";
import icon9 from "./components/img/index5-9.png";

//秘钥
window._AMapSecurityConfig = {
  securityJsCode: "3e9a9aeb435372339552fc215f8d0918",
};
export default {
  data() {
    return {
      position: [],
      policeId: "",
      map: null,
      showMenu: true,
      tab: [
        {
          id: 1,
          icon: icon1,
          text: "消防车",
        },
        {
          id: 2,
          icon: icon2,
          text: "消防员",
        },
        {
          id: 3,
          icon: icon3,
          text: "水管",
        },
        {
          id: 4,
          icon: icon4,
          text: "进攻方向",
        },
        {
          id: 5,
          icon: icon5,
          text: "消防栓",
        },
        {
          id: 6,
          icon: icon6,
          text: "危化品",
        },
        {
          id: 7,
          icon: icon7,
          text: "风向",
        },
        {
          id: 8,
          icon: icon8,
          text: "指北矢标",
        },
      ],
      list: [], //地图上所有的marker
      draggingEnded: false,
      index: null, //当前拖动的索引-对应左侧菜单
      showEdit: false, //是否显示编辑
      item: {}, //当前编辑的marker
      // 编辑
      scale: 1, //缩放
      rotate: 0, //旋转角度

      //保存
      baseUrl: process.env.VUE_APP_BASE_API,
      isSave: false,
     
    };
  },
  mounted() {
    this.position = this.$route.query.position.split(",");
    this.policeId = this.$route.query.id;
    this.initAMap();
  },
  beforeDestroy() {
    this.map.destroy();
  },
  methods: {
    // -----------地图--------------
    initAMap() {
      AMapLoader.load({
        key: "130cca3be68a2ff0fd5ebb6de25e4eac", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          //   "AMap.ControlBar",
          //   "AMap.ToolBar",
          //   "AMap.Weather",
          //   "AMap.CitySearch",
          //   "AMap.Marker",

          //   "AMap.MouseTool",
          //   "AMap.PolyEditor",
          //   "AMap.Polyline",
          //   "AMap.Geolocation",
          //   "AMap.GraspRoad",
          //   "AMap.Geocoder",
          //   "AMap.GeometryUtil.ringArea",
          //   "AMap.DistrictSearch",
          //   "AMap.MoveAnimation",
          "AMap.Driving", // 驾车路线路径规划
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerMap", {
            // 设置地图容器id
            // rotateEnable: true, // 旋转
            // pitchEnable: true, // 倾斜
            zoom: 13, // 初始化地图层级
            // pitch: 50, // 倾斜角度
            // rotation: -15, // 地图旋转角度
            // viewMode: "3D", //开启3D视图,默认为关闭
            zooms: [2, 20], // 设置地图显示范围
            center: [119.419251, 32.400703], // 设置地图中心点
            mapStyle: "amap://styles/blue", //设置地图的显示样式
            WebGLParams: {
              preserveDrawingBuffer: true, // 使用html2canvas截取需要设置该属性，否则截取不到地图
            },
          });

          this.map.on("complete", () => {
            console.log("地图加载完成");
            this.isSave = true;
            this.createFireMarker();
            //可以监听到拖动到地图
            this.map.on("mouseover", this.onMouseOver);
            getPoliceDetailApi(this.policeId).then((res) => {
              if (res.data.screenshotParam) {
                this.list = JSON.parse(res.data.screenshotParam);
                this.showMarker();
              }
            });
          });
          this.map.on("click", (e) => {
            // e 是事件对象，包含了点击的位置等信息
            var lnglat = e.lnglat; // 获取经纬度坐标
            console.log("地图被点击，坐标：" + lnglat.lng + ", " + lnglat.lat);
            this.showEdit = false;
            // 在此处可以进行进一步的操作，如弹出信息窗口、绘制标记等
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //----------添加警情中心点标记 -------
    createFireMarker() {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(...this.position),
        icon: new AMap.Icon({
          image: fireIcon,
          imageSize: new AMap.Size(32, 42),
        }),
        // zIndex: 200,
      });
      this.map.add(marker);
      // 设置地图中心点
      this.map.setCenter(new AMap.LngLat(...this.position));
    },
    onDragStart(event) {
      // console.log("Drag start", event, event.target.dataset.index);
      //event.dataTransfer.setData(
      //  "application/index",
      //  event.target.dataset.index
      //);
      // 你还可以在这里做其他事情，比如改变元素的样式或状态
      this.draggingEnded = false;
      this.index = event.target.dataset.index * 1;
    },
    onDragEnd(event) {
      // console.log(
      //   "Drag end",
      //   event,
      //   event.dataTransfer.getData("application/index")
      // );
      //const data = event.dataTransfer.getData("application/index"); // 获取拖动时设置的数据
      // console.log("接收到的数据:", data);
      // 拖拽结束时，你可以做一些清理工作，例如重置元素样式或状态
      this.draggingEnded = true;
    },
    onMouseOver(event) {
      // console.log("mouseover", event.lnglat);
      if (this.draggingEnded) {
        // 转换鼠标位置为地理坐标
        this.draggingEnded = false;
        this.createMarker([event.lnglat.lng, event.lnglat.lat]);
      }
    },
    // 页面一进来拿到上次的list渲染出来
    showMarker() {
      this.list.forEach((item, index) => {
        item.show = true;
        item.marker = null;
        item.icon = [icon1, icon2, icon3, icon4, icon5, icon6, icon7, icon8][
          item.id * 1
        ];
        var markerContent =
          '<div class="custom-content-marker" >' +
          '<img style="transform:rotate(' +
          item.rotate +
          "deg) scale(" +
          item.scale +
          ');width:60px;height:60px" src=" ' +
          item.icon +
          '">' +
          "</div>";
        item.marker = new AMap.Marker({
          position: new AMap.LngLat(...item.lnglat),
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-25, -50),
          // zIndex: 200,
          cursor: "move",
          draggable: true,
        });
        this.map.add(item.marker);

        // 监听点点击事件
        this.list[index].marker.on("click", (e) => {
          this.item = this.list[index];
          this.scale = this.item.scale;
          this.rotate = this.item.rotate;
          this.showEdit = true;
          //拖动坐标获取新坐标
          console.log("点击：", this.item.id);
        });

        // 监听点拖动更新坐标
        this.list[index].marker.on("dragend", (e) => {
          this.list[index].lnglat = [
            this.list[index].marker.getPosition().lng,
            this.list[index].marker.getPosition().lat,
          ];
          this.item = this.list[index];
          this.scale = this.item.scale;
          this.rotate = this.item.rotate;
          this.showEdit = true;
          //拖动坐标获取新坐标
          console.log(
            "最新坐标：",
            [
              this.list[index].marker.getPosition().lng,
              this.list[index].marker.getPosition().lat,
            ],
            this.list,
            this.item
          );
        });
      });

      console.log("createMarker", this.list);
    },
    // 从左侧拖动过来新建点
    createMarker(lnglat) {
      let length = this.list.length;
      this.list.push({
        id: this.index,
        lnglat: lnglat,
        icon: this.tab[this.index].icon,
        marker: null,
        scale: 1,
        rotate: 0,
        show: true,
      });
      this.item = this.list[length];
      console.log("createMarker", this.index);
      var markerContent =
        '<div class="custom-content-marker" >' +
        '<img style="transform:rotate(' +
        this.item.rotate +
        "deg) scale(" +
        this.item.scale +
        ');width:60px;height:60px" src=" ' +
        this.item.icon +
        '">' +
        "</div>";
      this.item.marker = new AMap.Marker({
        position: new AMap.LngLat(...this.item.lnglat),
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-25, -50),
        // zIndex: 200,
        cursor: "move",
        draggable: true,
      });
      this.map.add(this.item.marker);
      this.showEdit = true;
      this.scale = this.item.scale;
      this.rotate = this.item.rotate;
      console.log("createMarker", this.list, this.item);

      // 监听点点击事件
      this.list[length].marker.on("click", (e) => {
        this.item = this.list[length];
        this.scale = this.item.scale;
        this.rotate = this.item.rotate;
        this.showEdit = true;
        //拖动坐标获取新坐标
        console.log("点击：", this.item.id);
      });

      // 监听点拖动更新坐标
      this.list[length].marker.on("dragend", (e) => {
        this.list[length].lnglat = [
          this.list[length].marker.getPosition().lng,
          this.list[length].marker.getPosition().lat,
        ];
        this.item = this.list[length];
        this.scale = this.item.scale;
        this.rotate = this.item.rotate;
        this.showEdit = true;
        //拖动坐标获取新坐标
        console.log(
          "最新坐标：",
          [
            this.list[length].marker.getPosition().lng,
            this.list[length].marker.getPosition().lat,
          ],
          this.list,
          this.item
        );
      });
    },
    
    // 编辑点重新渲染
    editMarker() {
      var index = this.list.indexOf(this.item);
      console.log("编辑", this.rotate, this.scale, this.list[index]);
      this.list[index].scale = this.scale;
      this.list[index].rotate = this.rotate;
      this.map.remove(this.list[index].marker);
      this.list[index].marker = null;
      var markerContent =
        '<div class="custom-content-marker"  >' +
        '<img style="transform:rotate(' +
        this.list[index].rotate +
        "deg) scale(" +
        this.list[index].scale +
        ');width:60px;height:60px" src=" ' +
        this.list[index].icon +
        '">' +
        "</div>";
      console.log("编辑", markerContent);
      this.list[index].marker = new AMap.Marker({
        position: new AMap.LngLat(...this.list[index].lnglat),
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-25, -50),
        // zIndex: 200,
        cursor: "move",
        draggable: true,
      });
      this.map.add(this.list[index].marker);
      // 监听点点击事件
      this.list[index].marker.on("click", (e) => {
        this.item = this.list[index];
        this.scale = this.list[index].scale;
        this.rotate = this.list[index].rotate;
        this.showEdit = true;
        //拖动坐标获取新坐标
        console.log("点击11：", this.item.id);
      });

      // 监听点拖动更新坐标
      this.list[index].marker.on("dragend", (e) => {
        this.item = this.list[index];
        this.item.lnglat = [
          this.list[index].marker.getPosition().lng,
          this.list[index].marker.getPosition().lat,
        ];
        this.scale = this.list[index].scale;
        this.rotate = this.list[index].rotate;
        this.showEdit = true;
      });
    },
    // 删除点
    removeMarker() {
      var index = this.list.indexOf(this.item);
      this.list[index].show = false;
      this.map.remove(this.list[index].marker);
      this.item = {};
      this.showEdit = false;
      console.log("删除", this.list, this.item, index);
    },

    /* -----------------------------下发作战--------------------- */
    issueImg() {
      this.showMenu = false;
      let arr = this.list.filter((item) => item.show);
      let arr1 = arr.map((item) => {
        return {
          id: item.id,
          lnglat: item.lnglat,
          scale: item.scale,
          rotate: item.rotate,
        };
      });

      html2canvas(this.$refs.htmlImg, {
        useCORS: true, //保证跨域图片的显示，如果为不添加改属性，或者值为false,地图底图不显示
        x: window.pageXOffset, //页面在水平方向的滚动距离
        y: window.pageYOffset, //页面在垂直方向的滚动距离
      }).then((canvas) => {
        var img = new Image();
        var canvas2 = document.getElementById("myCanvas");
        var ctx = canvas2.getContext("2d");
        ctx.fillStyle = "#FFFFFF"; //画布填充色
        ctx.lineWidth = "1";
        ctx.rect(20, 30, canvas2.width - 40, canvas2.height - 60); //矩形距离画布左上角水平和垂直距离，矩形的宽高
        ctx.stroke();
        img.src = canvas.toDataURL();

        var url = canvas.toDataURL("image/png");
        const blobImage = this.dataURLtoBlob(url);
        let fileName = `htmlImg_${new Date().getTime()}.jpg`;
        const fileOfBlob = new File([blobImage], fileName);
        let formData = new FormData();
        formData.append("file", fileOfBlob, fileName);
        this.isSave = false;
        uploadHtmlImg(formData).then((res) => {
          this.showMenu = true;
          this.isSave = true;
          // this.$modal.msgSuccess("上传成功");

          let saveObj = {
            policeId: this.$route.query.id,
            // policeId: 196,
            fileName: res.fileName,
            url: res.url,
            screenshotParam: JSON.stringify(arr1),
          };
          dispatchHtmlImg(saveObj).then((res) => {
            this.$modal.msgSuccess("标绘下发成功，可在小程序对应警情中查看");
          });
          console.log("http://192.168.0.19:12020" + res.url);
          // console.log(this.baseUrl + res.url);
        });
      });
    },
    // 转成bolb对象
    dataURLtoBlob(dataUrl) {
      let arr = dataUrl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },
   
    
  },
};
</script>

<style scoped lang="scss">
@import "./components/css/rem.scss";
.index5 {
  .home {
    width: 50px;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999;
  }
  .left {
    width: 280px;
    left: 0;
    top: 10%;
    .img-bg {
      width: 50px;
      height: 50px;
      margin: auto;
    }
  }
  .right {
    width: 360px;
    // height: 280px;
    right: 50px;
    bottom: 50px;

    .editBox {
      background: #0005495d;
      background-image: url("./components/img/index5-bg-1.png");
      background-repeat: no-repeat; /* 防止重复平铺 */
      background-position: center; /* 居中对齐 */
      background-size: 100% 100%; /* 根据容器大小等比例缩放至最大尺寸 */
      background-attachment: local;
      .editContent {
        // background-image: url("./components/img/index5-bg-2.png");
        // background-repeat: no-repeat; /* 防止重复平铺 */
        // background-position: center; /* 居中对齐 */
        // background-size: 100% 100%; /* 根据容器大小等比例缩放至最大尺寸 */
        // background-attachment: local;
      }
    }
  }
  ::v-deep .el-slider__runway {
    background-color: rgba(0, 255, 255, 0.253);
  }
  ::v-deep .el-slider__bar {
    background-color: aqua;
  }
  ::v-deep .el-slider__button {
    border: 2px solid aqua;
  }

  ::v-deep .amap-marker-label {
    background: rgba(0, 0, 0, 0);
    color: aqua;
    border: none;
  }
  ::v-deep .amap-icon {
    width: 50px !important;
    height: 50px !important;
  }
  .title {
    font-size: 0.2rem;
    font-weight: 700;
    text-shadow: 0px 3px 7px #006cbf;
    img {
      width: 0.4rem;
      height: 0.4rem;
    }
  }

  .carInfo {
    position: absolute;
    border-radius: 10px;
    border: 1px solid cyan;
    background: rgba(0, 50, 73, 0.8);
    // left: 120px;
    // top: 230px;
    // background: url("./components/img/car-bg.png") no-repeat center center;
    background-size: 100% 100%;
    padding: 16px 10px 14px 20px;
    ::v-deep .dv-water-pond-level text {
      font-size: 15px;
      font-weight: normal !important;
      color: #fff !important;
    }
  }
}
.main {
  height: 1600px;
  width: 100%;
  background: #d4edff;
}
.svg {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
</style>