SuperMap iClient3D for WebGL 如何在场景中投放配准好的视频

原创已于 2026-08-13 17:39:56 修改 · 220 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

GEO检测

于 2026-08-13 16:46:28 首次发布

作者：lzzzz

前言

在三维WebGIS项目开发中，视频实景与三维地形、倾斜摄影模型融合展示，是智慧安防、城市巡检、应急指挥、实景监控等场景的核心需求。SuperMap iClient3D for WebGL 提供了成熟的视频投放能力，支持将桌面端配准好的视频精准贴合至三维场景，实现视频画面与地理实景无缝匹配、动态叠加效果。

一、核心原理与功能说明

SuperMap 三维视频投放的核心逻辑：先桌面端精准配准，后Web端加载参数渲染。

区别于普通视频贴纹理，该功能支持通过同名点配准，让视频画面中的实景特征（道路、建筑、地标）与三维场景中的模型、地形坐标精准匹配，最终实现视频画面贴合地形、随三维场景缩放、旋转、漫游同步变化的实景融合效果。

核心流程拆解：

预处理：使用 iDesktopX 完成三维场景视频配准，导出标准投放参数 XML 文件；
Web加载：iClient3D for WebGL 加载三维场景、视频资源、配准参数；
渲染投放：初始化视频投放对象，绑定配准参数，实现精准叠加展示。

二、iDesktopX 视频精准配准实操步骤：

1. 打开三维场景

在 iDesktopX 中加载需要叠加视频的三维地形、倾斜摄影模型场景。

2. 进入三维视频投放配准功能

顶部菜单栏依次点击：三维分析 → 视频投放，打开视频投放配置面板。

3. 导入视频并初始化投放位置

点击【选择视频】，导入需要投放的视频文件；
初步设置投放距离、画面宽高、最大可视距离，将视频画面大致投射到目标场景区域；
调整视角、投放角度，让视频画面与场景实景初步对齐。

4. 同名点配准

在视频投放面板勾选同名点配准，点击配准按钮，弹出配准对话框；
选取视频画面和三维场景中对应的标志性同名点（建议选取道路拐点、建筑角点等清晰特征点，至少选取4组以上，点位越多精度越高）；
系统自动计算配准矩阵，校正视频投射位置，消除画面偏移、扭曲问题；
配准完成后，预览画面，确认视频与场景完全贴合。

5. 导出三维投放参数

配准无误后，点击【导出参数】，保存为 *.xml 格式的三维视频投放参数文件，该文件将用于Web端加载渲染。

三、Web端代码实现视频精准投放

将导出的XML参数文件、视频文件放入项目静态资源目录，接下来通过 iClient3D for WebGL 接口实现加载、配准、投放全流程。

1. 视频投放逻辑

// 获取视频元素
var videoElement = document.getElementById('trailer');

// 创建视频投放对象
var projectionImage = new SuperMap3D.ProjectionImage(scene);

//设置投影的配置文件路径，该XML文件包含投影的参数（如位置、角度、范围等）
projectionImage.setInfo("./projectionXML.xml");

// 将获取到的视频元素绑定到投影对象
projectionImage.setImage({
	video: videoElement
});
// 播放视频
videoElement.play();
// 构建投放效果
projectionImage.build();

2. 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>视频投放</title>
	<link href="./css/pretty.css" rel="stylesheet">
	<link href="./style/projectionImage.css" rel="stylesheet">
	<script src="./js/jquery.min.js"></script>
	<script src="./js/slider.js"></script>
	<script src="./js/config.js"></script>

	<!-- 引入超图产品SDK -->
	<script src="./js/loadSDK/loadSDK.js"></script>
</head>

<body>
	<div id="Container"></div>

	<video id="trailer" style="visibility: hidden;position:absolute;top:0px;left:0px;width: 200px;height:200px;" autoplay loop crossorigin controls  muted >
		<source src="media/video.mp4" type="video/mp4">
	</video>
	<div id='loadingbar' class="spinner">
		<div class="spinner-container container1">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
		<div class="spinner-container container2">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
		<div class="spinner-container container3">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
	</div>

	<script type="text/javascript">
		/**
		 * 页面加载完成后的初始化函数
		 * 创建3D场景查看器并配置视频投放功能
		 * @param {Object} SuperMap3D - SuperMap3D库对象
		 */
		function onload(SuperMap3D) {
			// 通过config.js中的getEngineType,获取引擎类型（EngineType）用于设置启动方式
            var EngineType = getEngineType();
			// 创建3D场景查看器，指定容器和渲染引擎类型
			var viewer = new SuperMap3D.Viewer('Container',{
				contextOptions: {
                    contextType: Number(EngineType), // Webgl2:2 ; WebGPU:3 - 设置渲染引擎类型
                }
			});

			// 等待场景初始化完成后执行初始化函数
			viewer.scenePromise.then(function(scene){
				init(SuperMap3D, scene, viewer);
			});
		}

		/**
		 * 场景初始化函数，设置视频投放功能
		 * @param {Object} SuperMap3D - SuperMap3D库对象
		 * @param {Object} scene - 三维场景对象
		 * @param {Object} viewer - 视图器对象
		 */
		function init(SuperMap3D, scene, viewer) {
			// 设置分辨率缩放比例，提高渲染质量
			viewer.resolutionScale = window.devicePixelRatio;

			// 为当前场景添加默认底图
			// addBaseMap(viewer);

			var scene = viewer.scene;
			scene.shadowMap.darkness = 1.275;      // 设置第二重烘焙纹理的效果（明暗程度）
			scene.debugShowFramesPerSecond = false; // 关闭帧率显示
			scene.hdrEnabled = false;               // 关闭HDR渲染
			scene.sun.show = true;                  // 显示太阳

			// 检查是否支持深度纹理，视频投放功能需要此支持
			if (!scene.pickPositionSupported) {
				alert('不支持深度纹理,视频投放功能无法使用！');
			}

			// 异步打开场景
			var cbdPromise = scene.open(URL_CONFIG.SCENE_CBD)

			// 等待所有图层加载完成后执行回调函数
			cbdPromise.then((result) => {
				// 图层加载完成,设置相机位置到北京CBD区域
				scene.camera.setView({
					destination: SuperMap3D.Cartesian3.fromDegrees(116.4486, 39.9092, 91.3293), // 经纬度和高度
					orientation: {
						heading: 3.179304500963121,      // 航向角（弧度）
						pitch: -0.46239072362282485,     // 俯仰角（弧度）
						roll: 6.283185307179583          // 翻滚角（弧度）
					}
				});

				var layers = scene.layers.layerQueue;

				// 禁用所有图层的选择功能
				for (var i = 0; i < layers.length; i++) {
					layers[i].selectEnabled = false;
				}

				// 获取视频元素
				var videoElement = document.getElementById('trailer');
				
				// 创建视频投放对象
				var projectionImage = new SuperMap3D.ProjectionImage(scene);
				
				//设置投影的配置文件路径，该XML文件包含投影的参数（如位置、角度、范围等）
				projectionImage.setInfo("./projectionXML.xml");
				
				// 将获取到的视频元素绑定到投影对象
				projectionImage.setImage({
					video: videoElement
				});
				// 播放视频
				videoElement.play();
				// 构建投放效果
				projectionImage.build();
			})


			// 移除加载动画，显示工具栏
			$('#loadingbar').remove();
			$('#toolbar').show();
		}
	</script>
</body>

</html>

标签

#3d #webgl