@yangyongtao/gaea 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yangyongtao/gaea",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "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.cjs",

package/src/GaeaMethods.js

@@ -46,9 +46,17 @@ import Gaea from '../public/index.js';
       transition: background 0.2s; backdrop-filter: blur(4px);
     }
     #gaea-reset-btn:hover { background: rgba(0,0,0,0.7); }
+    #gaea-layertree-btn {
+      position: fixed; top: 16px; right: 60px; z-index: 99990;
+      width: 36px; height: 36px; border-radius: 6px; border: none;
+      background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
+      font-size: 16px; display: flex; align-items: center; justify-content: center;
+      transition: background 0.2s; backdrop-filter: blur(4px);
+    }
+    #gaea-layertree-btn:hover { background: rgba(0,0,0,0.7); }
     /* 屏幕图标样式（对齐 ht_3dview） */
     .gaea-locationLineStyle {
-      position: absolute; overflow: hidden; z-index: 999; pointer-events: auto;
+      position: absolute; overflow: hidden; z-index: 99; pointer-events: auto;
       user-select: none; -webkit-user-select: none;
     }
     .gaea-locationLineStyle .text-wrapper {
@@ -67,7 +75,7 @@ import Gaea from '../public/index.js';
     }
     .gaea-iconscreen {
       position: absolute; overflow: hidden; width: 169px; height: 55px;
-      user-select: none; -webkit-user-select: none; z-index: 999; pointer-events: auto;
+      user-select: none; -webkit-user-select: none; z-index: 99; pointer-events: auto;
     }
     .gaea-iconscreen img {
       position: absolute; width: 100%; height: 100%;
@@ -146,12 +154,16 @@ const defaultConfig = {
     { name: '苍南县村边界',      range: [15, 19], color: [255, 255, 255], index: 60 },
     { name: '沿浦海塘工程范围线', range: [0, 21],  color: [0, 255, 255],   index: 120 },
   ],
+  /** 默认加载的倾斜摄影 3D Tiles（空数组则不加载） */
+  default3DTiles: [],
   /** 默认相机视角 */
   defaultCameraPosition: '27.3680928977018,120.414139621887,0,109379.690132486,0,0',
   /** 引擎加载进度回调 */
   onProgress: null,
   /** DataHub API 地址（图层树数据接口），为空则只用默认数据 */
   dataHubApiUrl: '',
+  /** 是否显示图层树按钮（右上角重置按钮旁边） */
+  showLayerTreeBtn: false,
   /** 图层树分类数据（默认数据，接口数据会合并进来） */
   layerCategories: [
     { key: 'seawall',             text: '海塘',       visible: true,  children: [
@@ -265,6 +277,8 @@ export function getConfig() { return _config; }
 
 // ==================== GaeaApp ====================
 
+console.log('[GaeaMethods] 模块已加载 - setCategoryVisible 可用');
+
 export class GaeaApp {
   constructor(options = {}) {
     this._options = options;
@@ -272,10 +286,10 @@ export class GaeaApp {
     this.tLayers = [];
     this.layerCategories = this.config.layerCategories || [];
     this._screenIconList = [];
+    this._hiddenCategories = new Set();
     this._secIsClickArr = [];
     this._secScreenIconKeyValue = {};
     this._groundPolygonElements = [];
-    this._categoryIcons = {};
     this.tweenGroup = new TWEEN.Group();
     this._tourConfig = {
       '沿浦水闸': { direction: [-0.5, 0.3, 0.3], positionList: [
@@ -340,6 +354,7 @@ export class GaeaApp {
     // 影像/地形就绪即可显示地图，隐藏 loading，避免用户等待模型/接口
     hideLoading();
     this._addResetButton();
+    this._addLayerTreeButton();
     console.log('[GaeaApp] 地图已就绪，模型与图层树数据后台加载中...');
 
     // 剩余重资源（模型位置、GLTF、图层树接口、屏幕图标）后台异步加载，不阻塞地图显示
@@ -460,7 +475,7 @@ export class GaeaApp {
     const cfg = this.config;
 
     if (cfg.serviceMode === 'online') {
-      // 在线模式：仅加载天地图影像，不加载地形/贴地线
+      // 在线模式：仅加载天地图影像，不加载地形/贴地线/3D Tiles
       this.addTianditu();
     } else {
       // 服务平台模式：WMTS 影像 + 贴地线 + 地形
@@ -475,6 +490,9 @@ export class GaeaApp {
       try { this.addGroundLines(); } catch (e) { console.error('加载贴地线失败:', e); }
       // 地形服务
       try { await this.addInitTerrainServer(); } catch (e) { console.error('加载地形失败:', e); }
+      // 倾斜摄影 3D Tiles（isInitLoad 为 true 的自动加载，依赖地形服务）
+      const tiles = cfg.default3DTiles || []
+      tiles.filter(item => item.isInitLoad).forEach(item => this.add3DTiles(item))
     }
 
     const pos = cfg.defaultCameraPosition;
@@ -487,19 +505,33 @@ export class GaeaApp {
 
   // ---- 天地图 ----
 
-  /** 加载天地图影像 */
+  /** 加载天地图影像 + 注记 */
   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);
+
+    // 影像底图（卫星图）
+    const imgStore = new Gaea.TDTWMTSImageStore();
+    imgStore.ServerUri = cfg.tiandituServerUri || 'https://t{0}.tianditu.gov.cn/img_c/wmts';
+    imgStore.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}';
+    imgStore.ImageExtension = cfg.tiandituImageExtension ?? Gaea.ImageExtensionEnum.JPEG;
+    imgStore.TK = cfg.tiandituToken;
+    imgStore.Name = '影像底图';
+    imgStore.LevelRange = new Gaea.Vector2(cfg.tiandituLevelRange[0], cfg.tiandituLevelRange[1]);
+    Gaea.World.Instance.DefaultPyramidTileSet.AddImageStore(imgStore);
     console.log('天地图影像加载成功');
-    return store;
+
+    // 注记图层（道路/地名标注）
+    const labelStore = new Gaea.TDTWMTSImageStore();
+    labelStore.ServerUri = 'https://t{0}.tianditu.gov.cn/cia_c/wmts';
+    labelStore.FormatString = 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=image/png&TILECOL={0}&TILEROW={1}&TILEMATRIX={2}&tk={3}';
+    labelStore.ImageExtension = Gaea.ImageExtensionEnum.PNG;
+    labelStore.TK = cfg.tiandituToken;
+    labelStore.Name = '天地图注记';
+    labelStore.LevelRange = new Gaea.Vector2(9, 15);
+    Gaea.World.Instance.DefaultPyramidTileSet.AddImageStore(labelStore);
+    console.log('天地图注记加载成功');
+
+    return { imgStore, labelStore };
   }
 
   /** 添加右上角重置按钮 */
@@ -550,6 +582,19 @@ export class GaeaApp {
     document.body.appendChild(btn);
   }
 
+  /** 添加图层树按钮 */
+  _addLayerTreeButton() {
+    if (document.getElementById('gaea-layertree-btn')) return
+    const btn = document.createElement('button')
+    btn.id = 'gaea-layertree-btn'
+    btn.title = '图层控制'
+    btn.innerHTML = '☰'
+    btn.onclick = () => {
+      document.dispatchEvent(new CustomEvent('gaea-toggle-layertree'))
+    }
+    document.body.appendChild(btn)
+  }
+
   // ---- GLTF 模型 ----
 
   async _loadGltfModels() {
@@ -806,18 +851,13 @@ export class GaeaApp {
     };
     console.log('[GaeaApp] 开始创建屏幕图标... categories:', cats.length);
     let count = 0;
-    this._categoryIcons = {};
     for (const cat of cats) {
       if (!cat.children?.length) continue;
-      this._categoryIcons[cat.key] = [];
       const cfg = catConfig[cat.key] || { img: '', method: 'textImage', visibleRange: [10, 50000], offset: [-40, -35], drawLine: false };
       for (const child of cat.children) {
         if (!child.position) continue;
         count++;
         try {
-          const safeId = child.text.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '_');
-          const divId = 'gaea-icon-' + safeId;
-          this._categoryIcons[cat.key].push(divId);
           this.addScreenIcon({
             name: child.text,
             text: child.text,
@@ -828,6 +868,7 @@ export class GaeaApp {
             visibleRange: cfg.visibleRange,
             anchorType: cfg.anchorType,
             drawLine: cfg.drawLine,
+            category: cat.key,
             onClick: (name, data) => {
               if (cfg.onClick) cfg.onClick(name, { ...child, ...data });
             },
@@ -836,8 +877,14 @@ export class GaeaApp {
           console.warn(`[GaeaApp] 图标 ${child.text} 创建失败:`, e.message);
         }
       }
+      // 根据配置的 visible 决定初始显隐（不影响创建，只控制初始状态）
+      if (cat.visible === false) {
+        this.setCategoryVisible(cat.key, false);
+      }
     }
     console.log('[GaeaApp] 屏幕图标创建完成, 共:', count);
+    // 通知外部图标已就绪
+    document.dispatchEvent(new CustomEvent('gaea-icons-ready'));
   }
 
   // ---- 图层分类显隐控制 ----
@@ -848,23 +895,35 @@ export class GaeaApp {
    * @param {boolean} visible 是否可见
    */
   setCategoryVisible(categoryKey, visible) {
-    const divIds = this._categoryIcons?.[categoryKey];
-    if (!divIds?.length) return;
-    divIds.forEach(divId => {
-      const el = document.getElementById(divId);
-      if (el) el.style.display = visible ? '' : 'none';
+    // 记录分类显隐状态
+    if (visible) {
+      this._hiddenCategories.delete(categoryKey)
+    } else {
+      this._hiddenCategories.add(categoryKey)
+    }
+    const els = document.querySelectorAll('.gaea-cat-' + categoryKey);
+    console.log('[GaeaApp] setCategoryVisible:', categoryKey, visible, '元素数:', els.length);
+    els.forEach(el => { el.style.display = visible ? '' : 'none'; });
+    // 同步引擎可见性
+    const items = this._screenIconList.filter(item => item.category === categoryKey);
+    items.forEach(item => {
+      if (visible) {
+        item.element.UseAutoVisible();
+        item.element.EnablePick = true;
+      } else {
+        item.element.ForceSetVisible(false);
+        item.element.EnablePick = false;
+      }
     });
   }
 
   /**
-   * 获取某个分类的当前可见性（根据第一个图标的 display 状态判断）
+   * 获取某个分类的当前可见性（根据 DOM 元素判断）
    * @param {string} categoryKey
    * @returns {boolean}
    */
   getCategoryVisible(categoryKey) {
-    const divIds = this._categoryIcons?.[categoryKey];
-    if (!divIds?.length) return true;
-    const el = document.getElementById(divIds[0]);
+    const el = document.querySelector('.gaea-cat-' + categoryKey);
     return el ? el.style.display !== 'none' : true;
   }
 
@@ -1087,6 +1146,68 @@ export class GaeaApp {
     this.SetPosition(`${x},${y},${z},${h},0,0`);
   }
 
+  /**
+   * 根据名称或 id 定位到海塘
+   * @param {string} name - 海塘名称或 id
+   * @param {string} [tilesetUrl] - 可选，倾斜摄影 3D Tiles 的 tileset.json 地址
+   */
+  flyToSeawall = (name, tilesetUrl) => {
+    const cats = this.layerCategories || []
+    for (const cat of cats) {
+      if (!cat.children?.length) continue
+      const found = cat.children.find(c => c.text === name || c.id === name)
+      if (found) {
+        this.flyToNode(found)
+        if (tilesetUrl) {
+          this.add3DTiles(tilesetUrl)
+        }
+        return
+      }
+    }
+    console.warn(`[GaeaApp] 未找到海塘: ${name}`)
+  };
+
+  /**
+   * 加载倾斜摄影 3D Tiles
+   * @param {Object} item - { jsonUrl: tileset.json地址, tilName?: 名称, height?: 高度偏移, isInitLoad?: 是否初始化加载 }
+   */
+  add3DTiles = (item) => {
+    const tilesetUrl = typeof item === 'string' ? item : item.jsonUrl
+    const name = typeof item === 'string' ? '' : (item.tilName || '')
+    const height = typeof item === 'string' ? 0 : (item.height || 0)
+    const tileset = new Gaea.Gaea3DTileset()
+    tileset.Name = name
+    tileset.TilesetUrl = tilesetUrl
+    tileset.EnablePick = true
+    tileset.UseLight = false
+    tileset.SkipLevelOfDetail = false
+    tileset.IsZUp = true
+    tileset.RecalculateNormals = true
+    tileset.BaseUrl = tilesetUrl.slice(0, tilesetUrl.lastIndexOf('/') + 1)
+    tileset.InitTileSet(name, tilesetUrl)
+    tileset.MaximumMemoryUsage = 512
+    tileset.MaximumScreenSpaceError = 28
+    if (height) {
+      tileset.LocalOffset = new Gaea.Vector3(0, height, 0)
+    }
+    Gaea.World.Instance.RenderableObjectList.AddLast(tileset)
+    console.log('[GaeaApp] 3D Tiles 已加载:', name || tilesetUrl, height ? `高度: ${height}` : '')
+    return tileset
+  };
+
+  /**
+   * 根据经纬度飞到指定位置
+   * @param {number} lat - 纬度
+   * @param {number} lng - 经度
+   * @param {number} [z=0] - 地面高程
+   * @param {number} [alt=500] - 相机高度
+   * @param {number} [pitch=0] - 俯仰角，默认 0（垂直俯视），负值向前倾斜
+   * @param {number} [yaw=0] - 偏航角
+   */
+  flyToPosition = (lat, lng, z = 0, alt = 500, pitch = 0, yaw = 0) => {
+    this.SetPosition(`${lat},${lng},${z},${alt},${pitch},${yaw}`)
+  };
+
   // ---- 沿线飞行 ----
 
   /**
@@ -1210,7 +1331,7 @@ export class GaeaApp {
    * 添加屏幕图标（参考 ht_3dview 三种创建方式）
    * @param {string} opts.method - 'textImage' | 'styled' | 'imageOnly'
    */
-  addScreenIcon({ name, text, imgUrl, position, method = 'textImage', offset = [0, 0], visibleRange = [10, 50000], anchorType = 6, drawLine = false, onClick, type = null, divId: externalDivId, elementName, elementChildrenIndex } = {}) {
+  addScreenIcon({ name, text, imgUrl, position, method = 'textImage', offset = [0, 0], visibleRange = [10, 50000], anchorType = 6, drawLine = false, onClick, type = null, category = null, divId: externalDivId, elementName, elementChildrenIndex } = {}) {
     const safeId = name.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '_');
     const divId = externalDivId || 'gaea-icon-' + safeId;
 
@@ -1264,12 +1385,17 @@ export class GaeaApp {
 
     } // end else (externalDivId)
 
+    // 打分类标记，用于按类别显隐
+    if (category) {
+      container.classList.add('gaea-cat-' + category);
+    }
+
     if (!externalDivId) {
       document.body.appendChild(container);
     }
 
     container.style.position = 'absolute';
-    container.style.zIndex = '9999';
+    container.style.zIndex = '99';
     container.style.pointerEvents = 'auto';
     container.style.cursor = 'pointer';
 
@@ -1313,7 +1439,7 @@ export class GaeaApp {
         console.log('[GaeaApp] child:', !!child);
         if (child) {
           child.AddChild(screen, false);
-          const screenItem = { element: screen, type: type || null };
+          const screenItem = { element: screen, type: type || null, category };
           this._screenIconList.push(screenItem);
           return screen;
         }
@@ -1324,7 +1450,7 @@ export class GaeaApp {
 
     screen.GeographyPosition = new Gaea.Vector3(position.x, position.y, position.z || 0);
     Gaea.World.Instance.RenderableObjectList.AddLast(screen);
-    const screenItem = { element: screen, type: type || null };
+    const screenItem = { element: screen, type: type || null, category };
      this._screenIconList.push(screenItem);
     return screen;
   }
@@ -1339,6 +1465,35 @@ export class GaeaApp {
     Gaea.World.Instance.DefaultCamera.GotoFavorite(uri);
   }
 
+  /**
+   * 添加点位标记到 3D 地图
+   * @param {Object} opts
+   * @param {string} opts.name - 唯一标识名
+   * @param {string} [opts.text] - 显示文本
+   * @param {number} opts.lat - 纬度
+   * @param {number} opts.lng - 经度
+   * @param {number} [opts.z=0] - 高度
+   * @param {string} [opts.imgUrl] - 图标地址
+   * @param {'textImage'|'styled'|'imageOnly'} [opts.method='textImage'] - 显示样式
+   * @param {Array<number>} [opts.offset=[0,0]] - 屏幕偏移
+   * @param {Function} [opts.onClick] - 点击回调
+   * @param {string} [opts.category] - 分类标识（用于图层树显隐控制）
+   * @returns {Gaea.ScreenGUIElement} screen 元素
+   */
+  addMarker({ name, text, lat, lng, z = 0, imgUrl, method = 'textImage', offset = [0, 0], onClick, category } = {}) {
+    return this.addScreenIcon({
+      name,
+      text: text || name,
+      imgUrl,
+      position: { x: lat, y: lng, z },
+      method,
+      offset,
+      onClick,
+      category,
+      type: 'marker'
+    })
+  }
+
   // ---- 引擎动画方法 ----
 
   hiddenScreenWithClass(className) {
@@ -1854,6 +2009,30 @@ export class GaeaApp {
       this._typhoonElement = null;
     }
   };
+
+  /** 显示所有屏幕标记 */
+  showAllMarkers = () => {
+    this._screenIconList.forEach(item => {
+      // 跳过被隐藏分类的标记
+      if (this._hiddenCategories.has(item.category)) return
+      item.element.UseAutoVisible()
+      item.element.EnablePick = true
+      // 同步显示 DOM 元素
+      const el = document.getElementById(item.element.DivID)
+      if (el) el.style.display = ''
+    })
+  };
+
+  /** 隐藏所有屏幕标记 */
+  hideAllMarkers = () => {
+    this._screenIconList.forEach(item => {
+      item.element.ForceSetVisible(false)
+      item.element.EnablePick = false
+      // 同步隐藏 DOM 元素
+      const el = document.getElementById(item.element.DivID)
+      if (el) el.style.display = 'none'
+    })
+  };
 }
 
 export default GaeaApp;

package/src/components/LayerTree.vue

@@ -18,14 +18,9 @@
               <span v-else>▾</span>
             </span>
             <!-- 分类复选框 -->
-            <label class="category-checkbox" @click.stop>
-              <input
-                type="checkbox"
-                :checked="categoryVisibility[rootNode.key] !== false"
-                @change="onCategoryToggle(rootNode.key, $event.target.checked)"
-              />
-              <span class="checkmark"></span>
-            </label>
+            <div class="category-checkbox" @click.stop="onCategoryToggle(rootNode.key, !categoryVisibility[rootNode.key])">
+              <span class="checkmark" :class="{ checked: categoryVisibility[rootNode.key] !== false }"></span>
+            </div>
             <span class="node-text" :class="{ 'expanded-yellow': rootNode.isExpanded }">{{ rootNode.text }}</span>
           </div>
 
@@ -63,12 +58,10 @@ function handleHideLayerTree() {
 
 onMounted(() => {
   const raw = props.appInstance?.layerCategories || [];
-  categories.value = raw
-    .filter(c => c.visible !== false)
-    .map(c => ({ ...c, isExpanded: false }));
-  // 初始化每个分类的可见性状态
+  categories.value = raw.map(c => ({ ...c, isExpanded: false }));
+  // 初始化每个分类的可见性状态：按配置的 visible 字段
   for (const cat of categories.value) {
-    categoryVisibility[cat.key] = props.appInstance?.getCategoryVisible?.(cat.key) ?? true;
+    categoryVisibility[cat.key] = cat.visible !== false;
   }
   window.addEventListener('gaea-hide-layertree', handleHideLayerTree);
 });
@@ -78,6 +71,7 @@ onBeforeUnmount(() => {
 });
 
 function onCategoryToggle(categoryKey, checked) {
+  console.log('[LayerTree] onCategoryToggle:', categoryKey, checked, 'appInstance:', !!props.appInstance, 'setCategoryVisible:', !!props.appInstance?.setCategoryVisible);
   categoryVisibility[categoryKey] = checked;
   props.appInstance?.setCategoryVisible?.(categoryKey, checked);
 }
@@ -129,8 +123,8 @@ const filteredData = computed(() => {
 <style scoped>
 .layer-tree-dialog {
   position: fixed;
-  top: 10px;
-  left: 10px;
+  top: 120px;
+  right: 20px;
   width: 300px;
   background: var(--lt-bg);
   border-radius: var(--lt-border-radius);
@@ -312,7 +306,6 @@ const filteredData = computed(() => {
 
 /* ===== 分类复选框 ===== */
 .category-checkbox {
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -323,13 +316,6 @@ const filteredData = computed(() => {
   user-select: none;
 }
 
-.category-checkbox input[type="checkbox"] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
 .checkmark {
   width: 100%;
   height: 100%;
@@ -342,12 +328,12 @@ const filteredData = computed(() => {
   transition: all 0.15s ease;
 }
 
-.category-checkbox input:checked + .checkmark {
+.checkmark.checked {
   background: var(--lt-checkbox-checked-bg);
   border-color: var(--lt-checkbox-checked-bg);
 }
 
-.category-checkbox input:checked + .checkmark::after {
+.checkmark.checked::after {
   content: '';
   width: 4px;
   height: 8px;