从零搭建Cesium+vue3+vite

周太密
2,433 阅读4分钟

介绍

在现代前端开发中，Cesium 是一个功能强大的 WebGL 库，广泛应用于3D地球可视化、空间数据展示等领域。结合 Vue 3 的组件化开发模式，我们可以创建一个高效且可维护的 3D 地图应用。本文将带你一步步搭建一个简单的 Cesium + Vue 3 项目，并且对各个功能模块进行细致划分，帮助你快速上手。

一、环境准备

首先，确保你本地安装了以下工具：

  • Node.js（推荐版本 v16 以上）：用于运行开发服务器
  • Vue CLI 或 Vite：用来快速创建 Vue 3 项目

你可以使用以下命令检查 Node.js 是否已经正确安装：

node -v

 我这里用的是18.20.1，接下来，创建一个新的 Vue 3 项目。

二、创建 Vue 3 项目

我们将使用 Vite 来创建一个 Vue 3 项目，因为 Vite 构建速度快，配置简单。

在终端中执行以下命令来初始化项目：

npm init vite@latest cesium-vue-app --template vue 

cd cesium-vue-app npm install 

npm run dev

此时，你应该能在浏览器中看到一个基础的 Vue 3 应用。

三、安装 Cesium

接下来，我们需要在 Vue 3 项目中集成 Cesium。我们可以使用 npm 安装 Cesium 库：

npm install cesium

安装完成后，Cesium 的包已经准备好在项目中使用。但由于 Cesium 包含大量的 3D 资源文件，我们还需要对 Vite 进行一些配置，以便正确加载 Cesium 的静态资源。

四、配置 Vite 以支持 Cesium

要让 Vite 正确处理 Cesium 的静态资源，我们需要在 vite.config.js 中进行一些配置。

在项目根目录中找到 vite.config.js 文件，打开并添加以下代码：

import {defineConfig, loadEnv} from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import cesium from 'vite-plugin-cesium'

export default defineConfig(({mode, command}) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [cesium(),...createVitePlugins(env, command === 'build'),],
    assetsInclude: ['**/*.glb'],
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
      port: 4200, // 自定义的服务器端口
      host: true,
      open: false,
      cors: true, //允许跨域
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:3000',
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^/api/, '')
        }
      }
    },
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
      }
    },
  }
})

在 main.js 中导入 Cesium 的样式文件：

import 'cesium/Build/Cesium/Widgets/widgets.css';

这将确保 Cesium 的 UI 元素，如地球控件，能够正确渲染。

五、创建 Cesium 地球组件

现在，我们来创建一个 Vue 组件，用于渲染 Cesium 地球。我们将这个组件命名为 CesiumMap.vue。

在 src下创建cesium文件夹用来存放操作地图的一些js文件

ps: 这里的封装只是我对地图与vue3的一些理解(个人认为有一些过度封装)；如有其他意见可以评论区讨论；

再在cesium文件夹下创建map.init.js和map.config.js文件，添加如下代码:

    // map.init.js

    import {ref} from 'vue'
    import * as Cesium from 'cesium'
    import {mapOptions, tiandituAnnotationProvider} from "@/cesium/map.config.js";

    const cesium_token = '注册cesium token'

    export const map = ref(null)

    export const mapInit = () => {
      Cesium.Ion.defaultAccessToken = cesium_token
      map.value = new Cesium.Viewer('cesiumContainer', mapOptions())
      // 天地图注记
      map.value.imageryLayers.addImageryProvider(tiandituAnnotationProvider);
      // 启用深度检测
      map.value.scene.globe.depthTestAgainstTerrain = true
    }

    export const mapDestroy = () => {
      if (map.value) {
        map.value.destroy()
        map.value = null;
      }
    }

这里我用的是天地图，当然也可以替换为其他地图服务；

    // map.config.js
    import * as Cesium from 'cesium';

    const tiandituKey = "替换为你的天地图 API Key";
    const tiandituImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
      url : `https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${tiandituKey}`,
      layer : 'img',
      style : 'default',
      format : 'tiles',
      tileMatrixSetID : 'w',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      maximumLevel : 18
    });

    // 加载天地图影像注记
    export const tiandituAnnotationProvider = new Cesium.WebMapTileServiceImageryProvider({
      url : `https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=${tiandituKey}`,
      layer : 'cia',
      style : 'default',
      format : 'tiles',
      tileMatrixSetID : 'w',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      maximumLevel : 18
    });

    // 地图配置项
    export const mapOptions = () => {
      return {
        infoBox: false, // 右侧信息框
        selectionIndicator: false, //选中状态
        imageryProvider: tiandituImageryProvider , // 设置影像地图
        // terrainProvider: Cesium.createWorldTerrain({
        //   requestVertexNormals: true,  //可以增加法线，用于提高光照效果
        //   requestWaterMask: true // 水面特效
        // }), // 地形图层
        scene3DOnly: false,
        timeline: false, //时间轴控件
        animation: false, //动画控件
        geocoder: false, //搜索控件
        homeButton: false, //主页控件
        sceneModePicker: false, //投影控件
        baseLayerPicker: false, //图层控件
        navigationHelpButton: false, //帮助控件
        fullscreenButton: false, //全屏控件
      }
    }

在 src/components 文件夹中创建一个新文件 CesiumMap.vue，并添加以下代码：

    <template>
      <div id="cesiumContainer"></div>
    </template>

    <script setup>
    import {onMounted, onUnmounted} from 'vue'
    import {mapDestroy, mapInit} from "@/cesium/map.init.js";

    onMounted(() => {
      mapInit()
    })

    onUnmounted(() => {
      mapDestroy()
    })
    </script>

    <style scoped>
    #cesiumContainer {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    :deep(.cesium-viewer-bottom) {
      display: none;
    }
    </style>

在 App.vue 中引入并使用这个组件：

    <template>
      <div id="app">
        <CesiumMap />
      </div>
    </template>

    <script setup>
    import CesiumMap from '@/components/CesiumMap.vue';

    </script>

    <style>
    </style>

六、启动项目并查看效果

现在我们已经完成了 Cesium 与 Vue 3 的集成。运行启动项目打开浏览器，你应该能看到一个 3D 地球被渲染在页面中，Cesium 的所有基础控件都已生效。

image.png

总结

通过本篇教程，我们完成了从零搭建 Cesium + Vue 3 项目的基础步骤，并展示了如何使用 Cesium 渲染 3D 地图和进行简单的自定义操作。结合 Vue 3 的响应式和组件化开发优势，你可以进一步扩展应用的功能，比如添加地图交互、数据可视化等。

希望这篇文章能帮助你快速上手 Cesium 和 Vue 3 的集成。如果有任何问题，欢迎在评论区交流！

avatar
文章
阅读
粉丝