灯光

地图初始化有个灯光参数lights,在里面配置配置方向光,环境光,天空盒等

灯光是个全局设置，其将会作用于地图上的所有图形和图层等
exposure 灯光强度
颜色是归一化数组即[r/255,g/255,b/255],比如白色就是[255/255,255/255,255/255]

WARNING

地图上的不是所有的图形都会被灯光影响的,比如：

UI元素
canvas绘制的元素
普通材质的图形等

其一般配合插件maptalks-gl使用，因为其是官方的webgl插件库,里面包含了大量的 webgl生态体系,比如阴影，PBR等的处理都会从地图上读取lights的配置信息

var r = "./../assets/image/dawnmountain-";
const map = new maptalks.Map("map", {
    center: [116.45266161, 39.86656647],
    zoom: 17.8,
    bearing: -54,
    pitch: 70.8,
    //灯光配置
    lights: {
        //方相光
        directional: {
            direction: [1, 0, -1],
            color: [1, 1, 1],
        },
        //环境光
        ambient: {
            //配置天空盒的资源
            resource: {
                url: {
                    front: `${r}zpos.png`,
                    back: `${r}zneg.png`,
                    left: `${r}xpos.png`,
                    right: `${r}xneg.png`,
                    top: `${r}ypos.png`,
                    bottom: `${r}yneg.png`,
                },
                prefilterCubeSize: 256,
            },
            exposure: 0.8,
            hsv: [0, 0.34, 0],
            orientation: 1,
        },
    },
});

const groupLayer = new maptalks.GroupGLLayer("group", [], {
    sceneConfig: {
        environment: {
            enable: true,
            mode: 1,
            level: 0,
            brightness: 0,
        },
        shadow: {
            type: "esm",
            enable: true,
            quality: "high",
            opacity: 0.11,
            color: [0, 0, 0],
            blurOffset: 1,
        },
        postProcess: {
            enable: true,
            antialias: {
                enable: true,
                taa: true,
                jitterRatio: 0.25,
            },
            ssr: {
                enable: true,
            },
            bloom: {
                enable: true,
                threshold: 0,
                factor: 0.2,
                radius: 0.105,
            },
            ssao: {
                enable: true,
                bias: 0.08,
                radius: 0.08,
                intensity: 1.5,
            },
            sharpen: {
                enable: false,
                factor: 0.2,
            },
        },
        ground: {
            enable: false,
            renderPlugin: {
                type: "fill",
            },
            symbol: {
                polygonFill: [0.517647, 0.517647, 0.517647, 1],
            },
        },
    },
});
groupLayer.addTo(map);

更新灯光配置

function updateLight() {
    const lightManager = map.getLightManager();
    if (lightManager) {
        lightManager.setConfig({
            directional: {
                direction: [1, 0, -1],
                color: [1, 1, 1],
            },
            // ambient: {
            //     resource: {
            //         url: {
            //             front: `${r}posz.jpg`,
            //             back: `${r}negz.jpg`,
            //             left: `${r}negx.jpg`,
            //             right: `${r}posx.jpg`,
            //             top: `${r}posy.jpg`,
            //             bottom: `${r}negy.jpg`,
            //         },
            //         prefilterCubeSize: 256
            //     },
            //     exposure: 0.8,
            //     hsv: [0, 0.34, 0],
            //     orientation: 1
            // }
        });
    }
}

灯光 ​

更新灯光配置 ​

灯光

更新灯光配置