Cesium影像扭曲、拉伸与空白控制：从UV坐标到材质实战

在三维GIS开发里摸爬滚打这几年，我越来越觉得Cesium就是个“数据黑洞”——官方文档写得明明白白的功能大家都会用，但真正让项目产生价值、让甲方眼前一亮的，往往是那些文档里一笔带过、需要自己硬啃的自定义能力。

今天就专门聊聊Cesium中影像的自定义处理，聚焦三个高频又头痛的需求：影像扭曲、影像拉伸、影像空白。这三个需求分别对应着不同的应用场景：比如在古城复原项目里要把老地图“贴”到不规则的遗址范围内，比如在城市规划展示中要把某栋楼的贴图纹理单独拉伸对齐，又比如在敏感区域需要把特定范围的影像“抹掉”。这些问题如果没找对路子，轻则效果不对，重则整个场景渲染崩溃。

这篇文章不会堆代码，重点讲清楚思路、步骤、参数原理和我在实战中踩过的坑，确保你读完不光能照着做，还能明白为什么这么做。

1. 先把“自定义影像”这件事想清楚

很多刚接触Cesium的开发者，一看到“自定义影像”这几个字，第一反应就是ImageryProvider——毕竟UrlTemplateImageryProvider、WebMapTileServiceImageryProvider这些类名摆在那里，看起来就是干这个的。但我要泼一盆冷水：你要的扭曲、拉伸、空白，在ImageryProvider这个层级解决不了，或者说解决起来非常别扭。

原因在于ImageryProvider的本质是“按瓦片请求图片”。它只负责回答“你给我这个层级、这个行列号，我返回一张图片”，至于这张图片怎么变形、怎么裁剪、哪里留空，它既不关心也控制不了。当你试图用ImageryProvider做区域扭曲时，最常见的结果是：要么你用Canvas强行绘制，性能拉胯；要么你只能做规则的矩形拉伸，根本做不了多边形范围的自由扭曲。

真正适合做“自定义影像扭曲、拉伸、空白”的入口，其实是几何体（Entity/Primitive）上的材质（Material）体系，或者更底层一点，直接操作纹理坐标（UV）。换句话说，你要处理的不再是“影像图层”，而是“贴图材质”。

我个人的习惯是把这个需求分成两条线：

• 动态交互型（用户拖拽控制点、实时扭曲）：用Geometry+Material方案，更新几何体或材质参数。
• 静态展示型（固定区域的扭曲/拉伸/空白，一次性做好）：用Entity+ImageMaterialProperty，配合自定义的纹理坐标逻辑。

两条线的底层原理是相通的，核心就三件事：几何体怎么建、纹理坐标怎么算、Shader怎么改。

1.1 核心需求拆解：扭曲、拉伸、空白分别是什么

这三个词看着简单，但不同人口中说的意思可能完全不同。我先把常见语义梳理一遍：

• 影像扭曲：把一张矩形的影像，映射到不规则多边形区域内部，让影像随多边形边界发生形变。典型场景：历史地图叠加到现代建筑遗址上。建筑轮廓是不规则的，影像必须“顺着”轮廓走，边界不能超出也不能露缝。
• 影像拉伸：把影像在指定方向上拉长、压扁或对齐到特定范围。典型场景：立面贴图。建筑立面照片是矩形的，但在三维模型上，立面可能因为透视角度、建模精度等原因对不上，需要微调拉伸比例。更进阶一点，还包括局部拉伸（比如只拉伸上半部分）。
• 影像空白：在指定范围内不显示影像，或者把影像中某个区域“扣掉”显示出底图/透明。典型场景：数据脱敏、区域隐藏、影像拼接时去除重叠区域的冗余内容。

这三个需求看起来相互独立，但实现手段上往往是组合使用的。扭曲本身就包含拉伸的逻辑（局部拉伸就是扭曲的一种特例），而空白又经常和扭曲叠加（扭曲后把边界外的部分裁掉）。

1.2 为什么不用现成的ImageryProvider硬怼

说句实在话，我在早期也尝试过用ImageryProvider硬怼，做法是：监听相机变化，然后动态计算瓦片范围，再用Canvas绘制变形图像。这套方案的致命伤在于：

