Skip to main content

Batch model highlight selection

Based on the mouse click model picking results, efficient picking, highlighting and attribute query of 3D models built in automated batches are realized. The model needs to be built automatically in large batches based on the prefabricated component modeling method. Please consult the research institute for the specific modeling process. Taking the Olympic seat model as an example, it supports tens of millions of seat loads and maintains smooth rendering at 58+fps.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Batch model highlight selection</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%;
        }

        #info {
            color: #000000;
            position: absolute;
            top: 40px;
            left: 20px;
            font-size: 30px;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<div id="info"></div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.7460708, 31.3059953],
        zoom: 20,
        pitch: 0,
        userId: '***', // Authorization code
        env3D: {
            exposure: 1,
            envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr'
        }
    });

    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 models_obj_seat = ["./Seat_A.glb", "./Seat_B.glb", "./Seat_C.glb", "./Seat_D.glb"].map(item => ({
            type: 'glb',
            url: './Seat/' + item
        }));

        let options = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            center: [120.744471002000068, 31.306768408000039, 3.617],
            project: "3857",
            callback: function (group, layer) {
                modelLayer = layer;
                layer.addModelMercator(models_obj_seat, [120.7462978, 31.3067283, -4.4], function (group0) {
                    modelGroup = group0;
                });
            }
        };
        map.addLayer(options);

        map.on('click', function (e) {
            let intersect = modelLayer.selectModel(e.point)[0];
            let options_unhighlight = {
                name: 'Seat', // The name attribute of the model contains a value used to identify the model
                object: modelGroup, // Remove the range of the model level that highlights the effect. It can be used to quickly locate the level. If not set, it will be searched in the entire scene.
            }
            let options = {
                intersect: intersect, // Pick up model information
                name: 'Seat', // The name attribute of the model contains a value used to identify the model
                faceCount: 4, //The number of triangles in each model, default 2
                color: "#f20f14", // Model highlight color, default "rgb(231,201,122)"
            }
            modelLayer.unhighlightMergeBatchModel(options_unhighlight);
            let num = modelLayer.highlightMergeBatchModel(options);
            let str = intersect.object.name.indexOf("Seat") > -1 ? intersect.object.name.split('_')[1] + getNum(num, 5) : getNum(num, 5)
            document.getElementById('info').innerText = "Seat number:" + str;
        })
    })

    //Complement the number digits
    function getNum(value, num) {
        if (value !== undefined) {
            let data = value.toString();
            if (data.length < num) {
                data = (Array(num).join(0) + data).slice(-num);
            }
            return data;
        }
    }

</script>
</body>
</html>