vue 腾讯地图绘画电子围栏增删改

奔跑的小钢炮

已于 2023-05-10 16:01:27 修改

阅读量1.1k

点赞数 1

文章标签： html servlet

于 2023-05-10 15:46:52 首次发布

本文链接：https://blog.csdn.net/Chenqy1027/article/details/130602481

版权

下面是index.heml里面需要先引入腾讯地图api

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>LOGO.png">
    <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=SSHKEY"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=SSHKEY&libraries=drawing"></script>
    <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=SSHKEY"></script>
    <link rel="stylesheet" href="animate.min.css">
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

在vue里面的使用方法

//下面是vue文件
<template>
  <div class="body">
    <!-- <div>
      <input v-model="address" placeholder="请输入"/>
      <button type="primary" size="medium " @click="getCenter"
        >查询</button
      >
    </div> -->
    <div id="toolControl">
      <button size="medium" type="primary" @click="Edit()">编辑</button>
      <button size="medium" type="primary" @click="Add()">绘画</button>
      <button
        type="danger"
        @click="Delete('delete')"
        v-if="EditFlag"
        >删除</button
      >
      <!-- <button size="small" type="danger" @click="get()">获取</button> -->
    </div>
    <div id="map" style="height: 85vh"></div>
  </div>
</template>

<script>
let map = ""; // 地图
let editor; // 编辑器

export default {
  props: ["parentmsg"],
  data() {
    return {
      arr: [],
      longitude: "",
      latitude: "",
      lngLatData: [], // 绘制多边形坐标点
      address: "", //详细地址
      LatLng: [],
      zoom: 8,
      EditFlag: false,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 父子传值
    sendMsg(e) {//获取父组件传过来的值  数据类型[[{经度，维度}],[{经度，维度}]]
      console.log(e);
      this.LatLng = e;
      let geometries = [];
      let i = 1;
      if (e != null && e.length !== 0) {
        this.LatLng.forEach((item) => {
          let path = [];
          console.log(item);
          item.forEach((v) => {
            path.push(new TMap.LatLng(v.lat, v.lng));
          });
          geometries.push({ paths: path, id: i++ });
        });
        this.LatLng = geometries;
        this.initMap();
      } else {
        this.LatLng = [];
        this.initMap();
      }
    },
    // 初始化地图
    initMap() {
      // 初始化地图
      map = new TMap.Map("map", {
        zoom: this.zoom, // 设置地图缩放级别
        center: new TMap.LatLng(32.061627, 118.795166), // 设置地图中心点坐标, // 设置地图中心点坐标
      });

      editor = new TMap.tools.GeometryEditor({
        map: map, // 编辑器绑定的地图对象
        overlayList: [
          {
            overlay: new TMap.MultiPolygon({
              map,
              styles: {
                highlight: new TMap.PolygonStyle({
                  color: "rgba(255, 255, 0, 0.6)",
                }),
              },
              geometries: this.LatLng,
            }),
            id: "polygon",
            selectedStyleId: "highlight",
          },
        ],
        actionMode:
          this.EditFlag == true
            ? TMap.tools.constants.EDITOR_ACTION.INTERACT //编辑
            : TMap.tools.constants.EDITOR_ACTION.DRAW, //初始化 // 编辑器的工作模式
        activeOverlayId: "polygon", // 激活图层
        snappable: true, // 开启吸附
        selectable: true, // 开启点选功能
      });

      // 监听删除、修改、拆分、合并完成事件
      let evtList = ["delete", "adjust", "split", "union", "draw"];
      evtList.forEach((evtName) => {
        editor.on(evtName + "_complete", (evtResult) => {
          console.log(evtName, evtResult);
          if (evtName == "draw") {
            //增加
            evtResult.id = this.LatLng.length + 1;
            this.LatLng.push(evtResult);
          } else if (evtName == "adjust") {
            //拖动修改
            let LatLng = this.LatLng;
            LatLng.forEach((item) => {
              if (item.id == evtResult.id) {
                console.log(item);
                item.paths = evtResult.paths;
              }
            });
          } else if (evtName == "delete") {
            //删除
            this.LatLng = this.LatLng.filter(
              (item) => item.id != evtResult[0].id
            );
          }
          this.LatLng = Array.from(
            new Set(this.LatLng.map((item) => item.id))
          ).map((id) => this.LatLng.find((item) => item.id === id));

          let arr = [];
          if (this.LatLng.length != 0) {
            this.LatLng.forEach((item) => {
              arr.push(item.paths);
            });
            console.log(arr);
          }
          this.$emit("map", arr);
        });
      });
    },
    getCenter() {
      console.log(777);

      const geocoder = new qq.maps.Geocoder({
        complete: function (result) {
          map.setCenter(result.detail.location);
          console.log(result);
        },
      });
      geocoder.getLocation(this.address);
    },
    // 编辑
    Edit() {
      this.zoom = map.getZoom(); //获取地图缩放比例
      map.destroy(); //销毁地图
      this.EditFlag = true;
      this.initMap();
    },
    // 绘画
    Add() {
      this.zoom = map.getZoom();
      map.destroy();
      this.EditFlag = false;
      this.initMap();
    },
    // 删除
    Delete() {
      editor.delete();
    },
    // 销毁地图
    destroy() {
      map.destroy();
    },
    get() {
      console.log(this.LatLng);
      let arr = [];
      if (this.LatLng.length != 0) {
        this.LatLng.forEach((item) => {
          arr.push(item.paths);
        });
        console.log(arr);
      }
      this.$emit("map", arr);

      return;
      new TMap.tools.GeometryEditor(options);
    },
  },
};
</script>
<style scoped>
.body {
  position: relative;
}
#toolControl {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1001;
  top: 10px;
}
::v-deep .button {
  z-index: 1001 !important;
}
</style>