GroupGLLayer ​

GroupGLLayer 是用来管理webgl图层的，可以将webgl图层加入它，然后让所有的webgl图层共享一个webgl上下文，以此来维持图层之间的深度关系.

其主要方法有:

• addLayer()
• removeLayer()
• getLayer()
• getLayers()

方面用户动态的操作图层.

GroupGLLayer的配置项还是挺复杂的，包含了大量的webgl方便的专业知识：

• 阴影
• 天空盒
• 抗锯齿处理
• bloom
• SSAO
• ...

需要你去认真阅读其文档GroupGLLayer文档

支持的子图层 ​

• VectorTileLayer
• GeoJSONVectorTileLayer
• TileLayer
• GroupTileLayer
• WMSTileLayer
• Geo3DTileLayer
• ImageLayer
• PointLayer
• LineStringLayer
• PolygonLayer
• GLTFLayer
• ExtrudePolygonLayer
• ThreeLayer

他们的顶级父类为Layer

调整GroupGLLayer里图层的顺序 ​

Layer有个方法叫 setZIndex(zIndex)用来设置自身的zindex值，就是css里的zindex含义, 所以如果需要调整调整GroupGLLayer里子图层的zindex值设置每个子图层的zindex即可

var params = {
    sorted: false,
    sortLayer: () => {
        if (params.sorted) {
            layer1.setZIndex(-1);
            layer2.setZIndex(1);
        } else {
            layer1.setZIndex(1);
            layer2.setZIndex(-1);
        }
        params.sorted = !params.sorted;
    },
};

注意 ​

• VectorLayer不能放到GroupGLLayer里
• GroupGLLayer不能放到GroupGLLayer,避免套娃
• 一个地图一般只有一个 GroupGLLayer
• 图层和图形要使用bloom效果,需要GroupGLLayer开启bloom后处理,仅仅开启图形和图层的bloom是不起 作用的,GroupGLLayer的bloom是个全局的效果,可以作用于每个图层和图形

const sceneConfig = {
    postProcess: {
        enable: true,
        antialias: { enable: true },
        bloom: {
            enable: true,
            threshold: 0,
            factor: 1,
            radius: 0.02,
        },
    },
};
const groupLayer = new maptalks.GroupGLLayer("group", [], {
    sceneConfig,
});
groupLayer.addTo(map);