当前位置：首页 > news >正文

Cesium隐藏默认控件

news 2025/6/30 12:06:03

终于有时间开始整理下知识点了。

开搞

本地环境 vue3+vite+cesium
vite和cesium都是最新版本
这里有个问题需要注意，就是如何为Cesium配置Vite，随便检索一下，大部分都时通过插件【vite-plugin-cesium】作为解决方案，我本地创建新的示例项目使用这个插件的时候，总是报错，虽然能正常加载场景，但是控制台确实会输出错误 ε=(´ο｀*)))，后来翻了下Cesium官方的blog，已经有人贡献了解决方案。也有示例代码

本章节代码

<template><div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template><script setup>
import { onMounted } from 'vue';
import {Ion, Viewer} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
onMounted(() => {// 设置 Cesium Ion 访问令牌Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNmQ5NDYyNi1lZTdhLTRiYTItODFiZi1mYzNiYWNjNDFjMzgiLCJpZCI6NTk3MTIsImlhdCI6MTY2MDE4MDAyNX0.bDTaHEah0hRjUyJWz0hyxIL0Fg63awPXV26OmQ5MCdM'; // 替换为你的访问令牌const viewer = new Viewer('cesiumContainer', {animation: false, // 移除动画控件timeline: false, // 移除时间轴控件geocoder: false, // 移除地理编码控件homeButton: false, // 移除主页按钮sceneModePicker: false, // 移除场景模式选择器selectionIndicator: false, // 移除选择指示器fullscreenButton: false, // 移除全屏按钮vrButton: false // 移除 VR 按钮});
});
</script><style>
/* 隐藏页面底部的 Cesium logo 和数据归属 */
.cesium-viewer .cesium-widget-credits {display: none !important; /* 隐藏整个 Cesium 控件 */
}/* 隐藏 右上角的 Imagery 和 Navigation instructions */
.cesium-viewer .cesium-viewer-toolbar {display: none !important; /* 隐藏工具栏 */
}
</style>