原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Imagery%20Adjustment.html&label=All

效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<style>
  @import url(../templates/bucket.css);
  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }
  #toolbar input {
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>亮度</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>对比度</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>色调</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>饱和度</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const imageryLayers = viewer.imageryLayers;

const viewModel = {
  brightness: 0,//亮度，默认值1.0，表示不修改，大于1.0图像变亮，小于1.0图像变暗
  contrast: 0,//对比度，默认值1.0，表示不修改，大于1.0增加对比度，小于1.0降低对比度
  hue: 0,//色调，以弧度表示，默认值0.0，值范围在0.0到1.0。0.0表示无变化，0.5表示180度色相旋转。
  saturation: 0,//饱和度，默认值是1.0，表示不修改。小于 1.0 会降低饱和度，大于 1.0 则会增加饱和度。
  gamma: 0,//(图像)gamma值， 用于改变亮度分布。
};

Cesium.knockout.track(viewModel);

const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

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");

imageryLayers.get(0).saturation = 3.0;//这里将饱和度改为3.0，默认值为1.0

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;
  }
}
imageryLayers.layerAdded.addEventListener(updateViewModel);
imageryLayers.layerRemoved.addEventListener(updateViewModel);
imageryLayers.layerMoved.addEventListener(updateViewModel);
updateViewModel();