弹框完善

shuishen

2021-12-17 b5f8881176bcb44928758e25d7d7a6fc140840c5

弹框完善

 package-lock.json

@@ -7935,8 +7935,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
      "dev": true
      "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
    },
    "lodash.debounce": {
      "version": "4.0.8",

 package.json

@@ -13,6 +13,7 @@
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "element-ui": "^2.15.6",
        "lodash": "^4.17.21",
        "vue": "^2.6.11",
        "vue-axios": "^3.3.7",
        "vue-router": "^3.5.2",

 public/img/icon/xyjz.png

 src/components/arcNavBar/index.vue

@@ -7,7 +7,7 @@
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon"
                         src="/img/icon/jg.png"
                         src="/img/icon/xyjz.png"
                         alt="">
                    <span>
                        {{title}}
@@ -46,6 +46,9 @@
<script>
import { mapGetters } from 'vuex'
import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'

var $ = window.$

export default {
    name: 'ArcNavBar',
    data () {
@@ -71,7 +74,13 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl'
        ])
    },
    created () {
@@ -164,10 +173,15 @@
        mapPopup (param) {
            getChildNavDetail({ id: param.id }).then(res => {
                var result = res.data.data[0].list
                this.$store.commit('CLEAR_ALL', null)

                this.$store.commit('SET_POPUPBGURL', result.tpUrl)
                this.$store.commit('SET_POPUPQRURL', result.codeUrl)
                this.$store.commit('SET_POINTPOSITION', [result.jd, result.wd, result.gd, result.heading, result.pitch, 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_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)

                var that = this
                // item.alt, item.heading, item.pitch, item.roll
@@ -182,16 +196,16 @@
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.jd, item.wd, item.gd, item.heading, item.pitch, item.roll))
            // eslint-disable-next-line new-cap
            var popup = new this.DC.divForms(this.viewer, {
                domId: 'div1',
                title: item.mechanismName,
                className: 'divForms-dom',
                content: document.getElementById('mapChildContent'),
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

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

 src/components/leftNav/index.vue

@@ -98,8 +98,8 @@
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 121.1372 + Math.random() * 0.5
                const lat = 31.0129 + Math.random() * 0.5
                const lng = 121.44405783 + Math.random() * 0.5
                const lat = 31.19480456 + Math.random() * 0.5
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list

 src/components/map/component/mapPopup.vue

New file
@@ -0,0 +1,266 @@
<template>
    <div>
        <div id="map_popup_content">
            <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">
                                <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">
                                        {{stateName}}
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
                                            <img :src="popupBgUrl"
                                                 alt="">
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                            <strong>地址:</strong>{{siteName}}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                            <p>
                                                <strong>介绍:</strong>
                                                {{introduceText}}
                                            </p>
                                        </div>
                                        <div class="popup-nav">
                                            <ul>
                                                <li @click="comeHereClick">
                                                    <i class="popup-icon come-nav deblurring"></i>
                                                    到这
                                                </li>
                                                <li @click="getToHereClick">
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
                                                <li @click="imgsClick">
                                                    <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>
                                            </ul>
                                        </div>
                                        <div class="arc-box">
                                            <ul class="tab-btn">
                                                <li class="on">教学科研行政</li>
                                                <li>生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div class="on">
                                                    <ul>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            教学楼
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                        </li>
                                                        <li>
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            生活楼
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="btm-box"></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="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
                <div style="width: 100%; height: 100%;">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                </div>
                                <div class="content">
                                    <iframe :src="panoramaUrl"
                                            frameborder="0"></iframe>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   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="url"
                  :preview-src-list="srcList"
                  ref="popupImgs">
        </el-image>

        <campusNav ref="campusNavRoute"
                   :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'mapPopup',
    data () {
        return {
            DC: null,
            campusNavFlag: false,
            comeName: '',
            getToName: '',
            QRCodeFlag: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 终点
            'terminus',
            // 起点
            'startingPoint',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景弹框显示关闭
            'panoramaPopup'
        ])
    },
    created () {
        this.DC = global.DC

        this.$nextTick(() => {
            $('#map_popup_content').on('click', '.tab-btn li', function (e) {
                $(this).addClass('on').siblings().removeClass('on')

                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })
        })
    },
    methods: {
        closeCampusNav () {
            this.campusNavFlag = false
            this.$refs.campusNavRoute.clearLayer()
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_TERMINUS', null)
            this.comeName = ''
            this.getToName = ''
        },

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

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

        qrCodeClick () {
            this.QRCodeFlag = true
        },

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

        panoramaClick () {
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(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
                ]
            })
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', true)
        }
    }

}
</script>

<style>
</style>

 src/components/map/index.vue

@@ -3,165 +3,24 @@
    <div id="viewer-container"
         style="height: 100%; width: 100%;">

        <div v-show='popupFlag'
             id="modelPopup"
             style="width: 366px;
                height: 240px;
                background: url(/img/bg/nav-bg.jpeg) no-repeat;
                background-size: 100% 100%;">
            <div class="header">
                <div class="logo">
                    <img src="/img/navicon/map.png"
                         alt="">
                </div>
                <div class="title">
                    明德楼
                </div>
                <div class="close">
                    <img src="/img/navicon/close.png"
                         alt="">
                </div>
            </div>
            <div class="content">
                <div class="img">

                </div>
                <div class="meau">

                </div>
            </div>
        </div>

        <div id="map_popup_content">
        </div>

        <div ref="mapContentContent"
             v-show="false"
             id="map_content_content">
            <div id="mapChildContent">
                <div class="arc-bcg">
                    <img :src="popupBgUrl"
                         alt="">
                </div>
                <div class="popup-nav">
                    <ul>
                        <li class="come-here-fun"
                            :terminus="terminus">
                            <i class="popup-icon come-nav deblurring"></i>
                            到这
                        </li>
                        <li class="get-to-fun"
                            :startingPoint="startingPoint">
                            <i class="popup-icon start-nav deblurring"></i>
                            出发
                        </li>
                        <li class="qr-code-fun">
                            <i class="popup-icon qr-code-nav deblurring"></i>
                            二维码
                        </li>
                        <li class="imgs-fun">
                            <i class="popup-icon atlas-nav deblurring"></i>
                            图集
                        </li>
                        <li>
                            <i class="popup-icon live-action-nav deblurring"></i>
                            实景
                        </li>
                    </ul>
                </div>
                <div class="arc-box">
                    <ul class="tab-btn">
                        <li class="on">教学科研行政</li>
                        <li>生活服务</li>
                    </ul>
                    <div class="btm-content">
                        <div class="on">
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    教学楼
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                                <li>
                                    <i class="popup-icon location-icon deblurring"></i>
                                    生活楼
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="btm-box"></div>
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   width='44%'
                   :before-close="handleClose">
            <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>

        <left-nav ref="leftNav"></left-nav>

        <campusNav ref="campusNavRoute"
                   :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                  ref="popupImgs">
        </el-image>

        <mapPopup />
    </div>
</template>
<script>

import { mapGetters } from 'vuex'

var $ = window.$
import mapPopup from './component/mapPopup.vue'

export default {
    name: 'mapBox',
    components: {
        mapPopup
    },
    data () {
        return {
            popupFlag: false,
            campusNavFlag: false,
            comeName: '',
            getToName: '',
            QRCodeFlag: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
            DC: null
        }
    },
    computed: {
@@ -176,51 +35,25 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景弹框显示关闭
            'panoramaPopup'
        ])
    },
    mounted () {
        var that = this

        this.$nextTick(() => {
            // 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
            $('#map_popup_content').on('click', '.arc-bcg', function () {
                alert(1)
            })

            $('#map_popup_content').on('click', '.tab-btn li', function (e) {
                $(this).addClass('on').siblings().removeClass('on')

                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })

            // 终点
            $('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) {
                that.comeName = that.stateName
                that.$store.commit('SET_TERMINUS', that.pointPosition)
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })

            // 起点
            $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
                that.getToName = that.stateName
                that.$store.commit('SET_STARTINGPOINT', that.pointPosition)
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })

            $('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) {
                that.QRCodeFlag = true
            })

            $('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) {
                console.log(that.$refs.popupImgs)
                that.$refs.popupImgs.clickHandler()
            })
        })

        var DC = global.DC

        let viewer

        that.DC = global.DC

        function distanceSurface () {
            viewer.measure.distanceSurface()
@@ -281,7 +114,7 @@
        }

        function initViewer () {
            viewer = new DC.Viewer('viewer-container', {
            viewer = new that.DC.Viewer('viewer-container', {
                contextOptions: {
                    webgl: {
                        stencil: true,
@@ -298,7 +131,7 @@

            popup.hide()

            const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            })
@@ -308,7 +141,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_shaded = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
            })
@@ -318,7 +151,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_street = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
            })
@@ -328,7 +161,7 @@
            })

            // eslint-disable-next-line camelcase
            const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
            const baselayer_ter = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
                url:
                    'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
            })
