Cesium地形透明

地形透明

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

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

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

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

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

// 先把所有的影像图层的透明度设置为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类,定位到下面这句原始代码

command.pass = Pass.GLOBE;

将这句修改为

command.pass = Pass.TRANSLUCENT;

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

viewer.scene.skyAtmosphere.show = !1;

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

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

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类中的那句代码修改成这样

// 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类就可以了,使用的示例如下:

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

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

补充一下:怎么关闭影像裙边

viewer.scene.globe.showSkirts = false;

最后我们看下开启前后的效果
在这里插入图片描述
在这里插入图片描述
备注:我使用的源码是1.66版本

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页