1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/pcviews/specialmap/welcome.vue

@@ -9,7 +9,7 @@
                    <a href="javascript:void(0);" title="全景浏览">
                        <img
                            @click="panoramaPlay"
                            class="panorama-control"
                            class="panorama-control deblurring"
                            src="/img/icon/panorama.png"
                            alt
                        />
@@ -17,13 +17,18 @@
                    <a href="javascript:void(0);" title="语音介绍">
                        <img
                            @click="audioPlay"
                            class="audio-control"
                            src="/img/navicon/audio.png"
                            class="audio-control deblurring"
                            :src="audioImgUrl"
                            alt
                        />
                    </a>
                    <a href="javascript:void(0);" title="关闭">
                        <img @click="closeModel" class="close-box" src="/img/navicon/close.png" alt />
                        <img
                            @click="closeModel"
                            class="close-box deblurring"
                            src="/img/navicon/close.png"
                            alt
                        />
                    </a>
                </div>
            </div>
@@ -68,6 +73,16 @@
                </div>
            </div>
        </div>

        <div v-show="layerList.length > 0" class="layer-manage-container">
            <div class="header">图层管理</div>
            <ul class="content">
                <li v-for="(item, index) in layerList" :key="index">
                    {{item.name}}:
                    <el-switch v-model="item.flag" @change="switchChange(item)"></el-switch>
                </li>
            </ul>
        </div>
    </div>
</template>

@@ -75,9 +90,15 @@
import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'

let pathLayer = null
let pointLayer = null
let special = []

