cesium 加载单张图作为地图

cesium提供的 SingleTileImageryProvider类，可以加载单张图片为影像服务。

1. SingleTileImageryProvider类

SingleTileImageryProvider的使用示例如下

function getSingleUrlByName(name){
  return require(`@/assets/img/earth/${name}.jpg`)
}

function addSingleLayer(options) {
  let url = getSingleUrlByName(options.name)
  const layerProvider = new Cesium.SingleTileImageryProvider({
    url: url
  });
  viewer.imageryLayers.addImageryProvider(layerProvider);
}

2. 完整示例代码

MapWorks,js

// 初始视图定位在中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
let viewer = null;

function initMap(container) {
  viewer = new Cesium.Viewer(container, {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false, 
    scene3DOnly: true,
    orderIndependentTranslucency: false,
    contextOptions: {
      webgl: {
        alpha: true
      }
    }
  })
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  viewer.scene.fxaa = true
  viewer.scene.postProcessStages.fxaa.enabled = true
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    viewer.resolutionScale = window.devicePixelRatio
  }
  // 移除默认影像
  removeAll()
  // 地形深度测试
  viewer.scene.globe.depthTestAgainstTerrain = true
  // 背景色
  // viewer.scene.globe.backgroundColor = new Cesium.Color(0, 0, 0, 0)
  viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0)
  // viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0)
}

function getSingleUrlByName(name){
  return require(`@/assets/img/earth/${name}.jpg`)
}

function addSingleLayer(options) {
  let url = getSingleUrlByName(options.name)
  const layerProvider = new Cesium.SingleTileImageryProvider({
    url: url
  });
  viewer.imageryLayers.addImageryProvider(layerProvider);
}


function changeBaseMap(type) {
  removeAll()
  switch(type) {
    case 0: //常规地球
      addSingleLayer({
        name: 'world_1'
      })
      break
    case 1: //午夜地球
      addSingleLayer({
        name: 'world_2'
      })
      break
    case 2: //蓝色地球
      addSingleLayer({
        name: 'world_3'
      })
      break
  }
}

function removeAll() {
  viewer.imageryLayers.removeAll();
}

function destroy() {
  viewer.entities.removeAll();
  viewer.imageryLayers.removeAll();
  viewer.destroy();
}

function setView(coords,hpr) {
  viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], coords[2]),
    orientation: {
      heading: Cesium.Math.toRadians(hpr.heading),
      pitch: Cesium.Math.toRadians(hpr.pitch),
      roll: Cesium.Math.toRadians(hpr.roll),
    }
  });
}


export {
  initMap,
  addSingleLayer,
  changeBaseMap,
  setView,
  removeAll,
  destroy
}

 SingleLayer.vue

<!--
 * @Description: 
 * @Author: maizi
 * @Date: 2023-04-03 11:34:28
 * @LastEditTime: 2023-04-04 16:58:02
 * @LastEditors: maizi
-->

<template>
  <div id="container">
    <div class="pane_container">
      <el-button size="small" @click="changeMap(0)">常规地球</el-button>
      <el-button size="small" @click="changeMap(1)">午夜地球</el-button>
      <el-button size="small" @click="changeMap(2)">蓝色地球</el-button>
    </div>
  </div>
</template>

<script>
import * as MapWorks from './js/MapWorks'
export default {
  name: 'ArcgisLayer',
  mounted() {
    this.init();
  },
  beforeDestroy(){
    //实例被销毁前调用，页面关闭、路由跳转、v-if和改变key值
    MapWorks.destroy();
  },

  methods:{
    init(){
      let container = document.getElementById("container");
      MapWorks.initMap(container)
      MapWorks.changeBaseMap(0)
    },
    changeMap(index){
      MapWorks.changeBaseMap(index)
    }
  }

}
</script>

<style lang="scss" scoped>
#container{
  width: 100%;
  height: 100%;
  background: rgba(7, 12, 19, 1);
  overflow: hidden;
  background-size: 40px 40px, 40px 40px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 0);
  .pane_container{
    position: absolute;
    left: 10px;
    top: 50px;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
    z-index: 2;
  }
}


</style>

3 运行结果