Vue2.x集成Cesium

最新推荐文章于 2025-04-07 15:21:17 发布

MLAY

最新推荐文章于 2025-04-07 15:21:17 发布

阅读量772

点赞数

分类专栏： Vue Cesium 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_32492777/article/details/115749397

版权

Vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

Cesium

6 篇文章

订阅专栏

本文档详细介绍了如何在Vue2.x项目中安装和配置Cesium，包括通过npm安装，修改webpack配置文件以处理Cesium资源，以及在main.js中引入Cesium库。主要步骤包括修改webpack的base, dev和prod配置，以及在main.js中设置全局变量。

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

1、Vue2.x安装Cesium，执行命令：

cnpm install cesium --save

2、修改build文件夹下的3个配置文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js

（1）修改webpack.base.conf.js文件

const cesiumSource = '../node_modules/cesium/Source'

修改module.exports如下图所示：

在modules.exports模块中的output里添加

sourcePrefix: ' '

在modules.exports模块中添加

 amd: {
    toUrlUndefined: true
  },

在modules.exports模块中的resolve里的alisa里添加

'cesium': path.resolve(__dirname, cesiumSource)

修改module如下图所示：

在module模块中的rules中添加：

 {
     //Strip cesium pragmas 删除编译指示               //flag
     test: /\.js$/,
     enforce: 'pre',
     include: path.resolve(__dirname, cesiumSource),
     use: [{
       loader: 'strip-pragma-loader',
       options: {
         pragmas: {
           debug: false
         }
       }
     }]
  },

在module中添加：

unknownContextCritical: false  //屏蔽警告

（2）修改webpack.dev.conf.js文件

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

修改devWebpackConfig如下图所示：

在devWebpackConfig模块的plugins中添加：

'CESIUM_BASE_URL': JSON.stringify('')

 new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'Workers'
    }]), //flag
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'),
      to: 'Assets'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'),
      to: 'Widgets'
    }]),

（3）修改webpack.prod.conf.js文件

const cesiumSource = 'node_modules/cesium/Source'; //flag
const cesiumWorkers = '../Build/Cesium/Workers';

修改webpackConfig如下图所示：

在webpackConfig模块的plugins中添加：

'CESIUM_BASE_URL': JSON.stringify('static')

 new CopyWebpackPlugin([{
      from: path.join(cesiumSource, cesiumWorkers),
      to: 'static/Workers'
    }]), //flag
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Assets'),
      to: 'static/Assets'
    }]),
    new CopyWebpackPlugin([{
      from: path.join(cesiumSource, 'Widgets'),
      to: 'static/Widgets'
    }]),

3、在main.js中引入cesium

//新版本的cesium 不支持以前的import 方式导入  这是个坑
var Cesium = require('cesium/Cesium.js');
var widgets = require('cesium/Widgets/widgets.css');
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets