跳到主要内容
版本：9.0.0

批量模型高亮选择

基于鼠标点击模型拾取结果实现对自动化批量构建的三维模型的高效拾取、高亮显示和属性查询。模型需要基于预置件建模方式大批量自动化构建，具体建模过程请咨询研究院。以奥体座椅模型为例，支持千万级座椅加载，保持58+fps流畅渲染。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>批量模型高亮选择</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.0.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: '***', // 授权码
        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', // 模型的 name 属性包含值，用于识别模型
                object: modelGroup, // 移除高亮效果的模型层级所在范围，可用于快速定位所在的层级，未设置则在全场景中查找
            }
            let options = {
                intersect: intersect, // 拾取模型信息
                name: 'Seat', // 模型的 name 属性包含值，用于识别模型
                faceCount: 4, // 每个模型三角面数量,默认 2
                color: "#f20f14", // 模型高亮的颜色，默认 "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 = "座椅编号：" + str;
        })
    })

    // 补齐编号位数
    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>