@yangyongtao/gaea 1.0.0

package/src/components/WeatherControl.vue

@@ -0,0 +1,593 @@
+<template>
+  <div class="weather-panel" v-drag>
+    <div class="panel-header title">
+      <span class="panel-title">天气控制</span>
+      <button class="close-btn" @click="handleClose">×</button>
+    </div>
+
+    <div class="panel-body">
+      <!-- 雨 -->
+      <div class="weather-section">
+        <div class="weather-header">
+          <span class="weather-label"><i class="fas fa-cloud-rain"></i> 下雨</span>
+          <label class="switch">
+            <input type="checkbox" v-model="rainEnabled" @change="onRainChange">
+            <span class="slider"></span>
+          </label>
+        </div>
+        <div v-show="rainEnabled" class="weather-sliders">
+          <div class="slider-row">
+            <label>方向</label>
+            <input type="range" min="-1.5" max="1.5" step="0.1" v-model.number="rainDirection" @input="onRainDirectionChange" />
+            <span class="val">{{ rainDirection.toFixed(1) }}</span>
+          </div>
+          <div class="slider-row">
+            <label>速度</label>
+            <input type="range" min="0" max="100" step="5" v-model.number="rainSpeed" @input="onRainSpeedChange" />
+            <span class="val">{{ rainSpeed }}</span>
+          </div>
+          <div class="slider-row">
+            <label>雨量</label>
+            <input type="range" min="0" max="1000" step="5" v-model.number="rainCount" @input="onRainCountChange" />
+            <span class="val">{{ rainCount }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 台风标注 -->
+      <div class="weather-section">
+        <div class="weather-header">
+          <span class="weather-label"><i class="fas fa-wind"></i> 台风路线</span>
+        </div>
+        <!-- 地图拾取模式开关 -->
+        <div class="pick-row">
+          <button
+            class="btn"
+            :class="typhoonPicking ? 'btn-picking-active' : 'btn-picking'"
+            @click="toggleTyphoonPickMode"
+          >
+            <i class="fas" :class="typhoonPicking ? 'fa-check-circle' : 'fa-map-marker-alt'"></i>
+            {{ typhoonPicking ? '拾取中(点击地图添加点位)...' : '地图拾取台风点位' }}
+          </button>
+        </div>
+        <!-- 台风点位列表 -->
+        <div class="typhoon-point-list" v-if="typhoonPoints.length > 0">
+          <div class="typhoon-point-header">
+            <span>台风点位 ({{ typhoonPoints.length }})</span>
+            <button class="btn-clear-small" @click="clearTyphoonPoints">清空</button>
+          </div>
+          <div class="typhoon-point-items">
+            <div v-for="(tp, i) in typhoonPoints" :key="i" class="typhoon-point-item">
+              <span class="tp-index">{{ i + 1 }}</span>
+              <span class="tp-coords">{{ tp.lng.toFixed(6) }}, {{ tp.lat.toFixed(6) }}</span>
+              <button class="tp-delete" @click="removeTyphoonPoint(i)">×</button>
+            </div>
+          </div>
+        </div>
+        <div class="typhoon-btns">
+          <button class="btn btn-typhoon-load" @click="loadTyphoonRoute" :disabled="typhoonLoading || typhoonPoints.length === 0">
+            <i class="fas fa-wind"></i> {{ typhoonLoading ? '加载中...' : '加载台风路线' }}
+          </button>
+          <button class="btn btn-typhoon-clear" @click="clearAllTyphoon">
+            清除全部
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeUnmount } from 'vue';
+import { GaeaApp } from '../GaeaMethods.js';
+
+const props = defineProps({
+  appInstance: { type: Object, default: null }
+});
+const emit = defineEmits(['close']);
+
+// 使用传入的 appInstance 或创建默认实例
+const APP = props.appInstance || (window.APP || new GaeaApp());
+
+// ---- 天气状态 ----
+const rainEnabled = ref(false);
+
+// 雨参数
+const rainDirection = ref(0);
+const rainSpeed = ref(5);
+const rainCount = ref(30);
+
+// ---- Gaea 对象（惰性初始化） ----
+let fullScreenQuad = null;
+let sun = null;
+let environment = null;
+
+const initGaea = () => {
+  if (fullScreenQuad) return;
+  fullScreenQuad = Gaea.World.Instance.FullScreenQuad;
+  sun = Gaea.Sun.ConvertBy(Gaea.World.Instance.GetNode('Sun'));
+  environment = Gaea.Environment.ConvertBy(
+    Gaea.GaeaResourceLoader.Instance.LoadLoaclResource('res://default_env.tres')
+  );
+};
+
+// ---- 雨 ----
+const onRainChange = () => {
+  initGaea();
+  if (!fullScreenQuad) return;
+
+  if (rainEnabled.value) {
+
+    fullScreenQuad.Visible = true;
+    fullScreenQuad.NeedAtmosphere = true;
+
+    // --- 日照 ---
+    sun.TimeString = '2022-09-15 00:00:00';
+    sun.LightColor = new Gaea.Color(1, 1, 1, 1);
+    sun.LightEnergy = 0.05;
+    environment.BackgroundEnergy = 0.11;
+    environment.GlowBlendMode = 1;
+
+    // --- 下雨参数 ---
+    fullScreenQuad.RainyCount = rainCount.value;
+    fullScreenQuad.Speed = rainSpeed.value;
+    fullScreenQuad.WindDirection = rainDirection.value;
+    fullScreenQuad.Rainy = true;
+  } else {
+    // --- 关闭下雨 ---
+    sun.TimeString = '2022-09-15 12:00:00';
+    sun.LightColor = new Gaea.Color(1, 226 / 255, 164 / 255, 1);
+    sun.LightEnergy = 3.5;
+    environment.BackgroundEnergy = 0.2;
+    environment.GlowBlendMode = 2;
+
+    fullScreenQuad.Rainy = false;
+  }
+};
+
+const onRainDirectionChange = () => {
+  if (!fullScreenQuad || !rainEnabled.value) return;
+  fullScreenQuad.WindDirection = rainDirection.value;
+};
+
+const onRainSpeedChange = () => {
+  if (!fullScreenQuad || !rainEnabled.value) return;
+  fullScreenQuad.Speed = rainSpeed.value;
+};
+
+const onRainCountChange = () => {
+  if (!fullScreenQuad || !rainEnabled.value) return;
+  fullScreenQuad.RainyCount = rainCount.value;
+};
+
+// ---- 关闭 ----
+const handleClose = () => {
+  emit('close');
+};
+
+// ---- 台风标注（打点模式） ----
+const typhoonLoading = ref(false);
+const typhoonPoints = ref([]);
+const typhoonPicking = ref(false);
+let typhoonCanvasHandler = null;
+
+// 点击地图获取经纬度（同 FlyAlongRoute）
+const getTyphoonLatLng = (event) => {
+  try {
+    if (!window.Gaea || !window.Gaea.GaeaMath) return null;
+    const result = window.Gaea.GaeaMath.ProjectPosition(
+      new window.Gaea.Vector2(event.offsetX, event.offsetY)
+    );
+    const lonlat = window.Gaea.GaeaMath.CartesianToSphericalDeg(result);
+    return {
+      lat: lonlat.x,
+      lng: lonlat.y,
+      alt: lonlat.z,
+    };
+  } catch (e) {
+    console.warn('台风点位拾取失败:', e);
+    return null;
+  }
+};
+
+const toggleTyphoonPickMode = () => {
+  if (!typhoonPicking.value) {
+    typhoonPicking.value = true;
+    const canvas = document.getElementById('canvas');
+    if (!canvas) return;
+    typhoonCanvasHandler = (event) => {
+      const pos = getTyphoonLatLng(event);
+      if (pos) {
+        typhoonPoints.value.push({
+          lat: +pos.lat.toFixed(6),
+          lng: +pos.lng.toFixed(6),
+          alt: +pos.alt.toFixed(1) || 0,
+        });
+      }
+    };
+    canvas.addEventListener('mousedown', typhoonCanvasHandler, false);
+  } else {
+    removeTyphoonCanvasListener();
+    typhoonPicking.value = false;
+  }
+};
+
+const removeTyphoonCanvasListener = () => {
+  if (typhoonCanvasHandler) {
+    const canvas = document.getElementById('canvas');
+    if (canvas) {
+      canvas.removeEventListener('mousedown', typhoonCanvasHandler, false);
+    }
+    typhoonCanvasHandler = null;
+  }
+};
+
+const removeTyphoonPoint = (idx) => {
+  typhoonPoints.value.splice(idx, 1);
+};
+
+const clearTyphoonPoints = () => {
+  typhoonPoints.value = [];
+};
+
+const loadTyphoonRoute = async () => {
+  if (typhoonPoints.value.length === 0) return;
+  // 关闭拾取
+  removeTyphoonCanvasListener();
+  typhoonPicking.value = false;
+  typhoonLoading.value = true;
+  try {
+    await APP.addPointIcons(typhoonPoints.value);
+  } catch (error) {
+    console.error('加载台风路线错误:', error);
+  } finally {
+    typhoonLoading.value = false;
+  }
+};
+
+const clearAllTyphoon = () => {
+  clearTyphoonPoints();
+  removeTyphoonCanvasListener();
+  typhoonPicking.value = false;
+  if (APP && APP.clearPointIcons) {
+    APP.clearPointIcons();
+  }
+};
+
+onBeforeUnmount(() => {
+  removeTyphoonCanvasListener();
+});
+</script>
+
+<style lang="less" scoped>
+.weather-panel {
+  position: absolute;
+  top: 100px;
+  left: 600px;
+  z-index: 2000;
+  width: 300px;
+  background: rgba(15, 23, 42, 0.95);
+  border-radius: 12px;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  background: rgba(30, 41, 59, 1);
+  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.panel-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #f1f5f9;
+}
+
+.close-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+.panel-body {
+  padding: 16px;
+}
+
+.weather-section {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: rgba(30, 41, 59, 0.3);
+  border-radius: 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.weather-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.weather-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #f1f5f9;
+}
+
+.weather-label i {
+  margin-right: 6px;
+}
+
+/* 开关样式 */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(71, 85, 105, 0.4);
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: #94a3b8;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #3b82f6;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+  background-color: #fff;
+}
+
+input:disabled + .slider {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* 滑块行 */
+.weather-sliders {
+  margin-top: 8px;
+}
+
+.slider-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  label {
+    width: 36px;
+    font-size: 12px;
+    color: #94a3b8;
+    flex-shrink: 0;
+  }
+
+  input[type="range"] {
+    flex: 1;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(71, 85, 105, 0.4);
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #3b82f6;
+      cursor: pointer;
+    }
+  }
+
+  .val {
+    width: 44px;
+    font-size: 11px;
+    color: #cbd5e1;
+    text-align: right;
+    flex-shrink: 0;
+  }
+}
+
+.btn-typhoon-load {
+  flex: 2;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: linear-gradient(135deg, #f97316, #ea580c);
+  color: #fff;
+  transition: all 0.2s;
+}
+
+.btn-typhoon-load:hover:not(:disabled) {
+  background: linear-gradient(135deg, #ea580c, #c2410c);
+}
+
+.btn-typhoon-load:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-typhoon-clear {
+  flex: 1;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  transition: all 0.2s;
+}
+
+.btn-typhoon-clear:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+/* 地图拾取按钮 */
+.pick-row {
+  margin-bottom: 8px;
+}
+
+.btn-picking {
+  background: rgba(245, 158, 11, 0.2);
+  color: #f59e0b;
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.btn-picking:hover {
+  background: rgba(245, 158, 11, 0.3);
+}
+
+.btn-picking-active {
+  background: rgba(34, 197, 94, 0.3);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.5);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+/* 台风点位列表 */
+.typhoon-point-list {
+  margin-bottom: 8px;
+}
+
+.typhoon-point-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.btn-clear-small {
+  padding: 2px 8px;
+  border: none;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.btn-clear-small:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+.typhoon-point-items {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.typhoon-point-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: rgba(30, 41, 59, 0.6);
+  border-radius: 6px;
+  margin-bottom: 4px;
+}
+
+.tp-index {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #f97316;
+  color: #fff;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tp-coords {
+  flex: 1;
+  font-size: 11px;
+  color: #cbd5e1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: monospace;
+}
+
+.tp-delete {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.tp-delete:hover {
+  background: rgba(239, 68, 68, 0.3);
+}
+
+.typhoon-btns {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as WeatherControl } from './WeatherControl.vue';
+export { default as FlyAlongRoute } from './FlyAlongRoute.vue';

package/src/config.js

@@ -0,0 +1,40 @@
+/**
+ * Gaea 3D Viewer 配置模块
+ * 使用者可通过 setConfig() 在应用初始化时注入配置
+ */
+
+const defaultConfig = {
+  // Gaea 服务地址
+  serveUrl: 'http://localhost:8088/gaeaExplorerServer/',
+  // 静态资源 Base URL（如 http://localhost:9012）
+  serveLocal: '',
+  // 初始相机定位 { x: lat, y: lng, z: alt }
+  defaultPosition: { x: 27.380913, y: 120.449982, z: 80000 },
+  // 地形 TMS 服务
+  terrainList: {},
+  // 开发模式
+  developmentMode: true,
+};
+
+let currentConfig = { ...defaultConfig };
+
+/**
+ * 设置全局配置（在初始化 Gaea 之前调用）
+ * @param {Object} config - 配置对象
+ * @param {string} config.serveUrl - Gaea 服务 URL
+ * @param {string} config.serveLocal - 静态资源 Base URL（必传）
+ * @param {Object} config.defaultPosition - 初始定位
+ * @param {Object} config.terrainList - 地形图层
+ */
+export function setConfig(config) {
+  currentConfig = { ...currentConfig, ...config };
+}
+
+/**
+ * 获取当前配置
+ */
+export function getConfig() {
+  return { ...currentConfig };
+}
+
+export default currentConfig;

package/src/index.js

@@ -0,0 +1,14 @@
+/**
+ * gaea-3dview 主入口
+ */
+
+// 配置
+export { setConfig, getConfig } from './config.js';
+export { default as config } from './config.js';
+
+// 核心类
+export { GaeaApp } from './GaeaMethods.js';
+export { default } from './GaeaMethods.js';
+
+// 工具函数
+export { screenToLatLng, loadResource } from './utils.js';

package/src/utils.js

@@ -0,0 +1,30 @@
+/**
+ * 工具函数
+ */
+
+/** 从URL加载资源到Gaea */
+export function loadResource(url, name) {
+  return new Promise((res, rej) => {
+    if (!window.Gaea || !window.Gaea.GaeaResourceLoader) {
+      rej(new Error('Gaea 未初始化'));
+      return;
+    }
+    window.Gaea.GaeaResourceLoader.Instance.LoadResourceFromUrl1(
+      url, name,
+      (code, msg) => {
+        if (code === 200) res(true);
+        else rej(new Error(msg));
+      }
+    );
+  });
+}
+
+/** 屏幕坐标 → 经纬度 (lat: x, lng: y) */
+export function screenToLatLng(event) {
+  if (!window.Gaea || !window.Gaea.GaeaMath) return null;
+  const result = window.Gaea.GaeaMath.ProjectPosition(
+    new window.Gaea.Vector2(event.offsetX, event.offsetY)
+  );
+  const lonlat = window.Gaea.GaeaMath.CartesianToSphericalDeg(result);
+  return { lat: lonlat.x, lng: lonlat.y, alt: lonlat.z };
+}