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