Skip to main content

3D video cropping

Supports cropping of 3D video fusion layers, and can also set the cropping range of video images based on the index.

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%;
        }

        #clip-btn{
            position: absolute;
            left: 20px;
            border: 1px solid #000;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 25px;
            cursor: pointer;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<button id="clip-btn" onclick="clipVideo()">Crop</button>
<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
    });

    map.on('load', function () {
        //Load 3DTiles model
        add3DTiles();

        //Load the 3D video fusion layer
        addGeoVideo();
    })

    //Load 3DTiles model
    function add3DTiles(){
        const TILESET_URL = "<your 3dtiles url>";
        map.addLayer({
            id: '3dtiles_layer',
            type: '3dtiles',
            url: TILESET_URL,
        });
    }

    //Load the 3D video fusion layer
    function addGeoVideo(){
        map.addLayer({
            id: "video_model",
            type: "geoVideo",
            cameraData: [
                {
                    "name": "1",
                    "videoUrl": "http://***:8080/live/01.flv",
                    "videoType": 2,
                    "position": [
                        -343403.1642159075,
                        -93954.63344333161,
                        0.8236917438540354
                    ],
                    "heading": 1.7680904348454325,
                    "pitch": 1.3350822883296964,
                    "roll": -0.0022735292382456977,
                    "fov": 0.8603263678604012,
                    "aspect": 1.777777777778,
                    "near": 1,
                    "far": 200,
                    "zThreshold": 0.005,
                    "width": 1920,
                    "height": 1080,
                    "factor": 1,
                    "units": 1,
                    "cameraModel": 12,
                    "k1": -6.669252017334967e-8,
                    "k2": 0,
                    "u0": 960,
                    "v0": 540,
                    "depthTest": true
                },
                {...},
            ],
            callback: function (layer) {
                GeoVideoLayer = layer;
                layer.setVideoCameraActiveByIndex(0, true);
                layer.setVideoCameraActiveByIndex(1, true);
            }
        });
    }

    // Crop video
    function clipVideo(){
        GeoVideoLayer.setCropRangeByIndex(0, [
            [ 0.022521987979167317, 0.01559753653082429 ],
            [ 0.654955211603292, 0.01444055780106279 ],
            [ 0.6235586919942271, 0.12420869068380237 ],
            [ 0.35695638324712053, 0.5030032876590158 ],
            [ 0.30556308795255466, 0.5779965292469577 ],
            [ 0.22980030824863937, 0.6695744504075888 ],
            [ 0.14204574611844084, 0.7757224100117857 ],
            [ 0.07890111701445593, 0.764305254303967 ] 
        ])
    }
</script>
</body>
</html>