From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/pcviews/specialmap/welcome.vue | 183 +++++++++++++++++++++++++++++++++++++++------
1 files changed, 159 insertions(+), 24 deletions(-)
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index 04a4948..1968d5c 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/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>
--
Gitblit v1.9.3