// * 创建视锥
|
import * as Cesium from 'cesium'
|
|
function computeFarCenter (position, hpr, far) {
|
const quaternion = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
|
const rotMat = Cesium.Matrix3.fromQuaternion(quaternion)
|
const dirLocal = new Cesium.Cartesian3(0, 0, far)
|
const dirWorld = Cesium.Matrix3.multiplyByVector(rotMat, dirLocal, new Cesium.Cartesian3())
|
return Cesium.Cartesian3.add(position, dirWorld, new Cesium.Cartesian3())
|
}
|
|
/* eslint-disable new-cap */
|
/* eslint-disable no-undef */
|
export default class CreateFrustum {
|
constructor(viewer, options) {
|
this._isShowVideoPlan = options.isShowVideoPlan || false
|
this.position = options.position
|
this._viewer = viewer
|
|
this.fov = options.fov || 0
|
this.near = options.near || 0.01
|
this.far = options.far || 0
|
|
this.heading = options.heading || 0
|
this.pitch = options.pitch || 0
|
this.roll = options.roll || 0
|
|
this.width = options.width
|
this.height = options.height
|
|
this.videoScreen = null
|
|
|
this.cameraPosition = Cesium.Cartesian3.fromDegrees(
|
this.position.longitude,
|
this.position.latitude,
|
this.position.altitude
|
)
|
this.hpr = Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
this.orientation = Cesium.Transforms.headingPitchRollQuaternion(this.cameraPosition, this.hpr)
|
|
this._entityVideoDataSource = null
|
this._entityVideoDataSource = new Cesium.CustomDataSource('entityVideoDataSource')
|
this._viewer.dataSources.add(this._entityVideoDataSource)
|
|
this._primitiveCollection = null
|
this._primitiveCollection = new Cesium.PrimitiveCollection()
|
this._viewer.scene.primitives.add(this._primitiveCollection)
|
|
this.add()
|
}
|
|
// 创建视锥体和轮廓线
|
add () {
|
this.clear()
|
|
this._viewer.scene.globe.depthTestAgainstTerrain = true
|
|
this.addFrustum()
|
this.addOutline()
|
this.addCenterline()
|
}
|
|
// 创建视锥体
|
addFrustum () {
|
const frustum = new Cesium.PerspectiveFrustum({
|
// 查看的视场角，绕Z轴旋转，以弧度方式输入
|
fov: Cesium.Math.toRadians(this.fov),
|
// 视锥体的宽度/高度
|
aspectRatio: this.width / this.height,
|
// 近面距视点的距离
|
near: this.near,
|
// 远面距视点的距离
|
far: this.far,
|
})
|
|
const frustumGeometry = new Cesium.FrustumGeometry({
|
frustum: frustum,
|
origin: this.cameraPosition,
|
orientation: this.orientation,
|
vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
|
})
|
|
const instance = new Cesium.GeometryInstance({
|
geometry: frustumGeometry,
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.fromBytes(0, 213, 144, 20)
|
),
|
},
|
})
|
|
const primitive = new Cesium.Primitive({
|
geometryInstances: instance,
|
releaseGeometryInstances: false,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
closed: true,
|
flat: true,
|
translucent: true
|
}),
|
asynchronous: false,
|
})
|
|
this._primitiveCollection.add(primitive)
|
|
// if (this.roll > 135) {
|
// this.initVideoPolygon(frustumGeometry)
|
// }
|
}
|
|
// 创建轮廓线
|
addOutline () {
|
const frustum = new Cesium.PerspectiveFrustum({
|
// 查看的视场角度，绕Z轴旋转，以弧度方式输入
|
// The angle of the field of view (FOV), in radians.
|
// This angle will be used as the horizontal FOV if the width is greater than the height, otherwise it will be the vertical FOV.
|
fov: Cesium.Math.toRadians(this.fov),
|
// 视锥体的宽度/高度
|
aspectRatio: this.width / this.height,
|
// 近面距视点的距离
|
near: this.near,
|
// 远面距视点的距离
|
far: this.far,
|
})
|
|
const frustumGeometry = new Cesium.FrustumOutlineGeometry({
|
frustum: frustum,
|
origin: this.cameraPosition,
|
orientation: this.orientation,
|
vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
|
})
|
|
const instance = new Cesium.GeometryInstance({
|
geometry: frustumGeometry,
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.fromBytes(0, 213, 144, 255)
|
),
|
},
|
})
|
|
const primitive = new Cesium.Primitive({
|
geometryInstances: instance,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
closed: true,
|
flat: true,
|
translucent: true
|
}),
|
asynchronous: false,
|
})
|
|
this._primitiveCollection.add(primitive)
|
}
|
|
addCenterline () {
|
let matrix = Cesium.Matrix3.fromQuaternion(
|
this.orientation,
|
new Cesium.Matrix3()
|
)
|
|
let right1 = Cesium.Matrix3.getColumn(matrix, 0, new Cesium.Cartesian3())
|
let up1 = Cesium.Matrix3.getColumn(matrix, 1, new Cesium.Cartesian3())
|
let direction = Cesium.Matrix3.getColumn(matrix, 2, new Cesium.Cartesian3())
|
|
let frontDirect = Cesium.Cartesian3.multiplyByScalar(
|
direction,
|
this.far,
|
new Cesium.Cartesian3()
|
)
|
let bottomCenter = Cesium.Cartesian3.add(this.cameraPosition, frontDirect, new Cesium.Cartesian3())
|
|
// 创建Entity来显示中心线
|
this._entityVideoDataSource?.entities.add({
|
name: 'Center Line of Frustum',
|
polyline: {
|
positions: [this.cameraPosition, bottomCenter],
|
width: 1,
|
// material: Cesium.Color.RED.withAlpha(0.5)
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.fromBytes(0, 213, 144, 255),
|
dashLength: 30.0,
|
gapColor: Cesium.Color.TRANSPARENT,
|
gapWidth: 1.0,
|
}),
|
},
|
})
|
|
const ray = new Cesium.Ray()
|
ray.origin = this.cameraPosition
|
// 计算方向向量（终点 - 起点）并归一化
|
ray.direction = Cesium.Cartesian3.normalize(
|
Cesium.Cartesian3.subtract(bottomCenter, this.cameraPosition, new Cesium.Cartesian3()),
|
new Cesium.Cartesian3()
|
)
|
|
const pickPosition = this._viewer.scene.globe.pick(ray, this._viewer.scene)
|
let distance = null
|
|
if (pickPosition) {
|
// 计算交点与A、B的距离
|
distance = Cesium.Cartesian3.distance(this.cameraPosition, pickPosition)
|
}
|
|
// 视椎体投放视频
|
// if (this.roll <= 135) {
|
|
// this._isShowVideoPlan && this.initVideoPlan(distance)
|
|
// }
|
}
|
|
initVideoPlan (distance = null) {
|
const element = document.querySelector('.video-player')
|
|
if (element === '') return
|
|
|
let curFar = distance != null && distance < this.far ? distance - 10 : this.far
|
|
let width = curFar * Math.tan(Cesium.Math.toRadians(this.fov) * 0.5) * 2
|
let height = width / (this.width / this.height)
|
|
this._entityVideoDataSource.entities.add({
|
position: new Cesium.CallbackProperty(() => {
|
return computeFarCenter(this.cameraPosition, this.hpr, curFar)
|
}, false),
|
orientation: new Cesium.CallbackProperty(() => {
|
return this.orientation
|
}, false),
|
plane: {
|
plane: new Cesium.Plane(new Cesium.Cartesian3(0, 0, -1), 0),
|
dimensions: new Cesium.Cartesian2(width, height),
|
material: element,
|
},
|
})
|
}
|
|
initVideoPolygon (frustumGeometry) {
|
const element = document.querySelector('.video-player')
|
|
if (element === '') return
|
|
// 取出视锥体的顶点坐标
|
const geometry = Cesium.FrustumOutlineGeometry.createGeometry(frustumGeometry)
|
|
const result = []
|
for (let i = 0; i < geometry.attributes.position.values.length; i += 3) {
|
result.push(Array.from(geometry.attributes.position.values).slice(i, i + 3))
|
}
|
|
// 将顶点分为近面(前4个)和远面(后4个)
|
const nearVertices = result.slice(0, 4)
|
const farVertices = result.slice(4, 8)
|
|
let videoPolygon = []
|
let videoIntersectionPolygon = []
|
|
// 处理四条棱线(近面顶点到远面对应顶点)
|
for (let i = 0; i < 4; i++) {
|
const nearVertex = new Cesium.Cartesian3(...nearVertices[i])
|
const farVertex = new Cesium.Cartesian3(...farVertices[i])
|
|
const ray = new Cesium.Ray()
|
ray.origin = nearVertex
|
// 计算方向向量（终点 - 起点）并归一化
|
ray.direction = Cesium.Cartesian3.normalize(
|
Cesium.Cartesian3.subtract(farVertex, nearVertex, new Cesium.Cartesian3()),
|
new Cesium.Cartesian3()
|
)
|
|
// 检测射线与地球表面交点
|
const pickPosition = this._viewer.scene.globe.pick(ray, this._viewer.scene)
|
|
// 有交点则使用交点，否则使用远面顶点
|
if (pickPosition) {
|
videoIntersectionPolygon.push(pickPosition)
|
}
|
|
videoPolygon.push(farVertex)
|
}
|
|
// 获得视锥体和地面的交点,构成平面,并使用video标签做为材质
|
if (videoPolygon.length === 4) {
|
if (videoIntersectionPolygon.length < 4) {
|
this._entityVideoDataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(videoPolygon),
|
material: element,
|
stRotation: +Cesium.Math.toRadians(this.heading),
|
perPositionHeight: true,
|
heightReference: Cesium.HeightReference.NONE
|
},
|
|
orientation: new Cesium.CallbackProperty(() => {
|
return this.orientation
|
}, false),
|
})
|
} else {
|
this._entityVideoDataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(videoIntersectionPolygon),
|
material: element,
|
stRotation: Cesium.Math.toRadians(135),
|
perPositionHeight: false,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
},
|
|
// orientation: new Cesium.CallbackProperty(() => {
|
// return this.orientation
|
// }, false),
|
})
|
}
|
}
|
|
}
|
|
// 清除视锥体和轮廓线
|
clear () {
|
if (this._viewer) {
|
this._viewer.scene.globe.depthTestAgainstTerrain = false
|
|
if (this._primitiveCollection) {
|
this._primitiveCollection.removeAll()
|
}
|
|
if (this._entityVideoDataSource) {
|
this._entityVideoDataSource?.entities.removeAll()
|
}
|
}
|
}
|
|
destroyed () {
|
if (this._viewer) {
|
this._viewer.scene.globe.depthTestAgainstTerrain = false
|
|
if (this._primitiveCollection) {
|
this._primitiveCollection.removeAll()
|
this._viewer.scene.primitives.remove(this._primitiveCollection)
|
this._primitiveCollection = null
|
}
|
|
if (this._entityVideoDataSource) {
|
this._entityVideoDataSource?.entities.removeAll()
|
this._viewer.dataSources.remove(this._entityVideoDataSource, true)
|
this._entityVideoDataSource = null
|
}
|
}
|
}
|
|
UpdateWidth (value) {
|
this.width = value
|
this.add()
|
}
|
UpdateHeight (value) {
|
this.height = value
|
this.add()
|
}
|
UpdateFov (value) {
|
this.fov = value
|
this.add()
|
}
|
UpdateNear (value) {
|
this.near = value
|
this.add()
|
}
|
UpdateFar (value) {
|
this.far = value
|
this.add()
|
}
|
UpdateHeading (value) {
|
this.heading = value
|
this.add()
|
}
|
UpdatePitch (value) {
|
this.pitch = value
|
this.add()
|
}
|
UpdateRoll (value) {
|
this.roll = value
|
this.add()
|
}
|
UpdataPosition (position) {
|
if (!position) return
|
this.position = position
|
this.add()
|
}
|
|
// 更新视锥体的姿态
|
Update (position, headingPitchRoll) {
|
this.position = Cesium.Cartesian3.fromDegrees(
|
position.longitude,
|
position.latitude,
|
position.altitude
|
)
|
this.orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
this.position,
|
new Cesium.HeadingPitchRoll.fromDegrees(
|
headingPitchRoll.heading,
|
headingPitchRoll.pitch,
|
headingPitchRoll.roll
|
)
|
)
|
this.add()
|
}
|
}
|
