mapbox 自定义图层方式

CustomLayerInterface

自定义图层必须有一个唯一的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): 一个唯一的图层标识。

type(string): 图层的类型。 必须是 "custom" 。

renderingMode(string): 要么是 "2d" 要么是 "3d" 。 默认值为 "2d" 。

demo

// 用ES6类的形式实现的自定义图层
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());
});