如何在Mapbox地图右上角显示常驻文本（WebGL层内，非HTML元素）

要在WebGL地图内部而非HTML叠加层固定显示顶部文本，核心是脱离地理坐标绑定，改用屏幕空间坐标渲染——不管地图如何平移缩放，文本始终锁定在屏幕顶部位置。以下是具体实现思路和步骤：

核心原理 #

普通地图标签依赖地理坐标转屏幕坐标的映射，而固定文本需要直接基于屏幕像素位置计算WebGL裁剪空间坐标，跳过地图的视图/投影矩阵关联，确保渲染位置不受地图视角变化影响。

具体实现步骤 #

1. 构建屏幕空间渲染管线 #

WebGL的裁剪空间范围是[-1, 1]（x轴从左到右，y轴从下到上），需要将你想要的屏幕顶部位置（比如距离顶部20px、水平居中）转换成裁剪坐标：

• 假设屏幕宽高为window.innerWidth和window.innerHeight
• 屏幕坐标(x, y)转裁剪坐标公式：

  const clipX = (x / window.innerWidth) * 2 - 1;
  // WebGL裁剪空间y轴向上，屏幕y轴向下，需反转
  const clipY = 1 - (y / window.innerHeight) * 2;
  

  这个坐标就是文本渲染的固定位置，不需要随地图的视图矩阵更新。

2. 文本渲染的两种实用方式 #

方式一：Canvas纹理+平面几何体

适合快速实现，兼容性好：

• 用Canvas绘制文本，将Canvas作为纹理传入WebGL
• 创建平面几何体，将其位置设置为计算好的裁剪空间坐标，或使用正交相机直接映射屏幕空间
• 确保平面的渲染顺序在地图所有元素之后，或关闭深度测试让文本始终在最上层

示例代码（基于Three.js，多数WebGL地图框架基于此）：

// 1. 创建Canvas文本纹理
const textCanvas = document.createElement('canvas');
const ctx = textCanvas.getContext('2d');
textCanvas.width = 400;
textCanvas.height = 60;
ctx.font = '24px Arial';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.fillText('固定顶部文本', textCanvas.width / 2, 35);

const textTexture = new THREE.CanvasTexture(textCanvas);

// 2. 创建平面并设置固定位置
const textPlane = new THREE.Mesh(
  new THREE.PlaneGeometry(0.4, 0.06), // 裁剪空间尺寸，对应屏幕400x60px
  new THREE.MeshBasicMaterial({ map: textTexture, transparent: true })
);
// 固定在屏幕顶部居中
textPlane.position.set(0, 0.94, 0); // y轴0.94对应距离顶部约20px（需根据屏幕高度调整）

// 3. 添加到场景，确保渲染顺序在地图之后
scene.add(textPlane);
textPlane.renderOrder = 100; // 让它最后渲染，避免被遮挡

方式二：SDF字体+Shader渲染

适合高性能、可缩放的文本渲染：

• 将字体转换为有向距离场（SDF）纹理
• 编写片元着色器，直接在屏幕空间指定位置渲染文本，通过SDF纹理实现清晰的缩放效果
• 顶点着色器直接输出固定的裁剪空间坐标，完全脱离地图的视图矩阵

3. 适配与细节处理 #

• 屏幕分辨率变化时，重新计算裁剪坐标或调整几何体尺寸，避免文本变形或位置偏移
• 关闭文本平面的深度测试（material.depthTest = false）或设置depthWrite = false，防止被地图地形/瓦片遮挡
• 若地图使用了WebGL离屏渲染（如帧缓冲），确保文本渲染到最终的帧缓冲中

内容的提问来源于stack exchange，提问作者Keith Carter