<template>
|
<!--时间线-->
|
<div>
|
<div class="current-select" @click="listFlag = !listFlag">
|
<div class="title">{{ currentTitle }}</div>
|
<i class="el-icon-caret-bottom"></i>
|
</div>
|
|
<div class="list-box" v-show="listFlag">
|
<ul>
|
<li
|
v-for="(item, index) in selectList"
|
:key="index"
|
@click="currentClick(item, index)"
|
>{{ item.title }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let leftCurrentLayer = null
|
let rightCurrentLayer = null
|
|
window.splitScreenOneLayers = null
|
window.splitScreenTwoLayers = null
|
window.splitScreenThreeLayers = null
|
window.splitScreenFourLayers = null
|
|
export default {
|
name: 'selectTime',
|
props: ['leftOrRight', 'type', 'selectList'],
|
data () {
|
return {
|
listFlag: false,
|
currentTitle: null,
|
currentIndex: null
|
}
|
},
|
mounted () {
|
|
},
|
|
methods: {
|
init () {
|
this.$nextTick(() => {
|
|
if (this.selectList.some(e => {
|
return e.type == '0'
|
})) {
|
for (let i = 0; i < this.selectList.length; i++) {
|
if (this.selectList[i].type == '0') {
|
this.currentTitle = this.selectList[i].title
|
this.currentIndex = i
|
this.removeLeftAddLayer()
|
this.removeRightAddLayer()
|
this.leftAddLayer(this.selectList[i])
|
this.rightAddLayer(this.selectList[i])
|
break
|
}
|
}
|
} else {
|
this.currentTitle = this.selectList[0].title
|
this.currentIndex = 0
|
|
this.removeLeftAddLayer()
|
this.removeRightAddLayer()
|
this.leftAddLayer(this.selectList[0])
|
this.rightAddLayer(this.selectList[0])
|
}
|
|
})
|
},
|
|
screenInit () {
|
var mySelect = {}
|
if (this.selectList.some(e => {return e.type == '0'})) {
|
for (let i = 0; i < this.selectList.length; i++) {
|
if (this.selectList[i].type == '0') {
|
this.currentTitle = this.selectList[i].title
|
this.currentIndex = i
|
mySelect = this.selectList[i]
|
break
|
}
|
}
|
} else {
|
this.currentTitle = this.selectList[0].title
|
this.currentIndex = 0
|
mySelect = this.selectList[0]
|
}
|
if (this.type == 'viewerOne') {
|
this.removeLayers('splitScreenOneLayers')
|
this.addLayers('splitScreenOneLayers', mySelect)
|
} else if (this.type == 'viewerTwo') {
|
this.removeLayers('splitScreenTwoLayers')
|
this.addLayers('splitScreenTwoLayers', mySelect)
|
} else if (this.type == 'viewerThree') {
|
this.removeLayers('splitScreenThreeLayers')
|
this.addLayers('splitScreenThreeLayers', mySelect)
|
} else if (this.type == 'viewerFour') {
|
this.removeLayers('splitScreenFourLayers')
|
this.addLayers('splitScreenFourLayers', mySelect)
|
}
|
},
|
|
clearLayer () {
|
if (this.leftOrRight == 'left') {
|
this.removeLeftAddLayer()
|
} else {
|
this.removeRightAddLayer()
|
}
|
},
|
|
leftAddLayer (params) {
|
leftCurrentLayer = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: params.url,
|
maximumLevel: 18,
|
ltileMatrixSetID: 'default028mm',
|
layer: 'nanchengdom'
|
}), -1
|
)
|
},
|
rightAddLayer (params) {
|
rightCurrentLayer = global.viewer.mapSplit.addBaseLayer(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: params.url,
|
maximumLevel: 18,
|
tileMatrixSetID: 'default028mm',
|
layer: 'nanchengRightdom'
|
})
|
)
|
},
|
|
removeLeftAddLayer () {
|
if (leftCurrentLayer != null) {
|
global.viewer.imageryLayers.remove(leftCurrentLayer)
|
leftCurrentLayer = null
|
}
|
},
|
|
removeRightAddLayer () {
|
if (rightCurrentLayer != null) {
|
global.viewer.imageryLayers.remove(rightCurrentLayer)
|
rightCurrentLayer = null
|
}
|
},
|
|
addLayers (variable, params) {
|
window[variable] = window[this.type].imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: params.url,
|
maximumLevel: 18,
|
ltileMatrixSetID: 'default028mm',
|
layer: 'nanchengdom'
|
})
|
)
|
},
|
|
removeLayers (variable) {
|
if (window[variable] != null) {
|
window[this.type].imageryLayers.remove(window[variable])
|
window[variable] = null
|
}
|
},
|
|
currentClick (item, index) {
|
if (this.currentIndex == index) {
|
this.listFlag = false
|
return
|
}
|
if (this.leftOrRight) {
|
this.currentTitle = item.title
|
this.currentIndex = index
|
|
if (this.leftOrRight == 'left') {
|
this.removeLeftAddLayer()
|
this.leftAddLayer(item)
|
} else {
|
this.removeRightAddLayer()
|
this.rightAddLayer(item)
|
}
|
|
this.listFlag = false
|
} else {
|
this.currentTitle = item.title
|
this.currentIndex = index
|
|
if (this.type == 'viewerOne') {
|
this.removeLayers('splitScreenOneLayers')
|
this.addLayers('splitScreenOneLayers', item)
|
} else if (this.type == 'viewerTwo') {
|
this.removeLayers('splitScreenTwoLayers')
|
this.addLayers('splitScreenTwoLayers', item)
|
} else if (this.type == 'viewerThree') {
|
this.removeLayers('splitScreenThreeLayers')
|
this.addLayers('splitScreenThreeLayers', item)
|
} else if (this.type == 'viewerFour') {
|
this.removeLayers('splitScreenFourLayers')
|
this.addLayers('splitScreenFourLayers', item)
|
}
|
|
this.listFlag = false
|
}
|
}
|
},
|
|
destroyed () {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.current-select {
|
padding: 0 15px;
|
width: 166px;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #ffffff;
|
border-radius: 4px 4px 4px 4px;
|
box-sizing: border-box;
|
font-size: 12px;
|
color: #717171;
|
cursor: pointer;
|
}
|
|
.list-box {
|
position: absolute;
|
top: 32px;
|
width: 166px;
|
height: 240px;
|
overflow-y: auto;
|
background: #ffffff;
|
border-radius: 4px 4px 4px 4px;
|
box-sizing: border-box;
|
font-size: 12px;
|
color: #717171;
|
|
li {
|
line-height: 30px;
|
text-align: center;
|
cursor: pointer;
|
}
|
}
|
</style>
|
