javascript
复制代码
var options = {
horizontalViewAngle: 60,
verticalViewAngle: 40,
video: "video_dom",
viewPosition: Cesium.Cartesian3.fromDegrees(85.788705, 45.161394, 900),
viewPositionEnd: Cesium.Cartesian3.fromDegrees(85.788705, 45.167394, 500),
};
v = new video(viewer, options);
v.drawVideo();
// 播放
video_dom.play();
// 暂停
// video_dom.pause();
// 清除
// new video(viewer, {}).clearAll();
javascript
复制代码
// video.js
var videos = [];
var video_dom;
var getCurrentMousePosition = function (scene, position, noPickEntity) {
var cartesian;
var pickedObject = scene.pick(position);
if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {
var entity = pickedObject.id;
if (noPickEntity == null || (noPickEntity && entity !== noPickEntity)) {
var cartesian = scene.pickPosition(position);
if (Cesium.defined(cartesian)) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var height = cartographic.height;
if (height >= 0) return cartesian;
if (!Cesium.defined(pickedObject.id) && height >= -500)
return cartesian;
}
}
}
if (scene.mode === Cesium.SceneMode.SCENE3D) {
var pickRay = scene.camera.getPickRay(position);
cartesian = scene.globe.pick(pickRay, scene);
} else {
cartesian = scene.camera.pickEllipsoid(position, scene.globe.ellipsoid);
}
return cartesian;
}
class video {
constructor(viewer, config) {
this.viewer = viewer;
this.config = config;
}
creat() {
var viewer = this.viewer;
var config = this.config;
var videoElement = config.videoElement;
var positions = config.positions;
var clampToGround = config.clampToGround;
if (clampToGround) {
viewer.entities.add({
nam: "video",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
material: videoElement
}
});
} else {
viewer.entities.add({
nam: "video",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions)
},
material: videoElement,
perPositionHeight: true,
outline: true
}
});
}
}
clearAll() {
var dd = viewer.entities._entities._array;
for (let index = 0; index < dd.length; index++) {
if (dd[index]._nam = "video") {
viewer.entities.remove(dd[index])
index--;
}
}
videos.forEach((v) => {
v.destroy();
})
}
change(object) {
var _this = this;
for (const key in object) {
const element = object[key];
_this.lightCamera.frustum[key] = element;
_this.clear()
_this.drawFrustumOutline();
}
}
drawVideo() {
let _self = this;
var options = this.config;
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
this.horizontalViewAngle = options.horizontalViewAngle || 60.0;
this.verticalViewAngle = options.verticalViewAngle || 40.0;
video_dom = document.getElementById(options.video);
this.options = options;
this.posArray = [];
this.state = "PREPARE";
if (options.viewPosition && options.viewPositionEnd) {
_self.viewPosition = options.viewPosition;
_self.viewPositionEnd = options.viewPositionEnd;
_self.viewDistance = Cesium.Cartesian3.distance(_self.viewPosition, _self.viewPositionEnd);
_self.viewHeading = getHeading(_self.viewPosition, _self.viewPositionEnd);
_self.viewPitch = getPitch(_self.viewPosition, _self.viewPositionEnd);
_self.createLightCamera();
} else {
this.action();
}
}
action() {
let _self = this;
_self.handler.setInputAction(function (movement) {
var cartesian = getCurrentMousePosition(_self.viewer.scene, movement.position);
if (!cartesian) {
return;
}
if (_self.posArray.length == 0) {
_self.posArray.push(cartesian);
_self.state = "OPERATING";
} else if (_self.posArray.length == 1) {
_self.viewPosition = _self.posArray[0];
_self.viewPositionEnd = cartesian;
_self.viewDistance = Cesium.Cartesian3.distance(_self.viewPosition, _self.viewPositionEnd);
_self.viewHeading = getHeading(_self.viewPosition, _self.viewPositionEnd);
_self.viewPitch = getPitch(_self.viewPosition, _self.viewPositionEnd);
_self.state = "END";
_self.handler.destroy();
_self.handler = null;
_self.createLightCamera();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
//创建相机
createLightCamera() {
this.lightCamera = new Cesium.Camera(this.viewer.scene);
this.lightCamera.position = this.viewPosition;
this.lightCamera.frustum.near = this.viewDistance * 0.0001;
this.lightCamera.frustum.far = this.viewDistance;
const hr = Cesium.Math.toRadians(this.horizontalViewAngle);
const vr = Cesium.Math.toRadians(this.verticalViewAngle);
const aspectRatio =
(this.viewDistance * Math.tan(hr / 2) * 2) /
(this.viewDistance * Math.tan(vr / 2) * 2);
this.lightCamera.frustum.aspectRatio = aspectRatio;
if (hr > vr) {
this.lightCamera.frustum.fov = hr;
} else {
this.lightCamera.frustum.fov = vr;
}
this.lightCamera.setView({
destination: this.viewPosition,
orientation: {
heading: Cesium.Math.toRadians(this.viewHeading || 0),
pitch: Cesium.Math.toRadians(this.viewPitch || 0),
roll: 0
}
});
this.drawFrustumOutline();
}
//创建视锥线
drawFrustumOutline() {
const scratchRight = new Cesium.Cartesian3();
const scratchRotation = new Cesium.Matrix3();
const scratchOrientation = new Cesium.Quaternion();
const position = this.lightCamera.positionWC;
const direction = this.lightCamera.directionWC;
const up = this.lightCamera.upWC;
let right = this.lightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);
let rotation = scratchRotation;
Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
var newObj = _.cloneDeep(this.lightCamera.frustum);
newObj.near = newObj.far - 0.01;
var videoGeometryInstance1 = new Cesium.GeometryInstance({
geometry: new Cesium.FrustumGeometry({
frustum: newObj,
origin: this.viewPosition,
orientation: orientation
})
});
var p1s = new Cesium.Primitive({
geometryInstances: [videoGeometryInstance1],
appearance: createAppearance()
})
this.viewer.scene.primitives.add(
p1s
);
var videoGeometryInstance2 = new Cesium.GeometryInstance({
geometry: new Cesium.FrustumOutlineGeometry({
frustum: this.lightCamera.frustum,
origin: this.viewPosition,
orientation: orientation
}),
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
}
});
var p2s = new Cesium.Primitive({
geometryInstances: [videoGeometryInstance2],
appearance: new Cesium.PerInstanceColorAppearance(
{
flat: true,
// translucent : false
}
)
})
this.viewer.scene.primitives.add(
p2s
);
this.FrustumGeometry = p1s;
this.FrustumOutlineGeometry = p2s;
videos.push(p1s)
videos.push(p2s)
}
clear() {
this.FrustumGeometry.destroy()
this.FrustumOutlineGeometry.destroy()
}
}
//获取偏航角
function getHeading(fromPosition, toPosition) {
let finalPosition = new Cesium.Cartesian3();
let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
Cesium.Matrix4.inverse(matrix4, matrix4);
Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
Cesium.Cartesian3.normalize(finalPosition, finalPosition);
return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y));
}
//获取俯仰角
function getPitch(fromPosition, toPosition) {
let finalPosition = new Cesium.Cartesian3();
let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
Cesium.Matrix4.inverse(matrix4, matrix4);
Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
Cesium.Cartesian3.normalize(finalPosition, finalPosition);
return Cesium.Math.toDegrees(Math.asin(finalPosition.z));
}