export default {
    data () {
        return {
            url: '',
            layerList: [],
            time: '',
            sponsor: '',
            undertake: '',
@@ -87,8 +108,6 @@
            pathList: [],
            pointNameList: [],
            pointList: [],
            pathLayer: null,
            pointLayer: null,
            panoramaUrlOne: '',
            panoramaUrl: '',
            audioSource: '',
@@ -96,25 +115,60 @@
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,
            panoramaShow: false
            panoramaShow: false,
            audioImgUrl: '/img/icon/start-video.png',
            urlDataName: null
        }
    },
    created () { },
    mounted () {
        var that = this

        this.audioSynth = window.speechSynthesis

        this.audioMsg = new window.SpeechSynthesisUtterance()

        this.audioMsg.onend = function () {
            // this.audioSynth.cancel();
            this.audioFlag = false
            this.audioCourse = false
            that.audioFlag = false
            that.audioCourse = false
            that.audioImgUrl = '/img/icon/close-video.png'
        }
        this.getData()

        window.onbeforeunload = e => { // 刷新时弹出提示
            this.audioSynth.cancel()
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler (newData, oldData) {
                if (this.urlDataName == null) {
                    this.urlDataName = this.$route.query.name
                    this.getData()
                } else if (newData.query.name != this.urlDataName) {
                    if (special.length > 0) {
                        special.forEach(item => {
                            global.viewer.imageryLayers.remove(
                                item.layer
                            )
                        })
                    }
                    special = []
                    this.audioSynth.cancel()
                    global.viewer.removeLayer(pathLayer)
                    global.viewer.removeLayer(pointLayer)
                    this.urlDataName = this.$route.query.name
                    this.getData()
                }
                // if (this.$route.query.type) {//需要监听的参数
                //     this.type = this.$route.query.type
                // }
            }
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 校区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
@@ -122,8 +176,39 @@
        ])
    },
    methods: {
        switchChange (item) {
            if (item.flag == true) {
                this.addArcgisLayer(item.url, item.name)
            } else {
                this.removeArcgisLayer(item.name)
            }
        },

        addArcgisLayer (url, name) {
            var layer = global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
                    url: url
                })
            )
            special.push({
                layer,
                name
            })
        },

        removeArcgisLayer (name) {
            special.forEach((item, index) => {
                if (item.name == name) {
                    global.viewer.imageryLayers.remove(
                        item.layer
                    )
                    special.splice(index, 1)
                }
            })
        },

        getData () {
            getWelcome({ hdname: '校区迎新' }).then((res) => {
            getWelcome({ hdname: this.urlDataName }).then((res) => {
                var result = res.data.data
                this.title = result.hdname
                this.time = result.time
@@ -139,6 +224,17 @@
                this.list = result.tpurl.split(',')
                this.pointNameList = result.addressname.split(',')
                this.pointList = result.address.split(';')
                this.layerList = []

                if (result.mapname != '' && result.mapname != null && result.mapname != undefined) {
                    var mapname = result.mapname.split(',')
                    var url = result.url.split(',')
                    mapname.forEach((item, index) => {
                        this.layerList.push({ flag: false, name: item, url: url[index] })
                    })
                    this.layerList[0].flag = true
                    this.addArcgisLayer(this.layerList[0].url, this.layerList[0].name)
                }

                var a = result.lx.split(';')

@@ -156,11 +252,11 @@
                    this.pathList.push(k)
                })

                this.pathLayer = new global.DC.VectorLayer('pathLayer')
                this.viewer.addLayer(this.pathLayer)
                pathLayer = new global.DC.VectorLayer('pathLayer')
                global.viewer.addLayer(pathLayer)

                this.pointLayer = new global.DC.HtmlLayer('pointLayer')
                this.viewer.addLayer(this.pointLayer)
                pointLayer = new global.DC.HtmlLayer('pointLayer')
                global.viewer.addLayer(pointLayer)

                this.pathList.forEach((item) => {
                    this.drawPolyline(item)
@@ -169,15 +265,16 @@
                this.pointList.forEach((item, index) => {
                    this.drawPoint(item.split(','), this.pointNameList[index])
                })

                if (this.pointList.length > 0) {
                    this.$store.dispatch('pcMoveView', {
                        viewer: this.viewer,
                        viewer: global.viewer,
                        jd: +this.pointList[0].split(',')[0] - 0.0005,
                        wd: this.pointList[0].split(',')[1]
                    })
                } else {
                    this.$store.dispatch('pcMoveView', {
                        viewer: this.viewer,
                        viewer: global.viewer,
                        jd: +this.pathList[0].split(';')[0].split(',')[0] - 0.0005,
                        wd: this.pathList[0].split(';')[0].split(',')[1]
                    })
@@ -191,7 +288,7 @@
                width: 6,
                arcType: true,
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: new global.DC.Color(255, 0, 0),
                    color: global.DC.Namespace.Cesium.Color.fromBytes(10, 255, 10),
                    speed: 60,
                    image: '/img/icon/right.png',
                    repeat: { x: 320, y: 1 }
@@ -199,7 +296,7 @@
                clampToGround: true
            })

            this.pathLayer.addOverlay(polyline)
            pathLayer.addOverlay(polyline)
        },
        drawPoint (item, name) {
            const divIcon = new global.DC.DivIcon(
@@ -215,7 +312,7 @@
                    </div>
                `
            )
            this.pointLayer.addOverlay(divIcon)
            pointLayer.addOverlay(divIcon)
        },
        audioPlay () {
            if (this.audioFlag == false) {
@@ -223,19 +320,31 @@
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
                this.audioImgUrl = '/img/icon/start-video.png'
            } else {
                if (this.audioCourse == true) {
                    this.audioSynth.pause()
                    this.audioCourse = false
                    this.audioImgUrl = '/img/icon/close-video.png'
                } else {
                    this.audioSynth.resume()
                    this.audioCourse = true
                    this.audioImgUrl = '/img/icon/start-video.png'
                }
            }
        },
        closeModel () {
            this.viewer.removeLayer(this.pathLayer)
            this.viewer.removeLayer(this.pointLayer)
            if (special.length > 0) {
                special.forEach(item => {
                    global.viewer.imageryLayers.remove(
                        item.layer
                    )
                })
            }
            special = []

            global.viewer.removeLayer(pathLayer)
            global.viewer.removeLayer(pointLayer)

            this.audioSynth.cancel()
            this.audioFlag = false
@@ -250,7 +359,9 @@
        }
    },
    destroyed () {
        // this.audioPlay();
        this.audioSynth.cancel()
        global.viewer.removeLayer(pathLayer)
        global.viewer.removeLayer(pointLayer)
        // console.log("关闭", "see1");
    }
}
@@ -491,4 +602,28 @@
        }
    }
}

.layer-manage-container {
    padding: 0 10px 10px 10px;
    position: fixed;
    right: 10px;
    bottom: 240px;
    width: 120px;
    background: rgba(40, 187, 240, 0.7);
    border-radius: 10px;
    color: #fff;
    border: 1px solid #29baf1;
    box-shadow: 0 0 10px 2px #29baf1;

    .header {
        line-height: 36px;
        text-align: center;
    }

    .content {
        max-height: calc(180px - 36px);
        overflow-y: auto;
        text-align: center;
    }
}
</style>