天空盒

Markdown 官方教程

下面的例子里的详细的展示了天空盒立方体的六个面

left
right
top
bottom
back
front

如果你不懂WebGL的知识，你可以参考这个效果图来配置每个面的对应的图片,这里已经把每个面的方位和对应的图片都贴出来了, 方便参考

天空盒的功能在 @maptalks/gl-layers webgl插件包里,你需要

npm i @maptalks/gl-layers

或者

html

<script
  type="text/javascript"
  src="https://maptalks.com/api/maptalks-gl-layers.js"
></script>

天空盒示例

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 baseLayer = new maptalks.TileLayer("base", {
  urlTemplate:
    "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
  subdomains: ["a", "b", "c", "d"],

  spatialReference: {
    projection: "EPSG:3857",
  },
});

const groupLayer = new maptalks.GroupGLLayer("group", [baseLayer], {
  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);

从这个例子里我们看到有几个重要的点：

map options里配置了 lights参数了
出现了个新的图层GroupGLLayer,GroupGLLayer是webgl插件包里提供的一个管理图层webgl上下文融合管理的类
关于这些配置参数的信息请参考 @maptalks/gl-layers文档

WARNING

注意prefilterCubeSize参数不可太大，否则会导致天空盒初始化时卡顿,页面长时间白屏中

GroupGLLayer

GroupGLLayer是webgl插件包里提供的一个管理图层webgl上下文融合管理的图层，需要注意的是：

一个地图上一般只有一个GroupGLLayer实例
添加到GroupGLLayer里的图层将共享一个webgl上下文
只有webgl图层才能放到GroupGLLayer里，不支持webgl渲染的图层放进去会报错的

不推荐用theejs插件去搞天空盒

理由：

@maptalks/gl-layers 插件包里已经自带天空盒的功能，且是基于地图实现的，是个全局的功能
three插件只是个图层，一个地图上可能有多个图层的
基于我们开篇的介绍：全局性的功能得有地图实现，而不是某一个图层来实现

天空盒 ​

天空盒示例 ​

GroupGLLayer ​

不推荐用theejs插件去搞天空盒 ​

天空盒

天空盒示例

GroupGLLayer

不推荐用theejs插件去搞天空盒