vue-cli5.x 集成 cesium_vue5 cli集成cesium

---

vue-cli5.x 集成 cesium

vue-cli 5.0.8 + cesium 1.100.0

---

1. 使用环境信息

• node v16.17.1
• npm 9.2.0
• @vue/cli 5.0.8
• cesium 1.100.0

注意：vue-cli5 以上和 vue-cli5 以下，配置方式不同。
vue-cli5 以下参考另一篇博客 vue 集成 cesium

---

2. 安装并配置 cesium

2.1. 项目初始化

vue create vue-cesium-project
1

此处脚手架有个坑
需要将 package.json 里 eslint-plugin-vue 版本从 ^8.0.3 改为 ^7.20.0

2.2. 安装 cesium

npm install cesium
1

2.3. 配置 cesium

npm install -D copy-webpack-plugin node-polyfill-webpack-plugin @open-wc/webpack-import-meta-loader
1

const { defineConfig } = require('@vue/cli-service')

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    name: 'vue-cesium',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      new NodePolyfillPlugin(),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/cesium/Build/Cesium/Workers',
            to: 'cesium/Workers'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/ThirdParty',
            to: 'cesium/ThirdParty'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Assets',
            to: 'cesium/Assets'
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Widgets',
            to: 'cesium/Widgets'
          }
        ]
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium')
      })
    ],
    module: {
      rules: [
        {
          test: /.js$/,
          include: /(cesium)/,
          use: {
            loader: '@open-wc/webpack-import-meta-loader'
          }
        }
      ]
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

---

3. cesium 简单使用示例

 <template>
   <div
     :id="id"
     ref="cesiumContainer"
     :style="{height,width}"
   />
 </template>
 
 <script>
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import { Viewer } from 'cesium'
 
 export default {
   name: 'CesiumMap',
   props: {
     id: {
       type: String,
       default: (() => Math.random().toString(36).substr(2))()
     },
     width: {
       type: String,
       default: '100%'
     },
     height: {
       type: String,
       default: '100%'
     }
   },
   data() {
     return {
       viewer: null
     }
   },
   mounted() {
     this.initCesium()
   },
   beforeDestroy() {
     if (this.viewer) {
       this.viewer.destroy()
       this.viewer = null
     }
   },
   methods: {
     initCesium () {
       const el = this.$refs.cesiumContainer
 
       this.viewer = new Viewer(el, {
         selectionIndicator: false,
         infoBox: false,
         contextOptions: {
           // 硬件反走样，默认值为 1
           msaaLevel: 8,
           requestWebgl2: true
         },
         animation: false,
         timeline: false, // 底部时间线
         fullscreenButton: false, // 全屏
         vrButton: false, // VR
         sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
         baseLayerPicker: false, // 图层选择器（地形影像服务）
         navigationHelpButton: false, // 导航帮助(手势，鼠标)
         geocoder: false, // 位置查找工具
         homeButton: false // 视角返回初始位置
       })
     }
   }
 }
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

---

4. 显示效果