地图部分修改

shuishen

2022-03-05 ebc12b5f54c664bfd06e884dc2040223392558f8

 src/components/map/components/mapPopup.vue

@@ -1,10 +1,8 @@
<template>
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup"
                 class="divForms-dom"
                 id="divFormsDomBox">
                <div style='width: 100%; height: 100%;'>
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -16,34 +14,43 @@
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{stateName}}
                                        <img v-show="introduceText != null && introduceText != ''"
                                             @click="audioPlay"
                                             class="audio-control"
                                             src="/img/navicon/audio.png"
                                             alt="">
                                        <img @click="closeMapPopupBox"
                                             class="close-box"
                                             src="/img/navicon/close.png"
                                             alt="">
                                        {{ stateName }}
                                        <img
                                            v-show="introduceText != null && introduceText != ''"
                                            @click="audioPlay"
                                            class="audio-control"
                                            src="/img/navicon/audio.png"
                                            alt
                                        />
                                        <img
                                            @click="closeMapPopupBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
                                            <img :src="popupBgUrl"
                                                 alt="">
                                            <img :src="popupBgUrl" alt />
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                        <div
                                            v-show="siteName != null && siteName != ''"
                                            class="site"
                                        >
                                            <strong>地址：</strong>
                                            {{siteName}}
                                            {{ siteName }}
                                        </div>
                                        <div v-show="telephone != null && telephone != ''"
                                             class="phone">
                                        <div
                                            v-show="telephone != null && telephone != ''"
                                            class="phone"
                                        >
                                            <strong>电话：</strong>
                                            {{telephone}}
                                            {{ telephone }}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                        <div
                                            v-show="introduceText != null && introduceText != ''"
                                            class="introduce"
                                        >
                                            <p ref="DomIntroduceText">
                                                <strong>介绍：</strong>
                                                <span v-html="introduceText"></span>
@@ -59,7 +66,7 @@
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li @click="qrCodeClick">
                                                <li v-show="false" @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
@@ -67,46 +74,64 @@
                                                    <i class="popup-icon atlas-nav deblurring"></i>
                                                    图集
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick">
                                                    <i class="popup-icon live-action-nav deblurring"></i>
                                                <li
                                                    v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick"
                                                >
                                                    <i
                                                        class="popup-icon live-action-nav deblurring"
                                                    ></i>
                                                    实景
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="monitorClick">
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                                                <li v-show="false" @click="monitorClick">
                                                    <i class="popup-icon monitor-nav deblurring"></i>
                                                    监控
                                                </li>
                                            </ul>
                                        </div>
                                        <div v-show="teachList.length > 0 || liveList.length > 0"
                                             class="arc-box">
                                        <div
                                            v-show="teachList.length > 0 || liveList.length > 0"
                                            class="arc-box"
                                        >
                                            <ul class="tab-btn">
                                                <li v-show="teachList.length > 0"
                                                    :class="{'on': tabBtnFlag == '教学科研行政'}"
                                                    @click="tabBtnClick('教学科研行政')">教学科研行政</li>
                                                <li v-show="liveList.length > 0"
                                                    :class="{'on': tabBtnFlag == '生活服务'}"
                                                    @click="tabBtnClick('生活服务')">生活服务</li>
                                                <li
                                                    v-show="teachList.length > 0"
                                                    :class="{ on: tabBtnFlag == '教学科研行政' }"
                                                    @click="tabBtnClick('教学科研行政')"
                                                >教学科研行政</li>
                                                <li
                                                    v-show="liveList.length > 0"
                                                    :class="{ on: tabBtnFlag == '生活服务' }"
                                                    @click="tabBtnClick('生活服务')"
                                                >生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div :class="{'on': tabBtnFlag == '教学科研行政'}">
                                                <div :class="{ on: tabBtnFlag == '教学科研行政' }">
                                                    <ul>
                                                        <li v-for="(item, index) in teachList"
                                                        <li
                                                            v-for="(item, index) in teachList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(0, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            {{item}}
                                                            @click="mechanismDetailPopup(0, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div :class="{'on': tabBtnFlag == '生活服务'}">
                                                <div :class="{ on: tabBtnFlag == '生活服务' }">
                                                    <ul>
                                                        <li v-for="(item, index) in liveList"
                                                        <li
                                                            v-for="(item, index) in liveList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(1, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            {{item}}
                                                            @click="mechanismDetailPopup(1, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
@@ -124,23 +149,41 @@
                </div>
            </div>

            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
                <div style="width: 100%; height: 100%;">
            <div
                v-if="panoramaPopup"
                class="panorama-dom"
                :class="{ 'change-full': fullscreen }"
                id="PanoramaBox"
            >
                <div style="width: 100%; height: 100%">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div class="content-wrap">
                            <div
                                class="content-wrap"
                                :class="{ 'change-full': fullscreen }"
                                id="FullScreenBox"
                            >
                                <div class="title">
                                    {{stateName}}
                                    <img @click="closePanoramaPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                    {{ stateName }}
                                    <img
                                        @click="screen"
                                        class="full-srceen-btn"
                                        :src="fullScreenUrl"
                                        alt
                                    />
                                    <img
                                        @click="closePanoramaPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <iframe :src="panoramaUrl"
                                            frameborder="0"></iframe>
                                    <iframe
                                        allowfullscreen="true"
                                        :src="panoramaUrl"
                                        frameborder="0"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
