原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Imagery%20Color%20To%20Alpha.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
<style>
  @import url(../templates/bucket.css);
  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }
</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.0"
            max="1.0"
            step="0.01"
            data-bind="value: threshold, valueUpdate: 'input'"
          />
        </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
62
63
64
65
const viewer = new Cesium.Viewer("cesiumContainer", {
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  geocoder: Cesium.IonGeocodeProviderType.BING,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const layers = viewer.scene.imageryLayers;

//将必应基础图层上的海洋(区域)设置为透明
const baseLayer = layers.get(0);
/**
 * colorToAlpha与colorToAlphaThreshold这两个属性通常用于从图像层中“抠除”特定颜色。
 * 例如，在天气图或卫星图像中，可以移除深蓝色海洋背景，以突出显示陆地特征。
 *
 *  - colorToAlpha：设置要透明的颜色，这里可以将 Bing 基础层上的海洋(部分)设置为透明
 *  - colorToAlphaThreshold：设置颜色匹配的阈值，具体地，与colorToAlpha指定的颜色大体相近时都会被设置为透明，
 * 这个差异具体计算公式：Math.sqrt(Math.pow(r1-r2,2),Math.pow(g1-g2,2),Math.pow(b1-b2,2),Math.pow(a1-a2,2))
 */
baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
baseLayer.colorToAlphaThreshold = 0.2; //颜色转透明归一化阈值（范围为：0-1）

/**
 * 添加一个可调节阈值的凸凹贴图层(bump layer)
 *  - “bump layer” 指的是在 Cesium 中用于模拟表面凹凸效果的贴图层，通常用于增强地形的视觉效果。
 * 
 * earthbump1k.jpg 通常是一张凹凸贴图（bump map），用于模拟地球表面的光影效果，增强地形的立体感（如山脉、谷地的阴影效果）。
 */
const singleTileLayer = Cesium.ImageryLayer.fromProviderAsync(
  Cesium.SingleTileImageryProvider.fromUrl("../images/earthbump1k.jpg", {
    rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
  })
);
layers.add(singleTileLayer);

/**
 * 下面的两行代码会将影像层中接近黑色的区域（RGB 接近 0, 0, 0）变为透明。
 * 这意味着，如果 earthbump1k.jpg 中某些区域是黑色或接近黑色，这些区域会变成透明，露出底下的图层
 */
singleTileLayer.colorToAlpha = new Cesium.Color(0.0, 0.0, 0.0, 1.0);
singleTileLayer.colorToAlphaThreshold = 0.1;

const viewModel = {
  threshold: singleTileLayer.colorToAlphaThreshold,
};

Cesium.knockout.track(viewModel);

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

Cesium.knockout
  .getObservable(viewModel, "threshold")
  .subscribe(function (newValue) {
    singleTileLayer.colorToAlphaThreshold = parseFloat(viewModel.threshold);
  });