数据可视化大屏项目开发中，客户要求cesium地图可以离线访问，好在客户要求地图层级不高，只需要0-10级的全球地图就可以了。我们准备好事先购买的离线地图资源，文件不小，大概有7个G，如果全部都是18级地图的话，资源估计就是按T来算了。

cesium 版本

    "cesium": "1.114.0",

动态效果

这里本地离线资源地址为

10.211.55.6

cesium加载离线底图代码

<template>
  <div class="mainBody">
    <div class="cesiumBody" id="cesiumBody" ref="cesiumBody"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { link } from '@/config/config'
import * as Cesium from 'cesium'

// 设置cesium的静态资源路径
window.CESIUM_BASE_URL = link + 'cesium'

// 禁用Ion服务
Cesium.Ion.defaultAccessToken = undefined;

const cesiumBody = ref(null)
let viewer

onMounted(async () => {
  await initCesium()
})

onUnmounted(() => {
  if (viewer) {
    viewer.destroy()
  }
})

const initCesium = async () => {
  try {
    // 使用EllipsoidTerrainProvider代替在线地形服务
    const terrainProvider = new Cesium.EllipsoidTerrainProvider();

    viewer = new Cesium.Viewer(cesiumBody.value, {
      terrainProvider: terrainProvider,
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      vrButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      skyBox: false,
      skyAtmosphere: false,
      contextOptions: {
        webgl: {
          alpha: true,
          failIfMajorPerformanceCaveat: false
        }
      }
    })
    viewer.cesiumWidget.creditContainer.style.display = 'none'
    viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
    viewer.scene.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "http://10.211.55.6/MapServer/mbtiles/google_yx_global0-10/{x}/{y}/{z}",
          fileExtension: "png",
        })
    );
    // 设置初始视图
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.397428, 29.90923, 50000000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0.0
      }
    })

  } catch (error) {
    console.error('初始化Cesium失败:', error)
  }
}
</script>
<style lang="scss" scoped>
.mainBody {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cesiumBody {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
</style>