完整示例代码：

<!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. #结论#CF1776G Another Wine Tasting Event

    题目 给定一个长度为 \(2n-1\) 的字符串,问一组使得 \(n\) 个长度不小于 \(n\) 的区间中字母W的个数相等的字母W的个数 分析 首先结论就是 \(\max_{i=1}^n\{cW[i ...

  2. #对勾函数#洛谷 5695 [NOI2001]反正切函数的应用

    题目 问给定的每一个\(a\),是否存在正整数\(b,c\), 使得在满足$$\arctan(\frac{1}{a})=\arctan(\frac{1}{b})+\arctan(\frac{1}{c} ...

  3. 基于ArkUI框架开发-ImageKnife渲染层重构

      ImageKnife是一款图像加载缓存库,主要功能特性如下: ●支持内存缓存,使用LRUCache算法,对图片数据进行内存缓存. ●支持磁盘缓存,对于下载图片会保存一份至磁盘当中. ●支持进行图片 ...

  4. OpenHarmony：4.0 Release版本的开发数据

    OpenAtom OpenHarmony 4.0 Release版本于 10 月 27 日发布,经过了32周的开发周期.在此期间,有 65499 个 Committs 进入了 版本.在这个周期内完成了 ...

  5. OpenHarmony装饰指定自定义组件：@BuilderParam装饰器

      当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作.若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能.为解决此问题,ArkUI ...

  6. OpenHarmony社区运营报告（2023年7月）

     本月快讯 • 2023年7月28日-29日,全球软件质量&效能大会(简称"QECon")圆满举行,OpenAtom OpenHarmony(简称"OpenHar ...

  7. 学习笔记——Python基础

    字符串索引 str = '我是一名学生' print(str[0]) #输出"我" print(str[-6]) #输出"我" 字符串切片:把数据对象的一部分拿 ...

  8. C++调用Python-6：调用Python类

    # mytest.py class Test: def hello(self): print("this is test class hello function no params ret ...

  9. OpenGauss数据库对象属主变更后会自动调整对象权限吗？

    OpenGauss 数据库对象属主变更后会自动调整对象权限吗? OpenGauss 数据库创建了数据库对象之后,可以使用 alter 命令修改对象的属主. 以表为例,修改属主的命令如下: ALTER ...

  10. 实例讲解昇腾 CANN YOLOV8 和 YOLOV9 适配

    本文分享自华为云社区<昇腾 CANN YOLOV8 和 YOLOV9 适配>,作者:jackwangcumt. 1 概述 华为昇腾 CANN YOLOV8 推理示例 C++样例 , 是基于 ...