From 4c73249b84759081f625b6196eb59973f06fb9c0 Mon Sep 17 00:00:00 2001
From: jihongshun <1151753686@qq.com>
Date: 星期一, 22 九月 2025 08:58:11 +0800
Subject: [PATCH] 视频融合
---
src/views/system/flightRouteSimulation/index.vue | 315 ++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 288 insertions(+), 27 deletions(-)
diff --git a/src/views/system/flightRouteSimulation/index.vue b/src/views/system/flightRouteSimulation/index.vue
index 4f49562..3413cd0 100644
--- a/src/views/system/flightRouteSimulation/index.vue
+++ b/src/views/system/flightRouteSimulation/index.vue
@@ -1,5 +1,7 @@
<template>
<div class="app-container">
+ <el-button @click="putVideo">鎾斁瑙嗛</el-button>
+ <el-button @click="videoMerge">瑙嗛铻嶅悎</el-button>
<!-- <a @click="showGZ">鏄剧ず瑙嗛敟浣�</a> -->
<input @change="handleKMZUpload" type="file" id="kmzFile" accept=".kmz" class="block w-full text-sm text-gray-500
file:mr-4 file:py-2 file:px-4
@@ -18,6 +20,7 @@
></div>
<!-- 宸︿笅瑙掑�嶇巼淇℃伅 -->
</div>
+ <div id="videoSource"></div>
</div>
</template>
@@ -25,6 +28,31 @@
import xml2js from 'xml2js'
import CesiumMap from "../../../utils/components/cesium-map.vue";
import { getScopeTower} from "@/api/system/template"
+let scratchSetViewMatrix3 = new Cesium.Matrix3();
+let cmCollection = [];
+let pmCollection = [];
+
+let camera_marks = [];
+let cameraData = [];
+let playersArr = [];
+
+let fixedHandler;
+
+let camMovehandler;
+let mouseMovehandler;
+let lastEntity;
+let lockfunction;
+let isCamLock = false; //瓒呰寖鍥村洖寮规爣璁帮紝鍥炲脊鍧愭爣鍙傛暟
+let camLockId;
+let pointLock;
+let headingLock;
+let pitchLock;
+
+let preVideoScopeElement = null;
+let preVideoScopePrimitiveArr = [];
+let preVideoScopePrimitiveArrTie = [];
+
+
export default {
name: "flightRouteSimulation",
components: {
@@ -608,37 +636,270 @@
this.camera.frustum.fov = newFov
}
},
+ // 鍒涘缓骞曞竷
+ createVideoElementOld(videoSrc, id) {
+ var videoElement = document.createElement("div");
+ videoElement.id = "video" + id;
+ videoElement.style.position = "absolute";
+ videoElement.style.zIndex = "-100";
+ videoElement.style.background = "red";
+ document.getElementById("videoSource").appendChild(videoElement);
+ return videoElement;
+ },
+ createVideoElementwithMouse(videoSrc,id) {
+ let videoElement = document.createElement('video');
+ videoElement.id = 'video'+id;
+ videoElement.src = videoSrc+'?t='+new Date().getTime();
+ videoElement.style.position = 'absolute';
+ videoElement.style.zIndex = '-100';
+ videoElement.style.visibility = 'hidden';
+ videoElement.crossOrigin = 'anonymous';
+ videoElement.autoplay = true;
+ videoElement.loop = true;
+ videoElement.muted = true;
+ document.getElementById("videoSource").appendChild(videoElement);
+ return videoElement;
+ },
+ hpr2m(obj, result) {
+ // const inverseViewMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, undefined, undefined, result);
+ const inverseViewMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
+ obj.position,
+ undefined,
+ result
+ );
+ // const hpr = new Cesium.HeadingPitchRoll(heading - Cesium.Math.PI_OVER_TWO, pitch, roll);
+ // var rotQuat = Cesium.Quaternion.fromHeadingPitchRoll(hpr, scratchSetViewQuaternion);
+ // var rotMat = Cesium.Matrix3.fromQuaternion(rotQuat, scratchSetViewMatrix3);
+ let rotMat = Cesium.Matrix3.fromRotationX(
+ Cesium.Math.PI_OVER_TWO,
+ scratchSetViewMatrix3
+ );
+ Cesium.Matrix4.multiplyByMatrix3(
+ inverseViewMatrix,
+ rotMat,
+ inverseViewMatrix
+ );
+ rotMat = Cesium.Matrix3.fromRotationY(
+ -obj.heading,
+ scratchSetViewMatrix3
+ );
+ Cesium.Matrix4.multiplyByMatrix3(
+ inverseViewMatrix,
+ rotMat,
+ inverseViewMatrix
+ );
+
+ rotMat = Cesium.Matrix3.fromRotationX(obj.pitch, scratchSetViewMatrix3);
+ Cesium.Matrix4.multiplyByMatrix3(
+ inverseViewMatrix,
+ rotMat,
+ inverseViewMatrix
+ );
+
+ rotMat = Cesium.Matrix3.fromRotationZ(-obj.roll, scratchSetViewMatrix3);
+ Cesium.Matrix4.multiplyByMatrix3(
+ inverseViewMatrix,
+ rotMat,
+ inverseViewMatrix
+ );
+
+ return inverseViewMatrix;
+ },
showGZ(){
let viewer = window['cesiumContainer'].viewer;
- this.camera = new Cesium.Camera(viewer.scene)
- // 瑙嗛敟浣撳弬鏁�
- this.camera.frustum = new Cesium.PerspectiveFrustum({
- // fov: Cesium.Math.PI_OVER_THREE,
- fov:Cesium.Math.toRadians(60),
- aspectRatio: 1920 / 1080,
- });
- this.camera.setView({
- up: Cesium.Cartesian3.UNIT_Z,
- destination: this.c3Position,
- orientation: {
- heading: Cesium.Math.toRadians(this.heading),
- pitch: Cesium.Math.toRadians(this.pitch),
- roll: Cesium.Math.toRadians(this.roll),
- },
- })
- this.frustumOutline = new Cesium.DebugCameraPrimitive({
- id: 111111,
- camera: this.camera,
- frustumSplits: [0.01, 10000],
- color: Cesium.Color.fromCssColorString('#00ff00'),
- // updateOnChange: false,
- updateOnChange: true,
- })
- viewer.scene.primitives.add(this.frustumOutline);
+ // this.camera = new Cesium.Camera(viewer.scene)
+ // // 瑙嗛敟浣撳弬鏁�
+ // this.camera.frustum = new Cesium.PerspectiveFrustum({
+ // // fov: Cesium.Math.PI_OVER_THREE,
+ // fov:Cesium.Math.toRadians(60),
+ // aspectRatio: 1920 / 1080,
+ // });
+ // this.camera.setView({
+ // up: Cesium.Cartesian3.UNIT_Z,
+ // destination: this.c3Position,
+ // orientation: {
+ // heading: Cesium.Math.toRadians(this.heading),
+ // pitch: Cesium.Math.toRadians(this.pitch),
+ // roll: Cesium.Math.toRadians(this.roll),
+ // },
+ // })
+ // this.frustumOutline = new Cesium.DebugCameraPrimitive({
+ // id: 111111,
+ // camera: this.camera,
+ // frustumSplits: [0.01, 10000],
+ // color: Cesium.Color.fromCssColorString('#00ff00'),
+ // // updateOnChange: false,
+ // updateOnChange: true,
+ // })
+ // viewer.scene.primitives.add(this.frustumOutline);
- this.listenChange()
- }
+ // this.listenChange()
+ // let videoElement = this.createVideoElementwithMouse("",'11111111');
+ preVideoScopeElement = this.createVideoElementOld(
+ "http://192.168.5.122:9998/live?port=1234&app=live&stream=mystream",
+ '1111111',
+ 1.7778
+ );
+ let positionCt3 = this.c3Position
+ // 2.2.2.2 鍑嗗inverseViewMatrix
+ // 鍑嗗inverseViewMatrix鏄负浜嗗畾涔夎棰戞媿鎽勭殑鐩告満鐨勫Э鎬�(浣嶇疆鍜屾柟鍚�)
+ // 姝ゅ璁惧畾涓哄綋鍓嶇浉鏈虹殑娆ф媺瑙�(heading\pitch\roll)鍜屼綅缃俊鎭�
+ let inverseViewMatrix = this.hpr2m({
+ position: positionCt3,
+ heading: Cesium.Math.toRadians(Number(this.heading)),
+ pitch: Cesium.Math.toRadians(Number(this.pitch)),
+ roll: Cesium.Math.toRadians(Number(this.roll)),
+ });
+ // 2.2.2.3 鍑嗗frustum锛�
+ // frustum鏄负浜嗗畾涔夋姇褰变綋鐨勫舰鐘�
+ // frustum閫夊～锛屽彲浠ョ洿鎺ョ疆涓簎ndefined
+ let frustum = new Cesium.PerspectiveFrustum({
+ fov: Cesium.Math.toRadians(60),
+ aspectRatio: Number(1.77778), // 瀹介珮姣�
+ near: Number(0.05), // 璁惧鐒﹁窛
+ far : 1000.0
+ });
+
+ // 2.2.2.4 鏍规嵁浠ヤ笂淇℃伅鍒涘缓cameraVideo
+ let cameraVideo = new Cesium.XbsjCameraVideo({
+ inverseViewMatrix: inverseViewMatrix,
+ frustum: frustum,
+ videoElement: preVideoScopeElement,
+ showHelperPrimitive: true
+ });
+ cameraVideo._primitive.classificationType = 2; //聽鍚屾椂鎶曞奖鍦板舰鍜�3dtiles鏁版嵁
+ cameraVideo.id='sz'+11111111
+ let isHole = false;
+ cameraVideo._primitive.appearance.material聽=聽new聽Cesium.Material({
+ 聽聽聽聽聽聽聽聽聽聽fabric聽:聽{
+ 聽聽聽聽聽聽聽聽聽聽聽聽聽聽type聽:聽'Color',
+ 聽聽聽聽聽聽聽聽聽聽聽聽聽聽uniforms聽:聽{
+ 聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽color聽:聽new聽Cesium.Color(1.0,聽0,聽0,聽0.2)
+ 聽聽聽聽聽聽聽聽聽聽聽聽聽聽}
+ 聽聽聽聽聽聽聽聽聽聽}
+ 聽聽聽聽聽聽});
+ viewer.scene.primitives.add(cameraVideo);
+
+ let pmObj = {};
+ pmObj.id = 'video'+11111111;
+ pmObj.primitive = cameraVideo;
+ cmCollection.push(pmObj);
+ },
+ putVideo(){
+ this.createVideoElement('/trailer.mp4','111111',2)
+
+ },
+ videoMerge(){
+ let node = null
+ this.createCameraVideo(node,document.getElementById("video" + 111111))
+ },
+ // 鍒涘缓骞曞竷flv鎶�鏈�
+ createVideoElement(videoSrc, id, as) {
+ let viewer = window['cesiumContainer'].viewer
+ let videoElement = document.createElement("video");
+ videoElement.id = "video" + id;
+ videoElement.style.position = "absolute";
+ videoElement.style.zIndex = "100";
+ // videoElement.style.top = "0";
+ videoElement.style.visibility = 'hidden';
+ console.log(viewer.canvas)
+ console.log(viewer.canvas.clientHeight)
+ let veHeight = viewer.canvas.clientHeight / 2;
+ videoElement.style.height = veHeight + "px";
+ let veWidth = Number(veHeight) * Number(as);
+ videoElement.style.width = veWidth / 2 + "px";
+ videoElement.style.bottom = 0;
+ videoElement.style.left =
+ (Number(viewer.canvas.clientWidth) - veWidth) / 2 + "px";
+ // videoElement.crossOrigin = "anonymous";
+ videoElement.autoplay = 'autoplay';
+ videoElement.loop = 'loop';
+ videoElement.controls = 'controls';
+ videoElement.muted = "muted";
+ // 璁剧疆瑙嗛婧�
+ // videoElement.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
+ videoElement.src =videoSrc ;
+ // videoElement.type = "video/mp4"
+ document.getElementById("videoSource").appendChild(videoElement);
+ let playerObj = {};
+ playerObj.id = "video" + id;
+ playersArr.push(playerObj);
+ return videoElement;
+ },
+ // 娓呴櫎骞曞竷鐨刣iv鍏冪礌
+ destroyVideoElement(videoElement) {
+ document.getElementById("videoSource").removeChild(videoElement);
+ },
+ // 鍒涘缓鐩告満濮垮娍
+ createCameraVideo(node, videoElement) {
+ console.log(document.getElementById("video" + 111111))
+ let viewer = window['cesiumContainer'].viewer;
+ let positionCt3 = Cesium.Cartesian3.fromDegrees(125.04159166971326, 46.63755601510411,33.13806141449017)
+ // 2.2.2.2 鍑嗗inverseViewMatrix
+ // 鍑嗗inverseViewMatrix鏄负浜嗗畾涔夎棰戞媿鎽勭殑鐩告満鐨勫Э鎬�(浣嶇疆鍜屾柟鍚�)
+ // 姝ゅ璁惧畾涓哄綋鍓嶇浉鏈虹殑娆ф媺瑙�(heading\pitch\roll)鍜屼綅缃俊鎭�
+ let inverseViewMatrix = this.hpr2m({
+ position: positionCt3,
+ heading: Cesium.Math.toRadians(Number(this.heading)),
+ pitch: Cesium.Math.toRadians(Number(this.pitch)),
+ roll: Cesium.Math.toRadians(Number(this.roll)),
+ });
+ // 2.2.2.3 鍑嗗frustum锛�
+ // frustum鏄负浜嗗畾涔夋姇褰变綋鐨勫舰鐘�
+ // frustum閫夊～锛屽彲浠ョ洿鎺ョ疆涓簎ndefined
+ let frustum = new Cesium.PerspectiveFrustum({
+ fov: Cesium.Math.toRadians(60),
+ aspectRatio: Number(1.77778), // 瀹介珮姣�
+ near: Number(0.05), // 璁惧鐒﹁窛
+ far : 1000.0
+ });
+
+ // 2.2.2.4 鏍规嵁浠ヤ笂淇℃伅鍒涘缓cameraVideo
+ let cameraVideo = new Cesium.XbsjCameraVideo({
+ inverseViewMatrix: inverseViewMatrix,
+ frustum: frustum,
+ videoElement: videoElement,
+ showHelperPrimitive: false,
+ });
+ cameraVideo._primitive.classificationType = 2;
+ let isHole = false;
+ let alphamaterial = new Cesium.Material({
+ fabric: {
+ type: 'XbsjCameraVideo',
+ uniforms: {
+ image: '', // Cesium鏈塨ug锛屾澶勪笉鑳界洿鎺ヨ祴鍊紇ideo
+ alphaImage: '/images/videoMark.jpg',
+ },
+ components: {
+ diffuse: 'texture2D(image, fract(materialInput.st)).rgb',
+ // alpha : 'texture2D(alphaImage, fract(repeat * materialInput.st)).a * color.a'
+ alpha: 'texture2D(alphaImage, fract(materialInput.st)).r',
+ }
+ }
+ });
+ alphamaterial.uniforms.image = videoElement;
+ cameraVideo._primitive.appearance.material = alphamaterial;
+ // 2.2.2.5 鍔犲叆鍒板満鏅腑鍘�
+ viewer.scene.primitives.add(cameraVideo);
+
+ let pmObj = {};
+ pmObj.id = 'video' + '111111';
+ pmObj.isHole = isHole;
+ pmObj.primitive = cameraVideo;
+ pmCollection.push(pmObj);
+ },
+ //娓呴櫎瑙嗛鎶曞奖娓叉煋鍩哄厓
+ destroyCameraVideo(vid) {
+ if(pmCollection){
+ for (let i = 0; i < pmCollection.length; i++) {
+ if (vid === pmCollection[i].id) {
+ viewer.scene.primitives.remove(pmCollection[i].primitive);
+ pmCollection.splice(i, 1);
+ }
+ }
+ }
+ },
}
}
</script>
--
Gitblit v1.9.3