vite vue3 使用 cesium 创建地图

vite vue3 使用 cesium 创建地图

1. 安装插件

npm i cesium vite-plugin-cesium

2. 配置 vite.config 文件

import cesium from "vite-plugin-cesium";

// plugins 添加 cesium
plugins: [
    vue(),
    cesium(),
]

3. vue 文件使用 cesium

<template>
  <div id="CesiumContainer" class="CesiumContainer" ref="cesium"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as Cesium from "cesium";

const cesium = ref(null);
const viewer = ref<Cesium.Viewer | null>(null);


/**
 * 初始化Cesium地图并设置暗色主题
 * 定位到指定经纬度位置
 */
onMounted(() => {
  // 配置Cesium Token（如果需要）
  // Cesium.Ion.defaultAccessToken = 'your-token-here';

  // 初始化Cesium查看器
  viewer.value = new Cesium.Viewer(cesium.value as unknown as HTMLElement, {
    // 设置暗色主题
    baseLayerPicker: false, // 禁用默认的图层选择器
    animation: false, // 禁用动画控件
    timeline: false, // 禁用时间线控件
    fullscreenButton: false, // 禁用全屏按钮
    infoBox: false, // 禁用信息框
    navigationHelpButton: false, // 禁用导航帮助按钮
    homeButton: false, // 禁用home按钮
    sceneModePicker: false, // 禁用场景模式选择器
    selectionIndicator: false, // 禁用选择指示器
    geocoder: false, // 禁用地理编码器
    // 使用暗色地图
    // imageryProvider: new Cesium.TileMapServiceImageryProvider({
    //   url: Cesium.buildModuleUrl('Assets/Textures/NightLights')
    // }),
    skyBox: false, // 禁用天空盒
    skyAtmosphere: false, // 禁用大气层
    contextOptions: {
      webgl: {
        alpha: true,
      },
    },
  });

  // 设置地球为暗色
  viewer.value.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 1.0);
  viewer.value.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 1.0);

  // 禁用地形光照
  viewer.value.scene.globe.enableLighting = false;

  // 注释掉原来的定位代码，因为我们将使用flyToLineStringMiddle函数
  const targetPosition = Cesium.Cartesian3.fromDegrees(
    118.725305, // 经度
    31.684129,  // 纬度
    50000        // 高度（米）
  );

  // 设置相机位置
  viewer.value.camera.flyTo({
    destination: targetPosition,
    orientation: {
      heading: Cesium.Math.toRadians(0), // 朝向角度
      pitch: Cesium.Math.toRadians(-60), // 俯仰角度
      roll: 0
    },
    duration: 2 // 飞行时间（秒）
  });

  // // 添加一个标记点（可选）
  // viewer.value.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(118.725305, 31.684129),
  //   point: {
  //     pixelSize: 10,
  //     color: Cesium.Color.CYAN
  //   }
  // });
});

/**
 * 组件卸载时销毁Cesium实例，释放资源
 */
onUnmounted(() => {
  if (viewer.value) {
    viewer.value.destroy();
    viewer.value = null;
  }
});
</script>

<style scoped lang="scss">
.CesiumContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>