初始化
This commit is contained in:
ch197511161
12
index.html
Normal file
12
index.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Cesium Vue3 项目</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1917
package-lock.json
generated
Normal file
1917
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "cesium-vue3-project",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A Vue3 project integrated with Cesium for 3D geospatial visualization",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"serve": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.0",
|
||||||
|
"cesium": "^1.111.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
|
"vite": "^5.0.0",
|
||||||
|
"vite-plugin-cesium": "^1.2.22"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vue3",
|
||||||
|
"cesium",
|
||||||
|
"3d",
|
||||||
|
"geospatial",
|
||||||
|
"visualization"
|
||||||
|
],
|
||||||
|
"author": "",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
1047
src/App.vue
Normal file
1047
src/App.vue
Normal file
File diff suppressed because it is too large
Load Diff
247
src/cameraController.js
Normal file
247
src/cameraController.js
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
import * as Cesium from 'cesium'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cesium相机控制器类
|
||||||
|
* 支持WASD键控制相机的上下左右移动
|
||||||
|
* 支持灵敏度调节(0.2-2.5)
|
||||||
|
*/
|
||||||
|
class CameraController {
|
||||||
|
constructor(viewer, options = {}) {
|
||||||
|
this.viewer = viewer
|
||||||
|
this.camera = viewer.camera
|
||||||
|
this.scene = viewer.scene
|
||||||
|
|
||||||
|
// 默认配置
|
||||||
|
this.config = {
|
||||||
|
sensitivity: options.sensitivity || 0.005, // 灵敏度，范围0.001-0.1
|
||||||
|
moveSpeed: options.moveSpeed || 100, // 基础移动速度
|
||||||
|
enabled: options.enabled !== false, // 是否启用控制器
|
||||||
|
...options
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按键状态
|
||||||
|
this.keys = {
|
||||||
|
w: false, // 向上
|
||||||
|
s: false, // 向下
|
||||||
|
a: false, // 向左
|
||||||
|
d: false // 向右
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画帧ID
|
||||||
|
this.animationFrameId = null
|
||||||
|
|
||||||
|
// 绑定事件处理函数
|
||||||
|
this.handleKeyDown = this.handleKeyDown.bind(this)
|
||||||
|
this.handleKeyUp = this.handleKeyUp.bind(this)
|
||||||
|
this.updateCamera = this.updateCamera.bind(this)
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化控制器
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
if (this.config.enabled) {
|
||||||
|
this.enable()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 启用相机控制
|
||||||
|
*/
|
||||||
|
enable() {
|
||||||
|
this.config.enabled = true
|
||||||
|
document.addEventListener('keydown', this.handleKeyDown)
|
||||||
|
document.addEventListener('keyup', this.handleKeyUp)
|
||||||
|
this.startAnimation()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 禁用相机控制
|
||||||
|
*/
|
||||||
|
disable() {
|
||||||
|
this.config.enabled = false
|
||||||
|
document.removeEventListener('keydown', this.handleKeyDown)
|
||||||
|
document.removeEventListener('keyup', this.handleKeyUp)
|
||||||
|
this.stopAnimation()
|
||||||
|
// 重置按键状态
|
||||||
|
this.keys = { w: false, s: false, a: false, d: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置灵敏度
|
||||||
|
* @param {number} sensitivity - 灵敏度值，范围0.001-0.1
|
||||||
|
*/
|
||||||
|
setSensitivity(sensitivity) {
|
||||||
|
this.config.sensitivity = Math.max(0.001, Math.min(0.1, sensitivity))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前灵敏度
|
||||||
|
* @returns {number} 当前灵敏度值
|
||||||
|
*/
|
||||||
|
getSensitivity() {
|
||||||
|
return this.config.sensitivity
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置移动速度
|
||||||
|
* @param {number} speed - 基础移动速度
|
||||||
|
*/
|
||||||
|
setMoveSpeed(speed) {
|
||||||
|
this.config.moveSpeed = Math.max(1, speed)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 键盘按下事件处理
|
||||||
|
* @param {KeyboardEvent} event - 键盘事件
|
||||||
|
*/
|
||||||
|
handleKeyDown(event) {
|
||||||
|
if (!this.config.enabled) return
|
||||||
|
|
||||||
|
const key = event.key.toLowerCase()
|
||||||
|
if (key in this.keys) {
|
||||||
|
this.keys[key] = true
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 键盘释放事件处理
|
||||||
|
* @param {KeyboardEvent} event - 键盘事件
|
||||||
|
*/
|
||||||
|
handleKeyUp(event) {
|
||||||
|
if (!this.config.enabled) return
|
||||||
|
|
||||||
|
const key = event.key.toLowerCase()
|
||||||
|
if (key in this.keys) {
|
||||||
|
this.keys[key] = false
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始动画循环
|
||||||
|
*/
|
||||||
|
startAnimation() {
|
||||||
|
if (this.animationFrameId) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId)
|
||||||
|
}
|
||||||
|
this.updateCamera()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止动画循环
|
||||||
|
*/
|
||||||
|
stopAnimation() {
|
||||||
|
if (this.animationFrameId) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId)
|
||||||
|
this.animationFrameId = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新相机位置
|
||||||
|
*/
|
||||||
|
updateCamera() {
|
||||||
|
if (!this.config.enabled) return
|
||||||
|
|
||||||
|
// 检查是否有按键被按下
|
||||||
|
const hasMovement = Object.values(this.keys).some(pressed => pressed)
|
||||||
|
|
||||||
|
if (hasMovement) {
|
||||||
|
// 获取相机的当前方向向量
|
||||||
|
const camera = this.camera
|
||||||
|
const right = camera.right.clone()
|
||||||
|
const up = camera.up.clone()
|
||||||
|
|
||||||
|
// 计算移动向量
|
||||||
|
let moveVector = new Cesium.Cartesian3(0, 0, 0)
|
||||||
|
|
||||||
|
// 上下移动 (W/S)
|
||||||
|
if (this.keys.w) {
|
||||||
|
moveVector = Cesium.Cartesian3.add(moveVector, up, moveVector)
|
||||||
|
}
|
||||||
|
if (this.keys.s) {
|
||||||
|
const down = Cesium.Cartesian3.negate(up, new Cesium.Cartesian3())
|
||||||
|
moveVector = Cesium.Cartesian3.add(moveVector, down, moveVector)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左右移动 (A/D)
|
||||||
|
if (this.keys.a) {
|
||||||
|
const left = Cesium.Cartesian3.negate(right, new Cesium.Cartesian3())
|
||||||
|
moveVector = Cesium.Cartesian3.add(moveVector, left, moveVector)
|
||||||
|
}
|
||||||
|
if (this.keys.d) {
|
||||||
|
moveVector = Cesium.Cartesian3.add(moveVector, right, moveVector)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标准化移动向量
|
||||||
|
if (Cesium.Cartesian3.magnitude(moveVector) > 0) {
|
||||||
|
moveVector = Cesium.Cartesian3.normalize(moveVector, moveVector)
|
||||||
|
|
||||||
|
// 应用灵敏度和移动速度
|
||||||
|
const moveDistance = this.config.moveSpeed * this.config.sensitivity
|
||||||
|
moveVector = Cesium.Cartesian3.multiplyByScalar(moveVector, moveDistance, moveVector)
|
||||||
|
|
||||||
|
// 移动相机
|
||||||
|
camera.move(moveVector, moveDistance)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 继续动画循环
|
||||||
|
this.animationFrameId = requestAnimationFrame(this.updateCamera)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 销毁控制器
|
||||||
|
*/
|
||||||
|
destroy() {
|
||||||
|
this.disable()
|
||||||
|
this.viewer = null
|
||||||
|
this.camera = null
|
||||||
|
this.scene = null
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前配置
|
||||||
|
* @returns {Object} 当前配置对象
|
||||||
|
*/
|
||||||
|
getConfig() {
|
||||||
|
return { ...this.config }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新配置
|
||||||
|
* @param {Object} newConfig - 新的配置选项
|
||||||
|
*/
|
||||||
|
updateConfig(newConfig) {
|
||||||
|
this.config = { ...this.config, ...newConfig }
|
||||||
|
|
||||||
|
// 如果灵敏度超出范围，自动调整
|
||||||
|
if (this.config.sensitivity < 0.001) {
|
||||||
|
this.config.sensitivity = 0.001
|
||||||
|
} else if (this.config.sensitivity > 0.1) {
|
||||||
|
this.config.sensitivity = 0.1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置所有按键状态
|
||||||
|
*/
|
||||||
|
resetKeys() {
|
||||||
|
this.keys = { w: false, s: false, a: false, d: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否正在移动
|
||||||
|
* @returns {boolean} 是否有按键被按下
|
||||||
|
*/
|
||||||
|
isMoving() {
|
||||||
|
return Object.values(this.keys).some(pressed => pressed)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CameraController
|
||||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
// 创建Vue应用实例
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
// 挂载应用
|
||||||
|
app.mount('#app')
|
||||||
81
src/style.css
Normal file
81
src/style.css
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
/* 全局样式重置 */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cesium容器样式 */
|
||||||
|
.cesium-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 工具栏样式 */
|
||||||
|
.toolbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(42, 42, 42, 0.8);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar button {
|
||||||
|
background: #48b884;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 16px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar button:hover {
|
||||||
|
background: #369870;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息面板样式 */
|
||||||
|
.info-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(42, 42, 42, 0.9);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-panel h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #48b884;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-panel p {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
28
vite.config.js
Normal file
28
vite.config.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import cesium from 'vite-plugin-cesium'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
cesium()
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
port: 3001,
|
||||||
|
open: true
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
sourcemap: false,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
cesium: ['cesium']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
CESIUM_BASE_URL: JSON.stringify('/cesium/')
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user