├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   └── CesiumContainer.vue
└── vue.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/Cesium.js


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "env": {
 4 |     "node": true,
 5 |     "jquery": true
 6 |   },
 7 |   "extends": ["plugin:vue/essential", "@vue/standard"],
 8 |   "rules": {
 9 |     "space-before-function-paren": "off"
10 |   },
11 |   "parserOptions": {
12 |     "parser": "babel-eslint"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | package-lock.json
25 | yarn.lock
26 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "eslintIntegration": true,
3 |   "semi": false,
4 |   "trailingComma": "none",
5 |   "singleQuote": true,
6 |   "printWidth": 200
7 | }
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Liubf
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img src="https://github.com/CesiumGS/cesium/wiki/logos/Cesium_Logo_Color.jpg" width="50%" />
 3 | </p>
 4 | 
 5 |   <p align="center">基于vueCli 4.x.x + 的cesium开发模板 (Cesium development template based on vueCli 4.x.x +)</p>
 6 |   <p align="center">Version：Vuecli 4.5.x + / Vue 3.0 + </p>
 7 |   <p align="center">Branch： <a href="https://github.com/ShareQiu1994/cesium-vue/tree/master">JavaScript </a> / <a href="https://github.com/ShareQiu1994/cesium-vue/tree/typescript">TypeScript</a> </p>
 8 | 
 9 |   
