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即可
js
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;
},
};GroupGLLayer里图层深度冲突
GroupGLLayer 里的图层会共享深度信息的，所以可能会出现Z-Fighting现象
针对这个问题一般解决方法有：
- TileLayer支持设置海拔,我们可以设置其海拔来避免这些
js
const tileLayer = new maptalks.TileLayer("base", {
altitude: -1,
spatialReference: {
projection: "EPSG:3857",
},
urlTemplate:
"https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
});- 图层一般都有
depthFunc配置选项,可以调整其值
js
const imageLayer = new maptalks.ImageLayer(
"image",
[
{
url: "./image_1.png",
extent,
},
],
{
// depthFunc: 'always'
},
);- 如果图层有透明度或者数据里有透明的尽可能的把图层往后放
注意
- VectorLayer不能放到GroupGLLayer里
- GroupGLLayer不能放到GroupGLLayer,避免套娃
- 一个地图一般只有一个 GroupGLLayer
- 图层和图形要使用
bloom效果,需要GroupGLLayer开启bloom后处理,仅仅开启图形和图层的bloom是不起 作用的,GroupGLLayer的bloom是个全局的效果,可以作用于每个图层和图形
js
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);