cesium教程8-官方示例翻译-图层亮度对比度调整
完整示例代码：
<!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;//关键代码：对图层的相关参数进行修改，从而实现亮度对比度变化
cesium教程8-官方示例翻译-图层亮度对比度调整的更多相关文章
- OpenCV——ROI截取、线性混合、通道分离、合并、亮度对比度调整
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...
- Unity性能优化（1）-官方教程The Profiler window翻译
本文是Unity官方教程,性能优化系列的第一篇<The Profiler window>的简单翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻 ...
- 撒花！中文翻译仓库链接已加入 ML.NET 官方示例网站首页
从2018年12月02日决定开始做ML.NET 示例中文版https://github.com/feiyun0112/machinelearning-samples.zh-cn,然后以每天一篇的速度进 ...
- opencv ，亮度调整【【OpenCV入门教程之六】 创建Trackbar & 图像对比度、亮度值调整
http://blog.csdn.net/poem_qianmo/article/details/21479533 [OpenCV入门教程之六] 创建Trackbar & 图像对比度.亮度值调 ...
- AFNnetworking快速教程，官方入门教程译
AFNnetworking快速教程,官方入门教程译 分类: IOS2013-12-15 20:29 12489人阅读 评论(5) 收藏 举报 afnetworkingjsonios入门教程快速教程 A ...
- ngRx 官方示例分析 - 2. Action 管理
我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...
- opencv —— 官方 示例程序
OpenCV 官方提供的示例程序,具体位于...\opencv\sources\samples\cpp 目录下. ...\opencv\sources\samples\cpp\tutorial_cod ...
- Halcon斑点分析官方示例讲解
官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...
- DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...
- DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
随机推荐
- BeautifulSoup 库 和 re 库 解析腾讯视频电影
1 import requests 2 import json 3 from bs4 import BeautifulSoup #网页解析获取数据 4 import sys 5 import re 6 ...
- 'scanf': This function or variable may be unsafe
'scanf': This function or variable may be unsafe. Consider using scanf_s instead. To disable depreca ...
- #二分图匹配#洛谷 5771 [JSOI2016]反质数序列
题目 给出 \(n\) 个正整数,问最大的子集使得任意两个数的和都不是质数 \(n\leq 3*10^3\) 分析 如果把两个数的和为质数连边,等价于求最大独立集. 由于只有偶数加奇数才可能产生质数( ...
- 你真的了解java class name吗？
在面向对象的世界,Class是java的基础.java.lang.Class实际上是继承自java.lang.Object. class有一个方法叫做getName,该方法会返回(class, int ...
- caidao qsnctfwp
进入网页发现如下内容 直接使用蚁剑连接 连接并进入后,在根目录下发现名为 flag 的文件,即可获取 flag -End-
- CentOS 8 安装更新国内清华大学源手记【亲测成功】
一直和各种OS打交道,仍觉得自己是小白,故深知小白们的困惑和蛋碎,特此将安装更新源的细节和步骤做了详细整理,供大家参考.红字是命令和提示,深灰色代码框中是源配置,本文采用了清华大学CentOS 8的源 ...
- k8s 深入篇———— docker 镜像是什么[二]
前言 简单介绍一下docker的镜像. 正文 前面讲到了容器的工作原理了(namespace 限制了时间, cgroup限制了资源),知道docker 历史的也知道,docker 之所以能够称为容器大 ...
- android 关于插件包内的依赖版本不一致问题得解决
前言 今天使用一个插件包的时候,依赖包冲突了,在此记录一下. 正文 在引用一个: debugImplementation 'com.squareup.leakcanary:leakcanary-and ...
- android 找不到设备
前言 当我们安装android studio的时候,测试的时候,你可能找不到设备. 我遇到的有两种情况,一种是本身就需要安装插件,如一些低端机或者有些小米机. 还有一种情况需要去触发一下,有些华为手机 ...
- Pytorch-tensor维度的扩展，挤压，扩张
数据本身不发生改变,数据的访问方式发生了改变 1.维度的扩展 函数:unsqueeze() # a是一个4维的 a = torch.randn(4, 3, 28, 28) print('a.shape ...