@yangyongtao/gaea 1.1.12 → 1.1.14

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [1.1.13] - 2026-07-10
+
+### Added
+- 支持 CommonJS 引入（`require`），同时兼容 ESM 和 CJS 项目
+
 ## [1.1.6] - 2026-07-01
 
 ### Changed

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@yangyongtao/gaea",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "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",
+  "main": "src/index.cjs",
   "module": "src/index.js",
   "exports": {
     ".": {
       "import": "./src/index.js",
+      "require": "./src/index.cjs",
       "default": "./src/index.js"
     },
     "./components": {
       "import": "./src/components/index.js",
+      "require": "./src/components/index.cjs",
       "default": "./src/components/index.js"
     },
     "./components/*": "./src/components/*",
     "./plugin": {
       "import": "./src/plugin.js",
+      "require": "./src/plugin.cjs",
       "default": "./src/plugin.js"
     }
   },

package/src/GaeaMethods.js

@@ -274,6 +274,7 @@ export class GaeaApp {
     this._screenIconList = [];
     this._secIsClickArr = [];
     this._secScreenIconKeyValue = {};
+    this._groundPolygonElements = [];
     this.tweenGroup = new TWEEN.Group();
     this._tourConfig = {
       '沿浦水闸': { direction: [-0.5, 0.3, 0.3], positionList: [
@@ -335,47 +336,59 @@ export class GaeaApp {
     await this._initLayers();
     console.log('[GaeaApp] 图层加载完成');
 
-    // 5. 调整模型位置
-    console.log('[GaeaApp] 开始调整模型位置...');
-    const models = [
-      { nodeName: '沿浦水闸', position: '-2876603.788, 4892658.352, 2900208.622', rotation: '-37.24, 162.42, -17.17' },
-      { nodeName: '下在水闸', position: '-2875959.024, 4893109.058, 2900101.919', rotation: '-23.42, -165.20, -34.52' },
-      { nodeName: '联盟水闸', position: '-2878251.995, 4893011.199, 2897998.160', rotation: '-23.43, -165.98, -33.40' },
-      { nodeName: '岭尾新闸', position: '-2877382.212, 4892920.226, 2898965.484', rotation: '7.79, 36.98, 40.83' },
-      { nodeName: '岭尾水闸', position: '-2877582.576, 4892520.352, 2899499.184', rotation: '-41.04, 126.37, 6.29' },
-    ];
-    for (const model of models) {
-      try {
-        const node = Gaea.World.Instance.GetNode(model.nodeName);
-        if (!node) { console.warn(`[GaeaApp] 未找到节点: ${model.nodeName}`); continue; }
-        const inst = Gaea.MeshInstance.ConvertBy(node);
-        const pos = model.position.split(',').map(v => parseFloat(v.trim()));
-        const rot = model.rotation.split(',').map(v => parseFloat(v.trim()));
-        if (inst.Translation) inst.Translation = new Gaea.Vector3(pos[0], pos[1], pos[2]);
-        if (inst.RotationDegrees) inst.RotationDegrees = new Gaea.Vector3(rot[0], rot[1], rot[2]);
-        console.log(`[GaeaApp] 模型 ${model.nodeName} 位置调整完成`);
-      } catch (e) {
-        console.warn(`[GaeaApp] 调整模型 ${model.nodeName} 失败:`, e.message);
+    // 影像/地形就绪即可显示地图，隐藏 loading，避免用户等待模型/接口
+    hideLoading();
+    this._addResetButton();
+    console.log('[GaeaApp] 地图已就绪，模型与图层树数据后台加载中...');
+
+    // 剩余重资源（模型位置、GLTF、图层树接口、屏幕图标）后台异步加载，不阻塞地图显示
+    this._loadRestAsync();
+  }
+
+  /** 后台异步加载：模型位置调整 → GLTF → 图层树数据 → 屏幕图标 */
+  async _loadRestAsync() {
+    try {
+      // 5. 调整模型位置
+      console.log('[GaeaApp] 开始调整模型位置...');
+      const models = [
+        { nodeName: '沿浦水闸', position: '-2876603.788, 4892658.352, 2900208.622', rotation: '-37.24, 162.42, -17.17' },
+        { nodeName: '下在水闸', position: '-2875959.024, 4893109.058, 2900101.919', rotation: '-23.42, -165.20, -34.52' },
+        { nodeName: '联盟水闸', position: '-2878251.995, 4893011.199, 2897998.160', rotation: '-23.43, -165.98, -33.40' },
+        { nodeName: '岭尾新闸', position: '-2877382.212, 4892920.226, 2898965.484', rotation: '7.79, 36.98, 40.83' },
+        { nodeName: '岭尾水闸', position: '-2877582.576, 4892520.352, 2899499.184', rotation: '-41.04, 126.37, 6.29' },
+      ];
+      for (const model of models) {
+        try {
+          const node = Gaea.World.Instance.GetNode(model.nodeName);
+          if (!node) { console.warn(`[GaeaApp] 未找到节点: ${model.nodeName}`); continue; }
+          const inst = Gaea.MeshInstance.ConvertBy(node);
+          const pos = model.position.split(',').map(v => parseFloat(v.trim()));
+          const rot = model.rotation.split(',').map(v => parseFloat(v.trim()));
+          if (inst.Translation) inst.Translation = new Gaea.Vector3(pos[0], pos[1], pos[2]);
+          if (inst.RotationDegrees) inst.RotationDegrees = new Gaea.Vector3(rot[0], rot[1], rot[2]);
+        } catch (e) {
+          console.warn(`[GaeaApp] 调整模型 ${model.nodeName} 失败:`, e.message);
+        }
       }
-    }
-    console.log('[GaeaApp] 所有模型位置调整完成');
+      console.log('[GaeaApp] 所有模型位置调整完成');
 
-    // 6. 加载 GLTF 模型
-    await this._loadGltfModels();
+      // 6. 加载 GLTF 模型
+      await this._loadGltfModels();
 
-    // 7. 获取图层树数据（有接口走接口，没接口用默认）
-    await this._fetchLayerTreeData();
+      // 7. 获取图层树数据（有接口走接口，没接口用默认）
+      await this._fetchLayerTreeData();
 
-    // 同步 layerCategories（修复数据更新未同步的问题）
-    this.layerCategories = this.config.layerCategories || [];
-    console.log('[GaeaApp] layerCategories 更新后:', this.layerCategories.length);
+      // 同步 layerCategories（修复数据更新未同步的问题）
+      this.layerCategories = this.config.layerCategories || [];
+      console.log('[GaeaApp] layerCategories 更新后:', this.layerCategories.length);
 
-    // 8. 初始化屏幕图标
-    this._initScreenIcons();
+      // 8. 初始化屏幕图标
+      this._initScreenIcons();
 
-    hideLoading();
-    this._addResetButton();
-    console.log('[GaeaApp] 初始化完成');
+      console.log('[GaeaApp] 后台资源加载完成');
+    } catch (e) {
+      console.error('[GaeaApp] 后台资源加载出错:', e);
+    }
   }
 
   _waitForCanvas() {
@@ -570,13 +583,14 @@ export class GaeaApp {
     }
 
     console.log('[GaeaApp] 开始加载 GLTF 模型...');
-    for (const item of gltfList) {
+    // 并行加载所有模型（原串行逐个 await 会累加耗时）
+    await Promise.all(gltfList.map(async (item) => {
       item.url = encodeURI(item.url);
       try {
         const el = await this.AddGltf(item);
         if (el) this._gltfElements[item.name] = el;
       } catch (e) { console.warn(`[GaeaApp] 模型 ${item.name} 加载失败:`, e.message); }
-    }
+    }));
     console.log('[GaeaApp] GLTF 模型加载完成');
   }
 
@@ -619,7 +633,7 @@ export class GaeaApp {
       });
 
       Gaea.World.Instance.RenderableObjectList.AddLast(element);
-      setTimeout(() => res(element), 20000);
+      setTimeout(() => res(element), 8000);
     });
   };
 
@@ -948,6 +962,81 @@ export class GaeaApp {
     }
   }
 
