SuperMap iClient3D 11i (2022) SP1 for Cesium 之保存视频投放

目录

前言

一、代码思路

1.1 视频投放绘制

1.2 保存结果参数

1.3 跳转页面预览

1.4 自动视频投放

二、结果展示

---

前言

       最近小编接到一个客户项目中的需求，想做两个页面，A 页面绘制了视频投放，点击保存后跳转到 B 页面，B 页面是一个表格，记录了视频列表，有预览的链接，点击链接可以返回 A 页面，并且 A 页面之前保存的视频仍然存在。其实实际项目中将处理结果保存下来，下次打开或者刷新页面使其值还保留的应用有很多，下面小编带大家用简单的demo实现该功能。

一、代码思路

1.1 视频投放绘制

       视频投放具体可以参考官网示例 视频投放 projectionImage，小编这里直接使用该示例。

1.2 保存结果参数

       将视频投放设置的参数保存下来，需要用到前端JavaScript存储对象知识，localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。                   

       localStorage 用法可参考Window localStorage 属性 | 菜鸟教程。 一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。

var storage = window.localStorage;
var d = JSON.stringify(data);// JSON 转换成为 JSON 字符串
storage.setItem("data", d);//存储 data

 需要保存的视频投放参数如下：

var data = {
				videoUrl: videoElement,//视频url地址
				horizontalfov: param.horizontalfov,//水平视角
				verticalfov: param.verticalfov,//垂直视角
				distance: param.distance,//距离
				visibleLine: param.hintlinevisible,//视频提示线可见性
				direction: param.direction,//方位角
				pitch: param.pitch,//俯仰角
				position: param.position,//位置
				videoId: param.name,//名称
			};

1.3 跳转页面预览

       页面跳转需要用到 <a href="url">链接文本</a>，小编这里对保存按钮设置了跳转页面的链接，具体如下：

<a href="http://127.0.0.1:8020/SuperMap%20iClient3D%2011i%20(2022)%20SP1%20for%20Cesium_34538/examples/webgl/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2.html?__hbt=1678692675241" " "="">
<button type="button" id="save" class="button black">保存</button>
</a>

1.4 自动视频投放

       取出页面存储的 data 参数，再重新转化为 json 形式。使用方法如下：

var json = storage.getItem("data");
var jsonObj = JSON.parse(json);//将 JSON 字符串转换成为 JSON 对象

       读取 jsonObj ，判断 videoId 值是否是"视频 A"，如果是，就在 1s 后自动播放。这里设置计时器是因为需要等场景中模型图层加载完全后再自动进行视频投放，否则会出现图 1.1 的加载不全或者图 1.2 拉花的情况。

var projectionImage = new Cesium.ProjectionImage(scene);
setTimeout(function() {
	if(jsonObj.videoId == "视频A") {
		projectionImage.hintLineVisible = jsonObj.visibleLine;
		projectionImage.distance = jsonObj.distance;
		projectionImage.setDistDirByPoint(jsonObj.position);
		projectionImage.pitch = jsonObj.pitch;
		projectionImage.direction = jsonObj.direction;
		projectionImage.verticalFov = jsonObj.verticalfov;
		projectionImage.horizontalFov = jsonObj.horizontalfov;
		projectionImage.viewPosition = jsonObj.position;
		projectionImage.setImage({
			video: videoElement
		});
		videoElement.play();
		projectionImage.removeAllClipRegion();
		projectionImage.build();
	}
}, 1000);

​

图1.1 视频投放加载不全

​

图1.2 视频投放穿透过建筑并且出现拉花的情况

二、结果展示