Cesium地形透明 | 码农家园

地形透明

cesium可以针对每个影像图层进行透明度控制，下面是一个控制图层透明度的局部代码

1
2
3

viewer.imageryLayers._layers.forEach(layer => {
layer.alpha = 0.0; // 我们可以设置为0
});

但是影像图层即使透明了，你看到的球皮也不是透明的，它有一个基础颜色baseColor，我们如何查看这个球的基础颜色呢？

1	var baseColor = viewer.scene.globe.baseColor; // 查看球皮的默认颜色

如果我们把这个球皮的baseColor的透明度设置为0？他的结果是如下图这样的

1
2
3
4
5
6

// 先把所有的影像图层的透明度设置为0
viewer.imageryLayers._layers.forEach(layer => {
layer.alpha = 0.0;
});
// 再设置baseColor
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);

在这里插入图片描述
我们发现还是不能实现透明效果。

那么怎么做才能实现整理球的透明效果呢？最简单的方式是改源码，我也只会这种方式，后期如果学会别的方式了我再写。

首先打开Source\Scene\GlobeSurfaceTileProvider.js类，定位到下面这句原始代码

1	command.pass = Pass.GLOBE;

将这句修改为

1	command.pass = Pass.TRANSLUCENT;

好，我们来看下效果。效果还不错。
在这里插入图片描述
但是周围那一圈是什么鬼，其实这是我们开启了大气的原因。把大气关掉就好。

1	viewer.scene.skyAtmosphere.show = !1;

到这里我们实现了简单的地形透明控制，源码也只改了一句。但是官方说改这里会有一些其他的问题（这里我测试不多，其他地方出现问题我没碰到，如果碰到了记得给我留言哦，大家一起学习下哈）。那么我就希望在需要地形透明时修改这句代码，在不需要时还使用原来的呢？下面来看怎么做。

首先在Source目录下新建一个文件夹，存放你自己的代码，和源码一起打包使用。我新建的是Source\ExtendCode，你想怎么命名随你。我们在ExtendCode文件夹下新建一个ExtendGlobe.js类，其内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import Check from "../Core/Check.js";

function ExtendGlobe (viewer) {
Check.defined('viewer', viewer);
this.viewer = viewer;

this._terrainTransparent = false;
}

Object.defineProperties(ExtendGlobe.prototype, {
terrainTransparent: {
get: function () { return this._terrainTransparent; },
set: function (vlaue) {
this._terrainTransparent = vlaue;
var scene = this.viewer.scene;
scene.frameState.terrainTransparent = vlaue ? vlaue : false
if (!scene.frameState.terrainTransparent) {
delete scene.frameState.terrainTransparent; // 销毁这个对象变量
}
}
}
})

export default ExtendGlobe;

Source\Scene\GlobeSurfaceTileProvider.js类中的那句代码修改成这样

1
2
3
4

// command.pass = Pass.GLOBE; // original code
// amend code by someone - start
command.pass = frameState.terrainTransparent ? Pass.TRANSLUCENT : Pass.GLOBE;
// amend code by someone - end

在外部使用ExtendGlobe.js类就可以了，使用的示例如下：

1 2	var extendGlobe = new Cesium.ExtendGlobe(viewer); extendGlobe.terrainTransparent = true; // or false

这样我们就实现了如何动态的控制地形的透明设置。