添加顶级影像瓦片

使用SingleTileImageryProvider添加顶级影像瓦片，下面为单张图片加载

展开代码

<template>
  <div ref="cesiumContainer" class="container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;

onMounted(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    baseLayer: false, // 关闭默认地图
    baseLayerPicker: false, // 关闭底图选择器
  });
  initMap();
});

// 加载单图像图层
const initMap = () => {
  const singleTileLayer = Cesium.ImageryLayer.fromProviderAsync(
    Cesium.SingleTileImageryProvider.fromUrl("/src/assets/earthbump1k.jpg", {
      rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
    })
  );
  // singleTileLayer.alpha = 0.8; // 设置透明度
  viewer.imageryLayers.add(singleTileLayer);
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

img 图片：

添加后效果图，可通过alpha属性设置透明度