VueCli 3.X 集成 Cesium - Cesium 开发笔记 01篇_vue cli3 cesium alias-优快云博客

本文链接：https://blog.youkuaiyun.com/WO_BEN_FAN_SU/article/details/111523058

本文介绍如何使用 Vue 和 Cesium 搭建一个地理信息系统 (GIS) 的前端展示平台，涵盖环境搭建、Cesium 引入及基本配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司竞标拿到了一个和海有关的项目，要做一个【二、三维展示分析系统】，应用层选用 Vue + Cesium + Element 作为技术支持，服务层选用 ArcGIS Server 作为GIS服务支持，数据库选用 Oracle 作为数据支持，涉及到的功能类型有展示、控制、分析、对比、打印、计算。。。。。。太多了（后续功能跟着开发进度慢慢更新吧）

前方正文👇

首先你应该有一些环境（如：node、Vue、Vue-cli 3.x 等），没有的话请自行查阅安装（百度安装教程很多很简单）

开始搭建项目

一、环境说明

二、创建vue项目

// 在想要创建项目的目录下打开cmd,执行下面内容 （project 为项目命名）     
vue create project

注：空格键是选中与取消，A键是全选

三、引入Cesium

在这里有俩种引入cesium的方案，方案一是通过npm安装，方案二是在前面搭建好的项目中的public文件中引用cesium文件夹，具体操作请往下看

方案一：

1. 安装Cesium依赖

npm i cesium --save

2. 在项目的 -根目录新增 配置文件 vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
  publicPath: "./",
  outputDir: "dist",
  lintOnSave: false,
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 1205,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

3. 在 main.js 中新增引用

import Cesium from 'cesium/Cesium' //from 中 cesium 指向的是vue.config.js中 alias对象中的别名
// noinspection ES6UnusedImports
import widget from 'cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

方案二：

1. 在前面搭建好的项目中的public文件中引用cesium文件夹

补充：有人私信问我为什么从官网下载的Cesium文件夹里的这四个文件不能用，确认原因后特地回来补充，要用官方文件夹下 Build >> Cesium 下的这几个文件，而不是！而不是！而不是！ Source 文件夹里的这几个文件

2. 在 index.html 页面中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    //  第一处引入
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>

    //  第二处引入
    <script src="Cesium/Cesium.js"></script>

  </body>
</html>

最后。。。在vue中初始化一个容器存放内容，看到地球就成功了

<div id="CesiumViewer"></div>

//CesiumViewer 为地图容器的ID
let viewer = new Cesium.Viewer('CesiumViewer',{
	geocoder: false, // 搜索框
	baseLayerPicker: false, // 切换底图
	navigationHelpButton: false, // 帮助信息
	animation: false, // 动画控件（左下角）
	timeline: false, // 时间线  -- false时 数据源 viewer 的timeline值为空 无法支持调用 会导致error
	homeButton: false, // home键
	sceneModePicker: false, // 切换 2D、2.5D、3D （投影方式）
	fullscreenButton: false, // 全屏显示
	selectionIndicator: false, // 屏蔽鼠标点击触发的绿色瞄准框
	infoBox: false,  // 信息提示框不显示
	shouldAnimate: true,   //  动画自启动
})
//去除 版权图标
viewer._cesiumWidget._creditContainer.style.display="none";