Skip to main content

3D video projection

Load the 3D video fusion layer, support access to flv video stream, and provide functions such as dynamic addition of video images, visible and invisible settings, viewpoint acquisition, viewpoint positioning and other functions. Obtaining parameters related to video projection requires relying on the video calibration tool. For details, please contact customer service (lower right corner).

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.16.0/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: '***', // Authorization code
        env3D:{
            exposure: 0.8,
        }
    });

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

        //Load the Olympic body model
        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);

        //Load the projection reference model
        let models_geo = ["ATModelNew.glb"].map(item => ({
            type: 'glb',
            url: "../example_data/aoti_models/" + item
        }));
        let cameraData=[{
            "Name": "A2 step platform on the east side of F3",
            "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>