Cesium初始化地图的时，可以选择在线底图、自定义发布的底图，也可以选择一张图片作为地球的底图。
具体方法如下：
1、选择一张世界底图的图片，比例最好是2：1。
image
2、因为我是在vue框架下使用的cesium，需要在使用之前，以import的方式导入图片的url，然后在data()处获取url。
import url from "../../../assets/image/worldimage.jpg"
data() {
return {
imageUrl:url
}
},
3、初始化地图的参数中，设置imageryProvider为使用单个图片的方式。
imageryProvider: new this.Cesium.SingleTileImageryProvider({
// credit: "",
url: this.imageUrl
}),
最终效果如下：
image
附上详细代码：
<template>
<div id="cesiumContainer">
</div>
</template>
<script type="text/javascript">
import url from "../../../assets/image/worldimage.jpg"
export default {
data() {
return {
imageUrl:url
}
},
computed: {
},
components: {
},
methods: {
initMap() {
let viewer = new this.Cesium.Viewer('cesiumContainer',{
animation: false, //是否创建动画小器件，左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器,与scene3DOnly不能同时为true
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
imageryProvider: new this.Cesium.SingleTileImageryProvider({
// credit: "",
url: this.imageUrl
}),
})
}
},
mounted() {
// 初始化底图
this.initMap()
}
}
</script>
<style>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
