视频墙

关键引入文件:

第一步:引入框架地图关键文件

  • 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. 参数说明

参数数据类型默认值说明
viewerViewer 实例必填MchCesium.viewer
wallPositionsArray必填84 坐标数组,≥2 个点即可成墙;
例:[[116.38,39.905,0],[116.39,39.905,0]]
84 坐标数组,1个点也可成墙;(需看参数videoWidth)
videoUrlString必填视频地址,如 'media/aa.mp4'
wallHeightNumber300视频墙高度(单位:米)
isFlvBooleanfalse是否为直播流(true 时请引入上方直播流扩展库)
videoWidthNumber300仅当 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

本文档来自—MCHMAP 丨 地图引擎平台