Cesium笔记 — Vue+Cesium开发环境搭建(基于Cesium1.69)

前言

今天研究了下 Vue + Cesium 的相关配置,用的是 Cesium 1.69。 网上找到了不少参考文章,如:https://www.jianshu.com/p/ff26886f7255
但配置完后使用 import Cesium from 'cesium/Cesium' 导入模块时总会报错:

"export 'default' (imported as 'Cesium') was not found in 'cesium/Cesium'

查找原因,发现 Cesium 1.63 版本之前是用的AMD的方式进行编译的,
5.png

而在1.63版时使用ES6进行了重构:
image.png
所以1.63之后的版本,导入模块时应该使用如下方式:

import * as Cesium from 'cesium/Source/Cesium.js'
//或者:
import {Viewer} from 'cesium/Source/Cesium.js'

这样就不会报错了。如果你遇到了同样的问题,恭喜你接下来的配置步骤可以略过了。

步骤

1. 创建vue项目

使用vue-cli工具创建一个vue项目:

vue init webpack cesium_demo

安装cesium:

cd cesium_demo
npm install cesium --save

2. Cesium环境配置

这里需要修改webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js 三个文件

2.1 配置 webpack.base.conf.js

  • 定义 Cesium 源码路径:
const cesiumSource = '../node_modules/cesium/Source'
  • 让webpack正确处理多行字符串

在output中添加sourcePrefix:' '

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      sourcePrefix: ' '
  },
  • 设置cesium别名,

需要在resolve中设置cesium别名,这样在引入的时候就可以根据别名找到Cesium的包。
(注:也可以不设置别名,导包是直接导入'cesium/Source/Cesium.js'就行。其实设置别名的目的就是让“别名”指向/node_modules/cesium/Source目录)

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      cesium: path.resolve(__dirname, cesiumSource)
    }
  },
  • 阻止依赖警告
    module里添加unknownContextCritical:false
module: {
    rules:[
    ...
    ],
    unknownContextCritical: false,
}

2.2 配置 webpack.dev.conf.js

  • 定义路径:
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
  • 在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({
   // Define relative base path in cesium for loading assets
   CESIUM_BASE_URL: JSON.stringify('')
})

2.3 配置webpack.prod.conf.js文件

  • 定义路径:
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
  • 在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({
   // 注意这里和dev的配置不同
   // 定义Cesium从哪里加载资源,如果使用默认的'',却变成了绝对路径了,所以这里使用'./',使用相对路径
   CESIUM_BASE_URL: JSON.stringify('./')
})

3. 开始使用

再次强调这里不能使用 import Cesium from 'cesium/Cesium' 导入模块,因为Cesium 1.63 版本以后使用的是ES6。应该使用如下方式:

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

<script>
    import { Viewer } from 'cesium/Cesium'
    import  'cesium/Source/Widgets/widgets.css'
    export default {
        name: "cesiumPage",
        data() {
            return {};
        },
        mounted() {
            let viewer = new Viewer("cesiumContainer");
        }
    };
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
}
#cesiumContainer {
    width: 100%;
    height: 100vh;
}
</style>

成功!
20200521165838787.png

4. 参考文章:

https://www.jianshu.com/p/ff26886f7255
https://github.com/CesiumGS/cesium/issues/8471
https://cesium.com/docs/tutorials/cesium-and-webpack/

阅读 213

推荐阅读