天空盒

Markdown 官方教程

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

left
right
top
bottom
back
front

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

天空盒的功能在 maptalks-gl webgl包里,你需要

npm i maptalks-gl

或者

html

<script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/maptalks-gl/dist/maptalks-gl.min.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文档

WARNING

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

异步加载天空盒

maptalks-gl version>=0.115.0开始，天空盒添加了异步计算和跨域的支持 asynchronous ,开启异步计算后天空盒的复杂逻辑将交给worker,不会阻塞地图的初始化了

skybox asynchronous demo

const map = new maptalks.Map("map", {
    center: [116.45266161, 39.86656647],
    zoom: 17.8,
    bearing: -54,
    pitch: 80.8,
    lights: {
        directional: {
            direction: [1, 0, -1],
            color: [1, 1, 1],
        },
        ambient: {
            resource: {
                url: {
                    front: `${r}zpos.png`,
                    back: `${r}zneg.png`,
                    left: `${r}xneg.png`,
                    right: `${r}xpos.png`,
                    top: `${r}ypos.png`,
                    bottom: `${r}yneg.png`,
                },
                prefilterCubeSize: 512,
                asynchronous: true,
                crossOrigin: "",
            },
            exposure: 0.8,
            hsv: [0, 0.34, 0],
            orientation: 1,
        },
    },
});

GroupGLLayer

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

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

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

理由：

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

天空盒 ​

天空盒示例 ​

异步加载天空盒 ​

GroupGLLayer ​

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

天空盒

天空盒示例

异步加载天空盒

GroupGLLayer

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