SuperMap iClient3D for Cesium视频投放

本文介绍如何将监控视频投放到三维实景中,包括软件安装、三维场景制作与服务发布、Web端服务加载及视频投放等步骤。通过具体实例展示从零开始实现三维场景中的视频动态显示。

1 概述

把监控视频投放到三维实景中,可以将静态的三维数据实现动态的显示效果,可以极大方便一些区域的查看和监管,该文章记录该投放的实现过程,以供入门参考。

效果如下:

2 具体步骤:

2.1 软件安装

在进行视频投放之前,首先安装SuperMap iDesktopX和SuperMap iServer,在实践中使用的是11i版本。

2.2 三维场景制作:

打开SuperMap iDesktopX 11i

在左侧工作空间管理器中找到场景,并右键,选择新建球面场景,之后即可看到工作空间中出现了地球画面

在左下角图层管理器中,找到普通图层并右键,选择添加三维切片缓存数据·,如果有其他类型的三维数据可以选则其他选项,找到模型文件并加载(三维切片缓存数据的元文件后缀是scp),加载之后双击图层就可以定位到模型所在位置。

之后按Ctri+S把制作好的三维场景保存,保存路径里面不能含有中文,否则后面发布的服务可能加载不出。

2.3 三维服务发布:

三维场景制作完成之后,把场景发布到服务端,首先打开SuperMap iServer 11i

点击启动服务即可打开,大概要等2分钟左右,跟电脑配置有关。

【资源说明】 基于cesium3dtilset模型视频投放源码+使用说明(无需任何修改,直接引入即可).zip 在项目中引入Cesium.js ##### 然后引入 cesium-videoshed.js 即可 <a href="http://zhangticcc.gitee.io/webgis/"><img alt="" height="100%" src="https://img-blog.csdnimg.cn/20201202172350462.gif" width="90%" ></a>  ``` // 初始化 let viewer = new Cesium.Viewer("viewerContainer") // 参数 let viewModel = { verticalAngle: 90, horizontalAngle: 120, distance: 10 }; let videoShed3DArr = []; // 创建 let create = () => { let videoShed3D = new Cesium.VideoShed3D(viewer, { type: 'Video', url: "src/cs.mp4", alpha: 1, debugFrustum: true, horizontalAngle: Number(viewModel.horizontalAngle), verticalAngle: Number(viewModel.verticalAngle), distance: Number(viewModel.distance), }); videoShed3DArr.push(videoShed3D) } // 销毁 let destroy = () => { videoShed3DArr.forEach(video => video.destroy()) } ``` 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载,沟通交流,互相学习,共同进步!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Matrix_CS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值