完整示例代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta

      name="viewport"

      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

    />

    <meta name="description" content="Adjust brightness, contrast, hue, saturation, and gamma of an imagery layer.">

    <meta name="cesium-sandcastle-labels" content="Showcases">

    <title>Cesium Demo</title>

    <script src="js/cesium1.97/Cesium.js"></script>

    <link rel="stylesheet" href="js/cesium1.97//Widgets/widgets.css"/>

  </head>

  <body

    class="sandcastle-loading"

    data-sandcastle-bucket="bucket-requirejs.html"

  >

    <style>

      #toolbar {

        background: rgba(42, 42, 42, 0.8);

        padding: 4px;

        border-radius: 4px;

        position:absolute;

        left:50px;

        top:50px;

        color: #ffffff;

      }

      #toolbar input {

        vertical-align: middle;

        padding-top: 2px;

        padding-bottom: 2px;

      }

    </style>

    <div id="cesiumContainer" class="fullSize"></div>

    <div id="toolbar">

      <table>

        <tbody>

          <tr>

            <td>亮度Brightness</td>

            <td>

              <input type="range" min="0" max="3" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">

              <input type="text" size="5" data-bind="value: brightness">

            </td>

          </tr>

          <tr>

            <td>对比度Contrast</td>

            <td>

              <input type="range" min="0" max="3" step="0.02" data-bind="value: contrast, valueUpdate: 'input'">

              <input type="text" size="5" data-bind="value: contrast">

            </td>

          </tr>

          <tr>

            <td>色调Hue</td>

            <td>

              <input type="range" min="0" max="3" step="0.02" data-bind="value: hue, valueUpdate: 'input'">

              <input type="text" size="5" data-bind="value: hue">

            </td>

          </tr>

          <tr>

            <td>饱和度Saturation</td>

            <td>

              <input type="range" min="0" max="3" step="0.02" data-bind="value: saturation, valueUpdate: 'input'">

              <input type="text" size="5" data-bind="value: saturation">

            </td>

          </tr>

          <tr>

            <td>Gamma</td>

            <td>

              <input type="range" min="0" max="3" step="0.02" data-bind="value: gamma, valueUpdate: 'input'">

              <input type="text" size="5" data-bind="value: gamma">

            </td>

          </tr>

        </tbody>

      </table>

    </div>

    <script id="cesium_sandcastle_script">

window.startup = function (Cesium) {

    'use strict';

const viewer = new Cesium.Viewer("cesiumContainer");

const imageryLayers = viewer.imageryLayers;

// 场景参数对象

const viewModel = {

  brightness: 0,

  contrast: 0,

  hue: 0,

  saturation: 0,

  gamma: 0,

};

// 将viewModel配置到knockout observables中

Cesium.knockout.track(viewModel);

// 将viewModel和界面的toolbar进行绑定

const toolbar = document.getElementById("toolbar");

Cesium.knockout.applyBindings(viewModel, toolbar);

// 根据控件参数，对3d球上第第一个图层进行设置

function subscribeLayerParameter(name) {

  Cesium.knockout.getObservable(viewModel, name).subscribe(function (newValue) {

      if (imageryLayers.length > 0) {

        const layer = imageryLayers.get(0);

        layer[name] = newValue;//关键代码：对图层的相关参数进行修改，从而实现效果变化

      }

    });

}

subscribeLayerParameter("brightness");

subscribeLayerParameter("contrast");

subscribeLayerParameter("hue");

subscribeLayerParameter("saturation");

subscribeLayerParameter("gamma");

// 根据新layer，将viewModel的场景参数重置

function updateViewModel() {

  if (imageryLayers.length > 0) {

    const layer = imageryLayers.get(0);

    viewModel.brightness = layer.brightness;

    viewModel.contrast = layer.contrast;

    viewModel.hue = layer.hue;

    viewModel.saturation = layer.saturation;

    viewModel.gamma = layer.gamma;

    console.log(layer);

  }

}

//监听图层修改事件，执行updateViewModel函数

imageryLayers.layerAdded.addEventListener(updateViewModel);

imageryLayers.layerRemoved.addEventListener(updateViewModel);

imageryLayers.layerMoved.addEventListener(updateViewModel);

updateViewModel();

};

if (typeof Cesium !== 'undefined') {

    window.startupCalled = true;

    window.startup(Cesium);

}

</script>

</body>

</html>

核心逻辑是：对影像图层的相关属性进行修改，该修改，只对图层有效，对模型不起作用。

代码实现核心逻辑：

imageryLayers=viewer.imageryLayers

const layer = imageryLayers.get(0);
layer[name] = newValue;//关键代码：对图层的相关参数进行修改，从而实现亮度对比度变化

