OpenLayers React项目自定义WebGLTileLayer渲染红色瓦片无显示问题

你的核心问题在于自定义GLSL着色器未适配OpenLayers的瓦片渲染管线，尤其是顶点着色器缺少必要的坐标变换逻辑，导致瓦片无法正确映射到画布可视区域。以下是具体修复步骤：

1. 移除冗余的空继承Renderer类 #

你自定义的CustomWebGLTileLayerRenderer未添加任何额外逻辑，完全可以直接使用父类，无需额外继承。

2. 修正顶点着色器，补充坐标变换逻辑 #

OpenLayers的瓦片顶点坐标需要经过投影矩阵和偏移矩阵的变换，才能从瓦片本地坐标转换到WebGL裁剪空间。你的顶点着色器直接使用原始位置，导致瓦片位置错误。修改后的顶点着色器需包含必要的uniform变量和变换计算：

precision mediump float;
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetMatrix;
varying vec2 v_texCoord;

void main(void) {
  gl_Position = u_projectionMatrix * u_offsetMatrix * vec4(a_position, 0.0, 1.0);
  v_texCoord = a_texCoord;
}

3. 删除手动指定的attributes配置 #

OpenLayers内部会自动管理attribute的位置绑定，手动指定attributes会干扰内部逻辑，导致顶点数据无法正确传递给着色器。

4. 完整修复后的代码 #

import { WebGLTile } from 'ol/layer';
import WebGLTileLayerRenderer from 'ol/renderer/webgl/TileLayer';

export class CustomWebGLTile extends WebGLTile {
  constructor(options) {
    super(options);
    this.options = options;
  }

  protected createRenderer(): WebGLTileLayerRenderer {
    return new WebGLTileLayerRenderer(this, {
      ...this.options,
      vertexShader: `
        precision mediump float;
        attribute vec2 a_position;
        attribute vec2 a_texCoord;
        uniform mat4 u_projectionMatrix;
        uniform mat4 u_offsetMatrix;
        varying vec2 v_texCoord;

        void main(void) {
          gl_Position = u_projectionMatrix * u_offsetMatrix * vec4(a_position, 0.0, 1.0);
          v_texCoord = a_texCoord;
        }
      `,
      fragmentShader: `
        precision mediump float;
        uniform sampler2D u_texture;
        varying vec2 v_texCoord;

        void main(void) {
          // 直接输出红色，忽略原瓦片纹理
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `
    });
  }
}

额外说明 #

• 后续实现栅格平滑、海洋特效时，只需在fragmentShader中修改逻辑即可，比如通过v_texCoord采样原瓦片纹理后进行处理。
• 确保图层配置中正确设置了source（如XYZ或TileWMS），无有效source也会导致无内容显示。

内容的提问来源于stack exchange，提问作者Chris Jarzynka