视频墙
关键引入文件:
第一步:引入框架地图关键文件
- https://mhc.ixiera.com/mhc/main_min.js
- https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
- https://mhc.ixiera.com/mhc/Cesium3DTile.js
第二步:引入视频墙文件
- 1. 当视频源为直播流时需额外引用(并给第 5 个参数
videoWall:true)- https://mhc.ixiera.com/plugins/flv.min.js
- https://mhc.ixiera.com/mhc/mchmap/videoWall/js/video-player-utils.min.js
- https://mhc.ixiera.com/mhc/mchmap/videoWall/js/videoWall.min.js
- 2. 仅使用普通视频资源时
- https://mhc.ixiera.com/mhc/mchmap/videoWall/js/videoWall.min.js
1. create 初始化
const videoWallInstance = new videoWall(viewer, wallPositions, videoUrl, wallHeight, isFlv, videoWidth);
实例代码:
// 极简调用【1 行】 /* 页面上引用视频资源,由于浏览器限制,可能需要在页面给一个点击事件加调用*/
const videoWallInstance = new videoWall(viewer, wallPositions, videoUrl);
2. 参数说明
| 参数 | 数据类型 | 默认值 | 说明 |
| viewer | Viewer 实例 | 必填 | MchCesium.viewer |
| wallPositions | Array | 必填 | 84 坐标数组,≥2 个点即可成墙; 例: [[116.38,39.905,0],[116.39,39.905,0]]84 坐标数组,1个点也可成墙;(需看参数videoWidth) |
| videoUrl | String | 必填 | 视频地址,如 'media/aa.mp4' |
| wallHeight | Number | 300 | 视频墙高度(单位:米) |
| isFlv | Boolean | false | 是否为直播流(true 时请引入上方直播流扩展库) |
| videoWidth | Number | 300 | 仅当 wallPositions 长度为 1 时生效;以该点为中心,东西向扩展为{videoWidth}半径生成单面墙 |
3. show 显示 / hide 隐藏
显示:videoWallInstance.show();
隐藏:videoWallInstance.hide();
4. remove 销毁
videoWallInstance.remove();
5. setWallHeight 更新高度
videoWallInstance.setWallHeight(height);
6. 完整代码示例
<xmp>
<script src="https://mhc.ixiera.com/mhc/main.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<!-- 若使用直播流,请取消下面两行注释 -->
<!-- <script src="https://mhc.ixiera.com/plugins/flv.min.js"></script> -->
<!-- <script src="https://mhc.ixiera.com/mhc/mchmap/videoWall/js/video-player-utils.min.js"></script> -->
<script src="https://mhc.ixiera.com/mhc/mchmap/videoWall/js/videoWall.min.js"></script>
<style>
html,body,#cesiumContainer{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
.btnsBox{position:fixed;top:10px;left:10px;height:30px;}
.btnsBox button{background:#fff;border-radius:2px;color:#333;line-height:30px;margin-right:15px;font-size:12px;padding:0 15px;cursor:pointer;}
</style>
<div id="cesiumContainer"></div>
<div class="btnsBox">
<button onclick="loadWall()">加载视频墙</button>
<button onclick="toHide()">隐藏</button>
<button onclick="toShow()">显示</button>
<button onclick="toDestroy()">销毁</button>
<button onclick="toChangeHeight(600)">高度→600</button>
</div>
<script>
// 1. 初始化 Viewer
const view3D = MchCesium.init('cesiumContainer', true);
const viewer = MchCesium.viewer;
// 2. 设置相机视角(北京天安门附近)
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.385, 39.9, 500),
orientation : {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-45),
roll : 0
}
});
// 3. 墙坐标(西南→东南)
const wallPositions = [
[116.38, 39.905, 0],
[116.39, 39.905, 0]
];
const videoUrl = 'media/aa.mp4'; // 本地视频
// const videoUrl = 'http://117.72.100.1:10086/live/stream_1.flv'; // 直播流
let videoWallInstance;
function loadWall(){
videoWallInstance = new videoWall(viewer, wallPositions, videoUrl, 500, false, 300);
}
function toHide(){ videoWallInstance.hide(); }
function toShow(){ videoWallInstance.show(); }
function toDestroy(){ videoWallInstance && videoWallInstance.remove(); }
function toChangeHeight(h){ videoWallInstance && videoWallInstance.setWallHeight(h); }
</script>
</xmp>
7. 效果展示

Demo 地址:
https://mhc.ixiera.com/mhc/mchmap/videoWall/index.html
扫一扫