/* * @Author: Morpheus * @Name: 地图测距 * @Date: 2021-11-13 16:04:27 * @Last
|
Modified by: Morpheus * @Last Modified time: 2022-02-15 14:28:44 */
|
|
<template>
|
<public-box class="technique-box">
|
<template slot="public-box-header">
|
<div class="title">
|
<span>数据动画</span>
|
</div>
|
<img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
|
</template>
|
<template slot="public-box-content">
|
<ul>
|
<li>
|
流动线
|
<el-switch
|
v-model="plineShow"
|
:active-value="true"
|
:inactive-value="false"
|
@change="plineChange"
|
></el-switch>
|
</li>
|
<li>
|
发光轨迹线
|
<el-switch
|
v-model="rayPlineShow"
|
:active-value="true"
|
:inactive-value="false"
|
@change="rayPlineChange"
|
></el-switch>
|
</li>
|
<li>
|
扩散圆
|
<el-switch
|
v-model="circleDiffShow"
|
:active-value="true"
|
:inactive-value="false"
|
@change="circleDiffChange"
|
></el-switch>
|
</li>
|
|
<li>
|
动态波纹
|
<el-switch
|
v-model="circleRadarShow"
|
:active-value="true"
|
:inactive-value="false"
|
@change="circleRadarChange"
|
></el-switch>
|
</li>
|
</ul>
|
</template>
|
</public-box>
|
</template>
|
|
<script>
|
|
let plineLayers = null
|
let lineOne = null
|
let lineTwo = null
|
let lineThree = null
|
let lineFour = null
|
|
let rayPline = null
|
let rayPlineEl = null
|
let circleDiff = null
|
let circleDiffEl = null
|
let circleRadar = null
|
let circleRadarEl = null
|
export default {
|
data () {
|
return {
|
plineShow: false,
|
rayPlineShow: false,
|
circleDiffShow: false,
|
circleRadarShow: false
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
closeModel () {
|
this.$router.push('/pcLayout/default')
|
},
|
loadPline () {
|
plineLayers = new global.DC.VectorLayer('layer')
|
global.viewer.addLayer(plineLayers)
|
|
lineOne = new global.DC.Polyline('114.035, 27.634; 114.042, 27.634').setStyle({
|
width: 5,
|
material: new global.DC.PolylineFlowMaterialProperty({
|
color: global.DC.Color.RED,
|
speed: 5
|
}),
|
clampToGround: true
|
})
|
|
lineTwo = new global.DC.Polyline('114.042, 27.634; 114.042, 27.627').setStyle({
|
width: 5,
|
material: new global.DC.PolylineFlowMaterialProperty({
|
color: global.DC.Color.ORANGE,
|
speed: 5
|
}),
|
clampToGround: true
|
})
|
|
lineThree = new global.DC.Polyline('114.035, 27.627; 114.035, 27.634').setStyle({
|
width: 5,
|
material: new global.DC.PolylineFlowMaterialProperty({
|
color: global.DC.Color.YELLOW,
|
speed: 10
|
}),
|
clampToGround: true
|
})
|
|
lineFour = new global.DC.Polyline('114.042, 27.627; 114.035, 27.627').setStyle({
|
width: 5,
|
material: new global.DC.PolylineFlowMaterialProperty({
|
color: global.DC.Color.GREEN,
|
speed: 10
|
}),
|
clampToGround: true
|
})
|
|
plineLayers.addOverlay(lineOne).addOverlay(lineTwo).addOverlay(lineThree).addOverlay(lineFour)
|
global.viewer.flyToPosition('114.03928435,27.62197062,1000.56,0,-45')
|
},
|
removePline () {
|
lineOne != null && lineTwo != null && lineThree != null && lineFour != null && plineLayers.removeOverlay(lineOne).removeOverlay(lineTwo).removeOverlay(lineThree).removeOverlay(lineFour)
|
plineLayers != null && global.viewer.removeLayer(plineLayers)
|
lineOne = null
|
lineTwo = null
|
lineThree = null
|
lineFour = null
|
plineLayers = null
|
},
|
plineChange (e) {
|
if (e) {
|
this.loadPline()
|
} else {
|
this.removePline()
|
}
|
},
|
loadRayPline () {
|
rayPline = new global.DC.VectorLayer('rayPline')
|
global.viewer.addLayer(rayPline)
|
|
rayPlineEl = new global.DC.Polyline('114.034, 27.6268; 114.042, 27.6268')
|
rayPlineEl.setStyle({
|
width: 20,
|
material: new global.DC.PolylineLightingTrailMaterialProperty({
|
color: global.DC.Color.YELLOW,
|
speed: 5.0
|
}),
|
clampToGround: true
|
})
|
rayPline.addOverlay(rayPlineEl)
|
global.viewer.flyToPosition('114.03928435,27.61897062,1000.56,0,-45')
|
},
|
removeRayPline () {
|
rayPlineEl != null && rayPline.removeOverlay(rayPlineEl)
|
rayPline != null && global.viewer.removeLayer(rayPline)
|
rayPlineEl = null
|
rayPline = null
|
},
|
rayPlineChange (e) {
|
if (e) {
|
this.loadRayPline()
|
} else {
|
this.removeRayPline()
|
}
|
},
|
loadCircleDiff () {
|
circleDiff = new global.DC.VectorLayer('circleDiff').addTo(global.viewer)
|
const center = global.DC.Position.fromObject({ lng: 114.03928435, lat: 27.62997062 })
|
circleDiffEl = new global.DC.Circle(center, 200)
|
circleDiffEl.setStyle({
|
material: new global.DC.CircleDiffuseMaterialProperty({
|
color: global.DC.Color.RED.withAlpha(0.2),
|
speed: 8.0
|
})
|
})
|
circleDiff.addOverlay(circleDiffEl)
|
global.viewer.flyToPosition('114.03928435,27.62397062,800.56,0,-45')
|
},
|
removeCircleDiff () {
|
circleDiffEl != null && circleDiff.addOverlay(circleDiffEl)
|
circleDiff != null && global.viewer.removeLayer(circleDiff)
|
circleDiffEl = null
|
circleDiff = null
|
},
|
circleDiffChange (e) {
|
if (e) {
|
this.loadCircleDiff()
|
} else {
|
this.removeCircleDiff()
|
}
|
},
|
loadCircleRadar () {
|
circleRadar = new global.DC.VectorLayer('circleRadar').addTo(global.viewer)
|
const center = global.DC.Position.fromObject({ lng: 114.03928435, lat: 27.62997062 })
|
circleRadarEl = new global.DC.Circle(center, 200)
|
circleRadarEl.setStyle({
|
material: new global.DC.RadarWaveMaterialProperty({
|
color: new global.DC.Color(0, 1.0, 1.0, 0.8),
|
speed: 5.0
|
})
|
})
|
circleRadar.addOverlay(circleRadarEl)
|
global.viewer.flyToPosition('114.03928435,27.62397062,800.56,0,-45')
|
},
|
removeCircleRadar () {
|
circleRadarEl != null && circleRadar.addOverlay(circleRadarEl)
|
circleRadar != null && global.viewer.removeLayer(circleRadar)
|
circleRadarEl = null
|
circleRadar = null
|
},
|
circleRadarChange (e) {
|
if (e) {
|
this.loadCircleRadar()
|
} else {
|
this.removeCircleRadar()
|
}
|
}
|
},
|
destroyed () {
|
this.removePline()
|
this.removeRayPline()
|
this.removeCircleDiff()
|
this.removeCircleRadar()
|
}
|
}
|
</script>
|
|
<style lang="sass" scoped>
|
.move
|
cursor: move
|
</style>
|
