---
title: CustomLayerInterface
source: https://vjmap.com/doc/CustomLayerInterface.html
---

# CustomLayerInterface

自定义样式层的界面。这是实现者建模的规范：它不是导出的方法或类。

自定义图层允许用户使用地图的相机直接渲染到地图的上下文中。可以使用`Map#addLayer`在任何常规图层之间添加这些图层。

自定义层必须具有唯一`id`和必须具备的`type`的`"custom"`。他们必须实施`render`并且可以实施`prerender`,`onAdd`和`onRemove`。他们可以使用`Map#triggerRepaint`触发渲染， 并且他们应该适当地处理`Map.event:webglcontextlost`和 `Map.event:webglcontextrestored`。

该`renderingMode`属性控制是将图层视为地图图层`"2d"`还是`"3d"`地图图层。用：

- `"renderingMode": "3d"` 使用深度缓冲区并与其他层共享
- `"renderingMode": "2d"`添加一个没有深度的图层。如果您需要为`"2d"`图层使用深度缓冲区，则必须使用屏幕外帧缓冲区和`CustomLayerInterface#prerender`

### Properties
- `id` **`string`** 唯一的图层 ID。
- `type` **`string`**图层的类型。必须是`"custom"`。
- `renderingMode` **`string`**无论是`"2d"`或`"3d"`。默认为`"2d"`.

### Examples
```
// Custom layer implemented as ES6 class
class NullIslandLayer {
    constructor() {
        this.id = 'null-island';
        this.type = 'custom';
        this.renderingMode = '2d';
    }

    onAdd(map, gl) {
        const vertexSource = `
        uniform mat4 u_matrix;
        void main() {
            gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
            gl_PointSize = 20.0;
        }`;

        const fragmentSource = `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }`;

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentSource);
        gl.compileShader(fragmentShader);

        this.program = gl.createProgram();
        gl.attachShader(this.program, vertexShader);
        gl.attachShader(this.program, fragmentShader);
        gl.linkProgram(this.program);
    }

    render(gl, matrix) {
        gl.useProgram(this.program);
        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

map.on('load', function() {
    map.addLayer(new NullIslandLayer());
});
```

### onAdd
使用`Map#addLayer`将图层添加到地图时调用的可选方法。这使该层有机会初始化 gl 资源并注册事件侦听器。

#### Parameters
- `map` **`地图`**此自定义图层刚刚添加到的地图。
- `gl` **`WebGL 渲染上下文 `** 地图的 gl 上下文。

### onRemove
使用`Map#removeLayer`从地图中删除图层时调用的可选方法。这使该层有机会清理 gl 资源和事件侦听器。

#### Parameters
- `map` **`地图`**此自定义图层刚刚添加到的地图。
- `gl` **`WebGL 渲染上下文 `** 地图的 gl 上下文。

### prerender
在渲染帧期间调用的可选方法，以允许图层准备资源或渲染到纹理中。

该层不能对当前状态做出任何假设，并且必须在渲染之前绑定一个帧缓冲区。

#### Parameters
- `gl` **`WebGL 渲染上下文 `** 地图的 gl 上下文。
- `matrix` **`Array`< `number`\>**地图的相机矩阵。它将球形墨卡托坐标投影到 gl 坐标。墨卡托坐标``0, 0]`代表墨卡托世界的左上角，`[1, 1]`代表右下角。当`renderingMode`是 时`"3d"`，z 坐标是共形的。具有相同 x、y 和 z 长度（以墨卡托为单位）的盒子将被渲染为立方体。[MercatorCoordinate` .fromLngLat 可用于将 a 投影`LngLat`到墨卡托坐标。

### render
在渲染帧期间调用，允许图层绘制到 GL 上下文中。

图层可以假设混合和深度状态设置为允许图层正确混合和剪辑其他图层。该层不能对当前 GL 状态做出任何其他假设。

如果图层需要渲染到纹理，它应该实现`prerender`这样做的方法，并且只使用`render`直接绘制到主帧缓冲区的方法。

混合函数设置为`gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`。这期望以预乘 alpha 形式提供颜色，其中`r`,`g`和`b`值已经乘以该`a`值。如果您无法以预乘形式提供颜色，您可能需要将混合函数更改为 `gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`.

#### Parameters
- `gl` **`WebGL 渲染上下文 `** 地图的 gl 上下文。
- `matrix` **`Array`< `number`\>**地图的相机矩阵。它将球形墨卡托坐标投影到 gl 坐标。球面墨卡托坐标``0, 0]`代表墨卡托世界的左上角，`[1, 1]`代表右下角。当`renderingMode`是 时`"3d"`，z 坐标是共形的。具有相同 x、y 和 z 长度（以墨卡托为单位）的盒子将被渲染为立方体。[MercatorCoordinate` .fromLngLat 可用于将 a 投影`LngLat`到墨卡托坐标。