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, maintaining58+fpsSmooth rendering.

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/lite/v9.1.0/mapmost-lite-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,This parameter must be added
    });

    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 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,
            exposure: 1.0,
            center: [120.744471002000068, 31.306768408000039, 3.617],
            project: "3857",
            callback: function (group, layer) {
                Layer = layer;
                layer.addModelMercator(models_obj_seat, [120.7462978, 31.3067283, -4.4], function (group0) {
                    Group = group0;
                });
            }
        };
        map.addLayer(options);

        map.on('click', function (e) {
            let intersect = Layer.selectModel(e.point)[0];
            let options_unhighlight = {
                name: 'Seat',//modelnameAttributes contain values ​​that identify the model
                object: Group,//The range of the model level where the highlight effect is removed 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',//modelnameAttributes contain values ​​that identify the model
                faceCount: 4,//Number of triangles per model,default2
                color: "#f20f14",//Model highlight color, default"rgb(231,201,122)"
            }
            Layer.unhighlightMergeBatchModel(options_unhighlight);
            let num = Layer.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;
        })
    })

    //Complete 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>