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;//关键代码:对图层的相关参数进行修改,从而实现亮度对比度变化