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

liuyg

2022-03-02 e7c6c4eecddae9515b0cd1be68335690843df3d1

 src/components/map/components/mapPopup.vue

@@ -2,7 +2,7 @@
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div style="width: 100%; height: 100%;">
        <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -78,9 +78,7 @@
                                                    v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick"
                                                >
                                                    <i
                                                        class="popup-icon live-action-nav deblurring"
                                                    ></i>
                          <i class="popup-icon live-action-nav deblurring"></i>
                                                    实景
                                                </li>
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
@@ -99,12 +97,16 @@
                                                    v-show="teachList.length > 0"
                                                    :class="{ on: tabBtnFlag == '教学科研行政' }"
                                                    @click="tabBtnClick('教学科研行政')"
                                                >教学科研行政</li>
                        >
                          教学科研行政
                        </li>
                                                <li
                                                    v-show="liveList.length > 0"
                                                    :class="{ on: tabBtnFlag == '生活服务' }"
                                                    @click="tabBtnClick('生活服务')"
                                                >生活服务</li>
                        >
                          生活服务
                        </li>
                                            </ul>
                                            <div class="btm-content">
                                                <div :class="{ on: tabBtnFlag == '教学科研行政' }">
@@ -155,7 +157,7 @@
                :class="{'change-full': fullscreen}"
                id="PanoramaBox"
            >
                <div style="width: 100%; height: 100%;">
        <div style="width: 100%; height: 100%">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div
@@ -193,7 +195,7 @@
            </div>

            <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
                <div style="width: 100%; height: 100%;">
        <div style="width: 100%; height: 100%">
                    <div class="monitor-container">
                        <div class="monitor-wrap">
                            <div class="content-wrap">
@@ -217,7 +219,7 @@
            </div>

            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%;">
        <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -239,10 +241,15 @@
                                    </div>
                                    <div class="add-tag-content">
                                        <div>
                                            <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
                      <el-input
                        v-model="addTagName"
                        placeholder="请输入标签名称"
                      ></el-input>
                                        </div>
                                        <div>
                                            <el-button type="primary" @click="createTag">生成标记</el-button>
                      <el-button type="primary" @click="createTag"
                        >生成标记</el-button
                      >
                                        </div>
                                    </div>
                                </div>
@@ -264,21 +271,31 @@
            :modal-append-to-body="false"
            width="44%"
        >
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
      <div style="margin: 0; position: relative; width: 100%; height: 352px">
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="position: absolute;
          style="
            position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto"
            margin: auto;
          "
                />
                <div
                    style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;"
                >(右键另存为图片)</div>
          style="
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 36px;
            text-align: center;
          "
        >
          (右键另存为图片)
        </div>
            </div>
        </el-dialog>

@@ -293,322 +310,349 @@
</template>

<script>
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'
import { mapGetters } from "vuex";
import { getMechanismDetail } from "@/api/pc/public/arc";
import { setlabel } from "@/api/pc/label";

