在cesium中添加播放视频按钮

最新推荐文章于 2024-08-22 15:41:32 发布

打怪升级咯

最新推荐文章于 2024-08-22 15:41:32 发布

阅读量811

点赞数 16

文章标签：前端

本文链接：https://blog.csdn.net/m0_57211146/article/details/141024393

版权

一、添加按钮

<button id="myButton">播放视频</button>

<video id="myVideo" width="100%" height="100%" controls autoplay style="display: block">
    <source :src="src" type="video/mp4">
</video>

添加 autoplay设置自动播放

二、初始化时添加按钮功能

cesium_init() {
    (Cesium.Ion.defaultAccessToken = 'yourtoken');
    const viewer = new Cesium.Viewer('my-map', {
        // 层高图形
        terrain: Cesium.Terrain.fromWorldTerrain({
            requestVertexNormals: true, // 开启地形光照
            requestWaterMask: false // 开启水面波纹
        }),
        sceneMode: window.Cesium.SceneMode.SCENE3D,
        homeButton: false,
        vrButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: true, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false // 是否显示帮助信息控件
    });
    // 隐藏版权信息
    viewer.cesiumWidget.creditContainer.setAttribute('style', 'display:none')

    // 优化第一步
    // 这是让你的画面以一个怎样的形式出现，相当于出场动画
    viewer.camera.flyTo({
        // fromDegrees()方法，将经纬度和高程转换为世界坐标，定位
        destination: Cesium.Cartesian3.fromDegrees(126.613922, 49.53832, 1000),
        orientation: {
            roll: 0.0
        }
    });
    // 创建一个新的DOM元素来包装按钮
    const element = document.createElement('div');
    element.className = 'cesium-button';
    element.style.position = 'absolute';
    element.style.top = '10px';
    element.style.left = '10px';
    const button = document.createElement('button');
    button.textContent = '播放轨迹视频';
    button.style.padding = '10px';
    button.style.backgroundColor = 'rgba(0, 60, 136, 0.8)';
    button.style.color = 'white';
    button.style.border = 'none'; // 设置为无边框
    button.style.cursor = 'pointer'; // 光标变成手型
    button.onclick = () => {
        this.src = Video, this.dialogDataVisible = true
    };
    element.appendChild(button);
    viewer.container.appendChild(element);
}

this.src = Video中Video是我引入的本地视频，可以根据自己想展示的视频写入链接。