@yangyongtao/gaea 1.1.17 → 1.1.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.1.19] - 2026-07-13
+
+### Added
+- `GaeaApp.setCategoryVisible(key, visible)` / `getCategoryVisible(key)` — 按分类控制屏幕图标显隐
+- `LayerTree` 每种分类左侧新增复选框，点击可切换该类图标的显示/隐藏
+- `LayerTree` 所有核心样式通过 `--lt-*` CSS 变量暴露，消费者可在外部覆盖
+
+## [1.1.18] - 2026-07-13
+
+### Fixed
+- 修复引擎初始化时 `querySelector('#')` 报错：`_startEngine` 显式传 `canvas` 元素，避免引擎全局取第一个 canvas（可能命中其他无 id 的 canvas 导致 `.id` 为空）
+
 ## [1.1.17] - 2026-07-10
 
 ### Removed

package/package.json

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

@@ -275,6 +275,7 @@ export class GaeaApp {
     this._secIsClickArr = [];
     this._secScreenIconKeyValue = {};
     this._groundPolygonElements = [];
+    this._categoryIcons = {};
     this.tweenGroup = new TWEEN.Group();
     this._tourConfig = {
       '沿浦水闸': { direction: [-0.5, 0.3, 0.3], positionList: [
@@ -417,8 +418,10 @@ export class GaeaApp {
     }
 
     const cfg = this.config;
+    const canvasEl = document.getElementById('canvas');
     const engine = new window.Engine({
       args: [],
+      canvas: canvasEl,
       canvasResizePolicy: cfg.canvasResizePolicy,
       executable: cfg.executable,
       experimentalVK: cfg.experimentalVK,
@@ -803,13 +806,18 @@ 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,
@@ -832,6 +840,34 @@ export class GaeaApp {
     console.log('[GaeaApp] 屏幕图标创建完成, 共:', count);
   }
 
+  // ---- 图层分类显隐控制 ----
+
+  /**
+   * 设置某个分类图标的可见性
+   * @param {string} categoryKey 分类 key（如 'seawall', 'hydrometricStations' 等）
+   * @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';
+    });
+  }
+
+  /**
+   * 获取某个分类的当前可见性（根据第一个图标的 display 状态判断）
+   * @param {string} categoryKey
+   * @returns {boolean}
+   */
+  getCategoryVisible(categoryKey) {
+    const divIds = this._categoryIcons?.[categoryKey];
+    if (!divIds?.length) return true;
+    const el = document.getElementById(divIds[0]);
+    return el ? el.style.display !== 'none' : true;
+  }
+
   // ---- 公开方法 ----
 
   /** 初始化默认图层和相机视角（手动调用，可传参覆盖配置） */

package/src/components/LayerTree.vue

@@ -1,264 +1,359 @@
-<template>
-  <div class="layer-tree-dialog" v-drag>
-    <div class="title">
-      <div class="title_text">图层控制</div>
-      <div class="closeIcon" @click="$emit('close')"></div>
-    </div>
-
-    <div class="search-container">
-      <input type="text" class="search-input" v-model="searchKey" placeholder="搜索图层..." />
-    </div>
-
-    <div class="layer-tree-container">
-      <div class="layer-tree-content">
-        <div v-for="rootNode in filteredData" :key="rootNode.key" class="layer-tree-node">
-          <div class="node-header" @click.stop="rootNode.isExpanded = !rootNode.isExpanded">
-            <span class="expand-icon">
-              <span v-if="!rootNode.isExpanded">▸</span>
-              <span v-else>▾</span>
-            </span>
-            <span class="node-text" :class="{ 'expanded-yellow': rootNode.isExpanded }">{{ rootNode.text }}</span>
-          </div>
-
-          <div class="node-children" v-if="rootNode.isExpanded">
-            <div v-for="childNode in rootNode.filteredChildren" :key="childNode.text + (childNode.stcd || '')" class="child-node">
-              <div class="node-header" @click.stop="$emit('node-click', { category: rootNode, node: childNode })">
-                <span class="empty-icon"></span>
-                <span class="node-text">{{ childNode.text }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
-import vDrag from '../directives/vDrag.js';
-
-const props = defineProps({
-  appInstance: { type: Object, required: true },
-});
-
-const emit = defineEmits(['close', 'node-click']);
-
-const categories = ref([]);
-const searchKey = ref('');
-
-function handleHideLayerTree() {
-  emit('close');
-}
-
-onMounted(() => {
-  const raw = props.appInstance?.layerCategories || [];
-  categories.value = raw
-    .filter(c => c.visible !== false)
-    .map(c => ({ ...c, isExpanded: false }));
-  window.addEventListener('gaea-hide-layertree', handleHideLayerTree);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('gaea-hide-layertree', handleHideLayerTree);
-});
-
-const filteredData = computed(() => {
-  const kw = searchKey.value.trim().toLowerCase();
-  return categories.value.map(rootNode => {
-    if (!kw) {
-      rootNode.filteredChildren = rootNode.children || [];
-      return rootNode;
-    }
-    const matchRoot = rootNode.text.toLowerCase().includes(kw);
-    const matchedChildren = (rootNode.children || []).filter(c => c.text.toLowerCase().includes(kw));
-    rootNode.filteredChildren = matchedChildren;
-    if (matchRoot || matchedChildren.length) return rootNode;
-    return null;
-  }).filter(Boolean);
-});
-
-</script>
-
-<style scoped>
-.layer-tree-dialog {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  width: 300px;
-  background: rgba(1, 79, 152, 0.85);
-  border-radius: 8px;
-  overflow: hidden;
-  z-index: 10000;
-}
-
-.title {
-  height: 42px;
-  line-height: 42px;
-  padding: 0 14px;
-  color: #fff;
-  font-size: 15px;
-  font-weight: 500;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: move;
-  user-select: none;
-  background-size: 100% 100%;
-}
-
-.title .title_text {
-  font-size: 20px;
-  width: 100px;
-  text-align: left;
-}
-
-.closeIcon {
-  width: 22px;
-  height: 22px;
-  position: relative;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.closeIcon::before,
-.closeIcon::after {
-  content: '';
-  position: absolute;
-  top: 25%;
-  left: 50%;
-  width: 14px;
-  height: 2px;
-  background-color: #fff;
-  border-radius: 1px;
-  transition: background-color 0.2s ease;
-}
-
-.closeIcon::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.closeIcon::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.closeIcon:hover {
-  transform: scale(1.05);
-}
-
-.closeIcon:hover::before,
-.closeIcon:hover::after {
-  background-color: #f0f9ff;
-}
-
-.search-container {
-  padding: 10px 14px 0 14px;
-}
-
-.search-input {
-  width: 100%;
-  padding: 7px 12px;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  outline: none;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-  background: rgba(0,0,0,0.25);
-  color: #fff;
-}
-
-.search-input::placeholder {
-  color: #adb5bd;
-  font-size: 13px;
-}
-
-.layer-tree-container {
-  padding: 6px 0;
-  max-height: 390px;
-  overflow-y: auto;
-}
-
-.layer-tree-container::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-.layer-tree-container::-webkit-scrollbar-track {
-  background: #f8f9fa;
-  border-radius: 3px;
-}
-
-.layer-tree-container::-webkit-scrollbar-thumb {
-  background: #ced4da;
-  border-radius: 3px;
-  transition: background 0.2s ease;
-}
-
-.layer-tree-container::-webkit-scrollbar-thumb:hover {
-  background: #adb5bd;
-}
-
-.layer-tree-node {
-  margin-left: 6px;
-  line-height: 1.7;
-  color: #fff;
-}
-
-.node-header {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.node-header:hover {
-  background-color: #007ffd;
-}
-
-.expand-icon {
-  font-size: 11px;
-  color: #6c757d;
-  width: 12px;
-  height: 12px;
-  text-align: center;
-  user-select: none;
-  cursor: pointer;
-}
-
-.empty-icon {
-  width: 12px;
-  height: 12px;
-  display: inline-block;
-}
-
-.node-icon {
-  font-size: 13px;
-  width: 14px;
-  text-align: center;
-}
-
-.node-text {
-  flex: 1;
-  font-size: 13.5px;
-  text-align: left;
-  transition: color 0.15s ease;
-}
-
-.expanded-yellow {
-  color: #FDB144 !important;
-}
-
-.node-children {
-  margin-left: 14px;
-  padding-left: 4px;
-  border-left: 1px dashed #dee2e6;
-}
-
-.child-node {
-  margin-left: 2px;
-}
-</style>
+<template>
+  <div class="layer-tree-dialog" v-drag>
+    <div class="title">
+      <div class="title_text">图层控制</div>
+      <div class="closeIcon" @click="$emit('close')"></div>
+    </div>
+
+    <div class="search-container">
+      <input type="text" class="search-input" v-model="searchKey" placeholder="搜索图层..." />
+    </div>
+
+    <div class="layer-tree-container">
+      <div class="layer-tree-content">
+        <div v-for="rootNode in filteredData" :key="rootNode.key" class="layer-tree-node">
+          <div class="node-header" @click.stop="rootNode.isExpanded = !rootNode.isExpanded">
+            <span class="expand-icon">
+              <span v-if="!rootNode.isExpanded">▸</span>
+              <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>
+            <span class="node-text" :class="{ 'expanded-yellow': rootNode.isExpanded }">{{ rootNode.text }}</span>
+          </div>
+
+          <div class="node-children" v-if="rootNode.isExpanded">
+            <div v-for="childNode in rootNode.filteredChildren" :key="childNode.text + (childNode.stcd || '')" class="child-node">
+              <div class="node-header" @click.stop="$emit('node-click', { category: rootNode, node: childNode })">
+                <span class="empty-icon"></span>
+                <span class="node-text">{{ childNode.text }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, reactive } from 'vue';
+import vDrag from '../directives/vDrag.js';
+
+const props = defineProps({
+  appInstance: { type: Object, required: true },
+});
+
+const emit = defineEmits(['close', 'node-click']);
+
+const categories = ref([]);
+const searchKey = ref('');
+const categoryVisibility = reactive({});
+
+function handleHideLayerTree() {
+  emit('close');
+}
+
+onMounted(() => {
+  const raw = props.appInstance?.layerCategories || [];
+  categories.value = raw
+    .filter(c => c.visible !== false)
+    .map(c => ({ ...c, isExpanded: false }));
+  // 初始化每个分类的可见性状态
+  for (const cat of categories.value) {
+    categoryVisibility[cat.key] = props.appInstance?.getCategoryVisible?.(cat.key) ?? true;
+  }
+  window.addEventListener('gaea-hide-layertree', handleHideLayerTree);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('gaea-hide-layertree', handleHideLayerTree);
+});
+
+function onCategoryToggle(categoryKey, checked) {
+  categoryVisibility[categoryKey] = checked;
+  props.appInstance?.setCategoryVisible?.(categoryKey, checked);
+}
+
+const filteredData = computed(() => {
+  const kw = searchKey.value.trim().toLowerCase();
+  return categories.value.map(rootNode => {
+    if (!kw) {
+      rootNode.filteredChildren = rootNode.children || [];
+      return rootNode;
+    }
+    const matchRoot = rootNode.text.toLowerCase().includes(kw);
+    const matchedChildren = (rootNode.children || []).filter(c => c.text.toLowerCase().includes(kw));
+    rootNode.filteredChildren = matchedChildren;
+    if (matchRoot || matchedChildren.length) return rootNode;
+    return null;
+  }).filter(Boolean);
+});
+
+</script>
+
+<style>
+/* ===== CSS 变量暴露（消费者可覆盖） ===== */
+:root {
+  --lt-bg: rgba(1, 79, 152, 0.85);
+  --lt-border-radius: 8px;
+  --lt-title-height: 42px;
+  --lt-title-color: #fff;
+  --lt-title-font-size: 20px;
+  --lt-close-color: #fff;
+  --lt-close-hover-color: #f0f9ff;
+  --lt-search-bg: rgba(0, 0, 0, 0.25);
+  --lt-search-color: #fff;
+  --lt-search-placeholder: #adb5bd;
+  --lt-node-color: #fff;
+  --lt-node-hover-bg: #007ffd;
+  --lt-node-expanded-color: #FDB144;
+  --lt-scrollbar-track: #f8f9fa;
+  --lt-scrollbar-thumb: #ced4da;
+  --lt-scrollbar-thumb-hover: #adb5bd;
+  --lt-child-border-color: #dee2e6;
+  --lt-checkbox-size: 16px;
+  --lt-checkbox-bg: rgba(255, 255, 255, 0.2);
+  --lt-checkbox-checked-bg: #3b82f6;
+  --lt-checkbox-border: rgba(255, 255, 255, 0.5);
+}
+</style>
+
+<style scoped>
+.layer-tree-dialog {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  width: 300px;
+  background: var(--lt-bg);
+  border-radius: var(--lt-border-radius);
+  overflow: hidden;
+  z-index: 10000;
+}
+
+.title {
+  height: var(--lt-title-height);
+  line-height: var(--lt-title-height);
+  padding: 0 14px;
+  color: var(--lt-title-color);
+  font-size: 15px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: move;
+  user-select: none;
+  background-size: 100% 100%;
+}
+
+.title .title_text {
+  font-size: var(--lt-title-font-size);
+  width: 100px;
+  text-align: left;
+}
+
+.closeIcon {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.closeIcon::before,
+.closeIcon::after {
+  content: '';
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  width: 14px;
+  height: 2px;
+  background-color: var(--lt-close-color);
+  border-radius: 1px;
+  transition: background-color 0.2s ease;
+}
+
+.closeIcon::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.closeIcon::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.closeIcon:hover {
+  transform: scale(1.05);
+}
+
+.closeIcon:hover::before,
+.closeIcon:hover::after {
+  background-color: var(--lt-close-hover-color);
+}
+
+.search-container {
+  padding: 10px 14px 0 14px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background: var(--lt-search-bg);
+  color: var(--lt-search-color);
+}
+
+.search-input::placeholder {
+  color: var(--lt-search-placeholder);
+  font-size: 13px;
+}
+
+.layer-tree-container {
+  padding: 6px 0;
+  max-height: 390px;
+  overflow-y: auto;
+}
+
+.layer-tree-container::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.layer-tree-container::-webkit-scrollbar-track {
+  background: var(--lt-scrollbar-track);
+  border-radius: 3px;
+}
+
+.layer-tree-container::-webkit-scrollbar-thumb {
+  background: var(--lt-scrollbar-thumb);
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.layer-tree-container::-webkit-scrollbar-thumb:hover {
+  background: var(--lt-scrollbar-thumb-hover);
+}
+
+.layer-tree-node {
+  margin-left: 6px;
+  line-height: 1.7;
+  color: var(--lt-node-color);
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.node-header:hover {
+  background-color: var(--lt-node-hover-bg);
+}
+
+.expand-icon {
+  font-size: 11px;
+  color: #6c757d;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.empty-icon {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.node-icon {
+  font-size: 13px;
+  width: 14px;
+  text-align: center;
+}
+
+.node-text {
+  flex: 1;
+  font-size: 13.5px;
+  text-align: left;
+  transition: color 0.15s ease;
+}
+
+.expanded-yellow {
+  color: var(--lt-node-expanded-color) !important;
+}
+
+.node-children {
+  margin-left: 14px;
+  padding-left: 4px;
+  border-left: 1px dashed var(--lt-child-border-color);
+}
+
+.child-node {
+  margin-left: 2px;
+}
+
+/* ===== 分类复选框 ===== */
+.category-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lt-checkbox-size);
+  height: var(--lt-checkbox-size);
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.category-checkbox input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.checkmark {
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--lt-checkbox-border);
+  border-radius: 3px;
+  background: var(--lt-checkbox-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.category-checkbox input:checked + .checkmark {
+  background: var(--lt-checkbox-checked-bg);
+  border-color: var(--lt-checkbox-checked-bg);
+}
+
+.category-checkbox input:checked + .checkmark::after {
+  content: '';
+  width: 4px;
+  height: 8px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  margin-top: -1px;
+}
+</style>