|
// $(document).ready(function () {
|
// init();
|
// });
|
var selectedView;
|
var arrViewVideo=[];
|
var selectedView1;
|
var selectedView2;
|
var selectedView3;
|
var selectedView4;
|
var videourl='http://10.32.24.233:8080/img/video/DJI_0119.mp4';
|
var hlsUrl=null;
|
function initVideo(){
|
console.log("初始化");
|
|
$("#chkDebugFrustum").change(function () {
|
if (selectedView == null) return;
|
|
var debugFrustum = $(this).is(':checked');
|
selectedView.debugFrustum = debugFrustum;
|
});
|
|
$("#txtMixNum").range({
|
onChange: function (value, bfb) {
|
if (selectedView == null) return;
|
selectedView.alpha = value;
|
}
|
});
|
|
$("#cameraFov").range({
|
onChange: function (value, bfb) {
|
if (selectedView == null) return;
|
selectedView.fov = value;
|
}
|
});
|
|
|
$("#cameraWidHei").range({
|
onChange: function (value, bfb) {
|
if (selectedView == null) return;
|
selectedView.aspectRatio = value;
|
}
|
});
|
|
|
//修改坐标
|
var drawControl = new mars3d.Draw(viewer, {
|
hasEdit: false
|
});
|
drawControl.on(mars3d.draw.event.DrawMouseMove, function (e) {
|
var pos = e.position;
|
if (drawType === "ViewPos")
|
arrViewVideo[arrViewVideo.length - 1].position = pos;
|
if (drawType === "CameraPos")
|
arrViewVideo[arrViewVideo.length - 1].cameraPosition = pos;
|
});
|
drawControl.on(mars3d.draw.event.DrawCreated, function (e) {
|
drawControl.clearDraw();
|
});
|
|
var drawType;
|
$("#btnSelCamera").click(function () {
|
if (selectedView == null) return;
|
// if(viewer.mars == undefined){
|
// viewer.mars = new mars3d.ViewerEx(viewer);
|
// }
|
drawType = "CameraPos";
|
drawControl.clearDraw();
|
drawControl.startDraw({ type: "point" });
|
});
|
$("#btnSelView").click(function () {
|
if (selectedView == null) return;
|
// if(viewer.mars == undefined){
|
// viewer.mars = new mars3d.ViewerEx(viewer);
|
// }
|
drawType = "ViewPos";
|
drawControl.clearDraw();
|
drawControl.startDraw({ type: "point" });
|
});
|
|
$("#btnLocate").click(function () {
|
if (selectedView == null) return;
|
selectedView.locate();
|
});
|
|
$("#btnConsoleJson").click(function () {
|
if (selectedView == null) return;
|
|
var params = JSON.stringify(selectedView.params);
|
console.log(params);
|
haoutil.msg(params);
|
});
|
|
$("#btnPlayPause").click(function () {
|
if (selectedView == null) return;
|
|
selectedView.videoPlay = !selectedView.videoPlay;
|
});
|
|
bindKeydownEvnet();
|
//addHistoryVideo1() ;
|
//addHistoryVideo2();
|
//addHistoryVideo();
|
//viewerflyToLonLat(118.869942,33.309917,1);
|
}
|
|
function addHistoryVideo() {
|
var camera = viewer.scene.camera;
|
camera.setView({
|
destination: Cesium.Cartesian3.fromDegrees(118.55966032833229, 31.976695936962915, 159.54014013189413),
|
orientation: {
|
direction: new Cesium.Cartesian3( 0.15284668979678995,-0.2026634956655926, -0.9672462959054257),
|
up: new Cesium.Cartesian3(-0.42820575667497207, 0.8685149858870838,-0.24964284335821352),
|
right: new Cesium.Cartesian3(0.8906613943405083, 0.4523375142680082, 0.04596796511986649)
|
}
|
});
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
var params1 = {
|
type: mars3d.video.Video3D.Type.Video,
|
url: "./video/1.MP4",
|
position: Cesium.Cartesian3.fromDegrees(120.55966032833229, 28.976695936962915, 159.54014013189413),
|
cameraPosition: Cesium.Cartesian3.fromDegrees(118.55966032833229, 31.976695936962915, 159.54014013189413),
|
fov: 58,
|
aspectRatio: 1.7778,
|
alpha: 0.7,
|
debugFrustum: false,
|
dirObj: {
|
direction: { x: 0.15284668979678995, y: -0.2026634956655926, z: -0.9672462959054257},
|
right: { x: 0.8906613943405083, y: 0.4523375142680082, z: 0.04596796511986649 },
|
up: { x: -0.42820575667497207, y: 0.8685149858870838, z: -0.24964284335821352 }
|
}
|
}
|
|
selectedView = new mars3d.video.Video3D(viewer, params1);
|
arrViewVideo.push(selectedView);
|
}
|
|
function addHistoryVideo1() {
|
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
var params1 = {
|
type: mars3d.video.Video3D.Type.Video,
|
//url:"http://10.32.24.233:8080/img/video/DJI_0120_00_02_10.mp4","position":{"x":-2620207.5321477014,"y":4710443.073189139,"z":3398466.5078547043},"cameraPosition":{"x":-2620200.830350536,"y":4710481.110750541,"z":3398474.7447419357},"fov":57.3,"aspectRatio":1.990668740279938,"alpha":0.8,
|
"url":"http://10.32.24.233:8080/img/video/DJI_0120 00_00_00-00_01_01.mp4","position":{"x":-2620207.0157359475,"y":4710443.6707390025,"z":3398466.111278378},"cameraPosition":{"x":-2620202.261681702,"y":4710480.551432474,"z":3398475.5831979616},"fov":56.7,"aspectRatio":1.9,"alpha":0.8,
|
debugFrustum: false
|
}
|
|
selectedView1 = new mars3d.video.Video3D(viewer, params1);
|
//arrViewVideo.push(selectedView1);
|
}
|
|
function addHistoryVideo2() {
|
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
var params1 = {
|
type: mars3d.video.Video3D.Type.Video,
|
//url:"http://10.32.24.233:8080/img/video/DJI_0003_1 00_02_10.mp4","position":{"x":-2620227.2554531517,"y":4710425.355336995,"z":3398475.417897917},"cameraPosition":{"x":-2620226.989430694,"y":4710463.347535606,"z":3398490.2529985034},"fov":56.1,"aspectRatio":1.990668740279938,"alpha":0.8,
|
"url":"http://10.32.24.233:8080/img/video/DJI_0003_1 00_00_00-00_01_01.mp4","position":{"x":-2620226.9297979367,"y":4710425.663849721,"z":3398475.231407834},"cameraPosition":{"x":-2620226.803189126,"y":4710457.677956819,"z":3398487.412634559},"fov":62.29999999999999,"aspectRatio":1.990668740279938,"alpha":0.8,
|
debugFrustum: false
|
}
|
|
selectedView2 = new mars3d.video.Video3D(viewer, params1);
|
//arrViewVideo.push(selectedView2);
|
}
|
|
function addHistoryVideo3() {
|
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
var params1 = {
|
type: mars3d.video.Video3D.Type.Video,
|
url: "http://10.32.24.233:8080/img/video/DJI_0119.mp4",
|
"position":{"x":-2620948.205397221,"y":4709851.305287631,"z":3398710.34265271},"cameraPosition":{"x":-2620982.6203615326,"y":4709875.980817173,"z":3398737.010255333},"fov":45.5,"aspectRatio":1.926260346124906,"alpha":0.8,"debugFrustum":false
|
}
|
|
selectedView3 = new mars3d.video.Video3D(viewer, params1);
|
//arrViewVideo.push(selectedView2);
|
}
|
|
function addHistoryVideo4() {
|
|
// 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
|
var params1 = {
|
type: mars3d.video.Video3D.Type.Video,
|
url: "http://10.32.24.233:8080/img/video/DJI_0002.mp4",
|
"position":{"x":-2620930.368913842,"y":4709866.550191198,"z":3398702.857806974},"cameraPosition":{"x":-2620951.4737488255,"y":4709893.469478797,"z":3398726.289609433},"fov":50.5,"aspectRatio":1.95,"alpha":0.8,"debugFrustum":false
|
}
|
|
selectedView4 = new mars3d.video.Video3D(viewer, params1);
|
//arrViewVideo.push(selectedView2);
|
}
|
|
function createViewForVideo() {
|
if(videourl==null && hlsUrl==null){
|
return;
|
}
|
|
//取屏幕中心点
|
var cartesian = mars3d.point.getCenter(viewer);
|
cartesian = Cesium.Cartesian3.fromDegrees(cartesian.x, cartesian.y, cartesian.z);
|
if (!cartesian) return;
|
var cameraPosition = Cesium.clone(viewer.scene.camera.position);
|
|
|
var debugFrustum = $("#chkDebugFrustum").is(':checked');
|
var alpha = Number($("#txtMixNum").val());
|
|
if(videourl!=null){
|
//构造投射体
|
selectedView = new mars3d.video.Video3D(viewer, {
|
type: mars3d.video.Video3D.Type.Video,
|
url: videourl,
|
cameraPosition: cameraPosition,
|
position: cartesian,
|
alpha: alpha,
|
debugFrustum: debugFrustum,
|
});
|
}else{
|
var id = arrViewVideo.length+1;
|
createVideoElement(id);
|
var videoElement = document.getElementById('trailer'+id);
|
if (Hls.isSupported()) {
|
var hls = new Hls();
|
hls.loadSource(hlsUrl);
|
hls.attachMedia(videoElement);
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
videoElement.play();
|
});
|
}
|
else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
|
videoElement.src = hlsUrl;
|
videoElement.addEventListener('loadedmetadata', function () {
|
videoElement.play();
|
});
|
}
|
selectedView = new mars3d.video.Video3D(viewer, {
|
type: mars3d.video.Video3D.Type.Video,
|
dom: $("#trailer"+id),
|
cameraPosition: cameraPosition,
|
position: cartesian,
|
alpha: alpha,
|
debugFrustum: debugFrustum,
|
});
|
}
|
|
|
arrViewVideo.push(selectedView);
|
}
|
|
function clearVideo() {
|
for (var i = 0; i < arrViewVideo.length; i++) {
|
arrViewVideo[i].destroy();
|
}
|
arrViewVideo = [];
|
selectedView = null;
|
//selectedView1 = null;
|
//selectedView2 = null;
|
}
|
|
function clearHisVideo(){
|
selectedView1.destroy();
|
selectedView2.destroy();
|
selectedView3.destroy();
|
selectedView4.destroy();
|
selectedView1 = null;
|
selectedView2 = null;
|
selectedView3 = null;
|
selectedView4 = null;
|
}
|
|
function locateMain(){
|
selectedView.locate();
|
}
|
|
function locate1(){
|
selectedView1.destroy();
|
selectedView2.destroy();
|
selectedView3.destroy();
|
selectedView4.destroy();
|
addHistoryVideo2();
|
addHistoryVideo3();
|
addHistoryVideo4();
|
addHistoryVideo1();
|
|
selectedView1.locate();
|
}
|
|
function locate2(){
|
selectedView1.destroy();
|
selectedView2.destroy();
|
selectedView3.destroy();
|
selectedView4.destroy();
|
addHistoryVideo1();
|
addHistoryVideo3();
|
addHistoryVideo4();
|
addHistoryVideo2();
|
|
selectedView2.locate();
|
}
|
|
function locate3(){
|
selectedView1.destroy();
|
selectedView2.destroy();
|
selectedView3.destroy();
|
selectedView4.destroy();
|
addHistoryVideo1();
|
addHistoryVideo2();
|
addHistoryVideo4();
|
addHistoryVideo3();
|
|
selectedView3.locate();
|
}
|
|
function locate4(){
|
selectedView1.destroy();
|
selectedView2.destroy();
|
selectedView3.destroy();
|
selectedView4.destroy();
|
addHistoryVideo1();
|
addHistoryVideo2();
|
addHistoryVideo3();
|
addHistoryVideo4();
|
|
selectedView4.locate();
|
}
|
|
function showMain(){
|
selectedView.show = !selectedView.show;
|
}
|
|
function show1(){
|
selectedView1.show = !selectedView1.show;
|
}
|
|
function show2(){
|
selectedView2.show = !selectedView2.show;
|
}
|
|
function show3(){
|
selectedView3.show = !selectedView3.show;
|
}
|
|
function show4(){
|
selectedView4.show = !selectedView4.show;
|
}
|
|
var cameraFollow = false;
|
var ratateDirection = {
|
'LEFT': 'Z',
|
'RIGHT': '-Z',
|
'TOP': 'Y',
|
'BOTTOM': '-Y',
|
'ALONG': 'X',
|
'INVERSE': '-X'
|
}
|
|
function bindKeydownEvnet() {
|
$("#chkCameraFollow").change(function () {
|
cameraFollow = $(this).is(':checked');
|
});
|
|
document.addEventListener('keydown', function (e) {
|
switch (e.keyCode) {
|
case 'A'.charCodeAt(0):
|
rotateCamera(ratateDirection.LEFT);
|
break;
|
case 'D'.charCodeAt(0):
|
rotateCamera(ratateDirection.RIGHT);
|
break;
|
case 'W'.charCodeAt(0):
|
rotateCamera(ratateDirection.TOP);
|
break;
|
case 'S'.charCodeAt(0):
|
rotateCamera(ratateDirection.BOTTOM);
|
break;
|
case 'Q'.charCodeAt(0)://Q键
|
rotateCamera(ratateDirection.ALONG);
|
break;
|
case 'E'.charCodeAt(0)://E
|
rotateCamera(ratateDirection.INVERSE);
|
break;
|
}
|
}, false);
|
}
|
|
//微调视频
|
function rotateCamera(dir) {
|
if (!selectedView) return;
|
selectedView.rotateCamera(dir, $("#rotateDeg").val() * 1);
|
|
if (cameraFollow) {
|
viewer.camera.direction = selectedView.camera.direction;
|
viewer.camera.right = selectedView.camera.right;
|
viewer.camera.up = selectedView.camera.up;
|
}
|
}
|
|
function closeVideoFrame(){
|
$("#video_toolbar").css('display','none');
|
|
}
|
|
function closehVideoFrame(){
|
$("#hvideo_toolbar").css('display','none');
|
|
}
|
|
var dv = document.getElementById('video_title');
|
var dv1 = document.getElementById('video_toolbar');
|
//dv.style.cursor = 'move';
|
var videox=0;
|
var videoy=0;
|
var videol=0;
|
var videot=0;
|
var isVideoDown=false;
|
dv.onmousedown = function(e){
|
videox = e.clientX;
|
videoy = e.clientY;
|
videol = dv1.offsetLeft;
|
videot = dv1.offsetTop;
|
|
isVideoDown = true;
|
dv.style.cursor = 'move';
|
}
|
|
dv.onmousemove = function(e){
|
if(isVideoDown==false){
|
return;
|
}
|
|
var nx = e.clientX;
|
var ny = e.clientY;
|
|
var nl = nx - (videox-videol);
|
var nt = ny - (videoy-videot);
|
|
dv1.style.left = nl + 'px';
|
dv1.style.top = nt + 'px';
|
}
|
|
dv.onmouseup = function(e){
|
isVideoDown = false;
|
dv.style.cursor = 'default';
|
}
|
|
function FHKVideo(url, fn) {
|
window.parent.libraryFn(url, fn, 'video');
|
}
|
|
function FHKvideoCb(url) {
|
videourl = url;
|
hlsUrl = null;
|
}
|
|
function okHls(){
|
var inputValue = document.getElementById("hlsInput").value;
|
if(inputValue==""){
|
return;
|
}
|
hlsUrl = inputValue;
|
videourl = null;
|
$("#hls_toolbar").css('display','none');
|
}
|
|
function cancelHls(){
|
$("#hls_toolbar").css('display','none');
|
}
|
|
function showHlsToolbar(){
|
$("#hls_toolbar").css('display','block');
|
}
|
|
function createVideoElement(id){
|
var html = '<video id="trailer'+id+'" style="display: none;" muted="muted" autoplay="autoplay" loop="loop" crossorigin="" controls=""></video>'
|
document.getElementById("videoHtml").innerHTML=html;
|
}
|
