Cesium Note1:Vue使用Cesium

安装

• 安装的版本是： cesium@1.93.0

npm install cesium --save

Cesium申请token

Cesium ion

https://cesium.com/ion/signin/tokens

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZDE0MWI4OS1jYjYxLTRmMDEtYWI5Yy1hZjBiNDAwZjc2NzEiLCJpZCI6MTgzMDEsImlhdCI6MTYwOTMyNjMxNH0.5H4EA7TyeUBhRmOI6IoRFXjyLtEJAjFZKJORBhGK2uc

Cesium.Ion.defaultAccessToken = '你申请的秘钥'

使用

方法一（测试失败）

1. 将Cesium包放入VUE的静态文件下

2. 引入Cesium的css文件和JavaScript文件

3. 创建一个earth组件，使用Cesium

方法二（我使用的）

1. 配置vue.config.js

• vue.config.js 添加配置

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack');
const path = require('path');  //引入path模块（node）


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

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve('src'),
      }
    },
    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: false
    }
  },

  // 关闭eslint检测
  lintOnSave: false,
  devServer: {
    overlay: {
      warning: false,
      errors: false
    }
  },
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  chainWebpack: (config) => {
    // 配置jQuery
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    }]);
    config.resolve.symlinks(true) //热更新
  },
}

2. 配置main.ts

import "cesium/Source/Widgets/widgets.css";
const Cesium = require("cesium/Source/Cesium");
Cesium.Ion.defaultAccessToken="你的token"

app.provide("$Cesium", Cesium);

3. 使用

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

<script>
import { defineComponent, inject, onMounted } from "vue";
export default defineComponent({
  setup() {
    let Cesium = inject("$Cesium");
    onMounted(() => {
      let viewer = new Cesium.Viewer("cesiumContainer");
      console.info(viewer);
    });
    return {};
  },
});
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>