自定义图层

如果内置的图层不满足要求，可以自定义图层，详见示例。

自定义图层需要创建自定义的图层类，如下例所示：

        let customLayer = {
    id: 'highlight',
    type: 'custom',
    onAdd: function (map, gl) {
        // 顶点着色器代码
        var vertexSource =
            '' +
            'uniform mat4 u_matrix;' +
            'attribute vec2 a_pos;' +
            'void main() {' +
            '    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);' +
            '}';

        // 片元着色器代码
        var fragmentSource =
            '' +
            'void main() {' +
            '    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);' +
            '}';

        // 创建顶点着色器对象
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexSource);
        gl.compileShader(vertexShader);

        // 创建片元着色器对象
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentSource);
        gl.compileShader(fragmentShader);

        // 创建Program对象
        this.program = gl.createProgram();
        gl.attachShader(this.program, vertexShader);
        gl.attachShader(this.program, fragmentShader);
        gl.linkProgram(this.program);

        this.aPos = gl.getAttribLocation(this.program, 'a_pos');

        // 定义顶点数据
        var p1 = wmapgl.MercatorCoordinate.fromLngLat({
            lng: 116.125488,
            lat: 40.040232
        });
        var p2 = wmapgl.MercatorCoordinate.fromLngLat({
            lng: 116.625366,
            lat: 39.943436
        });
        var p3 = wmapgl.MercatorCoordinate.fromLngLat({
            lng: 116.328735,
            lat: 39.816975
        });

        // 缓冲顶点缓冲区
        this.buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
        gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([
                p1.x,
                p1.y,
                p2.x,
                p2.y,
                p3.x,
                p3.y
            ]),
            gl.STATIC_DRAW
        );
    },

    render: function (gl, matrix) {
        gl.useProgram(this.program);
        gl.uniformMatrix4fv(
            gl.getUniformLocation(this.program, 'u_matrix'),
            false,
            matrix
        );
        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
        gl.enableVertexAttribArray(this.aPos);
        gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
    }
};
map.addLayer(customLayer);

自定义图层的需要实现如下三个方法：

1、constructor 方法

constructor()，表示自定义图层的构造方法，需声明以下变量：id:自定义图层唯一标识，type:自定义图层类型，值为"custom"，renderingMode:渲染模式，值域为[“2d”,“3d”],默认值为"2d"；

2、onAdd 方法

onAdd(map, gl)，表示自定义图层图层添加方法，参数为：map:地图实例，gl:WebGL 句柄；函数内部需要实现以下内容：定义着色器，配置 program、坐标、矩阵等；

3、render 方法

render(gl, matrix)，表示自定义图层渲染方法，参数为：gl:WebGL 句柄，matrix:变量矩阵；函数内部需要实现以下内容：绑定缓冲区，绘制自定义图层；