export default {
    name: 'mapPopup',
  name: "mapPopup",
    data () {
        return {
            DC: null,
            tabBtnFlag: '教学科研行政',
      tabBtnFlag: "教学科研行政",
            QRCodeFlag: false,
            audioSource: '',
      audioSource: "",
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png',
            addTagName: '',
            addTagLayer: null
        }
      fullScreenUrl: "/img/icon/bigScreen.png",
      addTagName: "",
      addTagLayer: null,
    };
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
            // 终点
            'terminus',
      "terminus",
            // 起点
            'startingPoint',
      "startingPoint",
            // 点信息
            'pointPosition',
      "pointPosition",
            // 点名称
            'stateName',
      "stateName",
            // 地址
            'siteName',
      "siteName",
            // 电话
            'telephone',
      "telephone",
            // 介绍
            'introduceText',
      "introduceText",
            // 详情弹框显示关闭
            'detailsPopup',
      "detailsPopup",
            // 全景地址
            'panoramaUrl',
      "panoramaUrl",
            // 全景弹框显示关闭
            'panoramaPopup',
      "panoramaPopup",
            // 监控地址
            'monitorUrl',
      "monitorUrl",
            // 监控弹框显示关闭
            'monitorPopup',
      "monitorPopup",

            'popupImgAtlas',
      "popupImgAtlas",
            // 教学
            'teachList',
      "teachList",
            // 科研
            'liveList',
      "liveList",
            // 社区内导航的显示关闭
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition'
        ])
      "campusNavFlag",
      "addTagPopup",
      "addTagPosition",
    ]),
    },
    created () {
        this.DC = global.DC
    this.DC = global.DC;

        this.audioSynth = window.speechSynthesis
        this.audioMsg = new window.SpeechSynthesisUtterance()
    this.audioSynth = window.speechSynthesis;
    this.audioMsg = new window.SpeechSynthesisUtterance();

        this.audioMsg.onend = function () {
            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false
        }
      this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;
    };
    },
    mounted () {

    },
  mounted() {},
    watch: {
        introduceText: {
            immediate: true,
            handler (newQuestion, oldQuestion) {
                this.audioSource = newQuestion
        this.audioSource = newQuestion;
                if (this.audioFlag == true) {
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
          this.audioSynth.cancel();
          this.audioFlag = false;
          this.audioCourse = false;
                }
            }
      },
        },
        teachList: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode.length > 0) {
                    this.tabBtnFlag = '教学科研行政'
          this.tabBtnFlag = "教学科研行政";
                }
            }
      },
        },
        liveList: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode.length > 0 && this.teachList.length == 0) {
                    this.tabBtnFlag = '生活服务'
          this.tabBtnFlag = "生活服务";
                }
            }
      },
        },
        detailsPopup: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode == false) {
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
          this.audioSynth.cancel();
          this.audioFlag = false;
          this.audioCourse = false;
                } else {
                    if (this.audioFlag == true) {
                        this.audioSynth.cancel()
                        this.audioFlag = false
                        this.audioCourse = false
            this.audioSynth.cancel();
            this.audioFlag = false;
            this.audioCourse = false;
                    }
                }
            }
        }
      },
    },
    },
    methods: {
        screen () {
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen
        this.fullScreenUrl = "/img/icon/bigScreen.png";
        this.fullscreen = !this.fullscreen;

                document.getElementById('pcElHeader').style.zIndex = 9999
        document.getElementById("pcElHeader").style.zIndex = 9999;
            } else {
                this.fullScreenUrl = '/img/icon/smallScreen.png'
                this.fullscreen = !this.fullscreen
        this.fullScreenUrl = "/img/icon/smallScreen.png";
        this.fullscreen = !this.fullscreen;

                document.getElementById('pcElHeader').style.zIndex = 9
        document.getElementById("pcElHeader").style.zIndex = 9;
            }
        },

        tabBtnClick (param) {
            this.tabBtnFlag = param
      this.tabBtnFlag = param;
        },

        comeHereClick () {
            this.$store.commit('SET_COMENAME', this.stateName)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
      this.$store.commit("SET_COMENAME", this.stateName);
      this.$store.commit("SET_TERMINUS", this.pointPosition);
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
        this.$store.commit("SET_CAMPUSNAVFLAG", true);
            }
        },

        getToHereClick () {
            this.$store.commit('SET_GETTONAME', this.stateName)
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
      this.$store.commit("SET_GETTONAME", this.stateName);
      this.$store.commit("SET_STARTINGPOINT", this.pointPosition);
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
        this.$store.commit("SET_CAMPUSNAVFLAG", true);
            }
        },

        qrCodeClick () {
            this.QRCodeFlag = true
      this.QRCodeFlag = true;
        },

        imgsClick () {
            this.$refs.popupImgs.clickHandler()
      this.$refs.popupImgs.clickHandler();
        },

        panoramaClick () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
            }

            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new this.DC.Position.fromArray(this.pointPosition)
            )
            this.viewer.scene.globe.depthTestAgainstTerrain = false
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
                domId: 'PanoramaBox',
                position: [positions]
            })
        domId: "PanoramaBox",
        position: [positions],
      });

            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', true)
      this.$store.commit("SET_DETAILSPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", false);
      this.$store.commit("SET_PANORAMAPOPUP", true);
        },

        monitorClick () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
            }
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new this.DC.Position.fromArray(this.pointPosition)
            )
            this.viewer.scene.globe.depthTestAgainstTerrain = false
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
            // eslint-disable-next-line no-unused-vars
            var monitor = new this.DC.PanoramaBox(this.viewer, {
                domId: 'MonitorBox',
                position: [positions]
            })
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', true)
        domId: "MonitorBox",
        position: [positions],
      });
      this.$store.commit("SET_PANORAMAPOPUP", false);
      this.$store.commit("SET_DETAILSPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", true);
        },

        closeMapPopupBox () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
            }
            this.$store.commit('SET_DETAILSPOPUP', false)
      this.$store.commit("SET_DETAILSPOPUP", false);
        },

        // 新增标记相关事件
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
      this.$store.commit("SET_ADDTAGPOPUP", false);
        },

        createTag () {
            var that = this
      var that = this;

            console.log(this.RemoveTheBlank(this.addTagName))
      //   console.log(this.RemoveTheBlank(this.addTagName));

            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
      if (this.RemoveTheBlank(this.addTagName) == "") {
        this.$message("请输入标签名称");
        return;
            }

            this.$store.commit('SET_ADDTAGPOPUP', false)
      this.$store.commit("SET_ADDTAGPOPUP", false);

            if (this.addTagLayer == null) {
                this.addTagLayer = new this.DC.HtmlLayer('addTagLayer')
                this.viewer.addLayer(this.addTagLayer)
      //   if (this.addTagLayer == null) {
      //     this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
      //     this.viewer.addLayer(this.addTagLayer);
      //   }

      //2022.3.2对接接口
      // 新增标签
      let data = {
        name: this.RemoveTheBlank(this.addTagName),
        jd: this.addTagPosition.lng,
        wd: this.addTagPosition.lat,
      };
      //   console.log(data);
      setlabel(data).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          doit();
          that.$message({
            message: "新增标签成功",
            type: "success",
          });
        } else {
          that.$message({
            message: "新增标签失败",
            type: "warning",
          });
            }

            const divIcon = new this.DC.DivIcon(
                new that.DC.Position(Number(that.addTagPosition.lng), Number(that.addTagPosition.lat), 0),
                `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${that.addTagName}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </div>
                        </div>
                    `
            )

            this.addTagName = ''

            this.addTagLayer.addOverlay(divIcon)
        that.addTagName = "";
      });
      let doit = () => {
        that.$store.commit("addLabelLayerIcon", { list: [data], add: true });
        // const divIcon = new this.DC.DivIcon(
        //   new that.DC.Position(
        //     Number(that.addTagPosition.lng),
        //     Number(that.addTagPosition.lat),
        //     0
        //   ),
        //   `
        //                 <div class="tag-entitys-box">
        //                     <div class="tag-content">
        //                         ${that.addTagName}
        //                     </div>
        //                     <div class="tag-angle-content">
        //                         <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
        //                     </div>
        //                 </div>
        //             `
        // );
        // this.addTagLayer.addOverlay(divIcon);
      };
        },

        closePanoramaPopupBox () {
            this.$store.commit('SET_PANORAMAURL', '')
            this.$store.commit('SET_PANORAMAPOPUP', false)
      this.$store.commit("SET_PANORAMAURL", "");
      this.$store.commit("SET_PANORAMAPOPUP", false);
        },

        closeMonitorPopupBox () {
            this.$store.commit('SET_MONITORURL', '')
            this.$store.commit('SET_MONITORPOPUP', false)
      this.$store.commit("SET_MONITORURL", "");
      this.$store.commit("SET_MONITORPOPUP", false);
        },

        audioPlay () {
            if (this.audioFlag == false) {
                this.audioMsg.text = this.audioSource
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
        this.audioMsg.text = this.audioSource;
        this.audioSynth.speak(this.audioMsg);
        this.audioFlag = true;
        this.audioCourse = true;
            } else {
                if (this.audioCourse == true) {
                    this.audioSynth.pause()
                    this.audioCourse = false
          this.audioSynth.pause();
          this.audioCourse = false;
                } else {
                    this.audioSynth.resume()
                    this.audioCourse = true
          this.audioSynth.resume();
          this.audioCourse = true;
                }
            }
        },

        mechanismDetailPopup (num, param) {
            getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
                var result = res.data.data
                this.$store.commit('CLEAR_ALL', null)
        var result = res.data.data;
        this.$store.commit("CLEAR_ALL", null);

                var imgArr = result.tpurl.split(',')
        var imgArr = result.tpurl.split(",");

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPQRURL', result.codeurl)
                this.$store.commit('SET_POINTPOSITION', [
        this.$store.commit("SET_POPUPBGURL", imgArr[0]);
        this.$store.commit("SET_POPUPQRURL", result.codeurl);
        this.$store.commit("SET_POINTPOSITION", [
                    Number(result.jd),
                    Number(result.wd),
                    Number(result.gd),
                    Number(result.heading),
                    Number(result.pitch),
                    Number(result.roll)
                ])
                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_TELEPHONE', result.telephone)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)
          Number(result.roll),
        ]);
        this.$store.commit("SET_STATENAME", result.mechanismname);
        this.$store.commit("SET_SITENAME", result.address);
        this.$store.commit("SET_TELEPHONE", result.telephone);
        this.$store.commit("SET_INTRODUCETEXT", result.introduce);
        this.$store.commit("SET_POPUPIMGATLAS", imgArr);

                if (result.videourl && result.videourl != '') {
                    this.$store.commit('SET_MONITORURL', result.videourl)
        if (result.videourl && result.videourl != "") {
          this.$store.commit("SET_MONITORURL", result.videourl);
                }

                this.newPopup(result)
        this.newPopup(result);
                this.viewer.flyToPosition(
                    new this.DC.Position(
                        Number(result.jd),
@@ -620,33 +664,33 @@
                    ),
                    function () { },
                    3
                )
            })
        );
      });
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(
                new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
            )
      );
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [position]
            })
        domId: "divFormsDomBox",
        position: [position],
      });

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
      this.$store.commit("SET_PANORAMAPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", false);
      this.$store.commit("SET_DETAILSPOPUP", true);
        },

        /**
        * 删除左右两端的空格
        */
        RemoveTheBlank (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        }
    }
}
      return str.replace(/(^\s*)|(\s*$)/g, "");
    },
  },
};
</script>

<style></style>