• 性能极差。每次相机一变化就要重绘，如果画布分辨率稍微高一点，帧率直接掉到个位数。
• 瓦片边缘撕裂。因为每张瓦片独立变形，相邻瓦片的边界拼接处会有明显的接缝，处理起来相当费劲。
• 空白实现困难。ImageryProvider的瓦片请求模型决定了它很难在某些区域“不请求”或“返回透明”，你只能返回一张全透明的图片，但瓦片还是被加载了，内存和带宽都浪费了。

后来我彻底放弃了这条路，转投几何体+材质的方案。效果立竿见影。

2. 从原理入手：UV坐标才是扭曲和拉伸的灵魂

如果你想实现真正的影像自定义变形，绕不开UV坐标这个东西。我尽量用大白话讲清楚。

一个平面的几何体，比如一个简单的矩形RectangleGeometry，它上面每个顶点都带有一组纹理坐标（UV坐标）。U和V的取值范围一般是0到1，分别对应纹理图片的横向和纵向。当你把一张影像贴到这个几何体上时，影像会按顶点的UV坐标铺满整个几何体表面。

扭曲和拉伸的本质，就是改变顶点上的UV坐标。

• 均匀缩放：把所有顶点的U和V同时乘以一个系数，影像就被整体拉伸了。
• 非均匀缩放：只拉伸U或只拉伸V，影像会被拉宽或拉高。
• 局部扭曲：让不同位置的顶点拥有不同的UV偏移，影像就会呈现出扭曲效果。

在RectangleGeometry里，虽然你不能直接手动指定每个顶点的UV，但你可以通过控制矩形范围间接控制UV的分布。举个例子，如果你创建了一个只覆盖半个矩形范围的几何体，然后把影像贴上去，影像会自动把纹理“压”进这个更小的范围，看起来就是拉伸了。

以下是我常用的扭曲实现路径：

1. 确定目标区域的多边形顶点（经纬度坐标） 2. 在这些顶点中，选一个“锚点”作为UV基准 3. 对每个顶点计算它相对于锚点的横向/纵向比例，得到对应的UV值 4. 用这些顶点创建自定义Geometry 5. 给Geometry添加ImageMaterial，并指定每个顶点算好的UV坐标

这里的第3步是关键，也是大部分教程没有讲清楚的地方。很多人直接用(经度-锚点经度)和(纬度-锚点纬度)当UV，结果影像方向不对、比例也不对。正确做法是要考虑经纬度到米制距离的转换，否则在高纬度地区变形会非常严重。

2.1 经纬度扭曲的UV计算细节

我来给出一个我实测过的计算公式。

假设你有一个目标多边形，顶点坐标列表为positions，每个元素是[经度, 纬度]。你希望把一张影像扭曲到这个多边形内，影像原始的四个角分别对应多边形的四个边界点（或最外接矩形）。

步骤一：计算这个多边形的最小外接矩形，得到矩形的四个角：

• 西侧west = min(所有经度)
• 东侧east = max(所有经度)
• 南侧south = min(所有纬度)
• 北侧north = max(所有纬度)

步骤二：对外接矩形横向长度做米制换算。在Cesium中，可以用Cartesian3.distance计算两个点在世界坐标系下的直线距离。分别算出横向总距离widthMeters和纵向总距离heightMeters。

步骤三：遍历多边形每个顶点，计算它在外接矩形中的相对位置：

// 计算每个顶点的uv function computeUV(position, west, south, widthMeters, heightMeters) { // 把经纬度转成米制偏移 const xMeters = calculateXOffset(position, west); // 横向米制偏移 const yMeters = calculateYOffset(position, south); // 纵向米制偏移 // 归一化到0-1 const u = xMeters / widthMeters; const v = yMeters / heightMeters; return { u, v }; }

这里的calculateXOffset和calculateYOffset不能简单用经纬度差，而是要用椭球体距离换算。Cesium自带的Cartesian3.fromDegrees转成世界坐标后求差，再相乘一个比例系数即可。我通常直接用Cesium.Cartesian3.distance去量两个点的世界坐标距离。

这样算出来的UV，可以保证影像在多边形内保持正确的比例，拉伸方向和范围完全可控。

2.2 空白区域的实现：透明度与Alpha测试

空白的实现，相比扭曲和拉伸要简单很多，但也有几个隐蔽的坑。

最常见的空白方案是用材质的颜色属性来控制透明度。比如使用ColorMaterialProperty，将需要空白的区域颜色的Alpha设为0。但问题来了：ColorMaterialProperty是纯色的，不能让“影像”特定的某个区域变透明。