@@ -149,26 +192,103 @@
                </div>
            </div>

            <div v-if="monitorPopup"
                 class="monitor-dom"
                 id="MonitorBox">
                <div style="width: 100%; height: 100%;">
            <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
                <div style="width: 100%; height: 100%">
                    <div class="monitor-container">
                        <div class="monitor-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                    <img @click="closeMonitorPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                    {{ stateName }}
                                    <img
                                        @click="closeMonitorPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <video :src="monitorUrl"
                                           controls
                                           autoplay></video>
                                    <video :src="monitorUrl" controls autoplay></video>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>

            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        地图标记
                                        <img
                                            @click="closeAddTagBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content">
                                        <div>
                                            <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
                                        </div>
                                        <div>
                                            <el-button type="primary" @click="createTag">生成标记</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>

            <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{ nowlabelLayerData.name }} &nbsp; 二维码分享
                                        <img
                                            @click="closelabelLayerid"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content" style="height: 250px">
                                        <!-- data:image/png;base64, -->
                                        <img
                                            :src="nowlabelLayerData.qrcode"
                                            alt
                                            class="labelLayeridewm"
                                            style="width: 250px; height: 250px"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
@@ -177,39 +297,53 @@
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   :modal="false"
                   :modal-append-to-body="false"
                   width='44%'>
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
                <img width="260"
                     :src="pupupQRUrl"
                     alt=""
                     style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto">
                <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
                    (右键另存为图片)
                </div>
        <el-dialog
            title="场景二维码"
            :visible.sync="QRCodeFlag"
            :modal="false"
            :modal-append-to-body="false"
            width="44%"
        >
            <div style="margin: 0; position: relative; width: 100%; height: 352px">
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          "
                />
                <div
                    style="
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 36px;
            text-align: center;
          "
                >(右键另存为图片)</div>
            </div>
        </el-dialog>

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="popupImgAtlas[0]"
                  :preview-src-list="popupImgAtlas"
                  ref="popupImgs">
        </el-image>
        <el-image
            v-show="false"
            style="width: 100px; height: 100px"
            :src="popupImgAtlas[0]"
            :preview-src-list="popupImgAtlas"
            ref="popupImgs"
        ></el-image>
    </div>
</template>

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

export default {
    name: 'mapPopup',
@@ -222,7 +356,11 @@
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png',
            addTagName: '',
            addTagLayer: null
        }
    },
    computed: {
@@ -260,8 +398,13 @@
            'teachList',
            // 科研
            'liveList',
            // 社区内导航的显示关闭
            'campusNavFlag'
            // 校区内导航的显示关闭
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition',
            // 自定义标签弹窗
            'labelLayerDataShow',
            'nowlabelLayerData'
        ])
    },
    created () {
@@ -276,7 +419,14 @@
            this.audioCourse = false
        }
    },
    mounted () { },
    watch: {
        addTagPopup () {
            if (!this.addTagPopup) {
                // console.log("取消", "see");
                this.$store.commit('set_closeMapClick', false)
            }
        },
        introduceText: {
            immediate: true,
            handler (newQuestion, oldQuestion) {
@@ -322,6 +472,20 @@
        }
    },
    methods: {
        screen () {
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen

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

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

        tabBtnClick (param) {
            this.tabBtnFlag = param
        },
@@ -329,13 +493,17 @@
        comeHereClick () {
            this.$store.commit('SET_COMENAME', this.stateName)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            if (this.campusNavFlag == false) this.$store.commit('SET_CAMPUSNAVFLAG', true)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

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

        qrCodeClick () {
@@ -354,14 +522,15 @@
            }

            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            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
            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
                domId: 'PanoramaBox',
                position: [
                    positions
                ]
                position: [positions]
            })

            this.$store.commit('SET_DETAILSPOPUP', false)
@@ -376,14 +545,15 @@
                this.audioCourse = false
            }
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            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
            // eslint-disable-next-line no-unused-vars
            var monitor = new this.DC.PanoramaBox(this.viewer, {
                domId: 'MonitorBox',
                position: [
                    positions
                ]
                position: [positions]
            })
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', false)
@@ -397,6 +567,82 @@
                this.audioCourse = false
            }
            this.$store.commit('SET_DETAILSPOPUP', false)
        },

        // 新增标记相关事件
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
        },
        closelabelLayerid () {
            this.$store.commit('openLabelLayer', {
                show: false
            })
        },
        createTag () {
            var that = this

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

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

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

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

            // 2022.3.2对接接口
            // 新增标签
            const 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'
                    })
                }
                that.addTagName = ''
            })
            const doit = () => {
                that.$store.dispatch('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 () {
@@ -427,7 +673,7 @@
        },

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

@@ -435,7 +681,14 @@

                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_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)
@@ -448,32 +701,48 @@

                this.newPopup(result)
                this.viewer.flyToPosition(
                    new this.DC.Position(Number(result.jd), Number(result.wd), 300, Number(result.heading), Number(result.pitch), Number(result.roll)),
                    function () {
                    },
                    new this.DC.Position(
                        Number(result.jd),
                        Number(result.wd),
                        300,
                        Number(result.heading),
                        Number(result.pitch),
                        Number(result.roll)
                    ),
                    function () { },
                    3
                )
            })
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd)))
            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
                ]
                position: [position]
            })

            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, '')
        }
    }

}
</script>

<style>
.labelLayeridewm {
    width: 250px !important;
    height: 250px !important;
}
</style>