├── react-ts ├── .npmrc ├── .env ├── src │ ├── App.css │ ├── index.css │ ├── vite-env.d.ts │ ├── main.tsx │ ├── App.tsx │ └── favicon.svg ├── .gitignore ├── index.html ├── static-copy.js ├── tsconfig.json ├── package.json └── vite.config.ts ├── vue3-ts ├── .npmrc ├── .env ├── .gitignore ├── public │ └── favicon.ico ├── env.d.ts ├── src │ ├── main.css │ ├── main.ts │ ├── store │ │ └── sys.ts │ ├── Subscriber.vue │ └── App.vue ├── index.html ├── static-copy.js ├── tsconfig.json ├── package.json └── vite.config.ts ├── vanilla-ts ├── .npmrc ├── .env ├── types │ ├── src │ │ └── main.d.ts │ └── vite.config.d.ts ├── .gitignore ├── src │ ├── vite-env.d.ts │ ├── main.css │ └── main.ts ├── .prettierrc ├── static-copy.js ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts └── favicon.svg └── README.md /react-ts/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /vue3-ts/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /vanilla-ts/.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false -------------------------------------------------------------------------------- /react-ts/.env: -------------------------------------------------------------------------------- 1 | VITE_CESIUM_BASE_URL = './lib/cesium' -------------------------------------------------------------------------------- /vanilla-ts/.env: -------------------------------------------------------------------------------- 1 | VITE_CESIUM_BASE_URL = './lib/cesium' -------------------------------------------------------------------------------- /vue3-ts/.env: -------------------------------------------------------------------------------- 1 | VITE_CESIUM_BASE_URL = './lib/cesium' -------------------------------------------------------------------------------- /vanilla-ts/types/src/main.d.ts: -------------------------------------------------------------------------------- 1 | import './main.css'; 2 | -------------------------------------------------------------------------------- /react-ts/src/App.css: -------------------------------------------------------------------------------- 1 | #cesiumContainer { 2 | width: 100vw; 3 | height: 100vh; 4 | } -------------------------------------------------------------------------------- /vanilla-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | public/lib/cesium -------------------------------------------------------------------------------- /vue3-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | public/lib/cesium -------------------------------------------------------------------------------- /react-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | 7 | public/lib/cesium 8 | -------------------------------------------------------------------------------- /vue3-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JamcaaLaa/cesium-vite-template/HEAD/vue3-ts/public/favicon.ico -------------------------------------------------------------------------------- /vue3-ts/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface ImportMetaEnv { 4 | VITE_CESIUM_BASE_URL: string 5 | } -------------------------------------------------------------------------------- /react-ts/src/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | #root { 7 | width: 100vw; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /vanilla-ts/types/vite.config.d.ts: -------------------------------------------------------------------------------- 1 | declare const _default: ({ mode: VITE_MODE }: { 2 | mode: string; 3 | }) => import("vite").UserConfigExport; 4 | export default _default; 5 | -------------------------------------------------------------------------------- /vue3-ts/src/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding: 0; 3 | margin: 0; 4 | width: 100vw; 5 | height: 100vh; 6 | } 7 | 8 | #app { 9 | width: 100vw; 10 | height: 100vh; 11 | } 12 | -------------------------------------------------------------------------------- /react-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface ImportMetaEnv { 4 | readonly VITE_CESIUM_BASE_URL: string 5 | // 更多环境变量... 6 | } 7 | 8 | interface ImportMeta { 9 | readonly env: ImportMetaEnv 10 | } 11 | -------------------------------------------------------------------------------- /vanilla-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface ImportMetaEnv { 4 | readonly VITE_CESIUM_BASE_URL: string 5 | // 更多环境变量... 6 | } 7 | 8 | interface ImportMeta { 9 | readonly env: ImportMetaEnv 10 | } 11 | -------------------------------------------------------------------------------- /vanilla-ts/src/main.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | #app { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | 12 | height: 100vh; 13 | width: 100vw; 14 | } 15 | 16 | #cesium-container { 17 | height: 100%; 18 | width: 100%; 19 | } 20 | -------------------------------------------------------------------------------- /vue3-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { createPinia } from 'pinia' 3 | import App from './App.vue' 4 | import './main.css' 5 | 6 | Object.defineProperty(globalThis, 'CESIUM_BASE_URL', { 7 | value: import.meta.env.VITE_CESIUM_BASE_URL 8 | }) 9 | 10 | createApp(App) 11 | .use(createPinia()) 12 | .mount('#app') 13 | -------------------------------------------------------------------------------- /react-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | import './index.css' 6 | 7 | Object.defineProperty(globalThis, 'CESIUM_BASE_URL', { 8 | value: import.meta.env.VITE_CESIUM_BASE_URL 9 | }) 10 | 11 | ReactDOM.render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ) 17 | -------------------------------------------------------------------------------- /vue3-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cesium Vite Vue3 Starter Project 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /vanilla-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": false, 6 | "singleQuote": true, 7 | "quoteProps": "as-needed", 8 | "trailingComma": "none", 9 | "bracketSpacing": true, 10 | "arrowParens": "always", 11 | "endOfLine": "auto", 12 | "overrides": [ 13 | { 14 | "files": ".prettierrc", 15 | "options": { 16 | "parser": "json" 17 | } 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /vue3-ts/src/store/sys.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia' 2 | import { Viewer } from 'cesium' 3 | 4 | export interface SysStore { 5 | cesiumViewer: Viewer | null 6 | } 7 | 8 | export const useSysStore = defineStore({ 9 | id: 'sys', 10 | state: (): SysStore => ({ 11 | cesiumViewer: null 12 | }), 13 | actions: { 14 | setCesiumViewer(viewer: Viewer) { 15 | this.cesiumViewer = viewer 16 | } 17 | } 18 | }) -------------------------------------------------------------------------------- /react-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cesium Vite React Starter Project 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /vue3-ts/static-copy.js: -------------------------------------------------------------------------------- 1 | import copy from 'recursive-copy' 2 | import { 3 | deleteSync 4 | } from 'del' 5 | 6 | const baseDir = `node_modules/cesium/Build/CesiumUnminified` 7 | const targets = [ 8 | 'Assets/**/*', 9 | 'ThirdParty/**/*', 10 | 'Widgets/**/*', 11 | 'Workers/**/*', 12 | 'Cesium.js', 13 | ] 14 | 15 | deleteSync(targets.map((src) => `public/lib/cesium/${src}`)) 16 | copy(baseDir, `public/lib/cesium`, { 17 | expand: true, 18 | overwrite: true, 19 | filter: targets 20 | }) -------------------------------------------------------------------------------- /react-ts/static-copy.js: -------------------------------------------------------------------------------- 1 | import copy from 'recursive-copy' 2 | import { 3 | deleteSync 4 | } from 'del' 5 | 6 | const baseDir = `node_modules/cesium/Build/CesiumUnminified` 7 | const targets = [ 8 | 'Assets/**/*', 9 | 'ThirdParty/**/*', 10 | 'Widgets/**/*', 11 | 'Workers/**/*', 12 | 'Cesium.js', 13 | ] 14 | 15 | deleteSync(targets.map((src) => `public/lib/cesium/${src}`)) 16 | copy(baseDir, `public/lib/cesium/`, { 17 | expand: true, 18 | overwrite: true, 19 | filter: targets 20 | }) -------------------------------------------------------------------------------- /vanilla-ts/static-copy.js: -------------------------------------------------------------------------------- 1 | import copy from 'recursive-copy' 2 | import { 3 | deleteSync 4 | } from 'del' 5 | 6 | const baseDir = `node_modules/cesium/Build/CesiumUnminified` 7 | const targets = [ 8 | 'Assets/**/*', 9 | 'ThirdParty/**/*', 10 | 'Widgets/**/*', 11 | 'Workers/**/*', 12 | 'Cesium.js', 13 | ] 14 | 15 | deleteSync(targets.map((src) => `public/lib/cesium/${src}`)) 16 | copy(baseDir, `public/lib/cesium/`, { 17 | expand: true, 18 | overwrite: true, 19 | filter: targets 20 | }) -------------------------------------------------------------------------------- /vanilla-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cesium Vite Vanilla Starter Project 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /vue3-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "jsx": "preserve", 5 | "lib": [ 6 | "esnext", 7 | "dom" 8 | ], 9 | "module": "esnext", 10 | "moduleResolution": "node", 11 | "outDir": "./dist", 12 | "paths": { 13 | "@/*": [ 14 | "./src/*" 15 | ] 16 | }, 17 | "resolveJsonModule": true, 18 | "skipLibCheck": true, 19 | "sourceMap": true, 20 | "strict": true, 21 | "target": "esnext" 22 | }, 23 | "include": [ 24 | "env.d.ts", 25 | "src/**/*", 26 | "./vite.config.*" 27 | ] 28 | } -------------------------------------------------------------------------------- /vanilla-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanilla-cesium-starter", 3 | "version": "0.1.0", 4 | "type": "module", 5 | "packageManager": "pnpm@6.28.0^", 6 | "scripts": { 7 | "postinstall": "node static-copy.js", 8 | "static-copy": "node static-copy.js", 9 | "dev": "vite", 10 | "build": "tsc && vite build", 11 | "preview": "vite preview" 12 | }, 13 | "devDependencies": { 14 | "@types/node": "^18.7.6", 15 | "cesium": "^1.96.0", 16 | "del": "^7.0.0", 17 | "recursive-copy": "^2.0.14", 18 | "typescript": "^4.7.4", 19 | "vite": "^3.0.8", 20 | "vite-plugin-externals": "^0.5.1", 21 | "vite-plugin-html-config": "^1.0.9" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /vue3-ts/src/Subscriber.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /vanilla-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "types", 5 | "esModuleInterop": true, 6 | "lib": [ 7 | "ESNext", 8 | "DOM" 9 | ], 10 | "module": "esnext", 11 | "moduleResolution": "Node", 12 | "noImplicitReturns": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "outDir": "./dist", 16 | "paths": { 17 | "@/*": [ 18 | "./src/*" 19 | ] 20 | }, 21 | "resolveJsonModule": true, 22 | "skipLibCheck": true, 23 | "sourceMap": true, 24 | "strict": true, 25 | "target": "ESNext" 26 | }, 27 | "include": [ 28 | "./src", 29 | "./vite.config.*" 30 | ] 31 | } -------------------------------------------------------------------------------- /react-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "isolatedModules": true, 8 | "jsx": "react", 9 | "lib": [ 10 | "DOM", 11 | "DOM.Iterable", 12 | "ESNext" 13 | ], 14 | "module": "ESNext", 15 | "moduleResolution": "Node", 16 | "noEmit": true, 17 | "outDir": "./dist", 18 | "paths": { 19 | "@/*": [ 20 | "./src/*" 21 | ] 22 | }, 23 | "resolveJsonModule": true, 24 | "skipLibCheck": true, 25 | "strict": true, 26 | "target": "ESNext" 27 | }, 28 | "include": [ 29 | "./src", 30 | "./vite.config.ts" 31 | ] 32 | } -------------------------------------------------------------------------------- /vue3-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-ts-cesium-starter", 3 | "version": "0.1.0", 4 | "type": "module", 5 | "scripts": { 6 | "postinstall": "node static-copy.js", 7 | "static-copy": "node static-copy.js", 8 | "dev": "vite", 9 | "build": "vue-tsc --noEmit && vite build", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "pinia": "^2.0.18", 14 | "vue": "^3.2.37" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^18.7.6", 18 | "@vitejs/plugin-vue": "^3.0.3", 19 | "@vue/compiler-sfc": "^3.2.37", 20 | "cesium": "^1.96.0", 21 | "del": "^7.0.0", 22 | "recursive-copy": "^2.0.14", 23 | "typescript": "^4.7.4", 24 | "vite": "^3.0.8", 25 | "vite-plugin-externals": "^0.5.1", 26 | "vite-plugin-html-config": "^1.0.9", 27 | "vue-tsc": "^0.40.1" 28 | } 29 | } -------------------------------------------------------------------------------- /react-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-ts-cesium-starter", 3 | "version": "0.1.0", 4 | "type": "module", 5 | "scripts": { 6 | "postinstall": "node static-copy.js", 7 | "static-copy": "node static-copy.js", 8 | "dev": "vite", 9 | "build": "tsc && vite build", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^18.7.6", 18 | "@types/react": "^18.0.17", 19 | "@types/react-dom": "^18.0.6", 20 | "@vitejs/plugin-react-refresh": "^1.3.6", 21 | "cesium": "^1.96.0", 22 | "del": "^7.0.0", 23 | "lint-staged": "^13.0.3", 24 | "prettier": "^2.7.1", 25 | "recursive-copy": "^2.0.14", 26 | "typescript": "^4.7.4", 27 | "vite": "^3.0.8", 28 | "vite-plugin-externals": "^0.5.1", 29 | "vite-plugin-html-config": "^1.0.9" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /vanilla-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | import { defineConfig, loadEnv } from 'vite' 3 | import htmlConfig from 'vite-plugin-html-config' 4 | import { viteExternalsPlugin } from 'vite-plugin-externals' 5 | 6 | export default ({ mode: VITE_MODE }: { mode: string }) => { 7 | const env = loadEnv(VITE_MODE, process.cwd()) 8 | console.log('VITE_MODE: ', VITE_MODE) 9 | console.log('ENV: ', env) 10 | 11 | const plugins = [] 12 | 13 | const externalConfig = viteExternalsPlugin({ 14 | cesium: 'Cesium' 15 | }) 16 | const htmlConfigs = htmlConfig({ 17 | headScripts: [ 18 | { 19 | src: './lib/cesium/Cesium.js' 20 | } 21 | ], 22 | links: [ 23 | { 24 | // ******* Always use external CesiumJS's style util official package output. ******* 25 | // ******* 直到官方 CesiumJS 包导出样式文件前，都使用外部样式 ******* 26 | rel: 'stylesheet', 27 | href: './lib/cesium/Widgets/widgets.css' 28 | } 29 | ] 30 | }) 31 | plugins.push( 32 | externalConfig, 33 | htmlConfigs 34 | ) 35 | 36 | return defineConfig({ 37 | root: './', 38 | build: { 39 | assetsDir: './', 40 | minify: ['false'].includes(env.VITE_IS_MINIFY) ? false : true 41 | }, 42 | plugins: plugins, 43 | resolve: { 44 | alias: { 45 | '@': fileURLToPath(new URL('./src', import.meta.url)) 46 | } 47 | } 48 | }) 49 | } 50 | -------------------------------------------------------------------------------- /react-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react' 2 | import { ArcGisMapServerImageryProvider, Camera, Rectangle, Viewer } from 'cesium' 3 | import './App.css' 4 | 5 | function App() { 6 | const cesiumViewerRef = useRef() 7 | const containerRef = useRef(null) 8 | 9 | useEffect(() => { 10 | 11 | Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees( 12 | 75.0, // 东 13 | 0.0, // 南 14 | 140.0, // 西 15 | 60.0 // 北 16 | ) 17 | 18 | const credits = document.createElement('div') 19 | credits.style.display = 'none' 20 | cesiumViewerRef.current = new Viewer(containerRef.current as Element, { 21 | animation: false, 22 | timeline: false, 23 | geocoder: false, 24 | homeButton: false, 25 | scene3DOnly: true, 26 | baseLayerPicker: false, 27 | navigationHelpButton: false, 28 | fullscreenButton: false, 29 | infoBox: false, 30 | creditContainer: credits, 31 | imageryProvider: new ArcGisMapServerImageryProvider({ 32 | url: `https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer` 33 | }), 34 | msaaSamples: 4, 35 | selectionIndicator: false, 36 | contextOptions: { 37 | requestWebgl2: true 38 | } 39 | }) 40 | }, []) 41 | 42 | return ( 43 |
44 | ) 45 | } 46 | 47 | export default App 48 | -------------------------------------------------------------------------------- /vue3-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | import { defineConfig, loadEnv } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | 5 | import htmlConfig from 'vite-plugin-html-config' 6 | import { viteExternalsPlugin } from 'vite-plugin-externals' 7 | 8 | // https://vitejs.dev/config/ 9 | export default ({ mode: VITE_MODE }: { mode: string }) => { 10 | const env = loadEnv(VITE_MODE, process.cwd()) 11 | console.log('VITE_MODE: ', VITE_MODE) 12 | console.log('ENV: ', env) 13 | 14 | const plugins = [vue()] 15 | 16 | const externalConfig = viteExternalsPlugin({ 17 | cesium: 'Cesium' 18 | }) 19 | const htmlConfigs = htmlConfig({ 20 | headScripts: [ 21 | { 22 | src: './lib/cesium/Cesium.js' 23 | } 24 | ], 25 | links: [ 26 | { 27 | // ******* Always use external CesiumJS's style util official package output. ******* 28 | // ******* 直到官方 CesiumJS 包导出样式文件前，都使用外部样式 ******* 29 | rel: 'stylesheet', 30 | href: './lib/cesium/Widgets/widgets.css' 31 | } 32 | ] 33 | }) 34 | plugins.push( 35 | externalConfig, 36 | htmlConfigs 37 | ) 38 | 39 | return defineConfig({ 40 | root: './', 41 | build: { 42 | assetsDir: './', 43 | minify: ['false'].includes(env.VITE_IS_MINIFY) ? false : true 44 | }, 45 | plugins: plugins, 46 | resolve: { 47 | alias: { 48 | '@': fileURLToPath(new URL('./src', import.meta.url)) 49 | } 50 | } 51 | }) 52 | } 53 | -------------------------------------------------------------------------------- /react-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | import { defineConfig, loadEnv } from 'vite' 3 | import reactRefresh from '@vitejs/plugin-react-refresh' 4 | 5 | import htmlConfig from 'vite-plugin-html-config' 6 | import { viteExternalsPlugin } from 'vite-plugin-externals' 7 | 8 | // https://vitejs.dev/config/ 9 | export default ({ mode: VITE_MODE }: { mode: string }) => { 10 | const env = loadEnv(VITE_MODE, process.cwd()) 11 | console.log('VITE_MODE: ', VITE_MODE) 12 | console.log('ENV: ', env) 13 | 14 | const plugins = [reactRefresh()] 15 | 16 | const externalConfig = viteExternalsPlugin({ 17 | cesium: 'Cesium' 18 | }) 19 | const htmlConfigs = htmlConfig({ 20 | headScripts: [ 21 | { 22 | src: './lib/cesium/Cesium.js' 23 | } 24 | ], 25 | links: [ 26 | { 27 | // ******* Always use external CesiumJS's style util official package output. ******* 28 | // ******* 直到官方 CesiumJS 包导出样式文件前，都使用外部样式 ******* 29 | rel: 'stylesheet', 30 | href: './lib/cesium/Widgets/widgets.css' 31 | } 32 | ] 33 | }) 34 | plugins.push( 35 | externalConfig, 36 | htmlConfigs 37 | ) 38 | 39 | return defineConfig({ 40 | root: './', 41 | build: { 42 | assetsDir: './', 43 | minify: ['false'].includes(env.VITE_IS_MINIFY) ? false : true 44 | }, 45 | plugins: plugins, 46 | resolve: { 47 | alias: { 48 | '@': fileURLToPath(new URL('./src', import.meta.url)) 49 | } 50 | } 51 | }) 52 | } 53 | -------------------------------------------------------------------------------- /vanilla-ts/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /react-ts/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /vanilla-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Viewer, 3 | Camera, 4 | Rectangle, 5 | ArcGisMapServerImageryProvider 6 | } from 'cesium' 7 | 8 | import './main.css' 9 | 10 | type DemoDebugging = { 11 | viewer: Viewer | null 12 | } 13 | 14 | const container = document.getElementById('cesium-container') 15 | const DEMO: DemoDebugging = { 16 | viewer: null 17 | } 18 | 19 | const entry = () => { 20 | const credits = document.createElement('div') 21 | credits.style.display = 'none' 22 | DEMO.viewer = new Viewer(container as Element, { 23 | animation: false, 24 | timeline: false, 25 | geocoder: false, 26 | homeButton: false, 27 | scene3DOnly: true, 28 | baseLayerPicker: false, 29 | navigationHelpButton: false, 30 | fullscreenButton: false, 31 | infoBox: false, 32 | creditContainer: credits, 33 | imageryProvider: new ArcGisMapServerImageryProvider({ 34 | url: `https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer` 35 | }), 36 | msaaSamples: 4, 37 | selectionIndicator: false, 38 | contextOptions: { 39 | requestWebgl2: true 40 | } 41 | }) 42 | } 43 | 44 | document.addEventListener('DOMContentLoaded', () => { 45 | // 默认定位到中国上空 46 | Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees( 47 | 75.0, // 东 48 | 0.0, // 南 49 | 140.0, // 西 50 | 60.0 // 北 51 | ) 52 | Object.defineProperty(window, 'CESIUM_BASE_URL', { 53 | value: import.meta.env.VITE_CESIUM_BASE_URL 54 | }) 55 | Object.defineProperty(window, 'DEMO', { 56 | value: DEMO 57 | }) 58 | entry() 59 | }) 60 | -------------------------------------------------------------------------------- /vue3-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 50 | 51 | 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这个项目是 CesiumJS 在 Vite 的三个模板下的最佳新建项目的实践。 4 | 5 | - Vanilla 6 | - Vue3 7 | - React18 8 | 9 | 所有的工程均默认定位到中国上空，且去除了所有 UI 元素。 10 | 11 | 所有的工程均使用了 `pnpm` 作为包管理器，若你不用 `pnpm` 可以参考着改动。 12 | 13 | 所有工程均不生成 `package-lock` 文件，即 pnpm 的 `pnpm-lock.yaml`，yarn 的 `yarn.lock`，以及 npm 的 `package-lock.json`，配置见 `.npmrc` 文件。 14 | 15 | 按需参考，注意 `vite.config.ts` 中的配置规则与使用到的插件。 16 | 17 | ## 静态文件复制脚本 18 | 19 | 每个项目均提供了一个 `static-copy.js` 脚本，原理很简单，就是调用 NodeJS 进行文件复制，最后由 vite 在启动开发服务器时访问 `public` 下的 CesiumJS，或 build 时把 `public` 下的 CesiumJS 原封不动复制到分发目录。 20 | 21 | 每当项目依赖安装完成后，即会执行这个脚本（见 `postinstall` 命令）。 22 | 23 | ## 关于 `cesium` 为什么是开发依赖（devDependencies） 24 | 25 | 原因有三： 26 | 27 | - `cesium` 包不参与打包 28 | - `CesiumJS` 的库文件和静态资源文件均复制到了 `public/lib/cesium` 文件夹下，并根据环境变量设置了 `CESIUM_BASE_URL`，也即使用外部库的方式加载 CesiumJS 29 | - 项目一般是 App，而不是 Library 发布到 [npmjs.com](https://www.npmjs.com)，所以没必要放在依赖项中，放在开发依赖就可以 30 | 31 | # 依赖版本更新问题 32 | 33 | 若你使用的是 `pnpm`，你可以全部更新： 34 | 35 | ```sh 36 | pnpm update *@latest 37 | ``` 38 | 39 | 也可以单独更新某个依赖，比如 `vite` 或 `cesium` 40 | 41 | ```sh 42 | pnpm update cesium@latest 43 | pnpm update cesium@1.97 44 | pnpm update vite@latest 45 | ``` 46 | 47 | 注意，如果你更新的是 `cesium`，必须重新执行一次静态资源文件的复制脚本，即： 48 | 49 | ```sh 50 | pnpm static-copy 51 | ``` 52 | 53 | # 构建速度与体积 54 | 55 | 这就是优势，无论速度与生成产物的体积远远优于打包式。 56 | 57 | ## 开发启动速度 58 | 59 | Vanilla 60 | 61 | ``` 62 | VITE v3.0.8 ready in 264 ms 63 | 64 | ➜ Local: http://localhost:5173/ 65 | ➜ Network: use --host to expose 66 | ``` 67 | 68 | Vue 69 | 70 | ``` 71 | VITE v3.0.8 ready in 359 ms 72 | 73 | ➜ Local: http://localhost:5173/ 74 | ➜ Network: use --host to expose 75 | ``` 76 | 77 | React 78 | 79 | ``` 80 | VITE v3.0.8 ready in 426 ms 81 | 82 | ➜ Local: http://localhost:5173/ 83 | ➜ Network: use --host to expose 84 | ``` 85 | 86 | ## 体积 87 | 88 | Vanilla 89 | 90 | ``` 91 | vite v3.0.8 building for production... 92 | ✓ 4 modules transformed. 93 | dist/favicon.17e50649.svg 1.49 KiB 94 | dist/index.html 0.63 KiB 95 | dist/index.7ae69996.js 1.51 KiB / gzip: 0.85 KiB 96 | dist/index.b4fcc688.css 0.15 KiB / gzip: 0.13 KiB 97 | ``` 98 | 99 | Vue 100 | 101 | （因为加入了 pinia 全局状态管理库，所以体积稍大一些） 102 | 103 | ``` 104 | vite v3.0.8 building for production... 105 | ✓ 32 modules transformed. 106 | dist/index.html 0.53 KiB 107 | dist/index.f6170881.css 0.31 KiB / gzip: 0.22 KiB 108 | dist/index.4508ce51.js 73.00 KiB / gzip: 28.69 KiB 109 | ``` 110 | 111 | React 112 | 113 | ``` 114 | vite v3.0.8 building for production... 115 | ✓ 24 modules transformed. 116 | dist/favicon.17e50649.svg 1.49 KiB 117 | dist/index.html 0.56 KiB 118 | dist/index.e6f8be43.css 0.10 KiB / gzip: 0.09 KiB 119 | dist/index.53365258.js 139.72 KiB / gzip: 45.10 KiB 120 | ``` --------------------------------------------------------------------------------