<template>
|
<div style="padding:5px 10px 0 10px">
|
<el-row class="el_row_input" style="">
|
可使用键盘“w、a、s、d、q、e、r、t”与小键盘上下左右键进行第一人称视角漫游
|
</el-row>
|
<el-row class="el_row_input">
|
<el-col :span="6">
|
<div style="line-height: 37px">移动速度</div>
|
</el-col>
|
<el-col :span="14">
|
<el-slider style="width: 140px" v-model="plusvalue" :min="1" :max="10" :step="1"
|
:format-tooltip="formatSpeedTip" @change="speedChange"></el-slider>
|
</el-col>
|
<el-col :span="4">
|
<el-input v-model="plusvalue" style="width: 50px;" disabled size="small"></el-input>
|
</el-col>
|
</el-row>
|
<div style="height: 1px;border-bottom: 1px solid #dcdfe6;margin-bottom: 18px"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "RoamingPath",
|
data() {
|
return {
|
marks: {
|
1: '1×',
|
3: '3×',
|
5: '5×',
|
},
|
wPress: false,
|
aPress: false,
|
sPress: false,
|
dPress: false,
|
qPress: false,
|
ePress: false,
|
rPress: false,
|
tPress: false,
|
arrowUpPress: false,
|
arrowDownPress: false,
|
arrowLeftPress: false,
|
arrowRightPress: false,
|
plusvalue: 3,
|
// moveSpeed: this.plusvalue / 10,
|
rotateSpeed: 1,
|
rotateChange: false,
|
moveCameraTimeHandle: 0,
|
}
|
},
|
mounted() {
|
this.createInterval()
|
},
|
methods: {
|
//视角控制
|
createInterval() {
|
if (!window.sgworld) return
|
this.enable();
|
},
|
keyDown(e) {
|
switch (e.code) {
|
case 'KeyW':
|
this.wPress = true
|
break;
|
case 'KeyS':
|
this.sPress = true
|
break;
|
case 'KeyD':
|
this.dPress = true
|
break;
|
case 'KeyA':
|
this.aPress = true
|
break;
|
case 'KeyQ':
|
this.qPress = true
|
break;
|
case 'KeyE':
|
this.ePress = true
|
break;
|
case 'KeyZ':
|
this.moveSpeed *= 1.1
|
break;
|
case 'KeyX':
|
this.moveSpeed *= 0.9
|
break;
|
case 'KeyC':
|
this.rotateSpeed *= 1.1
|
break;
|
case 'KeyV':
|
this.rotateSpeed *= 0.9
|
break;
|
case 'KeyR':
|
this.rPress = true
|
break;
|
case 'KeyT':
|
this.tPress = true
|
break;
|
case 'ArrowUp':
|
this.arrowUpPress = true
|
break;
|
case 'ArrowDown':
|
this.arrowDownPress = true
|
break;
|
case 'ArrowLeft':
|
this.arrowLeftPress = true
|
break;
|
case 'ArrowRight':
|
this.arrowRightPress = true
|
break;
|
default:
|
break;
|
}
|
},
|
keyUp(e) {
|
switch (e.code) {
|
case 'KeyW':
|
this.wPress = false
|
break;
|
case 'KeyS':
|
this.sPress = false
|
break;
|
case 'KeyD':
|
this.dPress = false
|
break;
|
case 'KeyA':
|
this.aPress = false
|
break;
|
case 'KeyQ':
|
this.qPress = false
|
break;
|
case 'KeyE':
|
this.ePress = false
|
break;
|
case 'KeyR':
|
this.rPress = false
|
break;
|
case 'KeyT':
|
this.tPress = false
|
break;
|
case 'ArrowUp':
|
this.arrowUpPress = false
|
break;
|
case 'ArrowDown':
|
this.arrowDownPress = false
|
break;
|
case 'ArrowLeft':
|
this.arrowLeftPress = false
|
break;
|
case 'ArrowRight':
|
this.arrowRightPress = false
|
break;
|
default:
|
break;
|
}
|
},
|
enable() {
|
let viewer = window.Viewer
|
let Geoworld = window.Cesium
|
if (!this.moveCameraTimeHandle) {
|
document.addEventListener('keydown', this.keyDown, false);
|
document.addEventListener('keyup', this.keyUp, false);
|
this.moveCameraTimeHandle = setInterval(() => {
|
if (this.wPress) {
|
viewer.camera.moveForward(this.moveSpeed);
|
}
|
if (this.aPress) {
|
viewer.camera.moveLeft(this.moveSpeed);
|
}
|
if (this.sPress) {
|
viewer.camera.moveBackward(this.moveSpeed);
|
}
|
if (this.dPress) {
|
viewer.camera.moveRight(this.moveSpeed);
|
}
|
let positionTemp = viewer.camera.positionWC;
|
let orientation = {
|
heading: viewer.camera.heading,
|
pitch: viewer.camera.pitch,
|
roll: viewer.camera.roll,
|
endTransform: Geoworld.Matrix4.IDENTITY
|
}
|
this.rotateChange = false;
|
if (this.qPress) {
|
let cartographic = Geoworld.Cartographic.fromCartesian(positionTemp);
|
positionTemp = Geoworld.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + this.moveSpeed * 2)
|
this.rotateChange = true;
|
}
|
if (this.ePress) {
|
let cartographic = Geoworld.Cartographic.fromCartesian(positionTemp);
|
positionTemp = Geoworld.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height - this.moveSpeed * 2)
|
this.rotateChange = true;
|
}
|
if (this.arrowUpPress) {
|
orientation.pitch = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.pitch) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowDownPress) {
|
orientation.pitch = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.pitch) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowLeftPress) {
|
orientation.heading = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.heading) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.arrowRightPress) {
|
orientation.heading = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.heading) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.rPress) {
|
orientation.roll = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.roll) + this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.tPress) {
|
orientation.roll = Geoworld.Math.toRadians(Geoworld.Math.toDegrees(viewer.camera.roll) - this.rotateSpeed)
|
this.rotateChange = true;
|
}
|
if (this.rotateChange) {
|
viewer.camera.setView({ destination: positionTemp, orientation: orientation });
|
}
|
}, 20)
|
}
|
},
|
disable() {
|
document.removeEventListener('keydown', this.keyDown, false);
|
document.removeEventListener('keyup', this.keyUp, false);
|
clearInterval(this.moveCameraTimeHandle)
|
this.moveCameraTimeHandle = 0;
|
},
|
formatSpeedTip(val) {
|
let ret = "";
|
if (val === 0) {
|
ret = "1X";
|
} else if (val > 0) {
|
ret = (val) + "X";
|
} else if (val < 0) {
|
let v = 1;
|
for (let i = 0; i > val; i--) {
|
v = (v / 2).toFixed(1);
|
}
|
ret = v + "X";
|
}
|
return ret;
|
},
|
speedChange(val) {
|
this.moveSpeed = 0.3;
|
this.rotateSpeed = 1;
|
if (val > 0) {
|
for (let i = 0; i < val; i++) {
|
this.moveSpeed *= 2;
|
console.log(this.moveSpeed)
|
this.rotateSpeed *= 1.5;
|
}
|
} else if (val < 0) {
|
for (let i = 0; i > val; i--) {
|
this.moveSpeed *= 0.5;
|
this.rotateSpeed *= 0.5;
|
}
|
}
|
},
|
},
|
computed: {
|
moveSpeed:{
|
get(){
|
return this.plusvalue / 10;
|
},
|
set(v) {
|
// this.plusvalue = v
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.el_row_input {
|
font-size: 12px;
|
color: #ffffff;
|
line-height: 22px;
|
margin-bottom: 10px;
|
}
|
</style>
|
