一站式网站建设供应商制作网站费用
Cesium 地图视图组件
目录
- 一、引言
- 二、功能说明
- 三、代码实现
- 1. 模板结构
- 2. 脚本逻辑
- 3. 样式设计
- 四、总结
一、引言
在三维地球可视化中，Cesium 是一个强大的开源 JavaScript 库，它能够展示精美的地球和地图应用。本示例展示了如何使用 Vue 组件化封装 Cesium Viewer，并隐藏部分默认的界面控件。
二、功能说明
通过本组件，用户可以：
- 显示三维 Cesium 地图。
- 自定义控件显示：隐藏 Cesium 的默认控件，如工具栏、时间线等。
- 优化 UI：版权信息被移至自定义位置，保持界面简洁。
三、代码实现
以下是完整代码实现。
1. 模板结构
<template><div class="cesium-map-container"><!-- Cesium 地图容器 --><div ref="cesiumContainer" class="cesium-container"></div><!-- 版权信息容器 --><div id="credit"></div></div>
</template>
2. 脚本逻辑
<script>
import { onMounted, ref } from "vue";
import { Viewer } from "cesium";export default {name: "CesiumMapView",setup() {const cesiumContainer = ref(null); // 地图容器的引用let viewer = null;onMounted(() => {// 初始化 Cesium Viewerviewer = new Viewer(cesiumContainer.value, {geocoder: false, // 隐藏查找位置工具homeButton: false, // 隐藏返回初始位置按钮sceneModePicker: false, // 隐藏视角模式切换器baseLayerPicker: false, // 隐藏图层选择器navigationHelpButton: false, // 隐藏导航帮助animation: false, // 隐藏动画控件timeline: false, // 隐藏时间线fullScreenButton: false, // 隐藏全屏按钮vrButton: false, // 隐藏 VR 按钮creditContainer: "credit", // 将版权信息放置到自定义位置});// 启用帧速显示viewer.scene.debugShowFramesPerSecond = true;});return {cesiumContainer,};},
};
</script>
3. 样式设计
<style>
/* 地图容器样式 */
.cesium-map-container {position: relative;width: 100%;height: 100vh;overflow: hidden;
}.cesium-container {width: 100%;height: 100%;
}/* 自定义隐藏界面元素的 CSS */
.cesium-viewer-toolbar, /* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom { /* 底部 logo 信息 */display: none !important;
}.cesium-viewer-fullscreenContainer { /* 全屏按钮 */position: absolute;top: -999em;
}
</style>
四、总结
本组件通过 Vue 的 ref 和生命周期函数实现了对 Cesium Viewer 的封装，并定制了控件的隐藏与显示。通过这种方式，开发者可以快速集成 Cesium 到 Vue 项目中，同时保持界面美观与简洁。