在 Mapbox GL JS 中将自定义着色器应用于 GeoJSON

问：

我想使用着色器将自定义样式应用于 Mapbox GL 中的 GeoJSON 图层。

我看到了有关使用着色器自定义样式的文档，并成功复制了提供的简单示例。

我还设法将 geojson 坐标作为参数传递，而不是像示例中那样将 harcoded 点传递。但是，我只得到一个在地图上呈现的三角形，而不是 GeoJSON 的形式。因为在渲染函数中。gl.TRIANGLE_STRIP

我不熟悉 WebGL。我确实从 WebGL 基础知识中查看了这一课，以尝试了解更多。

如何调整渲染函数以获得具有着色器样式的实际 GeoJSON 形状？下面是我用来根据 GeoJSON 中的坐标数组创建图层的常规函数。

function getShaderLayer(coordinatesArray){
    const highlightLayer = {
        id: 'highlight',
        type: 'custom',
         
        // method called when the layer is added to the map
        // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
        onAdd: function (map, gl) {
            // create GLSL source for vertex shader
            const vertexSource = `
            uniform mat4 u_matrix;
            attribute vec2 a_pos;
            void main() {
                gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
            }`;
            
            // create GLSL source for fragment shader
            const fragmentSource = `
            void main() {
                gl_FragColor = vec4(0.5, 0.0, 1.0, 0.5); 
            }`; // tem que se chamar gl_FragColor obrigatoriamente
            
            // create a vertex shader
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexSource);
            gl.compileShader(vertexShader);
            
            // create a fragment shader
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentSource);
            gl.compileShader(fragmentShader);
            
            // link the two shaders into a WebGL 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');

            let pointsArray = [];
            for (let i=0; i < coordinatesArray.length; i++){
                let point = mapboxgl.MercatorCoordinate.fromLngLat({
                    lng: coordinatesArray[i][0],
                    lat: coordinatesArray[i][1]
                });
                pointsArray.push(point.x);
                pointsArray.push(point.y);
            }
            const pointsArray32 = new Float32Array(pointsArray)
            console.log(pointsArray32)
            
            // create and initialize a WebGLBuffer to store vertex and color data
            this.buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.bufferData(
                gl.ARRAY_BUFFER,
                pointsArray32,
                gl.STATIC_DRAW
            );
        },
         
        // method fired on each animation frame
        // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
        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); // esses negocios em maiuscula sao da webgl api (nao do mapbox)
        }
    };
    return highlightLayer;
}