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;//关键代码：对图层的相关参数进行修改，从而实现亮度对比度变化
浙公网安备 33010602011771号