完整示例代码：

<!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. AndroidStudio--app是如何运行的

    #实用快捷键# Ctrl+alt+F 快速自动把类方法内部的变量声明为类属性变量,以方便全局使用! Ctrl+O  快速显示所有类方法以及field属性结构 今天发现了一个非常好的博主----litt ...

  2. Emmet Documentation ( Actions+Filters+Customization )

    Emmet Documentation Actions Expand Abbreviation Balance 选择范围 Go to Matching Pair 匹配对应标签 在sublime tex ...

  3. 7 CSS选择器优先级

    7 选择器优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.样式表中的特殊性描述了不同规则的相对权重. /* !important > 行内样式>ID选择器 > ...

  4. #分层图最短路，Dijkstra#洛谷 4568 [JLOI2011]飞行路线

    题目 一个无向图,每条边都有花费,可以有\(k\)次挑选边去除花费的机会,问从指定起点到指定终点的最小花费 分析 考虑用分层最短路完成,也就是在同一层走需要花费,不同层走不用花费,最终走到最底层,然后 ...

  5. #floyd，斜率#洛谷 1354 房间最短路问题

    题目 在一个长宽均为10,入口出口分别为(0,5),(10,5)的房间里有几堵墙, 每堵墙上有两个缺口,求入口到出口的最短路径. 分析 暴力建图,判断两个点是否有墙堵住, 可以求斜率然后判断所交点不能 ...

  6. Android NDK之使用 arm-v7a 汇编实现两数之和

    Android NDK之使用 arm-v7a 汇编实现两数之和 关键词: NDK armv7a WebRTC arm汇编 CMake 最近适配对讲程序,在webrtc的库编译的过程中,发现其为arm的 ...

  7. Windows Terminal的资料

    Windows Terminal是微软Windows平台难得好用的工具. 由于工作内容的原因,需要打开多个CMD窗口.多个git bash窗口,并且在多个窗口间切换,因此命令行窗口支持多TAB的特性, ...

  8. 开源机密计算平台：蓬莱-OpenHarmony

    演讲嘉宾 | 杜   东 回顾整理 | 廖   涛 排版校对 | 李萍萍 嘉宾简介 杜东,上海交通大学助理研究员.中国计算机学会CCF会员,ACM会员.研究兴趣为操作系统与体系结构.服务器无感知(Se ...

  9. 【直播回顾】OpenHarmony 3.1 Release版本南北向关键能力解读

    OpenHarmony 3.1 Release版本发布后,广大开发者们纷纷开始上手体验新版本的功能.但随之而来的一系列问题,摆在了大家的面前:OpenHarmony 3.1这一版本,都有哪些重要的能力 ...

  10. C# 面向对象编程进阶：构造函数详解与访问修饰符应用

    C# 构造函数 构造函数是一种特殊的方法,用于初始化对象.构造函数的优势在于,在创建类的对象时调用它.它可以用于为字段设置初始值: 示例 获取您自己的 C# 服务器 创建一个构造函数: // 创建一个 ...