MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 无人机视频投影

无人机视频投影

关键引入文件：

  • 第一步：引入框架地图关键文件
    • 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
  • 第二步：引入无人机视频投影文件
    • https://mhc.ixiera.com/mhc/mchmap/UAVVideo3d/js/CoordinateTranslate.min.js
    • https://mhc.ixiera.com/mhc/mchmap/UAVVideo3d/js/Video3d.min.js

1.初始化

var videoProjection = new Video3d(viewer, {pathData: PositionsData, url: videoUrl})

2.参数说明：

viewer：创建的view实例。

param 参数;

参数数据类型是否必填说明
pathDataArray必填飞行轨迹数据;数据结构[{x: number,y: number,z:number,time: "2024-01-01T08:00:00Z"},...]
urlstring 必填视频/图片地址，默认值：无
alphanumber选填视频透明度，默认值：1.0
showPathPointsboolean选填是否显示轨迹点，默认值：true
isLoopboolean选填是否循环播放，默认值：true
speednumber选填播放速度，默认值：1
iconUrlstring选填无人机图标URL
iconScalenumber选填无人机图标缩放比例
isFlvboolean选填是否为FLV格式视频，默认值：false

3.显示/隐藏无人机&路线

         videoProjection.show();

         videoProjection.hide();

4.destroy销毁

        videoProjection.destroy();

5.完成代码实例

    

    <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/UAVVideo3d/js/video-player-utils.min.js"></script> -->

    <script src="https://mhc.ixiera.com/mhc/mchmap/UAVVideo3d/js/CoordinateTranslate.min.js"></script>

    <script src="https://mhc.ixiera.com/mhc/mchmap/UAVVideo3d/js/Video3d.js"></script>

    <style>

        html,body,#cesiumContainer { width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}

        .btnsBox {position: fixed;top: 10px;left: 10px;width: 70%;height: 30px;}

        .btnsBox button {background-color: #fff;border-radius: 2px;color: #333;line-height: 30px;margin-right: 15px;font-size: 12px;padding: 0 15px;cursor: pointer;}

    </style>

<body>

    <div id="cesiumContainer"></div>

    <div class="btnsBox">

        <button onclick="creatVideo()">加载无人机视频投影</button>

        <button onclick="toHide()">隐藏无人机&路线</button>

        <button onclick="toShow()">显示无人机&路线</button>

        <button onclick="toDestroy()">销毁</button>

    </div>

    <script >

        // 一、初始化Cesium

        const view3D = MchCesium.init('cesiumContainer', true);

        const viewer = MchCesium.viewer;

 

        const positionsData = [

            {

                "x": 116.397428,

                "y": 39.909258,

                "z": 100,

                "time": "2024-01-01T08:00:00Z"

            },

            {

                "x": 116.398428,

                "y": 39.909258,

                "z": 150,

                "time": "2024-01-01T08:00:10Z"

            },

            {

                "x": 116.399428,

                "y": 39.908258,

                "z": 200,

                "time": "2024-01-01T08:00:20Z"

            },

            {

                "x": 116.400428,

                "y": 39.907258,

                "z": 250,

                "time": "2024-01-01T08:00:30Z"

            },

            {

                "x": 116.401428,

                "y": 39.906258,

                "z": 300,

                "time": "2024-01-01T08:00:40Z"

            },

            {

                "x": 116.402428,

                "y": 39.905258,

                "z": 250,

                "time": "2024-01-01T08:00:50Z"

            },

            {

                "x": 116.403428,

                "y": 39.904258,

                "z": 200,

                "time": "2024-01-01T08:01:00Z"

            },

            {

                "x": 116.404428,

                "y": 39.903258,

                "z": 150,

                "time": "2024-01-01T08:01:10Z"

            },

            {

                "x": 116.405428,

                "y": 39.902258,

                "z": 100,

                "time": "2024-01-01T08:01:20Z"

            }]

        const videoUrl = 'source/aa.mp4'

        // const videoUrl = 'http://117.72.100.1:10086/live/stream_1.flv'; // 针对直播流

 

        // 使用新接口，一行代码即可实现轨迹动画

        var videoProjection

        function creatVideo(){

            if(videoProjection){ // 销毁

                videoProjection.destroy()

            }

            videoProjection = new Video3d(viewer, {

            pathData: positionsData,    // 或者直接传入轨迹数据数组

            url: videoUrl,           // 视频文件路径

            alpha: 1.0,                     // 透明度

            isFlv: false,                   // 是否是flv格式

            speed: 1,                       // 播放速度

            isLoop: true,                   // 是否循环播放

            iconUrl: 'source/icon_uav.png', // 无人机图标

            iconScale: 1,                   // 图标缩放

            showPathPoints: false            // 是否显示轨迹点

        });

        }

        function toShow(){

            videoProjection.show();

        }

        function toHide(){

            videoProjection.hide();

        }

        function toDestroy(){

            if (videoProjection) {

                videoProjection.destroy();

            }

        }

    </script>

</body>

6.效果展示

Demo地址：https://mhc.ixiera.com/mhc/mchmap/UAVVideo3d/index.html

 

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