跳到主要内容
版本：9.1.1

三维视频投影

加载三维视频融合图层，支持对flv视频流接入，提供视频画面的动态添加、显隐设置、视点获取、视点定位等功能。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>geoVideo</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.1/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.744471002000068, 31.306768408000039], 
        zoom: 17, 
        pitch: 0, 
        bearing: 0,
        userId: '***', // 授权码 
        env3D:{
            exposure: 0.8,
        }
    });

    let THREE = mapmost.THREE;
    map.on('load', function () {

        // 加载奥体模型
        let models_obj = ["CX.glb", "F1.glb", "F2.glb", "F3.glb", "F4.glb", , "KT01.glb", , "KT02.glb"].map(item => ({
            type: 'glb',
            url: '../example_data/aoti_models/' + item
        }));

        let options_obj = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            center: [120.744471002000068, 31.306768408000039, 3.617],
            project: "3857",
            callback: function (group, layer) {
                Layer = layer;
            }
        };
        map.addLayer(options_obj);

        // 加载投影参考模型
        let models_geo = ["ATModelNew.glb"].map(item => ({
            type: 'glb',
            url: "../example_data/aoti_models/" + item
        }));
        let cameraData=[{
            "Name": "F3东侧A2步梯平台",
            "VideoUrl": "<your url>",
            "Videotype": 2,
            "CameraPosX": -343457.618849196,
            "CameraPosY": -93846.8703323383,
            "CameraPosZ": 0.457726845648722,
            "Heading": -2.24654808420246,
            "Pitch": 1.03925376404804,
            "Roll": -0.0218598685855692,
            "Fov": 1.50652016356649,
            "Aspect": 1.77777777777778,
            "Near": 5,
            "Far": 60,
            "ZThreshold": 0.005,
            "Width": 1920,
            "Height": 1080,
            "factor": 1.0,
            "units": 1.0,
            "cameraModel": 12,
            "k1": -2.2131957798274708073e-07,
            "k2": 0,
            "u0": 960,
            "v0": 540,
            "depthTest": false
        }]
        let data = cameraData[0]
        let _cameraData = [{
            name: data.Name,
            position: [data.CameraPosX, data.CameraPosY, data.CameraPosZ],
            heading: data.Heading,
            pitch: data.Pitch,
            roll: data.Roll,
            width: data.Width,
            height: data.Height,
            fov: data.Fov,
            near: data.Near,
            far: data.Far,
            videoUrl: data.VideoUrl,
            zThreshold: data.ZThreshold,
            factor: data.factor,
            videoType: data.Videotype,
            cameraModel: data.cameraModel,
            k1: data.k1,
            k2: data.k2,
            u0: data.u0,
            v0: data.v0,
            depthTest: data.depthTest,
        }]
        let options = {
                id: 'model_id1',
                type: 'geoVideo',
                models: models_geo,
                exposure: 1.2,
                center: [120.744471002000068, 31.306768408000039, 3.617],
                project: "3857",
                cameraData: _cameraData,
                callback: function (geoVideo) {
                    GeoVideo = geoVideo;
                }
            }
        map.addLayer(options);

        map.on('click', function (e) {
            GeoVideo.setVideoCameraActiveByIndex(0, true);
            let _viewData = {
                position: [data.CameraPosX, data.CameraPosY, data.CameraPosZ],
                heading: data.Heading,
                pitch: data.Pitch,
                roll: data.Roll,
            }
            GeoVideo.setViewPoint(_viewData)
        })
    })
</script>
</body>
</html>