+自定义标签的添加和删除

liuyg

2022-03-02 e7c6c4eecddae9515b0cd1be68335690843df3d1

 src/pcviews/tool/sign.vue

@@ -1,109 +1,157 @@
<template>
    <public-box class="tool-sign">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
                <span>地图标记</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="list-box">
                <ul v-show="signList.length > 0">
                    <li v-for="(item, index) in signList" :key="index">
                        <img src="/img/icon/sign-list.png" alt />
                        我得标记
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
                    </li>
                </ul>
                <div v-show="signList.length == 0" class="no-data">
                    <img src="/img/icon/no-data.png" alt />
                    <div>暂无数据</div>
                </div>
            </div>
            <div class="btn-box">
                <el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
            </div>
        </template>
    </public-box>
  <public-box class="tool-sign">
    <template slot="public-box-header">
      <div class="title">
        <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
        <span>地图标记</span>
      </div>
      <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
    </template>
    <template slot="public-box-content">
      <div class="list-box">
        <ul v-show="signList.length > 0">
          <li v-for="(item, index) in signList" :key="index">
            <img src="/img/icon/sign-list.png" alt />
            {{ item.name }}
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="deleteIcon(item.id)"
            ></el-button>
          </li>
        </ul>
        <div v-show="signList.length == 0" class="no-data">
          <img src="/img/icon/no-data.png" alt />
          <div>暂无数据</div>
        </div>
      </div>
      <div class="btn-box">
        <el-button type="primary" size="mini" @click.stop="addSign"
          >新增</el-button
        >
      </div>
    </template>
  </public-box>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
import { getlabel, deletelabel } from "@/api/pc/label";

export default {
    data () {
        return {
            DC: null,
            signList: [],
            destroyedFlag: true
  data() {
    return {
      DC: null,
      signList: [],
      destroyedFlag: true,
    };
  },
  computed: {
    ...mapGetters(["viewer", "addSignList"]),
  },
  mounted() {
    this.$store.commit("initLabelLayer", this.viewer);
    this.getData();
  },
  watch: {
    addSignList() {
      this.getData();
    },
  },
  methods: {
    deleteIcon(id) {
      let that = this;
      deletelabel(id).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          that.$message({
            message: "删除标签成功",
            type: "success",
          });
        } else {
          that.$message({
            message: "删除标签失败",
            type: "warning",
          });
        }
        that.getData();
      });
    },
    computed: {
        ...mapGetters(['viewer'])
    getData() {
      let that = this;
      getlabel().then((res) => {
        console.log(res);
        const data = res.data.data.records;
        that.signList = data;
        // that.$store.commit("clearLabelLayerIcon");
        that.$store.commit("addLabelLayerIcon", { list: data, clear: true });
      });
    },
    mounted () {

    moveMessage(e, b) {
      if (b == "") {
        this.viewer.tooltip.enable = false;
      } else {
        this.viewer.tooltip.enable = true;
        this.viewer.tooltip.showAt(e.windowPosition, b);
      }
    },
    methods: {
        moveMessage (e, b) {
            if (b == '') {
                this.viewer.tooltip.enable = false
            } else {
                this.viewer.tooltip.enable = true
                this.viewer.tooltip.showAt(e.windowPosition, b)
            }
        },

        addSign () {
            var that = this
            that.DC = global.DC
    addSign() {
      var that = this;
      that.DC = global.DC;

            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, '点击确认标注位置'))
      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "点击确认标注位置")
      );

            that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
                if (that.destroyedFlag == false) return
      that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
        if (that.destroyedFlag == false) return;

                that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))
        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
          that.moveMessage(e, "")
        );

                // eslint-disable-next-line no-unused-vars
                const popup = new this.DC.DivForms(this.viewer, {
                    domId: 'AddTagBox',
                    position: [that.DC.Transform.transformWGS84ToCartesian(
                        new that.DC.Position(
                            Number(
                                e.wgs84SurfacePosition.lng
                            ),
                            Number(
                                e.wgs84SurfacePosition.lat
                            ),
                            Number(
                                e.wgs84SurfacePosition.alt
                            )
                        )
                    )]
                })
        // eslint-disable-next-line no-unused-vars
        const popup = new this.DC.DivForms(this.viewer, {
          domId: "AddTagBox",
          position: [
            that.DC.Transform.transformWGS84ToCartesian(
              new that.DC.Position(
                Number(e.wgs84SurfacePosition.lng),
                Number(e.wgs84SurfacePosition.lat),
                Number(e.wgs84SurfacePosition.alt)
              )
            ),
          ],
        });

                that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
                that.$store.commit('SET_ADDTAGPOPUP', true)
            })
        },

        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        }
        that.$store.commit("SET_ADDTAGPOSITION", e.wgs84SurfacePosition);
        that.$store.commit("SET_ADDTAGPOPUP", true);
      });
    },
    destroyed () {
        var that = this
        that.destroyedFlag = false
        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => that.moveMessage(e, ''))

    closeModel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/pcLayout/default");
      this.$store.commit("clearLabelLayerIcon");
    },
  },
  destroyed() {
    var that = this;
    that.destroyedFlag = false;
    if (that.DC) {
      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "")
      );
    }
}
  },
};
</script>

<style lang="scss" scoped>
.move {
    cursor: move;
  cursor: move;
}
</style>