兼容问题处理

shuishen

2022-03-28 9fa6e9ea26470378bec1628de2968d52c3bc135f

 src/pcviews/tool/sign.vue

@@ -1,210 +1,195 @@
<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="btn-box deblurring"
        @click.stop="addSign"
        src="/img/navicon/add.png"
        alt
      />
      <img
        class="close deblurring"
        src="/img/navicon/close.png"
        alt
        @click="closeModel"
      />
    </template>
    <template slot="public-box-content">
      <div class="list-box" v-loading="loading">
        <ul v-show="signShow">
          <li
            v-for="(item, index) in signList"
            :key="index"
            @click="dingw(item)"
          >
            <img src="/img/icon/sign-list.png" alt />
            {{ item.name }}
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click.stop="deleteIcon(item.id)"
            ></el-button>
          </li>
        </ul>
        <div v-show="!signShow" class="no-data">
          <img src="/img/icon/no-data.png" alt />
          <div>暂无数据</div>
        </div>
      </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="btn-box deblurring" @click.stop="addSign" src="/img/navicon/add.png" alt />
            <img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="list-box" v-loading="loading">
                <ul v-show="signShow">
                    <li v-for="(item, index) in signList" :key="index" @click="dingw(item)">
                        <img src="/img/icon/sign-list.png" alt />
                        {{ item.name }}
                        <el-button
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            circle
                            @click.stop="deleteIcon(item.id)"
                        ></el-button>
                    </li>
                </ul>
                <div v-show="!signShow" class="no-data">
                    <img src="/img/icon/no-data.png" alt />
                    <div>暂无数据</div>
                </div>
            </div>
        </template>
    </public-box>
</template>

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

export default {
  data() {
    return {
      loading: true,
      signList: [],
      signShow: true,
      destroyedFlag: true,
    };
  },
  computed: {
    ...mapGetters(["addSignList"]),
  },
  mounted() {
    this.$store.commit("initLabelLayer", global.viewer);
    this.getData();
  },
  watch: {
    addSignList() {
      this.getData();
    },
  },
  methods: {
    dingw(item) {
      const that = this;
      // console.log(item);
      // this.$store.dispatch("mapFlyTo", {
      //   lntLat: [item.jd, item.wd, 120], //114.04020791, 27.62934732
      //   heading: 0,
      //   pitch: -90,
      //   roll: 0,
      //   noOpen: true,
      //   mviewer: that.viewer,
      // });
      global.viewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          item.jd,
          item.wd,
          400.0
        ),
        orientation: {
          // 指向
          heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
          // 视角
          pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
    },
    deleteIcon(id) {
      const 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",
          });
    data () {
        return {
            loading: true,
            signList: [],
            signShow: true,
            destroyedFlag: true
        }
        that.getData();
      });
    },
    getData() {
      const that = this;
      that.loading = true;
      let oks = setTimeout(() => {
        that.loading = false;
        that.signShow = false;
      }, 5000);
      getlabel().then((res) => {
        clearTimeout(oks);
        console.log(res);
        const data = res.data.data.records;
        that.signList = data;
        that.signList.length > 0
          ? (that.signShow = true)
          : (that.signShow = false);
        that.loading = false;
        // that.$store.commit("clearLabelLayerIcon");
        that.$store.dispatch("addLabelLayerIcon", {
          list: data,
          clear: true,
        });
      });
    computed: {
        ...mapGetters(['addSignList'])
    },
    moveMessage(e, b) {
      if (b == "") {
        global.viewer.tooltip.enable = false;
      } else {
        global.viewer.tooltip.enable = true;
        global.viewer.tooltip.showAt(e.windowPosition, b);
      }
    mounted () {
        this.$store.commit('initLabelLayer', global.viewer)
        this.getData()
    },

    addSign() {
      var that = this;
      this.$store.commit("set_closeMapClick", true);
      // console.log("开始", "see");
      global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "点击确认标注位置")
      );

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

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

        // eslint-disable-next-line no-unused-vars
        new global.DC.DivForms(global.viewer, {
          domId: "AddTagBox",
          position: [
            global.DC.Transform.transformWGS84ToCartesian(
              new global.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);
      });
    watch: {
        addSignList () {
            this.getData()
        }
    },
    methods: {
        dingw (item) {
            // console.log(item);
            // this.$store.dispatch("mapFlyTo", {
            //   lntLat: [item.jd, item.wd, 120], //114.04020791, 27.62934732
            //   heading: 0,
            //   pitch: -90,
            //   roll: 0,
            //   noOpen: true,
            //   mviewer: that.viewer,
            // });
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    item.jd,
                    item.wd,
                    950.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },
        deleteIcon (id) {
            const 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()
            })
        },
        getData () {
            const that = this
            that.loading = true
            const oks = setTimeout(() => {
                that.loading = false
                that.signShow = false
            }, 5000)
            getlabel().then((res) => {
                clearTimeout(oks)
                console.log(res)
                const data = res.data.data.records
                that.signList = data
                that.signList.length > 0
                    ? (that.signShow = true)
                    : (that.signShow = false)
                that.loading = false
                // that.$store.commit("clearLabelLayerIcon");
                that.$store.dispatch('addLabelLayerIcon', {
                    list: data,
                    clear: true
                })
            })
        },
        moveMessage (e, b) {
            if (b == '') {
                global.viewer.tooltip.enable = false
            } else {
                global.viewer.tooltip.enable = true
                global.viewer.tooltip.showAt(e.windowPosition, b)
            }
        },

    closeModel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/pcLayout/default");
      this.$store.commit("clearLabelLayerIcon");
        addSign () {
            var that = this
            this.$store.commit('set_closeMapClick', true)
            // console.log("开始", "see");
            global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
                that.moveMessage(e, '点击确认标注位置')
            )

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

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

                // eslint-disable-next-line no-unused-vars
                var div = new global.DC.DivForms(global.viewer, {
                    domId: 'AddTagBox',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.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')
            this.$store.commit('clearLabelLayerIcon')
        }
    },
  },
  destroyed() {
    var that = this;
    that.destroyedFlag = false;
    if (global.DC) {
      global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "")
      );
    destroyed () {
        var that = this
        that.destroyedFlag = false
        if (global.DC) {
            global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) =>
                that.moveMessage(e, '')
            )
        }
        this.$store.commit('clearLabelLayerIcon')
    }
    this.$store.commit("clearLabelLayerIcon");
  },
};
}
</script>

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