@yangyongtao/gaea 1.1.6 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -93
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Gaea 3D 可视化组件库 — 基于 Godot WASM 引擎的 Vue 3 组件包。
|
|
|
8
8
|
npm install @yangyongtao/gaea
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## 快速开始
|
|
12
12
|
|
|
13
13
|
### 1. `vite.config.js`
|
|
14
14
|
|
|
@@ -19,140 +19,107 @@ import { gaeaVitePlugin } from '@yangyongtao/gaea/plugin';
|
|
|
19
19
|
|
|
20
20
|
export default defineConfig({
|
|
21
21
|
plugins: [vue(), gaeaVitePlugin()],
|
|
22
|
-
resolve: {
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
optimizeDeps: {
|
|
26
|
-
exclude: ['@yangyongtao/gaea'],
|
|
27
|
-
},
|
|
22
|
+
resolve: { preserveSymlinks: true },
|
|
23
|
+
optimizeDeps: { exclude: ['@yangyongtao/gaea'] },
|
|
28
24
|
});
|
|
29
25
|
```
|
|
30
26
|
|
|
31
|
-
`
|
|
32
|
-
- 在 HTML 中注入 `<script src="/Gaea.js">`
|
|
33
|
-
- 提供 `/Gaea.js` `/Gaea.wasm` `/Gaea.pck` 等所有 public/ 静态文件
|
|
34
|
-
- 设置 COEP/COOP 响应头
|
|
35
|
-
- 检测浏览器跨域隔离状态
|
|
36
|
-
|
|
37
|
-
### 2. `src/App.vue` — 完整初始化示例
|
|
27
|
+
### 2. `src/App.vue`
|
|
38
28
|
|
|
39
29
|
```vue
|
|
40
30
|
<template>
|
|
41
|
-
<
|
|
31
|
+
<div id="gaea-app">
|
|
32
|
+
<div class="toolbar">
|
|
33
|
+
<button @click="showWeather = !showWeather">天气控制</button>
|
|
34
|
+
<button @click="showFly = !showFly">沿线飞行</button>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="canvas-area">
|
|
38
|
+
<canvas id="canvas"></canvas>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<WeatherControl v-if="showWeather" :appInstance="app" @close="showWeather = false" />
|
|
42
|
+
<FlyAlongRoute v-if="showFly" :appInstance="app" @close="showFly = false" />
|
|
43
|
+
</div>
|
|
42
44
|
</template>
|
|
43
45
|
|
|
44
46
|
<script setup>
|
|
45
|
-
import {
|
|
47
|
+
import { ref } from 'vue';
|
|
46
48
|
import { GaeaApp, setConfig } from '@yangyongtao/gaea';
|
|
49
|
+
import { WeatherControl, FlyAlongRoute } from '@yangyongtao/gaea/components';
|
|
50
|
+
|
|
51
|
+
// 配置
|
|
52
|
+
setConfig({
|
|
53
|
+
serveLocal: `${window.location.origin}/static/`,
|
|
54
|
+
serveUrl: 'http://192.168.3.151:8088/gaeaExplorerServer/',
|
|
55
|
+
defaultLayers: [
|
|
56
|
+
{ layerName: 'earthland', forMat: 'image/png', min: 0, max: 18, transparency: 0.3 },
|
|
57
|
+
{ layerName: '苍南L19', forMat: 'image/png', min: 5, max: 17 },
|
|
58
|
+
],
|
|
59
|
+
defaultCameraPosition: '27.3680928977018,120.414139621887,0,109379.690132486,0,0',
|
|
60
|
+
});
|
|
47
61
|
|
|
62
|
+
// 初始化(自动完成:引擎启动 → 环境初始化 → 图层加载)
|
|
48
63
|
const app = new GaeaApp();
|
|
49
64
|
window.APP = app;
|
|
50
65
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
serveLocal: `${window.location.origin}/static/`,
|
|
54
|
-
serveUrl: 'http://192.168.3.151:8088/gaeaExplorerServer/',
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
new window.Engine({
|
|
58
|
-
args: [],
|
|
59
|
-
canvasResizePolicy: 2,
|
|
60
|
-
executable: '/Gaea',
|
|
61
|
-
experimentalVK: false,
|
|
62
|
-
fileSizes: {
|
|
63
|
-
'Gaea.pck': 450751936,
|
|
64
|
-
'Gaea.wasm': 16580215,
|
|
65
|
-
},
|
|
66
|
-
focusCanvas: true,
|
|
67
|
-
gdnativeLibs: [],
|
|
68
|
-
}).startGame({
|
|
69
|
-
onProgress: (current, total) => console.log(`加载: ${current}/${total}`),
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
await app.initDefaultEnvironment();
|
|
73
|
-
|
|
74
|
-
app.getAllServe().then(() => {
|
|
75
|
-
app.addLayer({ layerName: 'earthland', forMat: 'image/png', min: 0, max: 18, transparency: 0.3 });
|
|
76
|
-
app.addLayer({ layerName: '苍南L19', forMat: 'image/png', min: 5, max: 17 });
|
|
77
|
-
});
|
|
78
|
-
});
|
|
66
|
+
const showWeather = ref(false);
|
|
67
|
+
const showFly = ref(false);
|
|
79
68
|
</script>
|
|
80
69
|
```
|
|
81
70
|
|
|
82
|
-
> **注意**:`fileSizes` 需与 npm 包 `public/Gaea.pck` 和 `public/Gaea.wasm` 实际文件大小一致。
|
|
83
|
-
|
|
84
71
|
## API
|
|
85
72
|
|
|
86
|
-
###
|
|
73
|
+
### 配置项
|
|
87
74
|
|
|
88
75
|
```js
|
|
89
76
|
import { setConfig } from '@yangyongtao/gaea';
|
|
90
77
|
|
|
91
78
|
setConfig({
|
|
92
|
-
serveUrl: '
|
|
93
|
-
serveLocal: '
|
|
79
|
+
serveUrl: '', // WMTS 服务地址
|
|
80
|
+
serveLocal: '', // 静态资源地址
|
|
81
|
+
defaultLayers: [], // 默认影像图层
|
|
82
|
+
defaultCameraPosition: 'lat,lng,alt,dist,pitch,heading',
|
|
83
|
+
onProgress: (cur, total) => {}, // 引擎加载进度回调
|
|
94
84
|
});
|
|
95
85
|
```
|
|
96
86
|
|
|
97
|
-
###
|
|
98
|
-
|
|
99
|
-
```js
|
|
100
|
-
await app.initDefaultEnvironment();
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### 影像图层
|
|
104
|
-
|
|
105
|
-
```js
|
|
106
|
-
await app.getAllServe();
|
|
87
|
+
### GaeaApp 方法
|
|
107
88
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
```js
|
|
119
|
-
app.SetPosition('27.3809, 120.4499, 0, 3000, 0, 0');
|
|
120
|
-
const uri = app.favorite();
|
|
121
|
-
app.favoritePosition(uri);
|
|
122
|
-
```
|
|
89
|
+
| 方法 | 说明 |
|
|
90
|
+
|------|------|
|
|
91
|
+
| `new GaeaApp(options)` | 创建实例,自动初始化引擎/环境/图层 |
|
|
92
|
+
| `app.getAllServe()` | 获取 WMTS 服务图层列表 |
|
|
93
|
+
| `app.addLayer({ layerName, forMat, min, max, transparency })` | 添加影像图层 |
|
|
94
|
+
| `app.SetPosition('lat,lng,alt,dist,pitch,heading')` | 定位到指定视角 |
|
|
95
|
+
| `app.favorite()` | 记录当前视角,返回 URI 字符串 |
|
|
96
|
+
| `app.favoritePosition(uri)` | 恢复已保存的视角 |
|
|
97
|
+
| `app.ready` | Promise,等待初始化完成 |
|
|
123
98
|
|
|
124
99
|
### Vue 组件
|
|
125
100
|
|
|
126
101
|
```vue
|
|
127
102
|
<script setup>
|
|
128
103
|
import { WeatherControl, FlyAlongRoute } from '@yangyongtao/gaea/components';
|
|
104
|
+
|
|
105
|
+
const app = window.APP;
|
|
106
|
+
const show = ref(false);
|
|
129
107
|
</script>
|
|
130
108
|
|
|
131
109
|
<template>
|
|
132
|
-
<WeatherControl :appInstance="app" @close="
|
|
133
|
-
<FlyAlongRoute :appInstance="app" @close="
|
|
110
|
+
<WeatherControl :appInstance="app" @close="show = false" />
|
|
111
|
+
<FlyAlongRoute :appInstance="app" @close="show = false" />
|
|
134
112
|
</template>
|
|
135
113
|
```
|
|
136
114
|
|
|
137
115
|
### 其他导出
|
|
138
116
|
|
|
139
|
-
| 导出 | 路径 |
|
|
140
|
-
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
|
|
145
|
-
## 静态资源
|
|
146
|
-
|
|
147
|
-
npm 包 `public/` 中的文件由 `gaeaVitePlugin` 自动提供服务。
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
public/
|
|
151
|
-
├── Gaea.js / Gaea.wasm / Gaea.pck # Godot 引擎核心
|
|
152
|
-
├── index.js # Godot 类绑定
|
|
153
|
-
├── math/ # 数学工具
|
|
154
|
-
└── static/ # 点标注、底图、模型等资源
|
|
155
|
-
```
|
|
117
|
+
| 导出 | 路径 | 说明 |
|
|
118
|
+
|------|------|------|
|
|
119
|
+
| `GaeaApp`, `setConfig`, `getConfig` | `@yangyongtao/gaea` | 核心功能 |
|
|
120
|
+
| `loadResource`, `screenToLatLng` | `@yangyongtao/gaea` | 工具函数 |
|
|
121
|
+
| `WeatherControl`, `FlyAlongRoute` | `@yangyongtao/gaea/components` | Vue 组件 |
|
|
122
|
+
| `gaeaVitePlugin`, `GaeaPlugin` | `@yangyongtao/gaea/plugin` | Vite 插件 / v-drag 指令 |
|
|
156
123
|
|
|
157
124
|
## License
|
|
158
125
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yangyongtao/gaea",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.7",
|
|
4
4
|
"description": "Gaea 3D visualization component library - Vue 3 components based on Godot WASM engine. Includes WMTS layer loading, camera view control, Vite plugin auto-injection, etc.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.js",
|