完整示例代码：

<!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. Spring Bean 的一生

    Spring Bean 的一生包括其从创建到消亡的整个过程: 实例创建 => 填充 => 初始化 => 使用 => 销毁. 这里需要注意的是,从 bean 实例的创建到可以使用 ...

  2. Vue入门笔记一

    <Vue.js项目实战>Guillaume Chau Vue核心功能概述 1.一个响应式的数据系统,能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面 2.灵活的视图声明,包括 ...

  3. 手写数字图片识别——DL 入门案例

    Deep Learning Demo of Primary 下面介绍一个入门案例,如何使用TensorFlow和Keras构建一个CNN模型进行手写数字识别,以及如何使用该模型对自己的图像进行预测.尽 ...

  4. Docker 学习路线 3：安装设置 Docker Desktop 与 Docker 引擎指南

    Docker提供了一个名为Docker Desktop的桌面应用程序,简化了安装和设置过程.还有另一个选项可以使用Docker引擎进行安装. Docker Desktop网站 Docker引擎 Doc ...

  5. Java基础知识：面试官必问的问题

    数据类型 基本类型 byte/8 char/16 short/16 int/32 float/32 long/64 double/64 boolean/~ boolean 只有两个值:true.fal ...

  6. 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit

    1.问题描述 在App中供用户在地图上选择地址,目前在使用Map Kit结合geolocationManager逆地理编码时获取的地址信息描述不准确,希望能提供相应的Demo参考. 解决方案 Demo ...

  7. 容器开发运维人员的 Linux 操作机配置优化建议

    "工欲善其事必先利其器", 作为一个PAAS平台架构师, 容器相关技术(docker, k8s等)是必不可少的. 本文简单介绍下我自己的Linux操作机配置. 提升工作效率, 提高 ...

  8. leetcode-数组中两元素的最大乘积

    题目描述 给你一个整数数组 nums,请你选择数组的两个不同下标 i 和 j,使 (nums[i]-1)*(nums[j]-1) 取得最大值. 请你计算并返回该式的最大值. 示例 1: 输入:nums ...

  9. k8s 深入篇———— pod 深入实战[七]

    前言 深入一下pod 实战. 正文 在 Kubernetes 中,有几种特殊的 Volume,它们存在的意义不是为了存放容器里的数据,也不是用来进行容器和宿主机之间的数据交换. 这些特殊 Volume ...

  10. 重新点亮linux 命令树————服务管理工具[二十五]

    前言 简单整理一下服务管理工具. 正文 服务集中管理工具. service 功能简单 systemctl 功能多 先来看下service脚本位置: 然后看下vim network 这里可以看到代码非常 ...