cesium 的几个默认用法

tianyapai

已于 2023-09-25 15:36:36 修改

阅读量816

点赞数 2

分类专栏： cesium 文章标签： html5

于 2021-10-15 18:28:06 首次发布

本文链接：https://blog.csdn.net/tianyapai/article/details/120788512

版权

cesium 专栏收录该内容

30 篇文章 31 订阅

订阅专栏

cesium有几个默认的用法，不知道如何翻译，但是不了解还是感觉很不舒服：

1、带有scratch部分的关键词，主要是一些全局的临时变量，用于减少内存的申请，大部分是在某个函数的开始部分清空内容，参与计算，计算完成后再次清空内容；

2、带有Derived部分的关键词；

DerivedCommand是根据Command中的shader添加了一些自己的glsl代码，但是与Command使用相同的几何数据；
DerivedCommand 依附于Command存在，索引更新实体时，也要相应你的更新DerivedCommand；
Derived主要是用于多个命令的参数大体相同，不用重新创建命令，减少重复cpu执行过程，而且命令主要用于绘制，DerivedCommand 依附于Command存在，在绘制的时候减少webgl命令的切换，提高执行效率；
此外Resource也有Derived的方法，主要是tileset.json中都是相对路径，需要使用最初的baseUrl，所以通过Derived方法实现。

3、cesium中的很多处理过程是流程式的，比如地形瓦片、3DTiles等处理过程，这些过程都有各种处理状态，例如：准备状态、开始下载、下载完成、正在处理、处理完成等。

这些流程式的过程一般都会使用pass、state或者passState标识。

但是在很多时候要进行各种状态的判断，判断方式都是使用“==”感觉有写累赘，例如使用下面这种方式感觉更好：

//primitive.js中

// cesium 原本的方式
  if (
    this._state !== PrimitiveState.COMPLETE &&        // 数据状态不是完成
    this._state !== PrimitiveState.COMBINED           // 数据状态不是合并
  ) {}

// 可以改成下面的方式，并重新排序PrimitiveState中的各个状态的顺序，这样在各个阶段逻辑都比较清晰
  if (this._state < PrimitiveState.COMBINED) {}

最后说一下cesium中类的结构，代码如下：

//以CesiumWidget.js文件为蓝本进行说明

//1、js文件中全局方法
  function startRenderLoop(widget){
      //do something...
  }

//2、js文件中类的声明
  function CesiumWidget(container, options) {
      // init something...
  	   this._container = container;
      // init other something...
  }

//3、js文件中函数的定义
  CesiumWidget.prototype.isDestroyed = function() {
     return false;
  };

//4、js文件中属性使用set和get方法
  Object.defineProperties(CesiumWidget.prototype, {
    container: {
      get: function() {
        return this._container;
      },
    }
  }

4、cesium的类结构，对于cesium中封装的一些类，类中大概分为类构造函数、原型函数、类函数、文件内函数。

类构造函数：封装类的成员变量，大部分通过属性访问，少部分可以自由访问，如果成员带有下划线，则一般都是通过属性访问的；

原型函数：类实例化后的使用的函数；

类函数：导出的与类相关，不用实例化的函数；

文件内函数：相当于私有函数，不能被外界使用。

5、抗锯齿的做法

// 是否支持图像渲染像素化处理

if (FeatureDetection.supportsImageRenderingPixelated()) {

viewer.resolutionScale = window.devicePixelRatio

}

// 开启抗锯齿

viewer.scene.postProcessStages.fxaa.enabled = true;

6、大坐标产生的抖动

将大坐标拆分成两个小坐标进行计算，也就是cesium中的heigh、low位置数据，例如：123456789这麽大的数据在webgl中着色器是不支持的，计算方法都是将实体的坐标转换到相机的相对坐标中，或者将大坐标拆分成两个小坐标，拆分方法，例如123456789拆分成，12345和6789，这样转换成浮点数数时1.23*10^3和4.56789*10^6,计算作差就可以计算了。

7、函数中的destroy和isDestroyed函数作用

javascript的中函数调用很多是异步的，如果一个object在异步调用完成之前就销毁了，那么直接调用object中的函数会崩溃，所以当object销毁的时候会调用destroyObject这个函数，这个函数的作用就是将isDestroyed函数重新赋值为一个新的函数，并返回true，在异步函数中先调用isDestroyed函数，如果是销毁了，就不在继续处理了。