完整示例代码：

<!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. python整理1992、2009国家标准学科分类及代码数据并存入MySQL数据库

    文件内容 处理结果 代码 1 import pandas as pd 2 import pymysql 3 4 5 def get_subject_1992(): 6 res={} 7 the_for ...

  2. SSE与AVX指令基础介绍与使用

    SSE与AVX指令基础介绍与使用 SSE/AVX指令属于Intrinsics函数,由编译器在编译时直接在调用处插入代码,避免了函数调用的额外开销.但又与inline函数不同,Intrinsics函数的 ...

  3. 使用OHOS SDK构建opus

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/xiph/opus 进入 ...

  4. OpenHarmony定义扩展组件样式：@Extend装饰器

      在前文的示例中,可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式. 说明: 从API version 9开始,该装饰器支持在ArkTS ...

  5. Java操作FileUtils读取数据与写入数据到文件

    前言:用一行代码实现读取文件内容 代码如下: 一.添加FileUtils依赖: 1 <!-- FileUtils依赖--> 2 <dependency> 3 <group ...

  6. MyBatis ognl.NoSuchPropertyException

    描述 SpringBoot + Mybatis-plus 项目,运行时出现如下错误: ognl.NoSuchPropertyException:没有对应属性异常 Invalid bound state ...

  7. 【FAQ】HarmonyOS SDK 闭源开放能力 —Scan Kit

    1.问题描述 Scan Kit扫描专用底层码流接口需要鉴权,鉴权失败后功能还能用吗? 解决方案 如果已经申请过白名单,因为异常导致的鉴权失败会优先放通,保障业务成功. 2.问题描述 调用Scan Ki ...

  8. chatGPT教你学sql的事务

    事务的隔离级别 事务的隔离级别是指多个并发事务之间相互隔离的程度,主要是为了解决并发事务带来的一致性问题,它的主要作用是控制数据库中事务的可见性和可重复读. 在 SQL 标准中,定义了四种事务隔离级别 ...

  9. hive窗口分析函数使用详解系列二之分组排序窗口函数

    1.综述 我们讨论面试中各大厂的SQL算法面试题,往往核心考点就在于窗口函数,所以掌握好了窗口函数,面对SQL算法面试往往事半功倍. 已更新第一类聚合函数类,点击这里阅读 hive窗口函数聚合函数类 ...

  10. redis 简单整理——开发和运维中的问题[二十四]

    前言 简单介绍一下开发和运维中的问题. 正文 从上文中介绍了,我们有了一个副本了,通过复制的方式. 这些副本可以应用于读写分 离.故障转移(failover).实时备份等场景. 那么可以关注一些开发和 ...