@@ -337,52 +170,55 @@
                name: '地形'
            })

            const layer = new DC.TilesetLayer('layer')
            const layer = new that.DC.TilesetLayer('layer')
            viewer.addLayer(layer)
            const tileset = new DC.Tileset(
            const tileset = new that.DC.Tileset(
                'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
            )
            const style = new DC.TilesetStyle()
            const style = new that.DC.TilesetStyle()
            style.color = {
                conditions: [
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 200', 'rgb(102, 71, 151)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 100', 'rgb(170, 162, 204)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 50', 'rgb(224, 226, 238)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 25', 'rgb(252, 230, 200)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 10', 'rgb(248, 176, 87)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['${Height} >= 5', 'rgb(198, 106, 11)'],
                    // eslint-disable-next-line no-template-curly-in-string
                    ['true', 'rgb(127, 59, 8)']
                ]
            }

            viewer.use(new DC.Measure())
            viewer.use(new that.DC.Measure())

            tileset.setStyle(style)
            layer.addOverlay(tileset)
            viewer.flyTo(tileset)

            tileset.on(DC.MouseEventType.CLICK, e => {
            tileset.on(that.DC.MouseEventType.CLICK, e => {
                // that.popupFlag = true

                console.log(e.position)

                viewer.scene.globe.depthTestAgainstTerrain = false

                // 定制化窗体
                var divForms = new DC.divForms(viewer, {
                    domId: 'div1',
                    title: '成教楼  ',
                    className: 'divForms-dom',
                    content: document.getElementById('mapChildContent'),
                // eslint-disable-next-line no-unused-vars
                var popup = new that.DC.DivForms(that.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        e.position
                    ]
                })

                // popup.setWrapper('<div></div>')

                // popup.showAt(e.position, document.getElementById('modelPopup'))
                that.$store.commit('SET_PANORAMAPOPUP', false)
                that.$store.commit('SET_DETAILSPOPUP', true)
            })

            // viewer.zoomToPosition(
@@ -395,17 +231,10 @@
            viewer.distanceLegend.enable = true
        }

        DC.ready(initViewer)
        that.DC.ready(initViewer)
    },
    methods: {
        closeCampusNav () {
            this.campusNavFlag = false
            this.$refs.campusNavRoute.clearLayer()
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_TERMINUS', null)
            this.comeName = ''
            this.getToName = ''
        }

    }
}
</script>

 src/components/orgNavBar/index.vue

