vue3+cesium1.83+typescript+elementui搭建三维GIS系统开发框架,附完整代码链接

写在前面

已经搭建VUE开发框架的基础上，搭建此框架

开始搭建

1. 通过npm安装cesium
   npm install cesium
2. 将npm安装目录下的\node_modules\cesium\Build\Cesium所有文件拷贝至public下的新建文件夹Cesium
3. 在index.htnl中引入js和css文件

	<link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
    <script src="/Cesium/Cesium.js"></script>

方式一(Cesium作为全局变量)

1. 修改声明文件，使编译器不报错

2. 页面组件

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

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {},
  mounted() {
    const ref: Element = this.$refs.cesiumContainer as Element;
    new Cesium.Viewer(ref);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home .cesium-container {
  height: 100%;
  width: 100%;
}
</style>

方式二(局部导入)

1. 创建vue.config.js,创建如下内容，为了打包时排除cesium

module.exports = {
    configureWebpack: {
        externals: {
            'cesium': 'Cesium',
        }
    }
}

2. 页面组件

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

<script lang="ts">
import { defineComponent } from "vue";
import { Viewer } from "cesium";

export default defineComponent({
  props: {},
  mounted() {
    const ref: Element = this.$refs.cesiumContainer as Element;
    new Viewer(ref);
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home .cesium-container {
  height: 100%;
  width: 100%;
}
</style>

成果图

注意事项

1. 如出现“"Critical dependency: require function is used in a way in which dependencies cannot be statically extracted”，请在webpack的配置module中添加如下内容

 module: {
      // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
      // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }

2. 如出现“./node_modules/cesium/Source/ThirdParty/zip.js 6550:59 Module parse failed: Unexpected token ”
   由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法，webpack 默认不支持，在进行项目构建时，会报如下错误，提示信息需要添加 loader。

npm install @open-wc/webpack-import-meta-loader --save-dev

module: {
     rules: [
      {
      test: /\.js$/,
      use: {
      include: path.resolve(__dirname, 'node_modules/cesium/Source'),
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]}

3. 如出现“Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL.”
   方式一：使用copy-webpack-plugin拷贝

npm install copy-webpack-plugin --save-dev

const CopyWebpackPlugin = require('copy-webpack-plugin');
const plugins = [
    new CopyWebpackPlugin({
        patterns: [
            { from: 'node_modules/cesium/Build/Cesium', to: 'Cesium' },
        ],
    }),
    new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./Cesium/')
    })
]

方式二： 脚手架复制nodemodules下的Cesium至public下

const gulp = require('gulp');
const del = require('del');
const path = require('path');
gulp.task('cleanCesium', () => {
    return del([".\\public\\Cesium\\**"], { force: true });
});

gulp.task("copyCesium", function () {
    return gulp.src(path.resolve(".\\node_modules\\cesium\\Build\\Cesium\\**")
    ).pipe(gulp.dest(path.resolve("./public/Cesium")));
});

gulp.task('updateCesium', gulp.series('cleanCesium', 'copyCesium'));

4. “TypeError: compilation.getCache is not a function”

此时运行会报错，主要是安装的copy-webpack-plugin版本太高，而当前webpack版本太低，不支持，高版本的配置语法也变了。安装5.x或6.x版本的copy-webpack-plugin即可解决！

完整代码GitHub