SuperMap iClient3D for Cesium视频投放

1 概述

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

效果如下：

2 具体步骤：

2.1 软件安装

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

2.2 三维场景制作：

打开SuperMap iDesktopX 11i

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

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

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

2.3 三维服务发布：

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

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

如果第一次打开，需要访问http://localhost:8090/iserver/services/security/login，进行管理员注册，在此已经注册过了，记住自己的账户和密码。

回到SuperMap iDesktopX 11i，打开创建好的的场景，右键左侧工作空间管理器中的工作空间名称，选择发布工作空间，

输入自己的服务端账户密码

勾选三维服务之后点击发布

之后打开浏览器，登录自己的管理员账号，就可以在服务管理中找到发布的三维服务

点击进入并复制服务地址，如果想要查看模型数据或者预览，可以点击链接，然后探索里面的内容。至此三维场景发布完成，得到一个服务端链接。

2.4 Web端服务加载：

首先按照SuperMap iClient3D for Cesium官网教程配置环境，得到一个Html前端工程，官方教程在：SuperMap iClient3D for Cesium 开发指南

，官网教程内容很详细，还有API可以学习。

本开发使用的是VScode，其他开发工具一样，根据官网教程创建viewer之后，使用打开场景,下面的地址就是刚刚服务端的链接。效果如下：（注意在此过程中SuperMap iServer 11i需要保持打开状态）

var scene = viewer.scene;
var promise = scene.open("http://localhost:8090/iserver/services/3D-test/rest/realspace"); //url为在SuperMap iServer上发布的服务地址

2.5 视频投放

最后一步，在场景中加载视频。

实际上，如果使用Cesium直接进行视频投放，原理类似把视频作为纹理贴到一个矩形实体上面，但是SuperMap在Cesium的基础上，把该步骤封装成了一个类，也就是Cesium.ProjectionImage，所以使用起来非常方便。

关于ProjectionImage的详细介绍，可以查看官方文档3D WebGL API

在自己书写代码之前可以在官网http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#projectionImage进行练习

下面书写的代码也是对官方源码的理解

首先在<video>标签里面，把要投放的视频进行打开，设置它的样式和属性。记住它的ID，本文中是trailer

    <video id="trailer" style="visibility: hidden;position:absolute;top:0px;left:0px;width: 200px;height:200px;" autoplay loop crossorigin controls>
        <source src="vedio/vedio.mp4" type="video/mp4">
    </video>

然后创建ProjectionImage对象，并跟视频对象绑定起来

var videoElement = document.getElementById('trailer');
var projectionImage = new Cesium.ProjectionImage(scene);
projectionImage.setImage({
                    video: videoElement
                });

获取视频之后，需要的就是视频投放的观测点、方向、距离这些参数了。

观测点使用

projectionImage.viewPosition = [longitude, latitude, height];

视频的长和宽使用

projectionImage.horizontalFov = 20;
projectionImage.verticalFov = 10;

之后设置投射的方向和距离

projectionImage.setDistDirByPoint([longitude, latitude, height]);
projectionImage.distance = 200;

不出意外的话，根据上面的代码，视频就可以正常投射了。

完整的JavaScript代码如下：

$(document).ready(function(){
            var viewer = new Cesium.Viewer('cesiumContainer');
            var scene = viewer.scene;
            var promise = scene.open("http://localhost:8090/iserver/services/3D-3D_Try/rest/realspace");
            promise.then(function(layers){
                console.log(layers)
                var videoElement = document.getElementById('trailer');
                var projectionImage = new Cesium.ProjectionImage(scene);
                projectionImage.distance = 0.1;
                var wgsPosition = scene.camera.positionCartographic;
                var longitude = Cesium.Math.toDegrees(wgsPosition.longitude);
                var latitude = Cesium.Math.toDegrees(wgsPosition.latitude);
                var height = wgsPosition.height;
                projectionImage.viewPosition = [longitude, latitude, height];
                projectionImage.horizontalFov = 20;
                projectionImage.verticalFov = 10;
                projectionImage.setImage({
                    video: videoElement
                });

                //videoElement.play();
                projectionImage.removeAllClipRegion();
                projectionImage.build();
                var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                handler.setInputAction(function (movement) {
                var last = scene.pickPosition(movement.position);
                console.log(1);
                //计算该点与视口位置点坐标的距离
                var distance = Cesium.Cartesian3.distance(scene.camera.position, last);
                if (distance > 0) {
                //将鼠标当前点坐标转化成经纬度
                var cartographic = Cesium.Cartographic.fromCartesian(last);
                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                var height = cartographic.height;
                //通过该点设置视频投放对象的距离及方向
                projectionImage.setDistDirByPoint([longitude, latitude, height]);
                projectionImage.distance = 200;
                var wgsPosition = scene.camera.positionCartographic;
                var longitude = Cesium.Math.toDegrees(wgsPosition.longitude);
                var latitude = Cesium.Math.toDegrees(wgsPosition.latitude);
                var height = wgsPosition.height;
                projectionImage.viewPosition = [longitude, latitude, height];
                }

                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            })

        })

3 总结

本文是对三维场景视频投放的一个简单尝试，代码和功能都是很简略（几乎没什么功能），但是教程是很详细的，对于初学者比较友好，如果想要较好的投射效果，还需要对视频投射的参数进行仔细的打磨。。