CustomLayerInterface

Интерфейс для пользовательских стилевых слоёв. Это спецификация для реализации: она не является экспортируемым методом или классом.

Пользовательские слои позволяют напрямую выполнять отрисовку в контексте GL карты с использованием камеры карты. Такие слои можно добавлять между любыми обычными слоями с помощью Map.addLayer.

Пользовательские слои должны иметь уникальный id и значение type должно быть равно "custom". Они должны реализовать render и могут реализовать prerender, onAdd и onRemove. Они могут инициировать отрисовку с помощью Map.triggerRepaint и должны надлежащим образом обрабатывать MapContextEvent с webglcontextlost и webglcontextrestored.

Свойство renderingMode определяет, будет ли слой считаться слоем карты "2d" или "3d". Используйте:

• "renderingMode": "3d" для использования буфера глубины и совместного использования его с другими слоями
• "renderingMode": "2d" для добавления слоя без глубины. Если для слоя "2d" необходимо использовать буфер глубины, следует использовать внеэкранный буфер кадров и CustomLayerInterface.prerender

Пример

Пользовательский слой, реализованный как класс ES6

class NullIslandLayer {
    constructor() {
        this.id = 'null-island';
        this.type = 'custom';
        this.renderingMode = '2d';
    }

     onAdd(map: maplibregl.Map, gl: WebGL2RenderingContext) {
        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() {
            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,
     modelViewProjectionMatrix: matrix
     }: {
     gl: WebGL2RenderingContext;
     modelViewProjectionMatrix: Float32Array;
     }) {
        gl.useProgram(this.program);
        gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

map.on('load', () => {
    map.addLayer(new NullIslandLayer());
});

Методы

onAdd()?

optional onAdd(map: Map, gl: WebGL2RenderingContext): void

Необязательный метод, вызываемый при добавлении слоя на карту с помощью Map.addLayer. Он позволяет слою инициализировать ресурсы GL и зарегистрировать обработчики событий.

Параметры

Возвращает

void

onRemove()?

optional onRemove(map: Map, gl: WebGL2RenderingContext): void

Необязательный метод, вызываемый при удалении слоя с карты с помощью Map.removeLayer. Он позволяет слою освободить ресурсы GL и удалить обработчики событий.

Параметры

Возвращает

void

Свойства

id

id: string

Уникальный идентификатор слоя.

prerender?

optional prerender?: CustomRenderMethod

Необязательный метод, вызываемый во время кадра отрисовки, чтобы слой мог подготовить ресурсы или выполнить отрисовку в текстуру.

Слой не должен делать предположений о текущем состоянии GL и перед отрисовкой должен привязать буфер кадров.

render

render: CustomRenderMethod

Вызывается во время кадра отрисовки и позволяет слою выполнять отрисовку в контексте GL.

Слой может считать, что состояние смешивания и глубины настроено так, чтобы слой мог корректно смешиваться с другими слоями и отсекать их. Слой не должен делать никаких других предположений о текущем состоянии GL.

Если слою требуется выполнить отрисовку в текстуру, для этого следует реализовать метод prerender, а метод render использовать только для отрисовки непосредственно в основной буфер кадров.

Функция смешивания установлена в gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA). Она предполагает, что цвета передаются в предварительно умноженном формате альфа-канала, в котором значения r, g и b уже умножены на значение a. Если невозможно передать цвета в предварительно умноженном формате, можно изменить функцию смешивания на gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA).

renderingMode?

optional renderingMode?: "2d" | "3d"

Либо "2d", либо "3d". По умолчанию — "2d".

type

type: "custom"

Тип слоя. Должен быть "custom".