这时候需要引入自定义材质或者Fabric材质。Cesium官方提供了一套Fabric语法，允许你用GLSL代码自定义材质行为。实现空白的基本思路是：

• 在片元着色器（Fragment Shader）里拿到当前纹理坐标的像素颜色。
• 判断该像素坐标是否位于空白区域内。
• 如果是，设置gl_FragColor.a = 0.0。

判断条件可以是坐标范围（比如U在0.3到0.6之间且V在0.2到0.5之间时透明），也可以是纹理内容（比如纯色区域透明，这就要用颜色阈值判断）。

我实际项目中最常用的是范围判断，因为客户的需求通常是“把某个楼栋范围空出来”或者“把某条路范围裁掉”。实现起来是这样的：

if (v_uv.x > 0.3 && v_uv.x < 0.6 && v_uv.y > 0.2 && v_uv.y < 0.5) { discard; // 直接丢弃片元，比设alpha=0更高效 }

注意这里用discard而不是alpha=0，区别在于discard在片段层面直接把像素丢掉，不参与后续混合，性能更好，也不会出现半透明叠加的诡异效果。这是我在多个项目里对比实测出来的结论。

3. 实操：一个完整的多边形影像扭曲+空白案例

光讲概念没用，我拿一个我在某历史街区复原项目中实际做过的功能来走一遍完整流程。这个项目的需求非常典型：甲方给了一张民国时期的历史地图，要求叠加到现在的街区三维模型上，并且要求历史地图的范围不能超出街区边界（也就是要扭曲贴合），同时街区内部有几栋现代建筑需要保持“空白”——历史地图不能盖在它们上面。

当时我用的技术栈是：Cesium 1.98版本 + Vite + 原生Cesium API，没有用第三方封装库。

3.1 准备阶段：数据整理与坐标采集

第一步是数据整理。甲方给的历史地图是TIF格式，带地理参考，但坐标系是老的北京54坐标系。我先用GIS工具把它转成了WGS84经纬度坐标，并且把TIF文件切成了一张PNG（直接贴大TIF在Web上性能很差，这是基础常识）。

第二步是关键：在Cesium场景中采集目标多边形的顶点。我当时的做法是：

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function (movement) { // 拾取地球表面坐标，转成经纬度 const pickRay = viewer.camera.getPickRay(movement.position); const cartesian = viewer.globe.pick(pickRay, viewer.scene); if (cartesian) { const carto = Cesium.Cartographic.fromCartesian(cartesian); console.log(Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude)); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

把这些点连起来，就得到了目标多边形的边界。这里有个实操经验：采集边界点的时候，尽量让点落在目标区域的“关键转折处”。转折处越密集，扭曲贴合效果越真实。如果转折点太少，影像的扭曲效果会显得很生硬。

3.2 自定义Geometry的构建

这是整个方案中最核心的一步。在Cesium中，直接new一个Cesium.Geometry是比较底层的方式，通常的做法是先创建一个Geometry实例，再把它包装进Primitive。

由于多边形是不规则的，我选择把它三角剖分（Triangulate）成三角形列表。Cesium内置的Cesium.PolygonGeometry支持vertexFormat参数，可以生成带UV坐标的几何体。

以下是核心代码：

// 定义多边形的经纬度坐标数组 const polygonPositions = Cesium.Cartesian3.fromDegreesArray([ 经度1, 纬度1, 经度2, 纬度2, // ... 按顺序全部填入 ]); // 用PolygonGeometry创建几何体，注意vertexFormat要包含ST（UV坐标） const geometry = Cesium.PolygonGeometry.createGeometry( new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions), vertexFormat: Cesium.VertexFormat.POSITION_AND_ST, // 关键：需要ST格式 stRotation: 0.0, }) );

这里的POSITION_AND_ST就是告诉Cesium：几何体的顶点除了要位置信息，还需要纹理坐标（ST就是UV）。Cesium内部会自动根据多边形的外接矩形的范围来生成每个顶点的ST值。

但请注意：**Cesium.PolygonGeometry自动生成的UV是基于外接矩形均匀分布的**，它只会做“规则映射”，不会考虑你想要的“扭曲贴合”。如果想实现非规则的扭曲（比如影像沿河岸弯曲），就需要拿到几何体后手动修改UV。

3.3 手动修改UV实现自定义扭曲

获取到几何体后，几何体有attributes.position和attributes.st两个属性，它们都是ComponentDatatype类型的数组。手动修改UV的思路是：根据每个顶点在世界坐标中的位置，重新计算它应该对应的纹理坐标。

// 获取几何体的position分量和st分量 const positionAttr = geometry.attributes.position; const stAttr = geometry.attributes.st; const positions = positionAttr.values; const sts = stAttr.values; // 重置UV const newSTs = []; for (let i = 0; i < positions.length / 3; i++) { const x = positions[i * 3]; const y = positions[i * 3 + 1]; const z = positions[i * 3 + 2]; const carto = Cesium.Cartographic.fromCartesian(new Cesium.Cartesian3(x, y, z)); const lon = Cesium.Math.toDegrees(carto.longitude); const lat = Cesium.Math.toDegrees(carto.latitude); // 根据你的扭曲规则计算u,v // 这里举例：按照河道中心线距离来扭曲 const u = calculateCustomU(lon, lat); const v = calculateCustomV(lon, lat); newSTs.push(u, v); // 注意顺序是u在前，v在后 } // 替换几何体的ST值 stAttr.values = new Float32Array(newSTs);

这里有三个非常容易踩的坑，我逐一说明：

坑一：ST数组的长度。stAttr.values的长度通常是顶点数量的两倍（每个顶点2个值：u和v）。而position.values的长度是顶点数量的三倍（每个顶点3个值：xyz）。如果你只遍历了position数组的三分之一，却忘记ST是两倍，就会出现索引错位，影像会变成一团乱麻。

坑二：几何体是否被Cesium内部共享。如果你创建的Geometry被多个Primitive共享（比如你使用实例化渲染），直接修改attributes会影响所有实例。当时我遇到过这个问题，相同的几何体出现在多个地方，改了一个全部变了。解决办法是clone一份Geometry再修改。

坑三：经度跨180度的问题。如果你的多边形跨过了180度经线，Cesium.Math.toDegrees可能会返回负值或大于180的值，导致UV计算异常。需要做统一的坐标偏移处理，否则影像会撕裂。

3.4 给Primitive贴材质

Geometry搞定后，下一步就是创建Primitive并贴上材质。这里同样有两种方式：

• Primitive+Material：适合需要Shader控制的场景（比如空白区域的discard）。
• Entity+Graphics：适合功能演示或快速原型，但不适合复杂的空白控制。

我当时的空白需求比较复杂（需要在特定楼栋范围内裁掉影像），所以选择了Primitive方案：

const primitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: modifiedGeometry, id: "history-map-primitive", }), appearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType("Image", { image: "历史地图.png", repeat: new Cesium.Cartesian2(1, 1), }), depthTestEnabled: true, }), }); viewer.scene.primitives.add(primitive);

