vue+cesium ant design vue pro 使用原生cesium，超级详细配置教程_vue+cesium 获取图层要素信息-优快云博客

本文链接：https://blog.youkuaiyun.com/apgk1/article/details/122486767

本文详细介绍如何在Ant Design Vue Pro项目中集成Cesium地球渲染引擎，包括安装必要组件、配置Webpack及使用方法。针对可能出现的问题提供了具体解决方案。

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

ant design vue pro 使用原生cesium，详细配置教程

使用版本

1.antd vue 版本为1.7.8,

2.cli版本为4.0.4

3.cesium 1.89.0 及以上版本

1.安装所需组件

(1).cesium (yarn add cesium)

(2).copy-webpack-plugin (yarn add copy-webpack-plugin@6.4.1)可以考虑安装最新版本

(3).@open-wc/webpack-import-meta-loader (yarn add @open-wc/webpack-import-meta-loader)<防止出现 zip.js错误>

(4).重点若有编译不通过，将采用下方处理方法

---项目打包时，有可能出现以下错误

处理方法：

1. 安装 yarn add hl-webpack-import-meta-loader （实际是改了下面报错的行）

2. 注释掉其中（如下图） @open-wc/webpack-import-meta-loader 内的 webpack-import-meta-loader.js

//this.context.indexOf(this.rootContext) + this.rootContext.length + 1,

2.在vue.config.js 中配置

(1).在顶部加入以下代码

const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

(2).在vueConfig.configureWebpack.plugins 加入以下代码

to目录中(/content/plugins/cesium)需要自己变更

这个路径跟 (3)中需一致

new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSource, cesiumWorkers),
            to: '/content/plugins/cesium/Workers'
          },
          {
            from: path.join(cesiumSource, 'Assets'),
            to: '/content/plugins/cesium/Assets'
          },
          {
            from: path.join(cesiumSource, 'Widgets'),
            to: '/content/plugins/cesium/Widgets'
          },
          {
            from: path.join(cesiumSource, 'ThirdParty'),
            to: '/content/plugins/cesium/ThirdParty'
          }
        ]
      })

(3).DefinePlugin中加入以下代码

有存在DefinePlugin ,就只需要加入其中的相对资源路径就好了

 new webpack.DefinePlugin({
        // 在cesium中定义用于加载资源的相对基路径
        CESIUM_BASE_URL: JSON.stringify('/content/plugins/cesium')
      }),

(4).vueConfig.configureWebpack末尾加入以下代码

module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]},

(5).chainWebpack添加以下代码

// 添加一个cesium别名，以便我们在项目中轻松的引入它
    config.resolve.alias.set('cesium', resolve(cesiumSource))

3.vue.config.js 完整代码如下

const path = require('path')
const webpack = require('webpack')
const GitRevisionPlugin = require('git-revision-webpack-plugin')

const GitRevision = new GitRevisionPlugin()
const buildDate = JSON.stringify(new Date().toLocaleString())
const createThemeColorReplacerPlugin = require('./config/plugin.config')
//---------1--新增部分-----------------
const CopyWebpackPlugin = require('copy-webpack-plugin')
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
//------------------------------------
function resolve (dir) {
  return path.join(__dirname, dir)
}

// check Git
function getGitHash () {
  try {
    return GitRevision.version()
  } catch (e) {}
  return 'unknown'
}

const isProd = process.env.NODE_ENV === 'production'
const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios'
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  ]
}
// vue.config.js
const vueConfig = {
  configureWebpack: {
    // webpack plugins
 
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        APP_VERSION: `"${require('./package.json').version}"`,
        GIT_HASH: JSON.stringify(getGitHash()),
        BUILD_DATE: buildDate,
//---------2--新增部分---------------
        // 在cesium中定义用于加载资源的相对基路径
        CESIUM_BASE_URL: JSON.stringify('/content/plugins/cesium')
//------------------------------------
      }),
//---------3--新增部分---------------
      // 对build生效，拷贝到dist目录下。如：dist/Assets
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSource, cesiumWorkers),
            to: '/content/plugins/cesium/Workers'
          },
          {
            from: path.join(cesiumSource, 'Assets'),
            to: '/content/plugins/cesium/Assets'
          },
          {
            from: path.join(cesiumSource, 'Widgets'),
            to: '/content/plugins/cesium/Widgets'
          },
          {
            from: path.join(cesiumSource, 'ThirdParty'),
            to: '/content/plugins/cesium/ThirdParty'
          }
        ]
      })
//------------------------------------
    ],
//---------4--新增部分---------------
    module: {
      rules: [
      {
      test: /\.js$/,
      use: {
      loader: '@open-wc/webpack-import-meta-loader',
      },
      },
    ]},
//------------------------------------
    // if prod, add externals
    externals: isProd ? assetsCDN.externals : {}
  },

  chainWebpack: config => {
    config.resolve.alias.set('@$', resolve('src'))
//---------5--新增部分---------------
    // 添加一个cesium别名，以便我们在项目中轻松的引入它
    config.resolve.alias.set('cesium', resolve(cesiumSource))
//------------------------------------

    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })

    // if prod is on
    // assets require on cdn
    if (isProd) {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
    }
  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // less vars，customize ant design theme

          // 'primary-color': '#F5222D',
          // 'link-color': '#F5222D',
          'border-radius-base': '2px'
        },
        // DO NOT REMOVE THIS LINE
        javascriptEnabled: true
      }
    }
  },

  devServer: {
    // development server port 8000
    overlay: false,
    port: 7052
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    // proxy: {
    //   '/api': {
    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
    //     ws: false,
    //     changeOrigin: true
    //   }
    // }
  },

  // disable source map in production
  productionSourceMap: false,
  lintOnSave: undefined,
  // babel-loader no-ignore node_modules/*
  transpileDependencies: []
}

// preview.pro.loacg.com only do not use in your production;
if (process.env.VUE_APP_PREVIEW === 'true') {
  console.log('VUE_APP_PREVIEW', true)
  // add `ThemeColorReplacer` plugin to webpack plugins
  vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}

module.exports = vueConfig

4.使用方式，局部注册使用，代码如下

(1) .导入

import * as Cesium from 'cesium/Cesium'

import 'cesium/Widgets/widgets.css'

(2).使用

const viewer1 = new Cesium.Viewer('cesiumContainer', {

        animation: false, // 是否显示动画控件

        shouldAnimate: false,

        homeButton: false, // 是否显示Home按钮

        fullscreenButton: false, // 是否显示全屏按钮

        baseLayerPicker: false, // 是否显示图层选择控件

        geocoder: false, // 是否显示地名查找控件

        timeline: false, // 是否显示时间线控件

        sceneModePicker: false, // 是否显示投影方式控件

        navigationHelpButton: false, // 是否显示帮助信息控件

        infoBox: false, // 是否显示点击要素之后显示的信息

        requestRenderMode: true, // 启用请求渲染模式

        scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存

        sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode

        fullscreenElement: document.body // 全屏时渲染的HTML元素 暂时没发现用处

      })

    }