+  // ---- 贴地面（矢量面绘制） ----
+
+  /**
+   * 根据坐标数组添加贴地面
+   * @param {Array} coords - 坐标数组，格式 [[lng, lat], [lng, lat], ...]
+   * @param {string} name - 面名称
+   * @param {string} colorHex - 颜色 hex 值，如 '#3498db'
+   * @returns {object|null} 创建的 PolygonGeometryElement，失败返回 null
+   */
+  addGroundPolygonByCoords(coords, name, colorHex) {
+    if (!coords || coords.length < 3) {
+      console.warn(`坐标点不足，跳过: ${name}`);
+      return null;
+    }
+    // 检查是否已存在同名面
+    if (this._groundPolygonElements.find(p => p.name === name)) {
+      console.warn(`贴地面 "${name}" 已存在，跳过`);
+      return null;
+    }
+
+    const positions = coords.map(c => new Gaea.Vector3(c[1], c[0], 50));
+    const geometry = Gaea.Geometry.Create1(Gaea.GeometryType.Polygon, positions);
+
+    const res = Gaea.GaeaResourceLoader.Instance.LoadLoaclResource('res://assets/shaders/polygonClampGround.shader');
+    const shader = Gaea.Shader.ConvertBy(res);
+    const material = new Gaea.ShaderMaterial();
+    material.Shader = shader;
+
+    const hex = colorHex.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    Gaea.World.Instance.SetMtlColor(material, 'albedo', new Gaea.Color(r, g, b, 0.5));
+
+    const symbol = new Gaea.GroundPolygonSymbol();
+    symbol.PrismHeight = 9999;
+    symbol.GroundPolygonMtl = material;
+
+    const polygonElement = new Gaea.PolygonGeometryElement();
+    polygonElement.Symbol = symbol;
+    polygonElement.Shape = geometry;
+    polygonElement.EnablePick = true;
+    polygonElement.EnableEdit = true;
+    polygonElement.NeedIntersectWithMesh = false;
+    polygonElement.EnableVirtualPoint = true;
+    polygonElement.Name = name;
+
+    Gaea.World.Instance.RenderableObjectList.AddLast(polygonElement);
+    this._groundPolygonElements.push({ name, color: colorHex, element: polygonElement });
+    return polygonElement;
+  }
+
+  /** 移除指定贴地面 */
+  removeGroundPolygon(element) {
+    try {
+      Gaea.World.Instance.RenderableObjectList.Remove(element);
+    } catch (err) {
+      console.error('移除贴地面失败:', err);
+    }
+    const idx = this._groundPolygonElements.findIndex(p => p.element === element);
+    if (idx >= 0) this._groundPolygonElements.splice(idx, 1);
+  }
+
+  /** 清除所有贴地面 */
+  clearAllGroundPolygons() {
+    this._groundPolygonElements.forEach(item => {
+      try {
+        Gaea.World.Instance.RenderableObjectList.Remove(item.element);
+      } catch (err) {
+        console.error('移除贴地面失败:', err);
+      }
+    });
+    this._groundPolygonElements = [];
+  }
+
   /** 定位到指定视角（经纬度高程 + 相机参数） */
   SetPosition(numStr) {
     const arr = numStr.split(',').map(s => Number(s.trim()));

package/src/components/VectorPolygonControl.vue

@@ -0,0 +1,396 @@
+<template>
+  <div class="vector-polygon-panel" v-drag>
+    <div class="panel-header title">
+      <span class="panel-title">画矢量面</span>
+      <button class="close-btn" @click="handleClose">&times;</button>
+    </div>
+
+    <div class="panel-body">
+      <!-- 颜色选择 -->
+      <div class="section">
+        <div class="section-header">
+          <span class="section-label"><i class="fas fa-palette"></i> 面颜色</span>
+        </div>
+        <div class="color-row">
+          <div
+            v-for="c in presetColors"
+            :key="c"
+            class="color-block"
+            :class="{ active: polygonColor === c }"
+            :style="{ backgroundColor: c }"
+            @click="polygonColor = c"
+          ></div>
+          <div class="color-custom">
+            <input type="color" v-model="polygonColor" class="color-picker" />
+            <span class="color-hex">{{ polygonColor }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 上传GeoJSON -->
+      <div class="section">
+        <div class="section-header">
+          <span class="section-label"><i class="fas fa-file-upload"></i> 上传GeoJSON</span>
+        </div>
+        <div
+          class="upload-area"
+          :class="{ 'drag-over': isDragOver }"
+          @click="triggerFileInput"
+          @dragover.prevent="isDragOver = true"
+          @dragleave.prevent="isDragOver = false"
+          @drop.prevent="handleFileDrop"
+        >
+          <i class="fas fa-cloud-upload-alt upload-icon"></i>
+          <span class="upload-text">点击或拖拽.geojson文件到此处</span>
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".geojson,.json"
+            multiple
+            style="display: none"
+            @change="handleFileSelect"
+          />
+        </div>
+        <div v-if="uploadingFile" class="upload-status">
+          <i class="fas fa-spinner fa-spin"></i> 正在处理: {{ uploadingFile }}
+        </div>
+      </div>
+
+      <!-- 已加载的面列表 -->
+      <div class="section" v-if="polygonList.length > 0">
+        <div class="section-header">
+          <span class="section-label"><i class="fas fa-list"></i> 已加载矢量面 ({{ polygonList.length }})</span>
+          <button class="btn-clear-small" @click="clearAll">清空全部</button>
+        </div>
+        <div class="polygon-items">
+          <div v-for="(item, i) in polygonList" :key="i" class="polygon-item">
+            <span
+              class="polygon-color-dot"
+              :style="{ backgroundColor: item.color }"
+            ></span>
+            <span class="polygon-name" :title="item.name">{{ item.name }}</span>
+            <button class="polygon-delete" @click="removePolygon(i)" title="删除">
+              <i class="fas fa-trash-alt"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { GaeaApp } from '../GaeaMethods.js';
+import vDrag from '../directives/vDrag.js';
+
+const props = defineProps({
+  appInstance: { type: Object, default: null }
+});
+const emit = defineEmits(['close']);
+
+const APP = props.appInstance || (window.APP || new GaeaApp());
+
+const presetColors = [
+  '#e74c3c', '#e67e22', '#f1c40f', '#2ecc71',
+  '#1abc9c', '#3498db', '#9b59b6', '#34495e',
+];
+
+const polygonColor = ref('#3498db');
+
+const fileInput = ref(null);
+const isDragOver = ref(false);
+const uploadingFile = ref('');
+const polygonList = ref([]);
+
+const triggerFileInput = () => {
+  fileInput.value?.click();
+};
+
+const handleFileDrop = (e) => {
+  isDragOver.value = false;
+  const files = e.dataTransfer.files;
+  if (files.length > 0) processFiles(files);
+};
+
+const handleFileSelect = (e) => {
+  const files = e.target.files;
+  if (files.length > 0) processFiles(files);
+  e.target.value = '';
+};
+
+const processFiles = async (files) => {
+  for (const file of files) {
+    if (!file.name.endsWith('.geojson') && !file.name.endsWith('.json')) continue;
+
+    uploadingFile.value = file.name;
+    try {
+      const text = await file.text();
+      const geojson = JSON.parse(text);
+      const polygons = extractPolygons(geojson, file.name.replace(/\.(geojson|json)$/i, ''));
+      for (const poly of polygons) {
+        const el = APP.addGroundPolygonByCoords(poly.coords, poly.name, polygonColor.value);
+        if (el) {
+          polygonList.value.push({ name: poly.name, color: polygonColor.value, element: el });
+        }
+      }
+    } catch (err) {
+      console.error(`解析GeoJSON文件失败: ${file.name}`, err);
+      alert(`解析文件 "${file.name}" 失败: ${err.message}`);
+    }
+  }
+  uploadingFile.value = '';
+};
+
+const extractPolygons = (geojson, defaultName) => {
+  const results = [];
+
+  const processGeometry = (geom, name) => {
+    if (!geom) return;
+    if (geom.type === 'Polygon') {
+      results.push({ name, coords: geom.coordinates[0] });
+    } else if (geom.type === 'MultiPolygon') {
+      geom.coordinates.forEach((poly, idx) => {
+        results.push({ name: `${name}_${idx + 1}`, coords: poly[0] });
+      });
+    }
+  };
+
+  if (geojson.type === 'FeatureCollection') {
+    geojson.features.forEach((feature, idx) => {
+      const featureName = feature.properties?.name || feature.properties?.Name || `${defaultName}_${idx + 1}`;
+      processGeometry(feature.geometry, featureName);
+    });
+  } else if (geojson.type === 'Feature') {
+    const featureName = geojson.properties?.name || geojson.properties?.Name || defaultName;
+    processGeometry(geojson.geometry, featureName);
+  } else if (geojson.type === 'Polygon') {
+    results.push({ name: defaultName, coords: geojson.coordinates[0] });
+  } else if (geojson.type === 'MultiPolygon') {
+    geojson.coordinates.forEach((poly, idx) => {
+      results.push({ name: `${defaultName}_${idx + 1}`, coords: poly[0] });
+    });
+  }
+
+  return results;
+};
+
+const removePolygon = (index) => {
+  const item = polygonList.value[index];
+  if (!item) return;
+  APP.removeGroundPolygon(item.element);
+  polygonList.value.splice(index, 1);
+};
+
+const clearAll = () => {
+  APP.clearAllGroundPolygons();
+  polygonList.value = [];
+};
+
+const handleClose = () => {
+  emit('close');
+};
+</script>
+
+<style lang="less" scoped>
+.vector-polygon-panel {
+  position: absolute;
+  top: 100px;
+  left: 600px;
+  width: 360px;
+  background: rgba(30, 41, 59, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+  color: #e2e8f0;
+  font-size: 13px;
+  z-index: 10000;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(8px);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #94a3b8;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  &:hover { color: #fff; }
+}
+
+.panel-body {
+  padding: 12px 14px;
+}
+
+.section {
+  margin-bottom: 16px;
+  &:last-child { margin-bottom: 0; }
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.section-label {
+  font-weight: 500;
+  font-size: 13px;
+  color: #cbd5e1;
+  i { margin-right: 6px; color: #3b82f6; }
+}
+
+.btn-clear-small {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover { background: rgba(239, 68, 68, 0.3); }
+}
+
+.color-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.color-block {
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.15s;
+  &:hover { transform: scale(1.1); }
+  &.active {
+    border-color: #fff;
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+  }
+}
+
+.color-custom {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.color-picker {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0;
+  background: transparent;
+  &::-webkit-color-swatch-wrapper { padding: 0; }
+  &::-webkit-color-swatch {
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+.color-hex {
+  font-size: 11px;
+  color: #94a3b8;
+  font-family: monospace;
+}
+
+.upload-area {
+  border: 2px dashed rgba(148, 163, 184, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  &:hover {
+    border-color: rgba(59, 130, 246, 0.5);
+    background: rgba(59, 130, 246, 0.05);
+  }
+  &.drag-over {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+  }
+}
+
+.upload-icon {
+  font-size: 28px;
+  color: #64748b;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.upload-text {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.upload-status {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #3b82f6;
+  i { margin-right: 4px; }
+}
+
+.polygon-items {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.polygon-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  margin-bottom: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 6px;
+  &:hover { background: rgba(255, 255, 255, 0.08); }
+}
+
+.polygon-color-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+.polygon-name {
+  flex: 1;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.polygon-delete {
+  background: none;
+  border: none;
+  color: #64748b;
+  cursor: pointer;
+  padding: 2px 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  &:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+  }
+}
+</style>

package/src/components/index.cjs

@@ -0,0 +1,6 @@
+/**
+ * @yangyongtao/gaea/components - CJS 入口
+ */
+'use strict';
+
+module.exports = import('./index.js').then(m => m);

package/src/components/index.js

@@ -5,3 +5,4 @@ export { default as CommonDialog } from './CommonDialog.vue';
 export { default as HydrologicStationDialog } from './HydrologicStationDialog.vue';
 export { default as SecTourView } from './SecTourView.vue';
 export { default as WaterGateTour } from './WaterGateTour.vue';
+export { default as VectorPolygonControl } from './VectorPolygonControl.vue';

package/src/index.cjs

@@ -0,0 +1,11 @@
+/**
+ * @yangyongtao/gaea - CJS 入口
+ *
+ * CommonJS 用法:
+ *   const gaea = await import('@yangyongtao/gaea');
+ *   或
+ *   require('@yangyongtao/gaea').then(({ GaeaApp, setConfig }) => { ... })
+ */
+'use strict';
+
+module.exports = import('./index.js').then(m => m);

package/src/plugin.cjs

@@ -0,0 +1,6 @@
+/**
+ * @yangyongtao/gaea/plugin - CJS 入口
+ */
+'use strict';
+
+module.exports = import('./plugin.js').then(m => m);