这一步用Material.fromType("Image")把PNG图片作为材质贴上去。如果你需要空白效果，就要换成Cesium.Material.fromType("Image")时不能直接加discard逻辑，需要换用Fabric材质自定义Shader。

3.5 Fabric材质实现空白区域

这里重点说一下Fabric材质如何实现空白。Fabric材质是Cesium的材质定义语言，允许你编写自己的顶点/片元着色器。以下是我实际用的一个Fabric材质示例：

const blankFabric = { type: "HistoryMapWithBlank", uniforms: { image: "历史地图.png", // 空白区域的矩形范围（UV坐标系） blankLeft: 0.3, blankRight: 0.6, blankTop: 0.2, blankBottom: 0.5, }, materials: { // 基于Image材质 image: { type: "Image", uniforms: { image: "历史地图.png", }, }, }, components: { diffuse: "czm_material.diffuse", // 使用内嵌image材质的漫反射 alpha: "czm_material.alpha", }, fabric: { type: "HistoryMapWithBlank", materials: { image: { type: "Image", uniforms: { image: "历史地图.png", }, }, }, components: { diffuse: "czm_material.diffuse", alpha: "czm_material.alpha", }, source: ` czm_material czm_getMaterial(czm_material material, czm_ray ray) { material = czm_getDefaultMaterial(material); // 内嵌image材质的调用 czm_material imageMat = czm_getMaterial(material, ray); material.diffuse = imageMat.diffuse; material.alpha = imageMat.alpha; // 空白判断 if (v_uv.x > blankLeft && v_uv.x < blankRight && v_uv.y > blankTop && v_uv.y < blankBottom) { discard; } return material; } `, }, };

说句实话，直接用discard在Fabric材质里有时候会因为版本差异编译报错。我当时用的是更高阶做法：不直接修改Fabric，而是把Geometry中位于空白区域内的三角形顶点剔除，让空白区域变成真正的“洞”。这个思路更稳，但实现起来麻烦一点。

如果你的需求只是把某个矩形范围变空白，最快的方式是直接处理几何体：遍历三角形，判断三角形的质心是否落在空白矩形内，如果是就剔除该三角形。这样做不需要写GLSL，也能达到空白效果，而且性能更高。

3.6 最终效果与性能验证

完成上述步骤后，我验证了三个关键点：

• 扭曲效果：历史地图沿街区边界精确贴合，没有出现边界溢出或明显变形拉伸。
• 空白效果：指定楼栋范围内不再显示历史地图，底图和建筑模型正常显示，边缘干净无残影。
• 性能：整个Primitive顶点数量约3000个，渲染帧率几乎没有影响。即使在移动设备的低端GPU上，也能流畅运行。

性能对比数据我大致测过：使用ImageryProvider硬怼Canvas方案，每帧CPU占用率约15%；使用自定义Geometry+Primitive方案，CPU占用率约2%，GPU占用率相当。这个差异在移动端尤其明显。

4. 常见问题与排查技巧实录

这一部分整理我在实际调试中遇到的一些典型问题和排查思路，如果你也碰到类似状况，可以直接照方抓药。

4.1 影像显示为全黑或全白

这是最常见的问题，几乎每个人第一次做都会遇到。原因通常是：Texture的repeat参数设置错误，或者UV值超出了0-1范围。

我排查过的一个真实案例：GEOMETRY创建的UV范围正常是0-1，但我手动修改UV时，因为计算公式写错，导致有些顶点的U值达到了2.5，有些负值。结果整个影像显示为一大块白板。对策是：渲染时把UV clamp到0-1范围内，或者检查计算公式。

排查方法：在Fabric材质里加一个调试分支，让gl_FragColor = vec4(v_uv.x, v_uv.y, 0.0, 1.0);，这样如果UV正常，你应该能看到一张从黑色（0,0）到黄绿色（1,1）的渐变图。如果渐变色出现混乱或者异常区域，就说明UV计算有误。

4.2 影像边缘出现黑边或白边

出现黑边/白边的原因，绝大多数是因为纹理过滤和边缘采样。当影像拉伸过大时，边缘像素会被拉长，出现半透明或不清晰的现象。

用ImageMaterialProperty时，可以设置repeat属性，但无法设置纹理过滤模式。用Fabric材质时，可以很好地控制：

texture2D(image, v_uv) // 默认的就是线性过滤

如果要消除边缘锯齿，可以将Fabric的alpha改为边缘渐隐：

float edge = smoothstep(0.98, 1.0, 1.0 - max(abs(v_uv.x - 0.5), abs(v_uv.y - 0.5)));

实测下来，边缘渐变比硬裁剪的视觉效果柔和得多。

4.3 多个Geometry叠加导致Z-fighting

当你在同一位置叠加多个几何体（比如历史地图和现代建筑模型），或者两个Primitive的底部贴合紧密时，会出现闪烁的Z-fighting问题。

一个常规解法是调整Primitive的depthTest参数，或者对其中一个几何体做微小的高度偏移。我习惯把需要“覆盖在上层”的Primitive抬高零点几米：

// 对geometry做高度偏移 const offset = 0.5; // 米 const positions = geometry.attributes.position.values; for (let i = 0; i < positions.length; i += 3) { // 按法线方向偏移（这里简化为沿Z轴向上偏移） positions[i + 2] += offset; }

注意：这个偏移量不要太大，否则会产生明显的悬浮感。我多次测试的经验值是：0.1米到0.5米之间比较合适，既能解决闪烁又不影响观感。

4.4 万恶的跨180度经线

这个坑我在前面提到过。如果你的目标区域恰好跨过180度经线（比如太平洋岛屿项目），你会发现影像在几何体中间出现一条“裂痕”。

原因是Cesium内部处理经纬度转世界坐标时，180度经线两边会被分别投影到正负方向上，导致多边形的三角化出现异常。解法是：把经度做统一偏移，比如所有经度加上某个偏移量，使多边形不再跨180度，等渲染完成后再手动平移几何体。

这个方法就是做“周期偏移”，水上项目经常要用。

4.5 纹理图片加载闪白

图片加载慢或者异步加载时，Primitive会先以白色或空白出现，等图片加载完才正常。这个在移动端尤其明显。

解法是先对图片做预加载，确保图片在创建Primitive前已经完成加载。或者用ImageBitmap：

const response = await fetch("历史地图.png"); const blob = await response.blob(); const bitmap = await createImageBitmap(blob); // 用bitmap作为材质图片

这样基本不会出现闪白。

4.6 自定义Shader编译报错

Fabric材质的GLSL编写比较小众，网上样例少，容易编译报错。最常见的报错原因是：

• 硬编码了gl_FragColor而不是用czm_material的返回机制。在Fabric中，不要直接给gl_FragColor赋值，而是修改czm_material结构体后返回。
• 变量命名冲突：自定义变量不要和Cesium内置变量冲突，比如v_uv在Cesium中可能已经有定义，换个名字比如v_historyMapUV更安全。
• 不要用texture2D直接采样Cesium内置的材质uniform，Cesium会让你写czm_material结构体，内部已经封装好了采样。

4.7 影像拉伸时分辨率低

如果你拉伸的倍数过大，原始影像的分辨率不够，会糊。这个问题的根子不在代码，而在影像数据的准备：在GIS工具中，对原始影像做金字塔切片并生成多级缩放版本，等到Cesium中渲染时根据视距选择合适的层。如果不想做切片，至少要提供一个高分辨率的PNG（建议宽度不低于2048像素），否则一旦拉伸过大细节惨不忍睹。

5. 几种备选方案对比与选型建议

写了这么多，其实在实际项目中，不一定非要手动写Shader或改Geometry。根据需求的复杂度，有几条不同的路径，我整理成表格方便你快速选型。

我个人在项目中用的最多的是第二种：PolygonGeometry + 手动改UV。它兼顾了灵活度和性能，而且大多数客户需求的“扭曲”都不会太夸张（基本都是边界贴合），手动算UV足够用了。只有当你需要非常复杂的形变逻辑（比如基于河道走向的弯曲变形）时，才需要上Fabric材质自行控制片元逻辑。

6. 性能优化与渲染顺序的小经验

在真实项目中，影像扭曲和空白很少只做一层，往往是多层叠加：底图、历史影像、规划图层、脱敏图层。这时候渲染性能和深度顺序就成了大问题。

我踩过的一个典型性能坑：项目里叠加了四个Primitive，每个都带大纹理。结果低端手机一打开直接卡死，帧率不到5。排查下来发现不是GPU问题，而是CPU端的几何体数据过多，每次渲染都要重新上传顶点缓冲。

解法是：

• 优先级最高的Primitive用高分辨率纹理，其他层级的纹理做压缩（比如用WebP或JPEG，不用PNG）。
• 多个几何体如果可以合并成同一个Geometry，尽量合并。因为多画一个Primitive就是多一次Draw Call。
• 空白区域不要通过透明实现，而是通过剔除三角形实现——透明会强制开启混合模式，严重影响fill rate。

渲染顺序方面，Cesium默认按Primitive加入顺序渲染，但如果你想控制某个Primitive在另一个上面，可以用Primitive.show动态控制，或者通过修改depthTest。

具体来说：如果你觉得某个Primitive被后面的遮挡，可以尝试开启depthTestEnabled: false，强制让它显示在最前面——但这个方法慎用，会产生遮挡穿透问题，只能用于临时调试。

最后再分享一个小技巧

在做影像扭曲时，有一个几乎没人提但非常好用的小技巧：利用Cesium的GroundPrimitive代替普通Primitive。GroundPrimitive会自动贴地，而且不需要担心地形起伏造成的悬空或穿模问题。如果你的扭曲影像要贴合的是“地面”（而不是建筑物立面），强烈建议用GroundPrimitive。

我当时没注意，直接用普通Primitive，结果项目区域地形有一定起伏，历史地图在部分区域悬空了大概半米，被甲方一眼看穿。后来换成GroundPrimitive，问题立刻解决，还顺手省掉了手动调整高度的麻烦。

基本思路就是这样：先想清楚你想在哪个层级做文章（图层还是材质），再决定是改UV还是改Shader。把这个决策顺序理清了，Cesium影像扭曲、拉伸、空白这些需求对你来说就不是玄学，而是一套可以模块化复用的工具。遇到新项目，先套用本文的流程走一遍，大概率能少走很多我当年走过的弯路。