灯光

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

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

WARNING

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

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

其一般配合插件@maptalks/gl-layers使用，因为该插件是官方的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);

灯光 ​

灯光