@@ -37,6 +37,9 @@

<script>
import { mapGetters } from 'vuex'

var $ = window.$

export default {
    name: 'OrgNavBar',
    data () {
@@ -64,7 +67,13 @@
            // 点信息
            'pointPosition',
            // 点名称
            'stateName'
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl'
        ])
    },
    methods: {
@@ -118,14 +127,15 @@
            this.$parent.closeModel()
        },
        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

            this.$store.commit('SET_POPUPBGURL', item.bgImg)
            this.$store.commit('SET_POPUPQRURL', item.QRImg)
            this.$store.commit('SET_POINTPOSITION', [item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll])
            this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.navTitle)

            console.log(this.popupBgUrl)
            var that = this
            // item.alt, item.heading, item.pitch, item.roll

            this.viewer.zoomToPosition(
                new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll),
                function () {
@@ -135,16 +145,16 @@
        },
        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll))
            // eslint-disable-next-line new-cap
            var popup = new this.DC.divForms(this.viewer, {
                domId: 'div1',
                title: item.navTitle,
                className: 'divForms-dom',
                content: document.getElementById('mapChildContent'),
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
            })

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

 src/divForms/divForms.js

@@ -10,11 +10,9 @@
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

var $ = window.$

DC.use(DcCore) // 安装DC核心库

