在appvue中,cesium支持更換不同的地圖資源,代碼如下

<template><div id="cesiumContainer" ref="cesiumContainer"></div>
</template><script setup>
import * as Cesium from 'cesium';
import "./Widgets/widgets.css";
import { onMounted } from "vue";// 設置token
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjZhNGZhMC0wMmE3LTQzNTYtOTVhMS1kNGMwYWE4MGU2OWMiLCJpZCI6Mjk5MDI5LCJpYXQiOjE3NDYxOTUyNzd9.NRRbOaONp0YD1lYHI9TSr1owFjaNSYBHqfKT3vRbaJs";// 設置cesium靜態資源
window.CESIUM_BASE_URL = "/";onMounted(() => {var viewer = new Cesium.Viewer("cesiumContainer", {// 是否顯示信息窗口infoBox: true,// 是否顯示查詢按鈕geocoder: true,// 不顯示home按鈕homeButton: false,// 控制查看器的顯示模式sceneModePicker: true,// 是否顯示圖層選擇baseLayerPicker: true,// 設置影像提供者imageryProvider: new Cesium.OpenStreetMapImageryProvider({url: "https://a.tile.openstreetmap.org/"  // }),});// 隱藏logoviewer.cesiumWidget.creditContainer.style.display = "none";
});
</script><style>
* {margin: 0;padding: 0;
}
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>

示例中使用的是osm地圖修改完成后如圖所示

地圖資源已被更換