图层 ​

图层的作用在于分类和管理，是个虚拟的东西，其价值在于对于图形要素或者数据的管理，你可以把它理解成文件夹主要用来管理和分类

在maptalks体系里所有的图层的都是基于图层顶级父类的Layer的,所以其有哪些方法和事件一定要熟知，因为其是所有图层的父类,即所有的图层都会拥有其的方法和事件

maptalks里图层的继承关系 ​

注意：

• Layer
• OverlayLayer
• CanvasLayer

这三个图层的作用在于顶层的抽象和设计,其目的是方便扩展图层和插件开发,不要直接使用他们,使用他们的子类即可, 除非现有的图层不能满足你的需求需要扩展图层是才会用到他们

Layer ​

• 常用的方法有:

• 常用的事件有：

layer.on("show hide setopacity", () => {});

• 常见的配置属性有：

layer.config({ minZoom: 10, maxZoom: 20 });

Layer的子类们 ​

vectorLayer.setZIndex(100);

图层分类 ​

根据这些图层的作用和管理能力，我们将他们分成几大类：

• 瓦片管理类

• 图形数据管理类

• 插件开发的基类

• 图层集合的管理和融合类

这些图层中有个两个图层需要强调下:

• GroupGLLayer 这个图层比较特殊,其是个webgl上下文融合器，其主要用来管理webgl图层，让加入进来的图层共享webgl深度信息，GroupGLLayer的配置属性还是挺复杂的，需要你认真的查询其文档，里面包含了大量的webgl配置信息

const groupgl = new GroupGLLayer("layer", [], {});
groupgl.addLayer();
groupgl.removeLayer();

• ThreeLayer图层主要是利用threejs来扩展maptalks的webgl一些能力，一般都是maptalks官方图层里没有提供的一些图形信息，比如这样的图形：

maptalks官方是不自带这些奇奇怪怪的图形要素的，但是业务里我们可能会用到，这时用ThreeLayer来搞就再适合不过了

调节图层的叠加顺序 ​

图层是存在zIndex的概念(类css里的zindex)，如果需要调整图层的叠加顺序，可用的方法有：

• setZIndex(zIndex)
• bringToFront()
• bringToBack()

如果用HTML来描述这个关系如下：

<Map>
   <Layer><Layer>
   <Layer><Layer>
    <!-- GroupGLLayer 里面的子图层zindex的改变只会改变其在GroupGLLayer里的绘制顺序 -->
    <GroupGLLayer>
        <Layer><Layer>
        <Layer><Layer>
        <Layer><Layer>
        <Layer><Layer>
    </GroupGLLayer>

</Map>

常见问题 ​

VectorLayer 加入GroupGLLayer里报错 ​

VectorLayer 底层是canvas渲染的，GroupGLLayer里只能放webgl图层，VectorLayer一般用于简单的二维系统， 不是所有的系统都是三维的，VectorLayer是有其应用场景的，如果你的业务是强三维的，你应该慎用 VectorLayer

VectorLayer渲染时重绘很明显 ​

VectorLayer因为是canvas渲染的，因为canvas性能瓶颈的关系的，maptalks里会对VectorLayer绘制 进行一定的调度，当VectorLayer绘制时如果严重影响地图的整体渲染效率会对VectorLayer进行一定的控制 和限制让其不再试每帧都绘制，否则会导致地图整体性能和体验严重下降

如果你想每帧都绘制你可以:

var layer = new maptalks.VectorLayer("layer", {
    forceRenderOnMoving: true,
    forceRenderOnZooming: true,
    forceRenderOnRotating: true,
    // debug:true
}).addTo(map);

VectorLayer 数据量大了卡 ​

VectorLayer因为是canvas渲染的，因为canvas性能瓶颈比较低所以数据量大了就会卡了，如果在效果和体验允许 的情况下你可以开启VectorLayer渐进渲染

const layer = new maptalks.VectorLayer("layer", {
    forceRenderOnMoving: true,
    forceRenderOnZooming: true,
    forceRenderOnRotating: true,
    progressiveRender: true,
    progressiveRenderCount: 1000,
    progressiveRenderDebug: false,
}).addTo(map);

这样可以保证每帧数据量在合适的量，不会导致地图交互时非常卡和严重掉帧

下面是一个简单的渐进渲染的例子，因为线的数据量比较大故开启线所在图层渐进渲染