Vue3 + Cesium 环境搭建

最新推荐文章于 2025-03-17 12:31:02 发布

一只蜗牛儿

最新推荐文章于 2025-03-17 12:31:02 发布

阅读量2k

点赞数 18

文章标签： node.js

本文链接：https://blog.csdn.net/qq_42978535/article/details/143574173

版权

Cesium 是一个开源的 3D 地球引擎，用于显示和分析地理空间数据。它提供了强大的功能，可以帮助开发者在 Web 应用中实现 3D 地图、地理信息分析等功能。在本文中，我们将介绍如何在 Vue3 项目中集成 Cesium，并展示基本的环境搭建和功能实现。

1. 环境准备

1.1 安装 Node.js

Vue3 和 Cesium 都依赖于 Node.js。请确保你已安装 Node.js。如果尚未安装，可以访问 Node.js 官方网站下载并安装最新的稳定版本。

1.2 创建 Vue3 项目

我们使用 Vue CLI 创建一个 Vue3 项目，Vue CLI 是一个强大的工具，用于快速生成 Vue.js 项目。打开终端，执行以下命令：

npm install -g @vue/cli
vue create vue-cesium-project

按照提示选择项目配置，确保选择了 Vue 3.x 版本。

进入项目目录：

cd vue-cesium-project

1.3 安装 Cesium

安装 Cesium 的 npm 包：

npm install cesium

为了让 Cesium 在 Vue 项目中正常工作，我们还需要做一些配置。

2. 配置 Cesium

Cesium 包含一些静态资源，如样式文件、图片和字体。为了确保 Cesium 能正常显示这些资源，需要正确配置 Webpack。

2.1 修改 `vue.config.js`

在项目根目录下创建或修改 vue.config.js 配置文件，添加 Cesium 的资源路径配置。

// vue.config.js
const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('cesium', path.resolve(__dirname, 'node_modules/cesium'));

    // 启用 Cesium 静态资源的 Webpack 配置
    config.plugin('define').tap(args => {
      args[0]['CESIUM_BASE_URL'] = JSON.stringify('/cesium/');
      return args;
    });
  },
  configureWebpack: {
    // Cesium 的静态文件路径配置
    module: {
      rules: [
        {
          test: /\.json$/,
          include: path.resolve(__dirname, 'node_modules/cesium'),
          type: 'javascript/auto'
        }
      ]
    }
  }
};

2.2 配置 Cesium 的静态资源目录

创建一个 public/cesium 目录，并将 Cesium 中需要的静态资源复制到该目录。

mkdir -p public/cesium
cp -r node_modules/cesium/Build/Cesium/Assets public/cesium/
cp -r node_modules/cesium/Build/Cesium/Widgets public/cesium/
cp node_modules/cesium/Build/Cesium/cesium.js public/cesium/

这些文件会被用来在浏览器中渲染 3D 地球。

3. 编写 Vue 组件

3.1 创建 Cesium 组件

在 src/components 目录下创建一个 CesiumViewer.vue 文件，来显示 Cesium 3D 地球视图。

<template>
  <div id="cesiumContainer" class="cesium-container"></div>
</template>

<script>
// 引入 Cesium
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

export default {
  name: 'CesiumViewer',
  mounted() {
    this.initializeCesium();
  },
  methods: {
    initializeCesium() {
      // 创建 Cesium 视图
      const viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProviderViewModel: Cesium.createDefaultImageryProviderViewModel(),
        terrainProviderViewModel: Cesium.createDefaultTerrainProviderViewModel(),
        shouldAnimate: true,
        useDefaultRenderLoop: true
      });

      // 在 Cesium 地球上添加一个简单的点
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.3914, 39.9067), // 北京的经纬度
        point: { pixelSize: 10, color: Cesium.Color.RED }
      });
    }
  }
};
</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 500px;
}
</style>

3.2 引入组件

在 src/App.vue 中引入 CesiumViewer 组件，并在模板中使用它。

<template>
  <div id="app">
    <h1>Vue3 + Cesium 3D 地球</h1>
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from './components/CesiumViewer';

export default {
  name: 'App',
  components: {
    CesiumViewer
  }
};
</script>

<style>
#app {
  text-align: center;
}
</style>