版本：9.1.0
三维场景光设置

设置三维场景中的光源。
<!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%;
        }

        .btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #000000;
            font-weight: bold;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.0/mapmost-webgl-min.js"></script>
    <script src="../dist/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="map"></div>
    <div class="btn-group">
        <input type="radio" name="light" value="light1" /> 环境光<br />
        <input type="radio" name="light" value="light2" /> 平行光光源<br />
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map',
            style: "<your style url>",
            center: [120.71327100319621, 31.320781894055514],
            zoom: 19.68,
            pitch: 56.28,
            bearing: -72,
            userId: '***', // 授权码
            env3D: {
                defaultLights: false,
                exposure: 3.5,
                envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr'
            }
        });

        let selectId = 'light'
        let light1, light2

        map.on('load', function () {

            let models_obj = ["../example_data/TRAIN_4B.glb"].map(item => ({
                type: 'glb',
                url: item
            }));

            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj,
                project: "3857",
                center: [120.71326014407373, 31.3208050504757],
                callback: function (group, layer) {
                }
            };
            map.addLayer(options);

            $("input[name='light']").change(function () {
                let selectId_ = $(this).val()
                if (selectId_ !== selectId) {
                    if (map) {
                        if (selectId === 'light1') {
                            map.removeLight(light1)
                        } else {
                            map.removeLight(light2)
                        }


                        map.addLight(getLightOption(selectId_));
                    }
                    selectId = selectId_;
                }
            });
        })

        function getLightOption(type) {
            let option;
            switch (type) {
                case 'light1':
                    light1 = new mapmost.AmbientLight({
                        color: '#00ffff',
                        intensity: 2
                    });
                    return light1
                    break;
                case 'light2':
                    light2 = new mapmost.DirectionalLight({
                        color: '#00ff00',

                        intensity: 2,
                        position: [0, 0, 1]
                    });
                    return light2
                    break;
            }
            return option;
        }

    </script>
</body>

</html>