<div style="margin-left:10px;">
<div>第三人称查看</div>
<van-switch
v-model="third"
@change="openThird"
size="14px"
/>
</div>
data: {
return {
third: false, // 是否开启选择点进行选择查看
thirdObj: {}, // 记录选择的点的经纬度、笛卡尔坐标等信息
}
},
mounted() {
this.addMobileClick() // 添加点击事件的回调函数
},
method: {
addMobileClick() {
let that = this
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
// 设置鼠标左键单击回调事件
handler.setInputAction(function(e) {
// 首先移除之前添加的点
viewer.entities.removeAll()
// 获取点击位置笛卡尔坐标
var position = viewer.scene.pickPosition(e.position)
// 将笛卡尔坐标转化为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(position)
// console.log('笛卡尔坐标');
// console.log(cartographic.longitude, cartographic.latitude, cartographic.height);
var longitude = Cesium.Math.toDegrees(cartographic.longitude)
var latitude = Cesium.Math.toDegrees(cartographic.latitude)
var height = cartographic.height
if (height < 0) {
height = 0
}
const x = longitude
const y = latitude
const z = height + 0.5
if (that.third) {
that.thirdObj = {
x,
y,
z,
heading: viewer.scene.camera.heading,
pitch: viewer.scene.camera.pitch,
roll: viewer.scene.camera.roll,
position
}
that.changeThird()
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 双击全屏
handler.setInputAction(function() {
if (Cesium.Fullscreen.fullscreen) {
Cesium.Fullscreen.exitFullscreen()
} else {
Cesium.Fullscreen.requestFullscreen(scene.canvas)
}
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
},
changeThird() {
const that = this
if (that.third) {
viewer.entities.removeAll();
// 经纬度信息
let x = that.thirdObj.x
let y = that.thirdObj.y
let z = that.thirdObj.z
// 笛卡尔坐标
const xC = that.thirdObj.position.x
const yC = that.thirdObj.position.y
const zC = that.thirdObj.position.z
// hpr
const heading = that.thirdObj.heading
const pitch = that.thirdObj.pitch
const roll = that.thirdObj.roll
const position = Cesium.Cartesian3.fromDegrees(
x,
y,
z
);
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
const entity = viewer.entities.add({
position: position,
orientation
});
viewer.trackedEntity = entity; // 如果是图层上面的entitiy则不需要了,使用 viewer.trackedEntity = that.nowLayers;
// 为更直观地展示查询的位置,在点击处添加对应点
viewer.entities.add(
new Cesium.Entity({
point: new Cesium.PointGraphics({
color: new Cesium.Color(1, 1, 0),
pixelSize: 6,
outlineColor: new Cesium.Color(0, 1, 1)
}),
position: Cesium.Cartesian3.fromDegrees(
x,
y,
z
)
})
)
setTimeout(() => {
var center = Cesium.Cartesian3.fromDegrees(x, y, z) // 目标位置
viewer.camera.lookAt(center, new Cesium.Cartesian3(180, 50, 30)) // 三个参数数字分别是:方位角,倾角,俯角
}, 100)
} else {
viewer.entities.removeAll();
}
},
// 开关控制
openThird() {
if (!this.third) {
viewer.entities.removeAll()
}
}
}