10 | # cesium-vue
11 | 
12 | ##  项目安装(Project setup)
13 | ```
14 | npm install / cnpm install / yarn install
15 | ```
16 | 
17 | ### 编译并热部署的开发环境 (Compiles and hot-reloads for development)
18 | ```
19 | npm run serve / cnpm run serve / yarn serve
20 | ```
21 | 
22 | ### 编译并压缩的生产环境 (Compiles and minifies for production)
23 | ```
24 | npm run build / cnpm run build / yarn build
25 | ```
26 | 
27 | ## 与我联系 (Stay in touch)
28 | 
29 | - Author - [ShareQiu1994](https://github.com/ShareQiu1994)
30 | - Website - [https://liubf.com](https://liubf.com)
31 | 
32 | ## 你可能感兴趣的存储库 (Repositories you may be interested)
33 | 
34 | [cesium-vue-electron](https://github.com/ShareQiu1994/cesium-vue-electron)
35 | 
36 | ## License
37 | 
38 | [MIT licensed](LICENSE).


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cesium-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "cesium": "~1.96.0",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.0-0",
15 |     "vuex": "^4.0.0-0"
16 |   },
17 |   "devDependencies": {
18 |     "@open-wc/webpack-import-meta-loader": "^0.4.7",
19 |     "@vue/cli-plugin-babel": "~4.5.0",
20 |     "@vue/cli-plugin-eslint": "~4.5.0",
21 |     "@vue/cli-plugin-router": "~4.5.0",
22 |     "@vue/cli-plugin-vuex": "~4.5.0",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "@vue/compiler-sfc": "^3.0.0",
25 |     "@vue/eslint-config-standard": "^5.1.2",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-import": "^2.20.2",
29 |     "eslint-plugin-node": "^11.1.0",
30 |     "eslint-plugin-promise": "^4.2.1",
31 |     "eslint-plugin-standard": "^4.0.0",
32 |     "eslint-plugin-vue": "^7.0.0",
33 |     "sass": "^1.26.5",
34 |     "sass-loader": "^8.0.2",
35 |     "strip-pragma-loader": "^1.0.0"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/vue3-essential",
44 |       "@vue/standard"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not dead"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShareQiu1994/cesium-vue/2883916bfa08fb7d45ecca8eadce4c6481ba723e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view />
 3 | </template>
 4 | 
 5 | <style lang="scss">
 6 | html,
 7 | body {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   margin: 0;
11 |   padding: 0;
12 |   overflow: hidden;
13 | }
14 | #app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   color: #2c3e50;
19 |   width: 100%;
20 |   height: 100%;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShareQiu1994/cesium-vue/2883916bfa08fb7d45ecca8eadce4c6481ba723e/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | 
6 | createApp(App).use(store).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | import CesiumContainer from '../views/CesiumContainer.vue'
 3 | const routes = [
 4 |   {
 5 |     path: '/',
 6 |     name: 'CesiumContainer',
 7 |     component: CesiumContainer
 8 |   }
 9 | ]
10 | 
11 | const router = createRouter({
12 |   history: createWebHashHistory(),
13 |   routes
14 | })
15 | 
16 | export default router
17 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | export default createStore({
 4 |   state: {
 5 |   },
 6 |   mutations: {
 7 |   },
 8 |   actions: {
 9 |   },
10 |   modules: {
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------
/src/views/CesiumContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="cesiumContainer"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import 'cesium/Build/Cesium/Widgets/widgets.css'
 7 | import { onMounted } from 'vue'
 8 | import { Viewer } from 'cesium' // OR  /* import * as Cesium from 'cesium' */
 9 | 
10 | export default {
11 |   name: 'CesiumContainer',
12 |   setup() {
13 |     onMounted(() => {
14 |       /* eslint no-new: */
15 |       new Viewer('cesiumContainer')
16 |     })
17 |   }
18 | }
19 | </script>
20 | 
21 | <!-- Add "scoped" attribute to limit CSS to this component only -->
22 | <style scoped>
23 | #cesiumContainer {
24 |   width: 100%;
25 |   height: 100%;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
  1 | const webpack = require('webpack')
  2 | const path = require('path')
  3 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  4 | const cesiumSource = 'node_modules/cesium/Build/Cesium'
  5 | 
  6 | module.exports = {
  7 |   publicPath: './',
  8 |   assetsDir: './static',
  9 |   productionSourceMap: false,
 10 |   lintOnSave: false, // 是否开启eslint
 11 |   devServer: {
 12 |     open: true
 13 |   },
 14 |   configureWebpack: (config) => {
 15 |     let plugins = []
 16 |     if (process.env.NODE_ENV === 'production') {
 17 |       plugins = [
 18 |         new webpack.DefinePlugin({
 19 |           CESIUM_BASE_URL: JSON.stringify('static')
 20 |         }),
 21 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'static/Workers' }]),
 22 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),
 23 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'static/ThirdParty' }]),
 24 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }])
 25 |       ]
 26 |     } else {
 27 |       plugins = [
 28 |         new webpack.DefinePlugin({
 29 |           CESIUM_BASE_URL: JSON.stringify('')
 30 |         }),
 31 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' }]),
 32 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
 33 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }]),
 34 |         new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }])
 35 |       ]
 36 |     }
 37 |     return {
 38 |       module: {
 39 |         unknownContextCritical: false,
 40 |         rules: [
 41 |           {
 42 |             test: /\.js$/,
 43 |             enforce: 'pre',
 44 |             include: path.resolve(__dirname, 'node_modules/cesium/Source'),
 45 |             sideEffects: false,
 46 |             use: [
 47 |               {
 48 |                 loader: 'strip-pragma-loader',
 49 |                 options: {
 50 |                   pragmas: {
 51 |                     debug: false
 52 |                   }
 53 |                 }
 54 |               }
 55 |             ]
 56 |           },
 57 |           {
 58 |             test: /.js$/,
 59 |             include: path.resolve(__dirname, 'node_modules/cesium/Source'),
 60 |             use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }
 61 |           }
 62 |         ]
 63 |       },
 64 |       optimization: {
 65 |         usedExports: true,
 66 |         splitChunks: {
 67 |           maxInitialRequests: Infinity,
 68 |           minSize: 0,
 69 |           maxSize: 250000,
 70 |           cacheGroups: {
 71 |             vendor: {
 72 |               test: /[\\/]node_modules[\\/]/,
 73 |               priority: -10,
 74 |               chunks: 'all',
 75 |               name (module) {
 76 |                 const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
 77 |                 return `npm.${packageName.replace('@', '')}`
 78 |               }
 79 |             },
 80 |             commons: {
 81 |               name: 'Cesium',
 82 |               test: /[\\/]node_modules[\\/]cesium/,
 83 |               priority: 10,
 84 |               chunks: 'all'
 85 |             }
 86 |           }
 87 |         }
 88 |       },
 89 |       output: {
 90 |         sourcePrefix: ' '
 91 |       },
 92 |       amd: {
 93 |         toUrlUndefined: true
 94 |       },
 95 |       resolve: {
 96 |         alias: {
 97 |           '@': path.resolve('src')
 98 |         }
 99 |       },
100 |       node: {
101 |         fs: 'empty',
102 |         Buffer: false,
103 |         http: 'empty',
104 |         https: 'empty',
105 |         zlib: 'empty'
106 |       },
107 |       plugins: plugins
108 |     }
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------