另外附上官网对应示例imagery Adjustment

最后附一篇文章包含效果后处理下雨特效开月亮开启雾效果等

cesium教程8-官方示例翻译-图层亮度对比度调整的更多相关文章

  1. OpenCV——ROI截取、线性混合、通道分离、合并、亮度对比度调整

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...

  2. Unity性能优化（1）-官方教程The Profiler window翻译

    本文是Unity官方教程,性能优化系列的第一篇<The Profiler window>的简单翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻 ...

  3. 撒花！中文翻译仓库链接已加入 ML.NET 官方示例网站首页

    从2018年12月02日决定开始做ML.NET 示例中文版https://github.com/feiyun0112/machinelearning-samples.zh-cn,然后以每天一篇的速度进 ...

  4. opencv ，亮度调整【【OpenCV入门教程之六】 创建Trackbar & 图像对比度、亮度值调整

    http://blog.csdn.net/poem_qianmo/article/details/21479533 [OpenCV入门教程之六] 创建Trackbar & 图像对比度.亮度值调 ...

  5. AFNnetworking快速教程，官方入门教程译

    AFNnetworking快速教程,官方入门教程译 分类: IOS2013-12-15 20:29 12489人阅读 评论(5) 收藏 举报 afnetworkingjsonios入门教程快速教程 A ...

  6. ngRx 官方示例分析 - 2. Action 管理

    我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...

  7. opencv —— 官方 示例程序

    OpenCV 官方提供的示例程序,具体位于...\opencv\sources\samples\cpp 目录下. ...\opencv\sources\samples\cpp\tutorial_cod ...

  8. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  9. DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...

  10. DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

随机推荐

  1. #分块，懒标记#LOJ 3631「2021 集训队互测」学姐买瓜

    题目传送门 分析 有一个很简单的做法就是处理出每个位置能够一次到达的最左边的右端点(后继). 然后直接从 \(l\) 开始能跳就跳,这样单次询问时间复杂度是 \(O(n)\) 的. 观察到时间复杂度因 ...

  2. #主席树，Dijkstra，哈希#CF464E The Classic Problem

    题目 边权均为2的幂次的无向图,求 \(S\) 到 \(T\) 的最短路 \(n,m\leq 10^5\) 分析 最短路直接考虑用 Dijkstra,它需要维护松弛操作和堆, 那么也就是要重载加号和小 ...

  3. #贪心#CF605A Sorting Railway Cars

    题目 一个长度为 \(n\) 的排列,每次可以将一个数移至开头或者结尾,问最少多少次使其升序排列 分析 让数字连续的情况尽量多才能让移出来的次数尽量少, 找到最长的数字连续段,若其长度为 \(len\ ...

  4. #随机#CF1198F GCD Groups 2

    题目 将 \(n\) 个数分为两组,使得两组的GCD都为1,求具体的分组情况 分析 考虑直接打乱 \(n\) 个数,如果能使第一组GCD减小就减小,否则丢到第二组, 由于打乱后出错的概率会减小,所以r ...

  5. #矩阵乘法#洛谷 5343 【XR-1】分块

    题目 分析 考虑dp,\(dp[i]=\sum dp[i-j]\) 既然\(j\)很小,那么这显然可以用矩阵乘法优化 代码 #include <cstdio> #include <c ...

  6. C 语言文件处理全攻略：创建、写入、追加操作解析

    C 语言中的文件处理 在 C 语言中,您可以通过声明类型为 FILE 的指针,并使用 fopen() 函数来创建.打开.读取和写入文件: FILE *fptr; fptr = fopen(filena ...

  7. HarmonyOS音频开发指导：使用AudioRenderer开发音频播放功能

      AudioRenderer是音频渲染器,用于播放PCM(Pulse Code Modulation)音频数据,相比AVPlayer而言,可以在输入前添加数据预处理,更适合有音频开发经验的开发者,以 ...

  8. HarmonyOS 自定义页面请求与前端页面调试

      一.自定义页面请求响应 Web组件支持在应用拦截到页面请求后自定义响应请求能力.开发者通过onInterceptRequest()接口来实现自定义资源请求响应 .自定义请求能力可以用于开发者自定义 ...

  9. 第十七篇：Django入门

    一.模板 二.BootStrap使用 三.web框架简绍 四.Django使用 五.创建APP 六.APP各目录功能 七.静态文件处理 八.模板语言 九.请求过程

  10. Web前端 -- 利用Babel来将ES6转化为ES5代码

    一.简介 Babel用来将ES6代码转为ES5代码. 二.安装 安装命令行转码工具 Babel提供babel-cli工具,用于命令行转码.它的安装命令如下: npm install --global ...