cesium之自定义地图与地图叠加

在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/"  // 
    }),
  });

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

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

地图资源已被更换