class divForms {
class DivForms {
    /**
     * @popup 存放 dom 相关
     *
@@ -23,21 +21,11 @@
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this._title = popup.title
        this._content = popup.content
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get title () {
        return this._title
    }

    get content () {
        return this._content
    }

    get popup () {
@@ -53,97 +41,47 @@
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id, className, position) {
        var childs = document.getElementById('map_popup_content').getElementsByTagName('div')
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

        if (childs.length > 0) {
            for (var i = 0; i < childs.length; i++) {
                document.getElementById('map_popup_content').removeChild(childs[i])
            }
        }

    movePopup (id) {
        var self = this

        var el = $("<div class=''></div>")

        var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")

        var divForms = $("<div class='divForms divForms-theme'></div>")

        var divFormsWrap = $("<div class='divForms-wrap'></div>")

        var area = $("<div class='area'></div>")

        var arrowLt = $("<div class='arrow-lt'></div>")
        var bT = $("<div class='b-t'></div>")
        var bR = $("<div class='b-r'></div>")
        var bB = $("<div class='b-b'></div>")
        var bL = $("<div class='b-l'></div>")
        var arrowRb = $("<div class='arrow-rb'></div>")

        var labelWrap = $("<div class='label-wrap'></div>")
        var titleDiv = $("<div class='title'></div>").text(this._title)
        var labelContent = $("<div class='label-content'></div>").append(this._content)

        labelWrap.append(titleDiv)
        labelWrap.append(labelContent)

        var bTL = $("<div class='b-t-l'></div>")
        var bBR = $("<div class='b-b-r'></div>")

        var arrow = $("<div class='arrow'></div>")

        area.append(arrowLt)
        area.append(bT)
        area.append(bR)
        area.append(bB)
        area.append(bL)
        area.append(arrowRb)
        area.append(labelWrap)

        divFormsWrap.append(area)
        divFormsWrap.append(bTL)
        divFormsWrap.append(bBR)

        divForms.append(divFormsWrap)
        divForms.append(arrow)

        divBig.append(divForms)
        el.append(divBig)

        el.attr('id', id)

        el.addClass(className || '')

        $('#map_popup_content').append(el)

        this._viewer.scene.postRender.addEventListener(function () {
        return function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
                self._position[0]
            )

            self.positionPopUp(windowCoord, id)
        })
        }
    }

    clearMove (id) {
        this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
    }

    positionPopUp (windowCoord, id) {
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x)) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default divForms
export default DivForms

 src/divForms/panoramaBox.js

New file
@@ -0,0 +1,84 @@
/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */

import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

DC.use(DcCore) // 安装DC核心库

class PanoramaBox {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor (viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get popup () {
        return this._popup
    }

    get position () {
        return this._position
    }

    appendPopup () {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

    movePopup (id) {
        var self = this
        return function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                self._position[0]
            )

            self.positionPopUp(windowCoord, id)
        }
    }

    positionPopUp (windowCoord, id) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default PanoramaBox

 src/main.js

@@ -29,21 +29,24 @@

import '@dvgis/dc-sdk/dist/dc.core.min.css'

import divForms from '@/divForms/divForms'
import DivForms from '@/divForms/divForms'
import PanoramaBox from '@/divForms/panoramaBox'

// 手机弹窗
import mobileDivForms from '@/mobileDivForms/mobileDivForms'

Vue.prototype.$echarts = echarts
import _ from 'lodash'
Vue.prototype._ = _

console.log(DcCore)
Vue.prototype.$echarts = echarts

Vue.component(CollapseTransition.name, CollapseTransition) // 主要样式

global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用
global.echarts = echarts // 将DC提升到全局变量，方便在工程中直接使用

DC.divForms = divForms
DC.DivForms = DivForms
DC.PanoramaBox = PanoramaBox
DC.mobileDivForms = mobileDivForms

DC.use(DcCore) // 安装DC核心库

