@yangyongtao/gaea 1.1.6 → 1.1.8

package/README.md

@@ -8,7 +8,7 @@ Gaea 3D 可视化组件库 — 基于 Godot WASM 引擎的 Vue 3 组件包。
 npm install @yangyongtao/gaea
 ```
 
-## 项目配置
+## 快速开始
 
 ### 1. `vite.config.js`
 
@@ -19,140 +19,107 @@ import { gaeaVitePlugin } from '@yangyongtao/gaea/plugin';
 
 export default defineConfig({
   plugins: [vue(), gaeaVitePlugin()],
-  resolve: {
-    preserveSymlinks: true,
-  },
-  optimizeDeps: {
-    exclude: ['@yangyongtao/gaea'],
-  },
+  resolve: { preserveSymlinks: true },
+  optimizeDeps: { exclude: ['@yangyongtao/gaea'] },
 });
 ```
 
-`gaeaVitePlugin()` 会自动完成：
-- 在 HTML 中注入 `<script src="/Gaea.js">`
-- 提供 `/Gaea.js` `/Gaea.wasm` `/Gaea.pck` 等所有 public/ 静态文件
-- 设置 COEP/COOP 响应头
-- 检测浏览器跨域隔离状态
-
-### 2. `src/App.vue` — 完整初始化示例
+### 2. `src/App.vue`
 
 ```vue
 <template>
-  <canvas id="canvas" style="width:100vw;height:100vh"></canvas>
+  <div id="gaea-app">
+    <div class="toolbar">
+      <button @click="showWeather = !showWeather">天气控制</button>
+      <button @click="showFly = !showFly">沿线飞行</button>
+    </div>
+
+    <div class="canvas-area">
+      <canvas id="canvas"></canvas>
+    </div>
+
+    <WeatherControl v-if="showWeather" :appInstance="app" @close="showWeather = false" />
+    <FlyAlongRoute v-if="showFly" :appInstance="app" @close="showFly = false" />
+  </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { ref } from 'vue';
 import { GaeaApp, setConfig } from '@yangyongtao/gaea';
+import { WeatherControl, FlyAlongRoute } from '@yangyongtao/gaea/components';
+
+// 配置
+setConfig({
+  serveLocal: `${window.location.origin}/static/`,
+  serveUrl: 'http://192.168.3.151:8088/gaeaExplorerServer/',
+  defaultLayers: [
+    { layerName: 'earthland', forMat: 'image/png', min: 0, max: 18, transparency: 0.3 },
+    { layerName: '苍南L19',  forMat: 'image/png', min: 5, max: 17 },
+  ],
+  defaultCameraPosition: '27.3680928977018,120.414139621887,0,109379.690132486,0,0',
+});
 
+// 初始化（自动完成：引擎启动 → 环境初始化 → 图层加载）
 const app = new GaeaApp();
 window.APP = app;
 
-onMounted(async () => {
-  setConfig({
-    serveLocal: `${window.location.origin}/static/`,
-    serveUrl: 'http://192.168.3.151:8088/gaeaExplorerServer/',
-  });
-
-  new window.Engine({
-    args: [],
-    canvasResizePolicy: 2,
-    executable: '/Gaea',
-    experimentalVK: false,
-    fileSizes: {
-      'Gaea.pck': 450751936,
-      'Gaea.wasm': 16580215,
-    },
-    focusCanvas: true,
-    gdnativeLibs: [],
-  }).startGame({
-    onProgress: (current, total) => console.log(`加载: ${current}/${total}`),
-  });
-
-  await app.initDefaultEnvironment();
-
-  app.getAllServe().then(() => {
-    app.addLayer({ layerName: 'earthland', forMat: 'image/png', min: 0, max: 18, transparency: 0.3 });
-    app.addLayer({ layerName: '苍南L19',  forMat: 'image/png', min: 5, max: 17 });
-  });
-});
+const showWeather = ref(false);
+const showFly = ref(false);
 </script>
 ```
 
-> **注意**：`fileSizes` 需与 npm 包 `public/Gaea.pck` 和 `public/Gaea.wasm` 实际文件大小一致。
-
 ## API
 
-### 配置
+### 配置项
 
 ```js
 import { setConfig } from '@yangyongtao/gaea';
 
 setConfig({
-  serveUrl: 'http://192.168.3.151:8088/gaeaExplorerServer/',
-  serveLocal: 'http://localhost:8080/static/',
+  serveUrl: '',           // WMTS 服务地址
+  serveLocal: '',          // 静态资源地址
+  defaultLayers: [],       // 默认影像图层
+  defaultCameraPosition: 'lat,lng,alt,dist,pitch,heading',
+  onProgress: (cur, total) => {},  // 引擎加载进度回调
 });
 ```
 
