原文链接及内容

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

效果如下图所示：

Cesium Logo图片如下：

id编号的3812的 Cesium ion 资源如下：

示例代码如下：

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
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  infoBox: false,
  baseLayerPicker: false,
  /**
   * ImageryLayer.fromWorldImagery: 使用 ion 的默认全球基础影像图层（当前为必应地图）创建新的影像图层。
   * 
   * IonWorldImageryStyle：
   *  - AERIAL：航拍影像
   *  - AERIAL_WITH_LABELS：带道路覆盖层的航拍影像
   *  - ROAD：无附加影像的道路
   */
  baseLayer: Cesium.ImageryLayer.fromWorldImagery({
    style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
  }),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const layers = viewer.scene.imageryLayers;

const blackMarble = Cesium.ImageryLayer.fromProviderAsync(
  Cesium.IonImageryProvider.fromAssetId(3812),
);
blackMarble.alpha = 0.5;
blackMarble.brightness = 2.0;
layers.add(blackMarble);

const cesiumLogo = Cesium.ImageryLayer.fromProviderAsync(
  Cesium.SingleTileImageryProvider.fromUrl("../images/Cesium_Logo_overlay.png", {
    rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75),
  }),
);
layers.add(cesiumLogo);