 src/pcviews/service/index.vue

@@ -1,15 +1,16 @@
<template>
  <div>
      生活服务设施
  </div>
    <div>
        生活服务设施
    </div>
</template>

<script>
export default {

    created () {
        alert(1)
    }
}
</script>

<style>

</style>

 src/store/getters.js

@@ -6,6 +6,11 @@
    pointPosition: state => state.popupParams.pointPosition,
    terminus: state => state.popupParams.terminus,
    startingPoint: state => state.popupParams.startingPoint,
    stateName: state => state.popupParams.stateName
    stateName: state => state.popupParams.stateName,
    siteName: state => state.popupParams.siteName,
    introduceText: state => state.popupParams.introduceText,
    panoramaUrl: state => state.popupParams.panoramaUrl,
    detailsPopup: state => state.popupParams.detailsPopup,
    panoramaPopup: state => state.popupParams.panoramaPopup
}
export default getters

 src/store/modules/popupParams.js

@@ -5,7 +5,12 @@
        terminus: null,
        startingPoint: null,
        pointPosition: null,
        stateName: null
        stateName: null,
        siteName: null,
        introduceText: null,
        panoramaUrl: null,
        detailsPopup: false,
        panoramaPopup: false
    },
    mutations: {
        SET_POPUPBGURL (state, popupBgUrl) {
@@ -25,6 +30,27 @@
        },
        SET_STATENAME (state, stateName) {
            state.stateName = stateName
        },
        SET_SITENAME (state, siteName) {
            state.siteName = siteName
        },
        SET_INTRODUCETEXT (state, introduceText) {
            state.introduceText = introduceText
        },
        SET_PANORAMAURL (state, panoramaUrl) {
            state.panoramaUrl = panoramaUrl
        },
        SET_DETAILSPOPUP (state, detailsPopup) {
            state.detailsPopup = detailsPopup
        },
        SET_PANORAMAPOPUP (state, panoramaPopup) {
            state.panoramaPopup = panoramaPopup
        },

        CLEAR_ALL (state, param) {
            state.siteName = param
            state.introduceText = param
            state.panoramaUrl = param
        }
    },
    actions: {

 src/styles/common.scss

@@ -13,6 +13,7 @@

// page
@import "./divforms/divForms.scss";
@import "./divforms/panoramaBox.scss";
@import "./divforms/popup.scss";

// 手机样式

 src/styles/divforms/divForms.scss

@@ -1,7 +1,7 @@
.divForms-dom {
  position: fixed;
  left: 0;
  z-index: 1;
  z-index: 1 !important;
}

.divForms .arrow {

 src/styles/divforms/panoramaBox.scss

New file
@@ -0,0 +1,40 @@
.panorama-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;

    .panorama-wrap {
        position: relative;
        overflow: hidden;
        padding: 30px;

        .content-wrap {
            padding: 0 20px 20px 20px;

            background-image: linear-gradient(180deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50%, transparent 50%), linear-gradient(0deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50.1%, transparent 50%);
            border: 1px solid #29baf1;
            box-shadow: 0 0px 12px #29b8f1e5;

            .title {
                line-height: 36px;
                color: #fff;
                text-align: center;
            }
        }

        iframe {
            width: 460px;
            height: 320px;
        }
    }

    .arrow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg) translate(5px, -15px);
        background-color: #28bbf0;
    }
}

 src/styles/divforms/popup.scss

@@ -121,4 +121,28 @@
            background: #666;
        }
    }
}

.site {
    font-size: 0.875rem;
    line-height: 24px;

    strong {
        font-size: 0.875rem;
    }
}

.introduce {

    strong {
        font-size: 0.875rem;
    }

    p {
        white-space: normal !important;
        word-wrap: break-word !important;
        max-width: 396px;
        font-size: 0.875rem;
        line-height: 24px;
    }
}