Cesium学习第一天 在Vue中加载Cesium

在Vue中加载Cesium

学习Cesium第一天，在Vue中使用Cesium

1. 安装Cesium

npm i cesium
npm install --save @types/cesium//安装此可以实现Cesium代码提示

2. 配置main.js

//引入cesium以及widgets
import Cesium from "cesium/Cesium";
import widgets from "cesium/Widgets/widgets.css";
在Vue原型上配置cesium以及widgets
Vue.prototype.Cesium = Cesium;
Vue.prototype.widgets = widgets;

3. 配置vue.config.js
   注意 第二行中引入了copy-webpack-plugin，可以使用npm i copy-webpack-plugin安装

const { defineConfig } = require("@vue/cli-service");
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 = defineConfig({
  transpileDependencies: true,
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  configureWebpack: {
    output: {
      sourcePrefix: " ",
    },
    amd: {
      toUrlUndefined: true,
    },
    resolve: {
      alias: {
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
      fallback: {
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        zlib: require.resolve("browserify-zlib"),
        assert: require.resolve("assert/"),
        stream: require.resolve("stream-browserify"),
        // zlib: require.resolve("browserify-zlib")
      },
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
        ],
      }),
      new CopyWebpackPlugin({
        patterns: [{ from: path.join(cesiumSource, "Assets"), to: "Assets" }],
      }),
      new CopyWebpackPlugin({
        patterns: [{ from: path.join(cesiumSource, "Widgets"), to: "Widgets" }],
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSource, "ThirdParty/Workers"),
            to: "ThirdParty/Workers",
          },
        ],
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
  },
});

以上代码中的

 fallback: {
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        zlib: require.resolve("browserify-zlib"),
        assert: require.resolve("assert/"),
        stream: require.resolve("stream-browserify"),
        // zlib: require.resolve("browserify-zlib")
      },

是可能出现错误的情况，需要使用npm进行相应安装
4. 在helloworld.vue文件中

//引入cesium
import * as  Cesium from "cesium" //编写代码时用这一行 注释下一行 这样有代码提示
import * as Cesium from "../../node_modules/cesium"; //运行时打开这一行 注释上一行 运行不报错
//创建cesium viewer 传入div 的id进行展示
 const viewer = new Cesium.Viewer('mycesium')

运行即可看到效果