-### 环境初始化
-
-```js
-await app.initDefaultEnvironment();
-```
-
-### 影像图层
-
-```js
-await app.getAllServe();
+### GaeaApp 方法
 
-app.addLayer({
-  layerName: 'earthland',
-  forMat: 'image/png',
-  min: 0, max: 18,
-  transparency: 0.3,
-});
-```
-
-### 相机控制
-
-```js
-app.SetPosition('27.3809, 120.4499, 0, 3000, 0, 0');
-const uri = app.favorite();
-app.favoritePosition(uri);
-```
+| 方法 | 说明 |
+|------|------|
+| `new GaeaApp(options)` | 创建实例，自动初始化引擎/环境/图层 |
+| `app.getAllServe()` | 获取 WMTS 服务图层列表 |
+| `app.addLayer({ layerName, forMat, min, max, transparency })` | 添加影像图层 |
+| `app.SetPosition('lat,lng,alt,dist,pitch,heading')` | 定位到指定视角 |
+| `app.favorite()` | 记录当前视角，返回 URI 字符串 |
+| `app.favoritePosition(uri)` | 恢复已保存的视角 |
+| `app.ready` | Promise，等待初始化完成 |
 
 ### Vue 组件
 
 ```vue
 <script setup>
 import { WeatherControl, FlyAlongRoute } from '@yangyongtao/gaea/components';
+
+const app = window.APP;
+const show = ref(false);
 </script>
 
 <template>
-  <WeatherControl :appInstance="app" @close="close" />
-  <FlyAlongRoute :appInstance="app" @close="close" />
+  <WeatherControl :appInstance="app" @close="show = false" />
+  <FlyAlongRoute :appInstance="app" @close="show = false" />
 </template>
 ```
 
 ### 其他导出
 
-| 导出 | 路径 |
-|------|------|
-| `gaeaVitePlugin` | `@yangyongtao/gaea/plugin` |
-| `GaeaPlugin` (v-drag 指令) | `@yangyongtao/gaea/plugin` |
-| `loadResource`, `screenToLatLng` | `@yangyongtao/gaea` |
-
-## 静态资源
-
-npm 包 `public/` 中的文件由 `gaeaVitePlugin` 自动提供服务。
-
-```
-public/
-├── Gaea.js / Gaea.wasm / Gaea.pck   # Godot 引擎核心
-├── index.js                           # Godot 类绑定
-├── math/                              # 数学工具
-└── static/                            # 点标注、底图、模型等资源
-```
+| 导出 | 路径 | 说明 |
+|------|------|------|
+| `GaeaApp`, `setConfig`, `getConfig` | `@yangyongtao/gaea` | 核心功能 |
+| `loadResource`, `screenToLatLng` | `@yangyongtao/gaea` | 工具函数 |
+| `WeatherControl`, `FlyAlongRoute` | `@yangyongtao/gaea/components` | Vue 组件 |
+| `gaeaVitePlugin`, `GaeaPlugin` | `@yangyongtao/gaea/plugin` | Vite 插件 / v-drag 指令 |
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yangyongtao/gaea",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "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.",
   "type": "module",
   "main": "src/index.js",

package/src/GaeaMethods.js

@@ -23,7 +23,13 @@ const defaultConfig = {
   canvasResizePolicy: 2,
   experimentalVK: false,
   focusCanvas: true,
-  /** 默认加载的影像图层 */
+  /** 是否使用天地图（true 时跳过 getAllServe，直接加载天地图影像） */
+  useTianditu: false,
+  /** 天地图 token */
+  tiandituToken: '63201cfd7df1e1bff7d88bb8baa32151',
+  /** 天地图最小/最大层级 */
+  tiandituLevelRange: [0, 18],
+  /** 默认加载的影像图层（useTianditu=false 时生效） */
   defaultLayers: [
     { layerName: 'earthland', forMat: 'image/png', min: 0, max: 18, transparency: 0.3 },
     { layerName: '苍南L19',  forMat: 'image/png', min: 5, max: 17 },
@@ -143,17 +149,44 @@ export class GaeaApp {
 
   async _initLayers() {
     const cfg = this.config;
-    await this.getAllServe();
-
-    const pos = cfg.defaultCameraPosition;
-    if (pos) this.SetPosition(pos);
 
-    const list = cfg.defaultLayers;
-    if (list?.length) {
-      for (const layer of list) {
-        this.addLayer(layer);
+    if (cfg.useTianditu) {
+      // 天地图模式：不走 getAllServe，直接加载天地图
+      this.addTianditu();
+    } else {
+      // WMTS 服务模式
+      await this.getAllServe();
+      const list = cfg.defaultLayers;
+      if (list?.length) {
+        for (const layer of list) {
+          this.addLayer(layer);
+        }
       }
     }
+
+    const pos = cfg.defaultCameraPosition;
+    if (pos) {
+      // 等一帧再设相机，确保引擎把图层处理完
+      await new Promise(r => requestAnimationFrame(r));
+      this.SetPosition(pos);
+    }
+  }
+
+  // ---- 天地图 ----
+
+  /** 加载天地图影像 */
+  addTianditu() {
+    const cfg = this.config;
+    const store = new Gaea.TDTWMTSImageStore();
+    store.ServerUri = cfg.tiandituServerUri || 'https://t{0}.tianditu.gov.cn/img_c/wmts';
+    store.FormatString = cfg.tiandituFormatString || 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={0}&TILEROW={1}&TILEMATRIX={2}&tk={3}';
+    store.ImageExtension = cfg.tiandituImageExtension ?? Gaea.ImageExtensionEnum.JPEG;
+    store.TK = cfg.tiandituToken;
+    store.Name = '影像底图';
+    store.LevelRange = new Gaea.Vector2(cfg.tiandituLevelRange[0], cfg.tiandituLevelRange[1]);
+    Gaea.World.Instance.DefaultPyramidTileSet.AddImageStore(store);
+    console.log('天地图影像加载成功');
+    return store;
   }
 
   // ---- 公开方法 ----