Cesium教程01_认识View_goview cesium-CSDN博客

本文链接：https://blog.csdn.net/w131552/article/details/143969482

Cesium 地图视图组件

一、引言

在三维地球可视化中，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 Viewer
      viewer = 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>