cesium在开发的时候有可能会加载不同的影像，今天就先看一下加载谷歌的吧。

使用谷歌有个好处就是基本不会出现此区域无卫星图的情况

闲言话语不多说，看代码

<template><div id="cesiumContainer" style="height: 100vh;"></div><div id="toolbar" style="position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item>地图示例</el-breadcrumb-item><el-breadcrumb-item>谷歌影像</el-breadcrumb-item></el-breadcrumb></div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesium.js";onMounted(() => {let initCesium = new InitCesium('cesiumContainer')let viewer = initCesium.initViewer({});var img_vec = new Cesium.UrlTemplateImageryProvider({subdomains: ["1", "2", "3"],url: 'http://mt{s}.google.cn/vt/lyrs=m&hl=zh-CN&x={x}&y={y}&z={z}'});var layers = viewer.scene.imageryLayers;// layers.removeAll();layers.addImageryProvider(img_vec);
})
</script>
<style scoped>
#cesiumContainer {overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {color: #ffffff !important;
}
</style>

效果图：

InitCesium.js

import * as Cesium from "cesium";class InitCesium {constructor(cesiumContainer, options) {this.cesiumContainer = cesiumContainer;}initViewer(options) {Cesium.Ion.defaultAccessToken = 'token';// 西南东北，默认显示中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);return new Cesium.Viewer(this.cesiumContainer, options);}
}export default InitCesium