视角距离:
300 km
@@ -125,8 +227,8 @@
-
正在加载3D地球和电缆数据...
-
使用8K高分辨率卫星纹理 | 大陆轮廓更清晰
+
正在初始化全球态势数据...
+
同步卫星、海底光缆、登陆点与BGP态势数据
diff --git a/frontend/public/earth/js/bgp.js b/frontend/public/earth/js/bgp.js
new file mode 100644
index 00000000..08927270
--- /dev/null
+++ b/frontend/public/earth/js/bgp.js
@@ -0,0 +1,1859 @@
+import * as THREE from "three";
+
+import { BGP_CONFIG, CONFIG, PATHS } from "./constants.js";
+import { latLonToVector3 } from "./utils.js";
+
+const bgpGroup = new THREE.Group();
+const bgpOverlayGroup = new THREE.Group();
+const collectorMarkers = [];
+const anomalyMarkers = [];
+const activeEventCountByCollector = new Map();
+
+let showBGP = true;
+let totalAnomalyCount = 0;
+let totalIncidentCount = 0;
+let textureCache = null;
+let eventRingTextureCache = null;
+let collectorTextureCache = null;
+const eventTextureCache = new Map();
+let activeEventOverlay = null;
+let activeCollectorOverlayContext = null;
+const relativeTimeFormatter = new Intl.RelativeTimeFormat("zh-CN", {
+ numeric: "auto",
+});
+const collectorWorldPosition = new THREE.Vector3();
+const collectorSurfaceNormal = new THREE.Vector3();
+const collectorNorthPole = new THREE.Vector3(0, 1, 0);
+const collectorFallbackForward = new THREE.Vector3(0, 0, 1);
+const collectorNorthTangent = new THREE.Vector3();
+const collectorEastTangent = new THREE.Vector3();
+const collectorOrientationMatrix = new THREE.Matrix4();
+const colorScratchA = new THREE.Color();
+const colorScratchB = new THREE.Color();
+const COLLECTOR_SCAN_SPEED_RAD = 0.00018;
+const COLLECTOR_SCAN_REBUILD_MS = 80;
+const MATERIAL_ACCESS_POINT_PATH = "M4.93 4.93A9.97 9.97 0 0 0 2 12c0 2.76 1.12 5.26 2.93 7.07l1.41-1.41A7.94 7.94 0 0 1 4 12c0-2.21.89-4.22 2.34-5.66zm14.14 0l-1.41 1.41A7.96 7.96 0 0 1 20 12c0 2.22-.89 4.22-2.34 5.66l1.41 1.41A9.97 9.97 0 0 0 22 12c0-2.76-1.12-5.26-2.93-7.07M7.76 7.76A5.98 5.98 0 0 0 6 12c0 1.65.67 3.15 1.76 4.24l1.41-1.41A4 4 0 0 1 8 12c0-1.11.45-2.11 1.17-2.83zm8.48 0l-1.41 1.41A4 4 0 0 1 16 12c0 1.11-.45 2.11-1.17 2.83l1.41 1.41A5.98 5.98 0 0 0 18 12c0-1.65-.67-3.15-1.76-4.24M12 10a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2";
+
+function getMarkerTexture() {
+ if (textureCache) return textureCache;
+
+ const canvas = document.createElement("canvas");
+ canvas.width = 128;
+ canvas.height = 128;
+
+ const context = canvas.getContext("2d");
+ if (!context) {
+ textureCache = new THREE.Texture(canvas);
+ return textureCache;
+ }
+
+ const gradient = context.createRadialGradient(64, 64, 8, 64, 64, 56);
+ gradient.addColorStop(0, "rgba(255,255,255,1)");
+ gradient.addColorStop(0.24, "rgba(255,255,255,0.92)");
+ gradient.addColorStop(0.58, "rgba(255,255,255,0.35)");
+ gradient.addColorStop(1, "rgba(255,255,255,0)");
+
+ context.fillStyle = gradient;
+ context.beginPath();
+ context.arc(64, 64, 56, 0, Math.PI * 2);
+ context.fill();
+
+ textureCache = new THREE.CanvasTexture(canvas);
+ return textureCache;
+}
+
+function getEventRingTexture() {
+ if (eventRingTextureCache) return eventRingTextureCache;
+
+ const canvas = document.createElement("canvas");
+ canvas.width = 128;
+ canvas.height = 128;
+ const context = canvas.getContext("2d");
+ if (!context) {
+ eventRingTextureCache = new THREE.Texture(canvas);
+ return eventRingTextureCache;
+ }
+
+ context.clearRect(0, 0, 128, 128);
+ context.strokeStyle = "rgba(255,255,255,0.98)";
+ context.lineWidth = 6;
+ context.beginPath();
+ context.arc(64, 64, 44, 0, Math.PI * 2);
+ context.stroke();
+
+ eventRingTextureCache = new THREE.CanvasTexture(canvas);
+ return eventRingTextureCache;
+}
+
+function getCollectorTexture() {
+ if (collectorTextureCache) return collectorTextureCache;
+
+ const canvas = document.createElement("canvas");
+ canvas.width = 128;
+ canvas.height = 128;
+ const context = canvas.getContext("2d");
+ if (!context) {
+ collectorTextureCache = new THREE.Texture(canvas);
+ return collectorTextureCache;
+ }
+
+ context.clearRect(0, 0, 128, 128);
+
+ context.strokeStyle = BGP_CONFIG.collectorIcon.ringStroke;
+ context.lineWidth = BGP_CONFIG.collectorIcon.ringLineWidth;
+ context.beginPath();
+ context.arc(64, 64, BGP_CONFIG.collectorIcon.ringRadius, 0, Math.PI * 2);
+ context.stroke();
+
+ context.save();
+ context.translate(16, 16);
+ context.scale(4, 4);
+ const path = new Path2D(MATERIAL_ACCESS_POINT_PATH);
+ context.lineJoin = "round";
+ context.lineCap = "round";
+ context.lineWidth = BGP_CONFIG.collectorIcon.pathLineWidth;
+ context.strokeStyle = BGP_CONFIG.collectorIcon.pathStroke;
+ context.stroke(path);
+ context.fillStyle = BGP_CONFIG.collectorIcon.pathFill;
+ context.shadowBlur = 0;
+ context.fill(path);
+ context.fillStyle = BGP_CONFIG.collectorIcon.centerFill;
+ context.beginPath();
+ context.arc(12, 12, BGP_CONFIG.collectorIcon.centerRadius, 0, Math.PI * 2);
+ context.fill();
+ context.restore();
+
+ collectorTextureCache = new THREE.CanvasTexture(canvas);
+ return collectorTextureCache;
+}
+
+function getEventSymbolKind(anomalyType) {
+ const value = String(anomalyType || "").toLowerCase();
+ if (value.includes("origin")) return "triangle";
+ if (value.includes("withdraw")) return "exclamation";
+ if (value.includes("specific") || value.includes("burst")) return "burst";
+ if (value.includes("flap")) return "wave";
+ if (value.includes("leak")) return "leak";
+ return "dot";
+}
+
+function drawTriangleSymbol(context) {
+ context.beginPath();
+ context.moveTo(64, 18);
+ context.lineTo(110, 106);
+ context.lineTo(18, 106);
+ context.closePath();
+ context.fill();
+}
+
+function drawExclamationSymbol(context) {
+ context.beginPath();
+ context.roundRect(52, 22, 24, 62, 12);
+ context.fill();
+ context.beginPath();
+ context.arc(64, 102, 10, 0, Math.PI * 2);
+ context.fill();
+}
+
+function drawWaveSymbol(context) {
+ context.lineWidth = 12;
+ context.lineCap = "round";
+ context.beginPath();
+ context.moveTo(18, 76);
+ context.bezierCurveTo(34, 46, 46, 46, 64, 76);
+ context.bezierCurveTo(80, 106, 94, 106, 110, 76);
+ context.stroke();
+}
+
+function drawBurstSymbol(context) {
+ context.lineWidth = 10;
+ context.lineCap = "round";
+ for (let index = 0; index < 6; index += 1) {
+ const angle = (Math.PI * 2 * index) / 6;
+ const inner = 26;
+ const outer = 48;
+ context.beginPath();
+ context.moveTo(64 + Math.cos(angle) * inner, 64 + Math.sin(angle) * inner);
+ context.lineTo(64 + Math.cos(angle) * outer, 64 + Math.sin(angle) * outer);
+ context.stroke();
+ }
+ context.beginPath();
+ context.arc(64, 64, 16, 0, Math.PI * 2);
+ context.fill();
+}
+
+function drawLeakSymbol(context) {
+ context.lineWidth = 10;
+ context.lineCap = "round";
+ context.beginPath();
+ context.moveTo(28, 96);
+ context.lineTo(64, 28);
+ context.lineTo(100, 96);
+ context.stroke();
+ context.beginPath();
+ context.moveTo(40, 82);
+ context.lineTo(64, 54);
+ context.lineTo(88, 82);
+ context.stroke();
+}
+
+function drawDotSymbol(context) {
+ context.beginPath();
+ context.arc(64, 64, 28, 0, Math.PI * 2);
+ context.fill();
+}
+
+function getEventTexture(anomalyType) {
+ const kind = getEventSymbolKind(anomalyType);
+ if (eventTextureCache.has(kind)) return eventTextureCache.get(kind);
+
+ const canvas = document.createElement("canvas");
+ canvas.width = 128;
+ canvas.height = 128;
+ const context = canvas.getContext("2d");
+ if (!context) {
+ const fallback = new THREE.Texture(canvas);
+ eventTextureCache.set(kind, fallback);
+ return fallback;
+ }
+
+ context.clearRect(0, 0, 128, 128);
+ context.fillStyle = "rgba(255,255,255,0.96)";
+ context.strokeStyle = "rgba(255,255,255,0.96)";
+ context.shadowBlur = 0;
+ context.lineJoin = "round";
+
+ if (kind === "triangle") {
+ drawTriangleSymbol(context);
+ } else if (kind === "exclamation") {
+ drawExclamationSymbol(context);
+ } else if (kind === "wave") {
+ drawWaveSymbol(context);
+ } else if (kind === "burst") {
+ drawBurstSymbol(context);
+ } else if (kind === "leak") {
+ drawLeakSymbol(context);
+ } else {
+ drawDotSymbol(context);
+ }
+
+ const texture = new THREE.CanvasTexture(canvas);
+ eventTextureCache.set(kind, texture);
+ return texture;
+}
+
+function normalizeSeverity(severity) {
+ const value = String(severity || "").trim().toLowerCase();
+
+ if (value === "critical") return "critical";
+ if (value === "high" || value === "major") return "high";
+ if (value === "medium" || value === "moderate" || value === "warning") {
+ return "medium";
+ }
+ if (value === "low" || value === "info" || value === "informational") {
+ return "low";
+ }
+
+ return "medium";
+}
+
+function getSeverityColor(severity) {
+ return BGP_CONFIG.severityColors[normalizeSeverity(severity)];
+}
+
+function getSeverityScale(severity) {
+ return BGP_CONFIG.severityScales[normalizeSeverity(severity)];
+}
+
+function clamp(value, min, max) {
+ return Math.min(max, Math.max(min, value));
+}
+
+function blendHexColors(fromHex, toHex, ratio) {
+ colorScratchA.setHex(fromHex);
+ colorScratchB.setHex(toHex);
+ colorScratchA.lerp(colorScratchB, clamp(ratio, 0, 1));
+ return colorScratchA.getHex();
+}
+
+function getCollectorDistanceScale(marker, camera) {
+ if (!marker || !camera || BGP_CONFIG.sizeStabilization?.enabled === false) return 1;
+
+ marker.getWorldPosition(collectorWorldPosition);
+ const distanceToCamera = camera.position.distanceTo(collectorWorldPosition);
+ const referenceDistance = CONFIG.defaultCameraZ - CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset;
+ const referenceFovRad = (75 * Math.PI) / 180;
+ const cameraFovRad = ((camera.fov || 75) * Math.PI) / 180;
+ const min = Number(BGP_CONFIG.sizeStabilization?.collectorMin ?? 0.6);
+ const max = Number(BGP_CONFIG.sizeStabilization?.collectorMax ?? 1.9);
+ const worldPerPixel =
+ distanceToCamera * Math.tan(cameraFovRad / 2);
+ const referenceWorldPerPixel =
+ referenceDistance * Math.tan(referenceFovRad / 2);
+
+ return clamp(worldPerPixel / referenceWorldPerPixel, min, max);
+}
+
+function getEventDistanceScale(marker, camera) {
+ if (!marker || !camera || BGP_CONFIG.sizeStabilization?.enabled === false) return 1;
+
+ marker.getWorldPosition(collectorWorldPosition);
+ const distanceToCamera = camera.position.distanceTo(collectorWorldPosition);
+ const referenceDistance = CONFIG.defaultCameraZ - CONFIG.earthRadius + BGP_CONFIG.altitudeOffset;
+ const referenceFovRad = (75 * Math.PI) / 180;
+ const cameraFovRad = ((camera.fov || 75) * Math.PI) / 180;
+ const min = Number(BGP_CONFIG.sizeStabilization?.eventMin ?? 0.7);
+ const max = Number(BGP_CONFIG.sizeStabilization?.eventMax ?? 1.9);
+ const worldPerPixel =
+ distanceToCamera * Math.tan(cameraFovRad / 2);
+ const referenceWorldPerPixel =
+ referenceDistance * Math.tan(referenceFovRad / 2);
+
+ return clamp(worldPerPixel / referenceWorldPerPixel, min, max);
+}
+
+function orientCollectorMarkerToSurface(marker, position) {
+ collectorSurfaceNormal.copy(position).normalize();
+ collectorNorthTangent
+ .copy(collectorNorthPole)
+ .projectOnPlane(collectorSurfaceNormal);
+
+ if (collectorNorthTangent.lengthSq() < 1e-6) {
+ collectorNorthTangent
+ .copy(collectorFallbackForward)
+ .projectOnPlane(collectorSurfaceNormal);
+ }
+
+ collectorNorthTangent.normalize();
+ collectorEastTangent
+ .copy(collectorNorthTangent)
+ .cross(collectorSurfaceNormal)
+ .normalize();
+
+ collectorOrientationMatrix.makeBasis(
+ collectorEastTangent,
+ collectorNorthTangent,
+ collectorSurfaceNormal,
+ );
+ marker.quaternion.setFromRotationMatrix(collectorOrientationMatrix);
+}
+
+function getCollectorActivityProfile(markerData) {
+ const recent24h = Number(markerData?.recent_24h_observation_count || 0);
+ const recent7d = Number(markerData?.recent_7d_observation_count || 0);
+ const prefixes = Number(markerData?.prefix_count || 0);
+ const origins = Number(markerData?.origin_asn_count || 0);
+
+ const activityScore =
+ recent24h * 1.7 +
+ recent7d * 0.3 +
+ prefixes * 0.16 +
+ origins * 0.12;
+
+ let tier = "idle";
+ if (activityScore >= 50 || recent24h >= 24) tier = "hot";
+ else if (activityScore >= 20 || recent24h >= 10) tier = "high";
+ else if (activityScore >= 8 || recent24h >= 4) tier = "medium";
+ else if (activityScore > 0) tier = "low";
+
+ const scaleBoost = clamp(1 + Math.log2(activityScore + 1) * 0.12, 1, 1.55);
+ const haloScale =
+ BGP_CONFIG.halo.collectorScale +
+ clamp(Math.log2(recent24h + prefixes + 1) * 2.2, 0, 12);
+ const pulseHaloScale =
+ BGP_CONFIG.halo.collectorPulseScale +
+ clamp(Math.log2(recent24h + recent7d + 1) * 2.8, 0, 14);
+ const coverageHaloScale =
+ BGP_CONFIG.halo.collectorCoverageScale +
+ clamp(Math.log2(prefixes + origins + 1) * 3.4, 0, 18);
+
+ return {
+ tier,
+ color: BGP_CONFIG.collectorHeatColors[tier] || BGP_CONFIG.collectorColor,
+ scaleBoost,
+ haloScale,
+ pulseHaloScale,
+ coverageHaloScale,
+ activityScore,
+ };
+}
+
+function formatLocalDateTime(value) {
+ if (!value) return "-";
+
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return String(value);
+
+ return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}`;
+}
+
+function toDate(value) {
+ if (!value) return null;
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return null;
+ return date;
+}
+
+function formatRelativeTime(value) {
+ const date = toDate(value);
+ if (!date) return null;
+
+ const diffMs = date.getTime() - Date.now();
+ const absMs = Math.abs(diffMs);
+
+ if (absMs < 60 * 1000) {
+ return relativeTimeFormatter.format(Math.round(diffMs / 1000), "second");
+ }
+ if (absMs < 60 * 60 * 1000) {
+ return relativeTimeFormatter.format(Math.round(diffMs / (60 * 1000)), "minute");
+ }
+ if (absMs < 24 * 60 * 60 * 1000) {
+ return relativeTimeFormatter.format(Math.round(diffMs / (60 * 60 * 1000)), "hour");
+ }
+ return relativeTimeFormatter.format(
+ Math.round(diffMs / (24 * 60 * 60 * 1000)),
+ "day",
+ );
+}
+
+export function formatBGPSeverityLabel(severity) {
+ const normalized = normalizeSeverity(severity);
+ switch (normalized) {
+ case "critical":
+ return "严重";
+ case "high":
+ return "高";
+ case "medium":
+ return "中";
+ case "low":
+ return "低";
+ default:
+ return "中";
+ }
+}
+
+export function formatBGPAnomalyTypeLabel(type) {
+ const value = String(type || "").trim().toLowerCase();
+ if (!value) return "-";
+
+ if (value.includes("hijack")) return "前缀劫持";
+ if (value.includes("leak")) return "路由泄露";
+ if (value.includes("withdraw")) return "大规模撤销";
+ if (value.includes("subprefix") || value.includes("more_specific")) {
+ return "更具体前缀异常";
+ }
+ if (value.includes("path")) return "路径突变";
+ if (value.includes("flap")) return "路由抖动";
+
+ return String(type);
+}
+
+export function formatBGPStatusLabel(status) {
+ const value = String(status || "").trim().toLowerCase();
+ if (!value) return "-";
+ if (value === "active") return "活跃";
+ if (value === "resolved") return "已恢复";
+ if (value === "suppressed") return "已抑制";
+ return String(status);
+}
+
+export function formatBGPCollectorStatus(status) {
+ const value = String(status || "").trim().toLowerCase();
+ if (!value) return "在线";
+ if (value === "online") return "在线";
+ if (value === "offline") return "离线";
+ return String(status);
+}
+
+export function formatBGPConfidence(value) {
+ if (value === null || value === undefined || value === "") return "-";
+ const number = Number(value);
+ if (!Number.isFinite(number)) return String(value);
+ if (number >= 0 && number <= 1) {
+ return `${Math.round(number * 100)}%`;
+ }
+ return `${Math.round(number)}%`;
+}
+
+export function formatBGPLocation(city, country) {
+ const cityText = city || "";
+ const countryText = country || "";
+ if (cityText && countryText) return `${cityText}, ${countryText}`;
+ return cityText || countryText || "-";
+}
+
+export function formatBGPRouteChange(originAsn, newOriginAsn) {
+ const from = originAsn ?? "-";
+ const to = newOriginAsn ?? "-";
+
+ if ((from === "-" || from === "" || from === null) && (to === "-" || to === "" || to === null)) {
+ return "-";
+ }
+ if (to === "-" || to === "" || to === null) {
+ return `AS${from}`;
+ }
+ return `AS${from} -> AS${to}`;
+}
+
+export function formatBGPObservedTime(value) {
+ const absolute = formatLocalDateTime(value);
+ const relative = formatRelativeTime(value);
+ if (!relative || absolute === "-") return absolute;
+ return `${relative} (${absolute})`;
+}
+
+export function formatBGPASPath(asPath) {
+ if (!Array.isArray(asPath) || asPath.length === 0) return "-";
+ return asPath.map((asn) => `AS${asn}`).join(" -> ");
+}
+
+export function formatBGPObservedBy(collectors) {
+ if (!Array.isArray(collectors) || collectors.length === 0) return "-";
+ const preview = collectors.slice(0, 3).join(", ");
+ if (collectors.length <= 3) {
+ return `${collectors.length}个观测站 (${preview})`;
+ }
+ return `${collectors.length}个观测站 (${preview} 等)`;
+}
+
+export function formatBGPImpactedScope(regions) {
+ if (!Array.isArray(regions) || regions.length === 0) return "-";
+ const labels = regions
+ .map((region) => {
+ const city = region?.city || "";
+ const country = region?.country || "";
+ return city && country ? `${city}, ${country}` : city || country || "";
+ })
+ .filter(Boolean);
+
+ if (labels.length === 0) return "-";
+ if (labels.length <= 3) return labels.join(" / ");
+ return `${labels.slice(0, 3).join(" / ")} 等${labels.length}地`;
+}
+
+export function formatBGPRelatedCables(items) {
+ if (!Array.isArray(items) || items.length === 0) return "-";
+
+ const labels = items
+ .slice(0, 3)
+ .map((item) => {
+ const landing = item?.landing_point || "";
+ const cables = Array.isArray(item?.cable_names) ? item.cable_names : [];
+ const cableText = cables.length > 0 ? cables.slice(0, 2).join(", ") : "附近登陆点";
+ const distance = item?.distance_km !== undefined ? ` ${item.distance_km}km` : "";
+ return `${landing || cableText} (${cableText}${distance})`;
+ })
+ .filter(Boolean);
+
+ if (labels.length === 0) return "-";
+ if (items.length <= 3) return labels.join(" / ");
+ return `${labels.join(" / ")} 等${items.length}处`;
+}
+
+export function formatBGPScope(scope) {
+ const countries = Array.isArray(scope?.countries) ? scope.countries : [];
+ const cities = Array.isArray(scope?.cities) ? scope.cities : [];
+ const cityText = cities.slice(0, 3).join(" / ");
+ const countryText = countries.slice(0, 3).join(" / ");
+
+ if (cityText && countryText) {
+ return `${cityText} | ${countryText}`;
+ }
+ return cityText || countryText || "-";
+}
+
+export function formatBGPTopEventTypes(items) {
+ if (!Array.isArray(items) || items.length === 0) return "-";
+ return items
+ .slice(0, 3)
+ .map((item) => `${item?.event_type || "-"} x${item?.count || 0}`)
+ .join(" / ");
+}
+
+export function formatBGPCollectorCoverageHalo(markerData) {
+ const prefixes = Number(
+ markerData?.recent_24h_prefix_count ||
+ markerData?.recent_7d_prefix_count ||
+ markerData?.prefix_count ||
+ 0,
+ );
+ const observations = Number(
+ markerData?.recent_24h_observation_count ||
+ markerData?.recent_7d_observation_count ||
+ markerData?.observation_count ||
+ 0,
+ );
+ if (prefixes <= 0 && observations <= 0) return "静态观测站";
+ return `近24h ${observations}条事件 / ${prefixes}个前缀`;
+}
+
+function buildCollectorFeatureData(feature) {
+ const coordinates = feature?.geometry?.coordinates || [];
+ const [longitude, latitude] = coordinates;
+ if (
+ typeof latitude !== "number" ||
+ typeof longitude !== "number" ||
+ Number.isNaN(latitude) ||
+ Number.isNaN(longitude)
+ ) {
+ return null;
+ }
+
+ const properties = feature?.properties || {};
+ return {
+ latitude,
+ longitude,
+ collector: properties.collector || "-",
+ city: properties.city || "-",
+ country: properties.country || "-",
+ status: properties.status || "online",
+ observation_count: properties.observation_count || 0,
+ recent_24h_observation_count: properties.recent_24h_observation_count || 0,
+ recent_7d_observation_count: properties.recent_7d_observation_count || 0,
+ prefix_count: properties.prefix_count || 0,
+ recent_24h_prefix_count: properties.recent_24h_prefix_count || 0,
+ recent_7d_prefix_count: properties.recent_7d_prefix_count || 0,
+ origin_asn_count: properties.origin_asn_count || 0,
+ latest_observed_at: properties.latest_observed_at || null,
+ latest_event_type: properties.latest_event_type || null,
+ top_event_types: Array.isArray(properties.top_event_types)
+ ? properties.top_event_types
+ : [],
+ baseline_scope: properties.baseline_scope || { countries: [], cities: [] },
+ };
+}
+
+function spreadCollectorPositions(markers) {
+ const groups = new Map();
+
+ markers.forEach((marker) => {
+ const key = `${marker.latitude.toFixed(4)}|${marker.longitude.toFixed(4)}`;
+ if (!groups.has(key)) {
+ groups.set(key, []);
+ }
+ groups.get(key).push(marker);
+ });
+
+ groups.forEach((group) => {
+ if (group.length <= 1) return;
+
+ const radius = 1.4;
+ group.forEach((marker, index) => {
+ const angle = (Math.PI * 2 * index) / group.length;
+ marker.displayLatitude =
+ marker.latitude + Math.sin(angle) * radius * 0.28;
+ marker.displayLongitude =
+ marker.longitude + Math.cos(angle) * radius * 0.28;
+ marker.isSpread = true;
+ marker.groupSize = group.length;
+ });
+ });
+
+ markers.forEach((marker) => {
+ if (marker.displayLatitude === undefined) {
+ marker.displayLatitude = marker.latitude;
+ marker.displayLongitude = marker.longitude;
+ marker.isSpread = false;
+ marker.groupSize = 1;
+ }
+ });
+
+ return markers;
+}
+
+function buildAnomalyFeatureData(feature) {
+ const point = extractFeaturePoint(feature);
+ if (!point) return null;
+ const { latitude, longitude } = point;
+ const properties = feature?.properties || {};
+ const meta = extractFeatureMeta(properties, properties.created_at || null);
+
+ return {
+ latitude,
+ longitude,
+ rawSeverity: meta.rawSeverity,
+ severity: meta.severity,
+ collector: properties.collector || "-",
+ city: properties.city || "-",
+ country: properties.country || "-",
+ source: properties.source || "-",
+ anomaly_type: properties.anomaly_type || "-",
+ status: properties.status || "-",
+ prefix: properties.prefix || "-",
+ origin_asn: properties.origin_asn ?? "-",
+ new_origin_asn: properties.new_origin_asn ?? "-",
+ as_path: Array.isArray(properties.as_path) ? properties.as_path : [],
+ collectors: Array.isArray(properties.collectors) ? properties.collectors : [],
+ collector_count: properties.collector_count ?? 1,
+ impacted_regions: Array.isArray(properties.impacted_regions)
+ ? properties.impacted_regions
+ : [],
+ confidence: properties.confidence ?? "-",
+ summary: properties.summary || "-",
+ created_at: meta.createdAt,
+ created_at_raw: meta.createdAtRaw,
+ id:
+ properties.id ||
+ `${properties.collector || "unknown"}-${latitude}-${longitude}`,
+ };
+}
+
+function buildIncidentFeatureData(feature) {
+ const point = extractFeaturePoint(feature);
+ if (!point) return null;
+ const { latitude, longitude } = point;
+ const properties = feature?.properties || {};
+ const startedAt = properties.started_at || properties.created_at || null;
+ const meta = extractFeatureMeta(properties, startedAt);
+ const affectedPrefixes = Array.isArray(properties.affected_prefixes)
+ ? properties.affected_prefixes
+ : [];
+ const affectedAsns = Array.isArray(properties.affected_asns)
+ ? properties.affected_asns
+ : [];
+ const affectedCollectors = Array.isArray(properties.affected_collectors)
+ ? properties.affected_collectors
+ : [];
+ const affectedRegions = Array.isArray(properties.affected_regions)
+ ? properties.affected_regions
+ : [];
+
+ const primaryRegion = affectedRegions[0] || {};
+
+ return {
+ latitude,
+ longitude,
+ rawSeverity: meta.rawSeverity,
+ severity: meta.severity,
+ collector: affectedCollectors[0] || primaryRegion.collector || "-",
+ city: primaryRegion.city || "-",
+ country: primaryRegion.country || "-",
+ source: "bgp_incident",
+ anomaly_type: properties.incident_type || properties.title || "-",
+ incident_type: properties.incident_type || "-",
+ incident_key: properties.incident_key || "-",
+ status: properties.status || "-",
+ prefix: affectedPrefixes[0] || "-",
+ prefixes: affectedPrefixes,
+ origin_asn: affectedAsns[0] ?? "-",
+ new_origin_asn: affectedAsns[1] ?? "-",
+ affected_asns: affectedAsns,
+ as_path: [],
+ collectors: affectedCollectors,
+ collector_count: affectedCollectors.length || 1,
+ impacted_regions: affectedRegions,
+ related_cables: Array.isArray(properties.related_cables)
+ ? properties.related_cables
+ : [],
+ related_ixps: Array.isArray(properties.related_ixps)
+ ? properties.related_ixps
+ : [],
+ confidence: properties.confidence ?? "-",
+ summary: properties.summary || properties.title || "-",
+ created_at: meta.createdAt,
+ created_at_raw: meta.createdAtRaw,
+ route_change:
+ affectedAsns.length > 1
+ ? affectedAsns.slice(0, 2).map((asn) => `AS${asn}`).join(" -> ")
+ : affectedPrefixes.length > 1
+ ? `${affectedPrefixes.length}个前缀簇`
+ : properties.incident_type || "-",
+ observed_by: formatBGPObservedBy(affectedCollectors),
+ impacted_scope: formatBGPImpactedScope(affectedRegions),
+ location: formatBGPLocation(primaryRegion.city, primaryRegion.country),
+ id:
+ properties.id ||
+ properties.incident_key ||
+ `${properties.incident_type || "incident"}-${latitude}-${longitude}`,
+ };
+}
+
+function extractFeaturePoint(feature) {
+ const coordinates = feature?.geometry?.coordinates || [];
+ const [longitude, latitude] = coordinates;
+ if (
+ typeof latitude !== "number" ||
+ typeof longitude !== "number" ||
+ Number.isNaN(latitude) ||
+ Number.isNaN(longitude)
+ ) {
+ return null;
+ }
+ return { latitude, longitude };
+}
+
+function extractFeatureMeta(properties, createdAtRaw) {
+ const severity = normalizeSeverity(properties.severity);
+ return {
+ rawSeverity: properties.severity || severity,
+ severity,
+ createdAt: formatLocalDateTime(createdAtRaw),
+ createdAtRaw: createdAtRaw,
+ };
+}
+
+function clearMarkerArray(markers) {
+ while (markers.length > 0) {
+ const marker = markers.pop();
+ while (marker.children.length > 0) {
+ const child = marker.children.pop();
+ child.material?.dispose();
+ }
+ marker.material?.dispose();
+ bgpGroup.remove(marker);
+ }
+}
+
+function clearGroup(group) {
+ while (group.children.length > 0) {
+ const child = group.children[group.children.length - 1];
+ group.remove(child);
+ if (child.geometry) child.geometry.dispose();
+ if (child.material) child.material.dispose();
+ }
+}
+
+function createSpriteMaterial({ color, opacity }) {
+ return new THREE.SpriteMaterial({
+ map: getMarkerTexture(),
+ color,
+ transparent: true,
+ opacity,
+ depthWrite: false,
+ depthTest: true,
+ blending: THREE.AdditiveBlending,
+ });
+}
+
+function createOverlaySprite({ color, opacity, scale }) {
+ const sprite = new THREE.Sprite(createSpriteMaterial({ color, opacity }));
+ sprite.scale.setScalar(scale);
+ return sprite;
+}
+
+function projectLatLon(lat, lon, bearingDeg, distanceDeg) {
+ const latRad = (lat * Math.PI) / 180;
+ const lonRad = (lon * Math.PI) / 180;
+ const bearing = (bearingDeg * Math.PI) / 180;
+ const angularDistance = (distanceDeg * Math.PI) / 180;
+
+ const targetLat = Math.asin(
+ Math.sin(latRad) * Math.cos(angularDistance) +
+ Math.cos(latRad) * Math.sin(angularDistance) * Math.cos(bearing),
+ );
+ const targetLon =
+ lonRad +
+ Math.atan2(
+ Math.sin(bearing) * Math.sin(angularDistance) * Math.cos(latRad),
+ Math.cos(angularDistance) - Math.sin(latRad) * Math.sin(targetLat),
+ );
+
+ return {
+ latitude: (targetLat * 180) / Math.PI,
+ longitude: ((((targetLon * 180) / Math.PI) + 540) % 360) - 180,
+ };
+}
+
+function createCoverageBoundaryLine(points, color, opacity = 0.3) {
+ const geometry = new THREE.BufferGeometry().setFromPoints(points);
+ const material = new THREE.LineBasicMaterial({
+ color,
+ transparent: true,
+ opacity,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+ return new THREE.Line(geometry, material);
+}
+
+function createCoverageSector(points, color, opacity = 0.12) {
+ const center = points[0];
+ const positions = [];
+
+ for (let index = 1; index < points.length - 1; index += 1) {
+ const current = points[index];
+ const next = points[index + 1];
+ positions.push(
+ center.x, center.y, center.z,
+ current.x, current.y, current.z,
+ next.x, next.y, next.z,
+ );
+ }
+
+ const geometry = new THREE.BufferGeometry();
+ geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+ geometry.computeVertexNormals();
+
+ const material = new THREE.MeshBasicMaterial({
+ color,
+ transparent: true,
+ opacity,
+ side: THREE.DoubleSide,
+ depthWrite: false,
+ blending: THREE.AdditiveBlending,
+ });
+
+ return new THREE.Mesh(geometry, material);
+}
+
+function createCoverageSectorMesh(
+ anchorLatitude,
+ anchorLongitude,
+ startBearingDeg,
+ endBearingDeg,
+ reachDeg,
+ altitude,
+ color,
+ opacity = 0.12,
+ radialSegments = 8,
+ angularSegments = 28,
+) {
+ const positions = [];
+
+ for (let radialIndex = 0; radialIndex < radialSegments; radialIndex += 1) {
+ const innerDistance = (reachDeg * radialIndex) / radialSegments;
+ const outerDistance = (reachDeg * (radialIndex + 1)) / radialSegments;
+
+ for (let angularIndex = 0; angularIndex < angularSegments; angularIndex += 1) {
+ const startProgress = angularIndex / angularSegments;
+ const endProgress = (angularIndex + 1) / angularSegments;
+ const startBearing = startBearingDeg + (endBearingDeg - startBearingDeg) * startProgress;
+ const endBearing = startBearingDeg + (endBearingDeg - startBearingDeg) * endProgress;
+
+ const innerStart = projectLatLon(anchorLatitude, anchorLongitude, startBearing, innerDistance);
+ const innerEnd = projectLatLon(anchorLatitude, anchorLongitude, endBearing, innerDistance);
+ const outerStart = projectLatLon(anchorLatitude, anchorLongitude, startBearing, outerDistance);
+ const outerEnd = projectLatLon(anchorLatitude, anchorLongitude, endBearing, outerDistance);
+
+ const innerStartVector = latLonToVector3(innerStart.latitude, innerStart.longitude, altitude);
+ const innerEndVector = latLonToVector3(innerEnd.latitude, innerEnd.longitude, altitude);
+ const outerStartVector = latLonToVector3(outerStart.latitude, outerStart.longitude, altitude);
+ const outerEndVector = latLonToVector3(outerEnd.latitude, outerEnd.longitude, altitude);
+
+ positions.push(
+ innerStartVector.x, innerStartVector.y, innerStartVector.z,
+ outerStartVector.x, outerStartVector.y, outerStartVector.z,
+ outerEndVector.x, outerEndVector.y, outerEndVector.z,
+ );
+ positions.push(
+ innerStartVector.x, innerStartVector.y, innerStartVector.z,
+ outerEndVector.x, outerEndVector.y, outerEndVector.z,
+ innerEndVector.x, innerEndVector.y, innerEndVector.z,
+ );
+ }
+ }
+
+ const geometry = new THREE.BufferGeometry();
+ geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+ geometry.computeVertexNormals();
+
+ const material = new THREE.MeshBasicMaterial({
+ color,
+ transparent: true,
+ opacity,
+ side: THREE.DoubleSide,
+ depthWrite: false,
+ polygonOffset: true,
+ polygonOffsetFactor: 1,
+ polygonOffsetUnits: 1,
+ blending: THREE.AdditiveBlending,
+ });
+
+ return new THREE.Mesh(geometry, material);
+}
+
+function createRadialBoundaryPoints(
+ anchorLatitude,
+ anchorLongitude,
+ bearingDeg,
+ reachDeg,
+ altitude,
+ segments = 18,
+) {
+ const points = [];
+
+ for (let step = 0; step <= segments; step += 1) {
+ const progress = step / segments;
+ const projected = projectLatLon(
+ anchorLatitude,
+ anchorLongitude,
+ bearingDeg,
+ reachDeg * progress,
+ );
+ points.push(
+ latLonToVector3(
+ projected.latitude,
+ projected.longitude,
+ altitude,
+ ),
+ );
+ }
+
+ return points;
+}
+
+function createCollectorMarker(markerData) {
+ const activity = getCollectorActivityProfile(markerData);
+ const baseColor = activity.color;
+ const idleColor = blendHexColors(
+ BGP_CONFIG.collectorIcon.idleBaseColor,
+ baseColor,
+ BGP_CONFIG.collectorIcon.idleBlend,
+ );
+ const marker = new THREE.Mesh(
+ new THREE.PlaneGeometry(1, 1),
+ new THREE.MeshBasicMaterial({
+ map: getCollectorTexture(),
+ color: idleColor,
+ transparent: true,
+ opacity: BGP_CONFIG.collectorIcon.idleOpacity,
+ depthWrite: false,
+ depthTest: true,
+ side: THREE.DoubleSide,
+ }),
+ );
+
+ const position = latLonToVector3(
+ markerData.displayLatitude,
+ markerData.displayLongitude,
+ CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset,
+ );
+
+ marker.position.copy(position);
+ marker.scale.set(BGP_CONFIG.marker.collectorBaseScale * 0.88 * activity.scaleBoost, BGP_CONFIG.marker.collectorBaseScale * 1.08 * activity.scaleBoost, 1);
+ marker.renderOrder = 3;
+ marker.visible = showBGP;
+ orientCollectorMarkerToSurface(marker, position);
+
+ const heatHalo = createOverlaySprite({
+ color: activity.color,
+ opacity: 0.0,
+ scale: activity.haloScale * 0.58,
+ });
+ heatHalo.renderOrder = 1;
+ marker.add(heatHalo);
+
+ const pulseHalo = createOverlaySprite({
+ color: activity.color,
+ opacity: 0.0,
+ scale: activity.pulseHaloScale * 0.48,
+ });
+ pulseHalo.renderOrder = 0;
+ marker.add(pulseHalo);
+
+ const statusCore = createOverlaySprite({
+ color: activity.color,
+ opacity: 0.0,
+ scale: Math.max(
+ BGP_CONFIG.marker.collectorBaseScale *
+ BGP_CONFIG.marker.collectorStatusCoreBaseScale,
+ BGP_CONFIG.marker.collectorStatusCoreMinScale,
+ ),
+ });
+ statusCore.position.set(0, 0, 0.02);
+ statusCore.renderOrder = 4;
+ marker.add(statusCore);
+
+ const coverageHalo = createOverlaySprite({
+ color: BGP_CONFIG.regionColor,
+ opacity: 0.0,
+ scale: activity.coverageHaloScale * 0.7,
+ });
+ coverageHalo.renderOrder = 0;
+ coverageHalo.scale.set(activity.coverageHaloScale * 0.82, activity.coverageHaloScale * 0.56, 1);
+ marker.add(coverageHalo);
+
+ marker.userData = {
+ type: "bgp_collector",
+ state: "normal",
+ baseScale: BGP_CONFIG.marker.collectorBaseScale * activity.scaleBoost,
+ baseColor,
+ idleColor,
+ pulseOffset: Math.random() * Math.PI * 2,
+ anomaly_count: 0,
+ activity,
+ heatHalo,
+ pulseHalo,
+ statusCore,
+ coverageHalo,
+ ...markerData,
+ };
+
+ collectorMarkers.push(marker);
+ bgpGroup.add(marker);
+}
+
+function createAnomalyMarker(markerData) {
+ const sprite = new THREE.Sprite(
+ new THREE.SpriteMaterial({
+ map: getEventTexture(markerData.incident_type || markerData.anomaly_type),
+ color: getSeverityColor(markerData.severity),
+ transparent: true,
+ opacity: BGP_CONFIG.opacity.normal,
+ depthWrite: false,
+ depthTest: true,
+ blending: THREE.NormalBlending,
+ }),
+ );
+
+ const position = latLonToVector3(
+ markerData.latitude,
+ markerData.longitude,
+ CONFIG.earthRadius + BGP_CONFIG.altitudeOffset,
+ );
+
+ const baseScale = BGP_CONFIG.marker.eventBaseScale * getSeverityScale(markerData.severity);
+ sprite.position.copy(position);
+ sprite.scale.setScalar(baseScale);
+ sprite.renderOrder = 5;
+ sprite.visible = showBGP;
+ sprite.userData = {
+ type: "bgp",
+ state: "normal",
+ baseScale,
+ baseColor: getSeverityColor(markerData.severity),
+ pulseOffset: Math.random() * Math.PI * 2,
+ ...markerData,
+ };
+
+ const ringA = new THREE.Sprite(
+ new THREE.SpriteMaterial({
+ map: getEventRingTexture(),
+ color: getSeverityColor(markerData.severity),
+ transparent: true,
+ opacity: 0,
+ depthWrite: false,
+ depthTest: true,
+ blending: THREE.AdditiveBlending,
+ }),
+ );
+ ringA.scale.setScalar(baseScale * BGP_CONFIG.ring.scaleA);
+ ringA.position.set(0, 0, -0.01);
+ sprite.add(ringA);
+
+ const ringB = new THREE.Sprite(
+ new THREE.SpriteMaterial({
+ map: getEventRingTexture(),
+ color: getSeverityColor(markerData.severity),
+ transparent: true,
+ opacity: 0,
+ depthWrite: false,
+ depthTest: true,
+ blending: THREE.AdditiveBlending,
+ }),
+ );
+ ringB.scale.setScalar(baseScale * BGP_CONFIG.ring.scaleB);
+ ringB.position.set(0, 0, -0.02);
+ sprite.add(ringB);
+
+ sprite.userData.ringA = ringA;
+ sprite.userData.ringB = ringB;
+
+ anomalyMarkers.push(sprite);
+ bgpGroup.add(sprite);
+}
+
+function dedupeAnomalies(features) {
+ const latestByLocation = new Map();
+
+ features.forEach((feature) => {
+ const data = buildAnomalyFeatureData(feature);
+ if (!data) return;
+
+ activeEventCountByCollector.set(
+ data.collector,
+ (activeEventCountByCollector.get(data.collector) || 0) + 1,
+ );
+
+ const dedupeKey = `${data.latitude.toFixed(3)}|${data.longitude.toFixed(3)}`;
+ const previous = latestByLocation.get(dedupeKey);
+ const currentTime = data.created_at_raw
+ ? new Date(data.created_at_raw).getTime()
+ : 0;
+ const previousTime = previous?.created_at_raw
+ ? new Date(previous.created_at_raw).getTime()
+ : 0;
+ const currentSeverity = getSeverityScale(data.severity);
+ const previousSeverity = previous ? getSeverityScale(previous.severity) : 0;
+
+ if (
+ !previous ||
+ currentSeverity > previousSeverity ||
+ (currentSeverity === previousSeverity && currentTime >= previousTime)
+ ) {
+ latestByLocation.set(dedupeKey, data);
+ }
+ });
+
+ return Array.from(latestByLocation.values())
+ .sort((a, b) => {
+ const severityDiff = getSeverityScale(b.severity) - getSeverityScale(a.severity);
+ if (severityDiff !== 0) return severityDiff;
+ const timeA = a.created_at_raw ? new Date(a.created_at_raw).getTime() : 0;
+ const timeB = b.created_at_raw ? new Date(b.created_at_raw).getTime() : 0;
+ return timeB - timeA;
+ })
+ .slice(0, BGP_CONFIG.maxRenderedMarkers);
+}
+
+function dedupeIncidents(features) {
+ const latestByLocation = new Map();
+
+ features.forEach((feature) => {
+ const data = buildIncidentFeatureData(feature);
+ if (!data) return;
+
+ data.collectors.forEach((collector) => {
+ activeEventCountByCollector.set(
+ collector,
+ (activeEventCountByCollector.get(collector) || 0) + 1,
+ );
+ });
+
+ const dedupeKey = `${data.latitude.toFixed(3)}|${data.longitude.toFixed(3)}`;
+ const previous = latestByLocation.get(dedupeKey);
+ const currentTime = data.created_at_raw
+ ? new Date(data.created_at_raw).getTime()
+ : 0;
+ const previousTime = previous?.created_at_raw
+ ? new Date(previous.created_at_raw).getTime()
+ : 0;
+ const currentSeverity = getSeverityScale(data.severity);
+ const previousSeverity = previous ? getSeverityScale(previous.severity) : 0;
+
+ if (
+ !previous ||
+ currentSeverity > previousSeverity ||
+ (currentSeverity === previousSeverity && currentTime >= previousTime)
+ ) {
+ latestByLocation.set(dedupeKey, data);
+ }
+ });
+
+ return Array.from(latestByLocation.values())
+ .sort((a, b) => {
+ const severityDiff = getSeverityScale(b.severity) - getSeverityScale(a.severity);
+ if (severityDiff !== 0) return severityDiff;
+ const timeA = a.created_at_raw ? new Date(a.created_at_raw).getTime() : 0;
+ const timeB = b.created_at_raw ? new Date(b.created_at_raw).getTime() : 0;
+ return timeB - timeA;
+ })
+ .slice(0, BGP_CONFIG.maxRenderedMarkers);
+}
+
+function applyCollectorCounts() {
+ collectorMarkers.forEach((marker) => {
+ marker.userData.anomaly_count =
+ activeEventCountByCollector.get(marker.userData.collector) || 0;
+ });
+}
+
+async function fetchGeoJSONWithTimeout(url, timeoutMs, warningMessage, fallbackPayload) {
+ try {
+ const response = await fetch(url, { signal: AbortSignal.timeout(timeoutMs) });
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}`);
+ }
+ return await response.json();
+ } catch (error) {
+ console.warn(warningMessage, error);
+ return fallbackPayload;
+ }
+}
+
+function selectBGPEventFeatures(incidentPayload, anomalyPayload) {
+ const incidentFeatures = Array.isArray(incidentPayload?.features)
+ ? incidentPayload.features
+ : [];
+ if (incidentFeatures.length > 0) {
+ return {
+ features: incidentFeatures,
+ totalIncidentCount: incidentPayload?.count ?? incidentFeatures.length,
+ totalAnomalyCount: anomalyPayload?.count ?? 0,
+ mode: "incident",
+ };
+ }
+
+ const anomalyFeatures = Array.isArray(anomalyPayload?.features)
+ ? anomalyPayload.features
+ : [];
+ return {
+ features: anomalyFeatures,
+ totalIncidentCount: 0,
+ totalAnomalyCount: anomalyPayload?.count ?? anomalyFeatures.length,
+ mode: "anomaly",
+ };
+}
+
+export async function loadBGPAnomalies(scene, earth) {
+ clearBGPData(earth);
+
+ const collectorsResponse = await fetch(PATHS.bgpCollectorsApi);
+ if (!collectorsResponse.ok) {
+ throw new Error(`BGP collectors HTTP ${collectorsResponse.status}`);
+ }
+
+ const emptyPayload = { type: "FeatureCollection", features: [], count: 0 };
+ const anomaliesPayload = await fetchGeoJSONWithTimeout(
+ `${PATHS.bgpApi}?limit=${BGP_CONFIG.defaultFetchLimit}`,
+ 5000,
+ "BGP anomalies unavailable, falling back to collectors only:",
+ emptyPayload,
+ );
+ const incidentsPayload = await fetchGeoJSONWithTimeout(
+ `${PATHS.bgpIncidentsApi}?limit=${BGP_CONFIG.defaultFetchLimit}`,
+ 5000,
+ "BGP incidents unavailable, falling back to anomalies:",
+ emptyPayload,
+ );
+
+ const collectorsPayload = await collectorsResponse.json();
+ const collectorFeatures = Array.isArray(collectorsPayload?.features)
+ ? collectorsPayload.features
+ : [];
+ const selectedEventData = selectBGPEventFeatures(incidentsPayload, anomaliesPayload);
+ totalAnomalyCount = selectedEventData.totalAnomalyCount;
+ totalIncidentCount = selectedEventData.totalIncidentCount;
+ activeEventCountByCollector.clear();
+
+ spreadCollectorPositions(
+ collectorFeatures
+ .map(buildCollectorFeatureData)
+ .filter(Boolean),
+ ).forEach(createCollectorMarker);
+
+ if (selectedEventData.mode === "incident") {
+ dedupeIncidents(selectedEventData.features).forEach(createAnomalyMarker);
+ } else {
+ dedupeAnomalies(selectedEventData.features).forEach(createAnomalyMarker);
+ }
+ applyCollectorCounts();
+
+ if (!bgpGroup.parent) {
+ earth.add(bgpGroup);
+ }
+ if (!bgpOverlayGroup.parent) {
+ earth.add(bgpOverlayGroup);
+ }
+
+ bgpGroup.visible = showBGP;
+ bgpOverlayGroup.visible = showBGP;
+
+ if (scene && !scene.children.includes(earth)) {
+ scene.add(earth);
+ }
+
+ return {
+ totalCount: totalIncidentCount,
+ anomalyCount: totalAnomalyCount,
+ renderedCount: anomalyMarkers.length,
+ collectorCount: collectorMarkers.length,
+ };
+}
+
+export function updateBGPVisualState(lockedObjectType, lockedObject, camera) {
+ const now = performance.now();
+ updateCollectorOverlayScan(lockedObjectType, lockedObject);
+ const hasLockedLayer = Boolean(
+ lockedObject && ["cable", "satellite", "bgp", "bgp_collector"].includes(lockedObjectType),
+ );
+
+ collectorMarkers.forEach((marker) => {
+ const isLocked =
+ (lockedObjectType === "bgp_collector" || lockedObjectType === "bgp") &&
+ lockedObject?.userData?.collector === marker.userData.collector;
+ const isHovered =
+ marker.userData.state === "hover" || marker.userData.state === "linked";
+ const pulse =
+ 0.5 +
+ 0.5 *
+ Math.sin(
+ now * BGP_CONFIG.pulse.collectorSpeed + marker.userData.pulseOffset,
+ );
+
+ let scale = marker.userData.baseScale * getCollectorDistanceScale(marker, camera);
+ let opacity = BGP_CONFIG.collectorIcon.idleOpacity;
+ let haloOpacity = 0.0;
+ let pulseOpacity = 0.0;
+ let coverageOpacity = 0.0;
+ let markerColor =
+ marker.userData.idleColor ||
+ blendHexColors(
+ BGP_CONFIG.collectorIcon.idleBaseColor,
+ marker.userData.baseColor || BGP_CONFIG.collectorColor,
+ BGP_CONFIG.collectorIcon.idleBlend,
+ );
+
+ if (isLocked) {
+ scale *= 1.1 + 0.14 * pulse;
+ opacity = BGP_CONFIG.opacity.collectorHover;
+ haloOpacity = 0.022;
+ pulseOpacity = 0.012;
+ coverageOpacity = 0.02;
+ markerColor = blendHexColors(
+ BGP_CONFIG.collectorIcon.lockedNeutralColor,
+ marker.userData.baseColor || BGP_CONFIG.collectorColor,
+ BGP_CONFIG.collectorIcon.lockedBlend,
+ );
+ } else if (isHovered) {
+ scale *= 1.08;
+ opacity = BGP_CONFIG.opacity.collectorHover;
+ haloOpacity = 0.016;
+ pulseOpacity = 0.008;
+ coverageOpacity = 0.014;
+ markerColor = blendHexColors(
+ BGP_CONFIG.collectorIcon.hoverNeutralColor,
+ marker.userData.baseColor || BGP_CONFIG.collectorColor,
+ BGP_CONFIG.collectorIcon.hoverBlend,
+ );
+ } else if (hasLockedLayer) {
+ scale *= 0.98;
+ opacity = BGP_CONFIG.collectorIcon.idleOpacity;
+ haloOpacity = 0.0;
+ pulseOpacity = 0.0;
+ coverageOpacity = 0.0;
+ markerColor = marker.userData.idleColor || markerColor;
+ } else {
+ scale *= 1 + 0.05 * pulse;
+ }
+
+ marker.scale.setScalar(scale);
+ marker.material.color.setHex(markerColor);
+ marker.material.opacity = opacity;
+ marker.visible = showBGP;
+
+ if (marker.userData.heatHalo) {
+ marker.userData.heatHalo.material.opacity = haloOpacity;
+ marker.userData.heatHalo.material.color.setHex(marker.userData.baseColor || BGP_CONFIG.collectorColor);
+ marker.userData.heatHalo.scale.setScalar(
+ marker.userData.activity?.haloScale * 0.58 * (1 + pulse * 0.01),
+ );
+ }
+ if (marker.userData.pulseHalo) {
+ marker.userData.pulseHalo.material.opacity = pulseOpacity;
+ marker.userData.pulseHalo.material.color.setHex(marker.userData.baseColor || BGP_CONFIG.collectorColor);
+ marker.userData.pulseHalo.scale.setScalar(
+ marker.userData.activity?.pulseHaloScale * 0.48 * (1 + pulse * 0.02),
+ );
+ }
+ if (marker.userData.statusCore) {
+ marker.userData.statusCore.material.opacity =
+ isLocked ? 0.58 : isHovered ? 0.4 : hasLockedLayer ? 0.0 : 0.18;
+ marker.userData.statusCore.material.color.setHex(marker.userData.baseColor || BGP_CONFIG.collectorColor);
+ marker.userData.statusCore.scale.setScalar(
+ Math.max(
+ BGP_CONFIG.marker.collectorBaseScale *
+ BGP_CONFIG.marker.collectorStatusCoreBaseScale,
+ BGP_CONFIG.marker.collectorStatusCoreMinScale,
+ ) * (isLocked ? 1.08 : isHovered ? 1.04 : 0.92),
+ );
+ }
+ if (marker.userData.coverageHalo) {
+ marker.userData.coverageHalo.material.opacity = coverageOpacity;
+ marker.userData.coverageHalo.scale.set(
+ marker.userData.activity?.coverageHaloScale * 0.82 * (1 + pulse * 0.012),
+ marker.userData.activity?.coverageHaloScale * 0.56 * (1 + pulse * 0.012),
+ 1,
+ );
+ }
+ });
+
+ anomalyMarkers.forEach((marker) => {
+ const isLocked = lockedObjectType === "bgp" && lockedObject === marker;
+ const isLinkedCollectorLocked =
+ lockedObjectType === "bgp_collector" &&
+ lockedObject?.userData?.collector === marker.userData.collector;
+ const isOtherLocked = hasLockedLayer && !isLocked && !isLinkedCollectorLocked;
+ const isHovered = marker.userData.state === "hover";
+ const pulse =
+ 0.5 +
+ 0.5 * Math.sin(now * BGP_CONFIG.pulse.eventSpeed + marker.userData.pulseOffset);
+
+ const iconAnchorScale =
+ marker.userData.baseScale * getEventDistanceScale(marker, camera);
+ let scale = iconAnchorScale;
+ let opacity = BGP_CONFIG.opacity.normal;
+ let markerColor = marker.userData.baseColor || getSeverityColor(marker.userData.severity);
+ const isIncidentMarker = marker.userData.source === "bgp_incident";
+ let ringBaseOpacity = isIncidentMarker
+ ? BGP_CONFIG.ring.opacity
+ : BGP_CONFIG.ring.opacity * 0.45;
+
+ if (isLocked || isLinkedCollectorLocked) {
+ scale *= 1 + BGP_CONFIG.pulse.lockedAmplitude * pulse;
+ opacity =
+ BGP_CONFIG.opacity.lockedMin +
+ (BGP_CONFIG.opacity.lockedMax - BGP_CONFIG.opacity.lockedMin) * pulse;
+ ringBaseOpacity *= 1.2;
+ } else if (isHovered) {
+ scale *= BGP_CONFIG.marker.hoverScale;
+ opacity = BGP_CONFIG.opacity.hover;
+ ringBaseOpacity *= 1.05;
+ } else if (isOtherLocked) {
+ scale *= BGP_CONFIG.marker.dimmedScale;
+ opacity = 0.1;
+ markerColor = 0x7d8ca3;
+ ringBaseOpacity = 0.02;
+ } else {
+ scale *= 1 + BGP_CONFIG.pulse.normalAmplitude * pulse;
+ opacity = isIncidentMarker ? 0.7 : 0.62;
+ }
+
+ marker.scale.setScalar(scale);
+ marker.material.color.setHex(markerColor);
+ marker.material.opacity = opacity;
+ marker.visible = showBGP;
+
+ const ringPhaseA = (now * BGP_CONFIG.ring.speed + marker.userData.pulseOffset) % 1;
+ const applyRingState = (ring, phase, maxScale) => {
+ if (!ring) return;
+ const progress = Math.max(0, Math.min(1, phase));
+ const minScale = 1.28;
+ const desiredWorldScale =
+ iconAnchorScale * (minScale + progress * (maxScale - minScale));
+ const parentScale = Math.max(scale, 0.0001);
+ const localRingScale = desiredWorldScale / parentScale;
+ const fadeIn = Math.max(0, Math.min(1, (progress - 0.08) / 0.14));
+ const fadeOut = 1 - progress;
+ const visibility = fadeIn * fadeOut;
+ ring.scale.setScalar(localRingScale);
+ ring.material.color.setHex(markerColor);
+ ring.material.opacity = showBGP ? ringBaseOpacity * visibility : 0;
+ ring.visible = showBGP;
+ };
+
+ applyRingState(marker.userData.ringA, ringPhaseA, BGP_CONFIG.ring.scaleA);
+ if (marker.userData.ringB) {
+ marker.userData.ringB.material.opacity = 0;
+ marker.userData.ringB.visible = false;
+ }
+ });
+}
+
+export function setBGPMarkerState(marker, state = "normal") {
+ if (!marker?.userData) return;
+ if (marker.userData.type !== "bgp" && marker.userData.type !== "bgp_collector") {
+ return;
+ }
+ marker.userData.state = state;
+}
+
+export function clearBGPSelection() {
+ collectorMarkers.forEach((marker) => {
+ marker.userData.state = "normal";
+ });
+ anomalyMarkers.forEach((marker) => {
+ marker.userData.state = "normal";
+ });
+ clearBGPEventOverlay();
+}
+
+export function clearBGPData(earth) {
+ clearMarkerArray(collectorMarkers);
+ clearMarkerArray(anomalyMarkers);
+ clearBGPEventOverlay();
+ activeEventCountByCollector.clear();
+ totalAnomalyCount = 0;
+ totalIncidentCount = 0;
+
+ if (earth && bgpGroup.parent === earth) {
+ earth.remove(bgpGroup);
+ }
+ if (earth && bgpOverlayGroup.parent === earth) {
+ earth.remove(bgpOverlayGroup);
+ }
+}
+
+export function toggleBGP(show) {
+ showBGP = Boolean(show);
+ bgpGroup.visible = showBGP;
+ bgpOverlayGroup.visible = showBGP;
+ collectorMarkers.forEach((marker) => {
+ marker.visible = showBGP;
+ });
+ anomalyMarkers.forEach((marker) => {
+ marker.visible = showBGP;
+ });
+}
+
+export function getShowBGP() {
+ return showBGP;
+}
+
+export function getBGPMarkers() {
+ return [...anomalyMarkers, ...collectorMarkers];
+}
+
+export function getBGPAnomalyMarkers() {
+ return anomalyMarkers;
+}
+
+export function getBGPCollectorMarkers() {
+ return collectorMarkers;
+}
+
+export function getBGPCount() {
+ return totalIncidentCount;
+}
+
+export function getBGPCollectorCount() {
+ return collectorMarkers.length;
+}
+
+export function getBGPStatusSummary() {
+ if (totalIncidentCount > 0 && totalAnomalyCount > 0) {
+ return `${totalIncidentCount} 起活跃事件 / ${totalAnomalyCount} 条异常`;
+ }
+ if (totalIncidentCount > 0) {
+ return `${totalIncidentCount} 起活跃事件`;
+ }
+ if (totalAnomalyCount > 0) {
+ return `${totalAnomalyCount} 条活跃异常`;
+ }
+ if (collectorMarkers.length > 0) {
+ return "当前无活跃事件";
+ }
+ return "暂无观测数据";
+}
+
+export function showBGPEventOverlay(marker, earth) {
+ if (!marker?.userData || marker.userData.type !== "bgp" || !earth) return;
+
+ clearBGPEventOverlay();
+
+ const impactedRegions =
+ Array.isArray(marker.userData.impacted_regions) &&
+ marker.userData.impacted_regions.length > 0
+ ? marker.userData.impacted_regions
+ : [
+ {
+ collector: marker.userData.collector,
+ city: marker.userData.city,
+ country: marker.userData.country,
+ latitude: marker.userData.latitude,
+ longitude: marker.userData.longitude,
+ },
+ ];
+
+ const validRegions = impactedRegions.filter(
+ (region) =>
+ typeof region?.latitude === "number" &&
+ typeof region?.longitude === "number",
+ );
+ if (validRegions.length === 0) return;
+ const overlayItems = [];
+
+ validRegions.forEach((region) => {
+ const halo = createOverlaySprite({
+ color: BGP_CONFIG.regionColor,
+ opacity: 0.24,
+ scale: BGP_CONFIG.regionScale,
+ });
+ halo.position.copy(
+ latLonToVector3(
+ region.latitude,
+ region.longitude,
+ CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset - 0.1,
+ ),
+ );
+ halo.renderOrder = 2;
+ bgpOverlayGroup.add(halo);
+ overlayItems.push(halo);
+ });
+
+ activeEventOverlay = overlayItems;
+ activeCollectorOverlayContext = null;
+ bgpOverlayGroup.visible = showBGP;
+}
+
+export function showBGPCollectorCoverageOverlay(marker, earth, options = {}) {
+ if (!marker?.userData || marker.userData.type !== "bgp_collector" || !earth) return;
+
+ clearBGPEventOverlay();
+
+ const prefixCount = Number(
+ marker.userData.recent_24h_prefix_count ||
+ marker.userData.recent_7d_prefix_count ||
+ marker.userData.prefix_count ||
+ 0,
+ );
+ const observationCount = Number(
+ marker.userData.recent_24h_observation_count ||
+ marker.userData.recent_7d_observation_count ||
+ marker.userData.observation_count ||
+ 0,
+ );
+ const scaleBoost = Math.min(10, Math.log2(prefixCount + observationCount + 1) * 1.8);
+ const haloScale = BGP_CONFIG.regionScale * 0.7 + scaleBoost;
+ const pulseHaloScale = haloScale * 1.32;
+
+ const halo = createOverlaySprite({
+ color: BGP_CONFIG.regionColor,
+ opacity: 0.11,
+ scale: haloScale * 0.78,
+ });
+ halo.position.copy(
+ latLonToVector3(
+ marker.userData.displayLatitude ?? marker.userData.latitude,
+ marker.userData.displayLongitude ?? marker.userData.longitude,
+ CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset - 0.15,
+ ),
+ );
+ halo.renderOrder = 2;
+ bgpOverlayGroup.add(halo);
+
+ const pulseHalo = createOverlaySprite({
+ color: BGP_CONFIG.collectorColor,
+ opacity: 0.065,
+ scale: pulseHaloScale * 0.82,
+ });
+ pulseHalo.position.copy(halo.position);
+ pulseHalo.renderOrder = 1;
+ bgpOverlayGroup.add(pulseHalo);
+ const innerRing = createOverlaySprite({
+ color: BGP_CONFIG.collectorColor,
+ opacity: 0.12,
+ scale: Math.max(haloScale * 0.34, 5.5),
+ });
+ innerRing.position.copy(halo.position);
+ innerRing.renderOrder = 3;
+ bgpOverlayGroup.add(innerRing);
+
+ const overlayItems = [halo, pulseHalo, innerRing];
+ const anchorLatitude = marker.userData.displayLatitude ?? marker.userData.latitude;
+ const anchorLongitude = marker.userData.displayLongitude ?? marker.userData.longitude;
+ const activityMagnitude = Math.log2(prefixCount + observationCount + 1);
+ const corridorReach = Math.min(30, 12 + activityMagnitude * 3.2);
+ const orientationSeed = Array.from(marker.userData.collector || "")
+ .reduce((sum, char) => sum + char.charCodeAt(0), 0);
+ const baseRotation = ((orientationSeed % 140) - 70) * (Math.PI / 180);
+ const sectorRotation = baseRotation + (options.rotationOffsetRad || 0);
+ const sectorHalfWidth = Math.PI * 0.22;
+ const startBearing = (sectorRotation - sectorHalfWidth) * (180 / Math.PI);
+ const endBearing = (sectorRotation + sectorHalfWidth) * (180 / Math.PI);
+ const coverageColor = marker.userData.baseColor || BGP_CONFIG.collectorColor;
+ const boundaryAltitude = CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset + 0.44;
+ const fillAltitude = CONFIG.earthRadius + BGP_CONFIG.collectorAltitudeOffset + 0.4;
+ const leftBoundaryPoints = createRadialBoundaryPoints(
+ anchorLatitude,
+ anchorLongitude,
+ startBearing,
+ corridorReach,
+ boundaryAltitude,
+ );
+ const rightBoundaryPoints = createRadialBoundaryPoints(
+ anchorLatitude,
+ anchorLongitude,
+ endBearing,
+ corridorReach,
+ boundaryAltitude,
+ );
+ const outerArcPoints = [];
+ const outerArcSteps = 28;
+ for (let step = 0; step <= outerArcSteps; step += 1) {
+ const progress = step / outerArcSteps;
+ const bearingDeg = startBearing + (endBearing - startBearing) * progress;
+ const projected = projectLatLon(anchorLatitude, anchorLongitude, bearingDeg, corridorReach);
+ outerArcPoints.push(
+ latLonToVector3(
+ projected.latitude,
+ projected.longitude,
+ boundaryAltitude,
+ ),
+ );
+ }
+
+ const sectorFill = createCoverageSectorMesh(
+ anchorLatitude,
+ anchorLongitude,
+ startBearing,
+ endBearing,
+ corridorReach,
+ fillAltitude,
+ coverageColor,
+ 0.12,
+ );
+ sectorFill.renderOrder = 2;
+ bgpOverlayGroup.add(sectorFill);
+ overlayItems.push(sectorFill);
+
+ const outerArc = createCoverageBoundaryLine(
+ outerArcPoints,
+ coverageColor,
+ 0.9,
+ );
+ outerArc.renderOrder = 3;
+ bgpOverlayGroup.add(outerArc);
+ overlayItems.push(outerArc);
+
+ const leftBoundary = createCoverageBoundaryLine(
+ leftBoundaryPoints,
+ coverageColor,
+ 0.76,
+ );
+ leftBoundary.renderOrder = 3;
+ bgpOverlayGroup.add(leftBoundary);
+ overlayItems.push(leftBoundary);
+
+ const rightBoundary = createCoverageBoundaryLine(
+ rightBoundaryPoints,
+ coverageColor,
+ 0.76,
+ );
+ rightBoundary.renderOrder = 3;
+ bgpOverlayGroup.add(rightBoundary);
+ overlayItems.push(rightBoundary);
+
+ activeEventOverlay = overlayItems;
+ activeCollectorOverlayContext = {
+ marker,
+ earth,
+ baseRotation,
+ lastRebuildAt: performance.now(),
+ };
+ bgpOverlayGroup.visible = showBGP;
+}
+
+export function clearBGPEventOverlay() {
+ activeEventOverlay = null;
+ activeCollectorOverlayContext = null;
+ clearGroup(bgpOverlayGroup);
+}
+
+function updateCollectorOverlayScan(lockedObjectType, lockedObject) {
+ if (
+ lockedObjectType !== "bgp_collector" ||
+ !lockedObject ||
+ !activeCollectorOverlayContext ||
+ activeCollectorOverlayContext.marker !== lockedObject
+ ) {
+ return;
+ }
+
+ const now = performance.now();
+ if (now - activeCollectorOverlayContext.lastRebuildAt < COLLECTOR_SCAN_REBUILD_MS) {
+ return;
+ }
+
+ const rotationOffsetRad = now * COLLECTOR_SCAN_SPEED_RAD;
+ showBGPCollectorCoverageOverlay(
+ activeCollectorOverlayContext.marker,
+ activeCollectorOverlayContext.earth,
+ { rotationOffsetRad },
+ );
+}
+
+export function getBGPLegendItems() {
+ return [
+ { color: "#6db7ff", label: "静态观测站" },
+ { color: "#fbbf24", label: "中活跃观测站" },
+ { color: "#ff5f57", label: "高活跃观测站" },
+ { color: "#6db7ff", label: "观测范围示意" },
+ { color: "#8af5ff", label: "事件连线 / 枢纽" },
+ { color: "#2dd4bf", label: "影响区域" },
+ { color: "#ff4d4f", label: "严重事件" },
+ { color: "#ff9f43", label: "高危事件" },
+ { color: "#ffd166", label: "中危事件" },
+ { color: "#4dabf7", label: "低危事件" },
+ ];
+}
diff --git a/frontend/public/earth/js/cables.js b/frontend/public/earth/js/cables.js
index 8bdfa33f..b03cb448 100644
--- a/frontend/public/earth/js/cables.js
+++ b/frontend/public/earth/js/cables.js
@@ -1,339 +1,506 @@
// cables.js - Cable loading and rendering module
-import * as THREE from 'three';
+import * as THREE from "three";
-import { CONFIG, CABLE_COLORS, PATHS, CABLE_STATE } from './constants.js';
-import { latLonToVector3 } from './utils.js';
-import { updateEarthStats, showStatusMessage } from './ui.js';
-import { showInfoCard } from './info-card.js';
+import {
+ CONFIG,
+ CABLE_COLORS,
+ PATHS,
+ CABLE_STATE,
+ CABLE_CONFIG,
+} from "./constants.js";
+import { latLonToVector3 } from "./utils.js";
+import { updateEarthStats, showStatusMessage } from "./ui.js";
+import { showInfoCard } from "./info-card.js";
+import { setLegendItems, setLegendMode } from "./legend.js";
export let cableLines = [];
export let landingPoints = [];
export let lockedCable = null;
let cableIdMap = new Map();
+let cableStates = new Map();
let cablesVisible = true;
+const landingPointWorldPosition = new THREE.Vector3();
+
+function clamp(value, min, max) {
+ return Math.min(max, Math.max(min, value));
+}
+
+function getLandingPointDistanceScale(point, camera) {
+ if (
+ !point ||
+ !camera ||
+ CABLE_CONFIG.landingPointSizeStabilization?.enabled === false
+ ) return 1;
+ point.getWorldPosition(landingPointWorldPosition);
+ const distanceToCamera = camera.position.distanceTo(landingPointWorldPosition);
+ const referenceDistance =
+ CONFIG.defaultCameraZ -
+ CONFIG.earthRadius +
+ CABLE_CONFIG.landingPoint.altitudeOffset;
+ const referenceFovDeg =
+ CABLE_CONFIG.landingPointSizeStabilization?.referenceFov || 75;
+ const referenceFovRad = (referenceFovDeg * Math.PI) / 180;
+ const cameraFovRad =
+ (((camera.fov || referenceFovDeg)) * Math.PI) / 180;
+ const worldPerPixel = distanceToCamera * Math.tan(cameraFovRad / 2);
+ const referenceWorldPerPixel = referenceDistance * Math.tan(referenceFovRad / 2);
+ return clamp(
+ worldPerPixel / referenceWorldPerPixel,
+ CABLE_CONFIG.landingPointSizeStabilization?.min ?? 0.12,
+ CABLE_CONFIG.landingPointSizeStabilization?.max ?? 3.0,
+ );
+}
+
+function disposeMaterial(material) {
+ if (!material) return;
+
+ if (Array.isArray(material)) {
+ material.forEach(disposeMaterial);
+ return;
+ }
+
+ if (material.map) {
+ material.map.dispose();
+ }
+ material.dispose();
+}
+
+function disposeObject(object, parent) {
+ if (!object) return;
+ const owner = parent || object.parent;
+ if (owner) {
+ owner.remove(object);
+ }
+ if (object.geometry) {
+ object.geometry.dispose();
+ }
+ if (object.material) {
+ disposeMaterial(object.material);
+ }
+}
function getCableColor(properties) {
if (properties.color) {
- if (typeof properties.color === 'string' && properties.color.startsWith('#')) {
+ if (
+ typeof properties.color === "string" &&
+ properties.color.startsWith("#")
+ ) {
return parseInt(properties.color.substring(1), 16);
- } else if (typeof properties.color === 'number') {
+ }
+ if (typeof properties.color === "number") {
return properties.color;
}
}
-
- const cableName = properties.Name || properties.cableName || properties.shortname || '';
- if (cableName.includes('Americas II')) {
- return CABLE_COLORS['Americas II'];
- } else if (cableName.includes('AU Aleutian A')) {
- return CABLE_COLORS['AU Aleutian A'];
- } else if (cableName.includes('AU Aleutian B')) {
- return CABLE_COLORS['AU Aleutian B'];
+
+ const cableName =
+ properties.Name ||
+ properties.name ||
+ properties.cableName ||
+ properties.shortname ||
+ "";
+ if (cableName.includes("Americas II")) {
+ return CABLE_COLORS["Americas II"];
}
-
+ if (cableName.includes("AU Aleutian A")) {
+ return CABLE_COLORS["AU Aleutian A"];
+ }
+ if (cableName.includes("AU Aleutian B")) {
+ return CABLE_COLORS["AU Aleutian B"];
+ }
+
return CABLE_COLORS.default;
}
-function createCableLine(points, color, properties, earthObj) {
+function createCableLine(points, color, properties) {
if (points.length < 2) return null;
-
+
const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
-
- const lineMaterial = new THREE.LineBasicMaterial({
- color: color,
- linewidth: 1,
+ lineGeometry.computeBoundingSphere();
+
+ const lineMaterial = new THREE.LineBasicMaterial({
+ color,
+ linewidth: CABLE_CONFIG.line.lineWidth,
transparent: true,
- opacity: 1.0,
+ opacity: CABLE_CONFIG.line.opacity,
depthTest: true,
- depthWrite: true
+ depthWrite: true,
});
-
+
const cableLine = new THREE.Line(lineGeometry, lineMaterial);
- const cableId = properties.cable_id || properties.id || properties.Name || Math.random().toString(36);
+ const cableId =
+ properties.cable_id ||
+ properties.id ||
+ properties.Name ||
+ properties.name ||
+ Math.random().toString(36);
cableLine.userData = {
- type: 'cable',
- cableId: cableId,
- name: properties.Name || properties.cableName || 'Unknown',
- owner: properties.owner || properties.owners || '-',
- status: properties.status || '-',
- length: properties.length || '-',
- coords: '-',
- rfs: properties.rfs || '-',
- originalColor: color
+ type: "cable",
+ cableId,
+ name:
+ properties.Name ||
+ properties.name ||
+ properties.cableName ||
+ properties.shortname ||
+ "Unknown",
+ owner: properties.owner || properties.owners || "-",
+ status: properties.status || "-",
+ length: properties.length || "-",
+ coords: "-",
+ rfs: properties.rfs || "-",
+ originalColor: color,
+ localCenter:
+ lineGeometry.boundingSphere?.center?.clone() || new THREE.Vector3(),
};
- cableLine.renderOrder = 1;
-
+ cableLine.renderOrder = CABLE_CONFIG.line.renderOrder;
+
if (!cableIdMap.has(cableId)) {
cableIdMap.set(cableId, []);
}
cableIdMap.get(cableId).push(cableLine);
-
+
return cableLine;
}
-function calculateGreatCirclePoints(lat1, lon1, lat2, lon2, radius, segments = 50) {
+function calculateGreatCirclePoints(
+ lat1,
+ lon1,
+ lat2,
+ lon2,
+ radius,
+ segments = 50,
+) {
const points = [];
- const phi1 = lat1 * Math.PI / 180;
- const lambda1 = lon1 * Math.PI / 180;
- const phi2 = lat2 * Math.PI / 180;
- const lambda2 = lon2 * Math.PI / 180;
-
- const dLambda = Math.min(Math.abs(lambda2 - lambda1), 2 * Math.PI - Math.abs(lambda2 - lambda1));
- const cosDelta = Math.sin(phi1) * Math.sin(phi2) + Math.cos(phi1) * Math.cos(phi2) * Math.cos(dLambda);
-
+ const phi1 = (lat1 * Math.PI) / 180;
+ const lambda1 = (lon1 * Math.PI) / 180;
+ const phi2 = (lat2 * Math.PI) / 180;
+ const lambda2 = (lon2 * Math.PI) / 180;
+
+ const dLambda = Math.min(
+ Math.abs(lambda2 - lambda1),
+ 2 * Math.PI - Math.abs(lambda2 - lambda1),
+ );
+ const cosDelta =
+ Math.sin(phi1) * Math.sin(phi2) +
+ Math.cos(phi1) * Math.cos(phi2) * Math.cos(dLambda);
+
let delta = Math.acos(Math.max(-1, Math.min(1, cosDelta)));
-
- if (delta < 0.01) {
+
+ if (delta < CABLE_CONFIG.line.nearPointThreshold) {
const p1 = latLonToVector3(lat1, lon1, radius);
const p2 = latLonToVector3(lat2, lon2, radius);
return [p1, p2];
}
-
+
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const sinDelta = Math.sin(delta);
const A = Math.sin((1 - t) * delta) / sinDelta;
const B = Math.sin(t * delta) / sinDelta;
-
+
const x1 = Math.cos(phi1) * Math.cos(lambda1);
const y1 = Math.cos(phi1) * Math.sin(lambda1);
const z1 = Math.sin(phi1);
-
+
const x2 = Math.cos(phi2) * Math.cos(lambda2);
const y2 = Math.cos(phi2) * Math.sin(lambda2);
const z2 = Math.sin(phi2);
-
+
let x = A * x1 + B * x2;
let y = A * y1 + B * y2;
let z = A * z1 + B * z2;
-
- const norm = Math.sqrt(x*x + y*y + z*z);
- x = x / norm * radius;
- y = y / norm * radius;
- z = z / norm * radius;
-
- const lat = Math.asin(z / radius) * 180 / Math.PI;
- let lon = Math.atan2(y, x) * 180 / Math.PI;
-
+
+ const norm = Math.sqrt(x * x + y * y + z * z);
+ x = (x / norm) * radius;
+ y = (y / norm) * radius;
+ z = (z / norm) * radius;
+
+ const lat = (Math.asin(z / radius) * 180) / Math.PI;
+ let lon = (Math.atan2(y, x) * 180) / Math.PI;
+
if (lon > 180) lon -= 360;
if (lon < -180) lon += 360;
-
- const point = latLonToVector3(lat, lon, radius);
- points.push(point);
+
+ points.push(latLonToVector3(lat, lon, radius));
}
-
+
return points;
}
+export function clearCableLines(earthObj = null) {
+ cableLines.forEach((line) => disposeObject(line, earthObj));
+ cableLines = [];
+ cableIdMap = new Map();
+ cableStates.clear();
+}
+
+export function clearLandingPoints(earthObj = null) {
+ landingPoints.forEach((point) => disposeObject(point, earthObj));
+ landingPoints = [];
+}
+
+export function clearCableData(earthObj = null) {
+ clearCableSelection();
+ clearCableLines(earthObj);
+ clearLandingPoints(earthObj);
+}
+
export async function loadGeoJSONFromPath(scene, earthObj) {
- try {
- console.log('正在加载电缆数据...');
- showStatusMessage('正在加载电缆数据...', 'warning');
-
- const response = await fetch(PATHS.cablesApi);
- if (!response.ok) {
- throw new Error(`HTTP错误: ${response.status}`);
- }
-
- const data = await response.json();
-
- cableLines.forEach(line => earthObj.remove(line));
- cableLines = [];
-
- if (!data.features || !Array.isArray(data.features)) {
- throw new Error('无效的GeoJSON格式');
- }
-
- const cableCount = data.features.length;
- document.getElementById('cable-count').textContent = cableCount + '个';
-
- const inServiceCount = data.features.filter(
- feature => feature.properties && feature.properties.status === 'In Service'
- ).length;
-
- const statusEl = document.getElementById('cable-status-summary');
- if (statusEl) {
- statusEl.textContent = `${inServiceCount}/${cableCount} 运行中`;
- }
-
- for (const feature of data.features) {
- const geometry = feature.geometry;
- const properties = feature.properties || {};
-
- if (!geometry || !geometry.coordinates) continue;
-
- const color = getCableColor(properties);
- console.log('电缆 properties:', JSON.stringify(properties));
-
- if (geometry.type === 'MultiLineString') {
- for (const lineCoords of geometry.coordinates) {
- if (!lineCoords || lineCoords.length < 2) continue;
-
- const points = [];
- for (let i = 0; i < lineCoords.length - 1; i++) {
- const lon1 = lineCoords[i][0];
- const lat1 = lineCoords[i][1];
- const lon2 = lineCoords[i + 1][0];
- const lat2 = lineCoords[i + 1][1];
-
- const segment = calculateGreatCirclePoints(lat1, lon1, lat2, lon2, 100.2, 50);
- if (i === 0) {
- points.push(...segment);
- } else {
- points.push(...segment.slice(1));
- }
- }
-
- if (points.length >= 2) {
- const line = createCableLine(points, color, properties, earthObj);
- if (line) {
- cableLines.push(line);
- earthObj.add(line);
- console.log('添加线缆成功');
- }
- }
- }
- } else if (geometry.type === 'LineString') {
- const allCoords = geometry.coordinates;
+ console.log("正在加载电缆数据...");
+ showStatusMessage("正在加载电缆数据...", "warning");
+
+ const response = await fetch(PATHS.cablesApi);
+ if (!response.ok) {
+ throw new Error(`电缆接口返回 HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.features || !Array.isArray(data.features)) {
+ throw new Error("无效的电缆 GeoJSON 格式");
+ }
+
+ clearCableLines(earthObj);
+
+ for (const feature of data.features) {
+ const geometry = feature.geometry;
+ const properties = feature.properties || {};
+
+ if (!geometry || !geometry.coordinates) continue;
+
+ const color = getCableColor(properties);
+
+ if (geometry.type === "MultiLineString") {
+ for (const lineCoords of geometry.coordinates) {
+ if (!lineCoords || lineCoords.length < 2) continue;
+
const points = [];
-
- for (let i = 0; i < allCoords.length - 1; i++) {
- const lon1 = allCoords[i][0];
- const lat1 = allCoords[i][1];
- const lon2 = allCoords[i + 1][0];
- const lat2 = allCoords[i + 1][1];
-
- const segment = calculateGreatCirclePoints(lat1, lon1, lat2, lon2, 100.2, 50);
- if (i === 0) {
- points.push(...segment);
- } else {
- points.push(...segment.slice(1));
- }
+ for (let i = 0; i < lineCoords.length - 1; i++) {
+ const lon1 = lineCoords[i][0];
+ const lat1 = lineCoords[i][1];
+ const lon2 = lineCoords[i + 1][0];
+ const lat2 = lineCoords[i + 1][1];
+
+ const segment = calculateGreatCirclePoints(
+ lat1,
+ lon1,
+ lat2,
+ lon2,
+ CONFIG.earthRadius + CABLE_CONFIG.line.altitudeOffset,
+ CABLE_CONFIG.line.greatCircleSegments,
+ );
+ points.push(...(i === 0 ? segment : segment.slice(1)));
}
-
- if (points.length >= 2) {
- const line = createCableLine(points, color, properties, earthObj);
- if (line) {
- cableLines.push(line);
- earthObj.add(line);
- }
+
+ const line = createCableLine(points, color, properties);
+ if (line) {
+ cableLines.push(line);
+ earthObj.add(line);
}
}
+ } else if (geometry.type === "LineString") {
+ const points = [];
+ for (let i = 0; i < geometry.coordinates.length - 1; i++) {
+ const lon1 = geometry.coordinates[i][0];
+ const lat1 = geometry.coordinates[i][1];
+ const lon2 = geometry.coordinates[i + 1][0];
+ const lat2 = geometry.coordinates[i + 1][1];
+
+ const segment = calculateGreatCirclePoints(
+ lat1,
+ lon1,
+ lat2,
+ lon2,
+ CONFIG.earthRadius + CABLE_CONFIG.line.altitudeOffset,
+ CABLE_CONFIG.line.greatCircleSegments,
+ );
+ points.push(...(i === 0 ? segment : segment.slice(1)));
+ }
+
+ const line = createCableLine(points, color, properties);
+ if (line) {
+ cableLines.push(line);
+ earthObj.add(line);
+ }
}
-
- updateEarthStats({
- cableCount: cableLines.length,
- landingPointCount: landingPoints.length,
- terrainOn: false,
- textureQuality: '8K 卫星图'
- });
-
- showStatusMessage(`成功加载 ${cableLines.length} 条电缆`, 'success');
- document.getElementById('loading').style.display = 'none';
-
- } catch (error) {
- console.error('加载电缆数据失败:', error);
- showStatusMessage('加载电缆数据失败: ' + error.message, 'error');
}
+
+ const cableCount = data.features.length;
+ const inServiceCount = data.features.filter(
+ (feature) =>
+ feature.properties && feature.properties.status === "In Service",
+ ).length;
+
+ const cableCountEl = document.getElementById("cable-count");
+ const statusEl = document.getElementById("cable-status-summary");
+ if (cableCountEl) cableCountEl.textContent = cableCount + "个";
+ if (statusEl) statusEl.textContent = `${inServiceCount}/${cableCount} 运行中`;
+
+ updateEarthStats({
+ cableCount: cableLines.length,
+ landingPointCount: landingPoints.length,
+ terrainOn: false,
+ textureQuality: "8K 卫星图",
+ });
+
+ showStatusMessage(`成功加载 ${cableLines.length} 条电缆`, "success");
+ return cableLines.length;
}
export async function loadLandingPoints(scene, earthObj) {
+ console.log("正在加载登陆点数据...");
+
+ const response = await fetch(PATHS.landingPointsApi);
+ if (!response.ok) {
+ throw new Error(`登陆点接口返回 HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.features || !Array.isArray(data.features)) {
+ throw new Error("无效的登陆点 GeoJSON 格式");
+ }
+
+ clearLandingPoints(earthObj);
+
+ const sphereGeometry = new THREE.SphereGeometry(
+ CABLE_CONFIG.landingPoint.radius,
+ CABLE_CONFIG.landingPoint.widthSegments,
+ CABLE_CONFIG.landingPoint.heightSegments,
+ );
+ let validCount = 0;
+
try {
- console.log('正在加载登陆点数据...');
-
- const response = await fetch(PATHS.landingPointsApi);
- if (!response.ok) {
- console.error('HTTP错误:', response.status);
- return;
- }
-
- const data = await response.json();
-
- if (!data.features || !Array.isArray(data.features)) {
- console.error('无效的GeoJSON格式');
- return;
- }
-
- landingPoints = [];
- let validCount = 0;
-
- const sphereGeometry = new THREE.SphereGeometry(0.4, 16, 16);
- const sphereMaterial = new THREE.MeshStandardMaterial({
- color: 0xffaa00,
- emissive: 0x442200,
- emissiveIntensity: 0.5
- });
-
for (const feature of data.features) {
if (!feature.geometry || !feature.geometry.coordinates) continue;
-
+
const [lon, lat] = feature.geometry.coordinates;
const properties = feature.properties || {};
-
- if (typeof lon !== 'number' || typeof lat !== 'number' ||
- isNaN(lon) || isNaN(lat) ||
- Math.abs(lat) > 90 || Math.abs(lon) > 180) {
+
+ if (
+ typeof lon !== "number" ||
+ typeof lat !== "number" ||
+ Number.isNaN(lon) ||
+ Number.isNaN(lat) ||
+ Math.abs(lat) > 90 ||
+ Math.abs(lon) > 180
+ ) {
continue;
}
-
- const position = latLonToVector3(lat, lon, 100.1);
-
- if (isNaN(position.x) || isNaN(position.y) || isNaN(position.z)) {
+
+ const position = latLonToVector3(
+ lat,
+ lon,
+ CONFIG.earthRadius + CABLE_CONFIG.landingPoint.altitudeOffset,
+ );
+ if (
+ Number.isNaN(position.x) ||
+ Number.isNaN(position.y) ||
+ Number.isNaN(position.z)
+ ) {
continue;
}
-
- const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial.clone());
+
+ const sphere = new THREE.Mesh(
+ sphereGeometry.clone(),
+ new THREE.MeshStandardMaterial({
+ color: CABLE_CONFIG.landingPoint.color,
+ emissive: CABLE_CONFIG.landingPoint.emissive,
+ emissiveIntensity: CABLE_CONFIG.landingPoint.emissiveIntensity,
+ transparent: true,
+ opacity: CABLE_CONFIG.landingPoint.opacity,
+ }),
+ );
sphere.position.copy(position);
sphere.userData = {
- type: 'landingPoint',
- name: properties.name || '未知登陆站',
+ type: "landingPoint",
+ name: properties.name || "未知登陆站",
cableNames: properties.cable_names || [],
- country: properties.country || '未知国家',
- status: properties.status || 'Unknown'
+ country: properties.country || "未知国家",
+ status: properties.status || "Unknown",
+ baseScale: CABLE_CONFIG.landingPoint.baseScale,
};
-
+
earthObj.add(sphere);
landingPoints.push(sphere);
validCount++;
}
-
- console.log(`成功创建 ${validCount} 个登陆点标记`);
- showStatusMessage(`成功加载 ${validCount} 个登陆点`, 'success');
-
- const lpCountEl = document.getElementById('landing-point-count');
- if (lpCountEl) {
- lpCountEl.textContent = validCount + '个';
- }
-
- } catch (error) {
- console.error('加载登陆点数据失败:', error);
+ } finally {
+ sphereGeometry.dispose();
}
+
+ const landingPointCountEl = document.getElementById("landing-point-count");
+ if (landingPointCountEl) {
+ landingPointCountEl.textContent = validCount + "个";
+ }
+
+ showStatusMessage(`成功加载 ${validCount} 个登陆点`, "success");
+ return validCount;
}
export function handleCableClick(cable) {
lockedCable = cable;
-
+ setLegendItems("cables", getCableLegendItems());
+
const data = cable.userData;
- showInfoCard('cable', {
+ setLegendMode("cables");
+ showInfoCard("cable", {
name: data.name,
owner: data.owner,
status: data.status,
length: data.length,
coords: data.coords,
- rfs: data.rfs
+ rfs: data.rfs,
});
-
- showStatusMessage(`已锁定: ${data.name}`, 'info');
+
+ showStatusMessage(`已锁定: ${data.name}`, "info");
}
export function clearCableSelection() {
lockedCable = null;
+ setLegendItems("cables", getCableLegendItems());
}
export function getCableLines() {
return cableLines;
}
+export function getCableLegendItems() {
+ const legendMap = new Map();
+
+ cableLines.forEach((cable) => {
+ const color = cable.userData?.originalColor;
+ const label = cable.userData?.name || "未知线缆";
+
+ if (typeof color === "number" && !legendMap.has(label)) {
+ legendMap.set(label, {
+ label,
+ color: `#${color.toString(16).padStart(6, "0")}`,
+ });
+ }
+ });
+
+ if (legendMap.size === 0) {
+ return [{ label: "其他电缆", color: "#ffff44" }];
+ }
+
+ const items = Array.from(legendMap.values()).sort((a, b) =>
+ a.label.localeCompare(b.label, "zh-CN"),
+ );
+
+ const selectedName = lockedCable?.userData?.name;
+ if (!selectedName) {
+ return items;
+ }
+
+ const selectedIndex = items.findIndex((item) => item.label === selectedName);
+ if (selectedIndex <= 0) {
+ return items;
+ }
+
+ const [selectedItem] = items.splice(selectedIndex, 1);
+ items.unshift(selectedItem);
+ return items;
+}
+
export function getCablesById(cableId) {
return cableIdMap.get(cableId) || [];
}
@@ -342,8 +509,6 @@ export function getLandingPoints() {
return landingPoints;
}
-const cableStates = new Map();
-
export function getCableState(cableId) {
return cableStates.get(cableId) || CABLE_STATE.NORMAL;
}
@@ -365,55 +530,83 @@ export function getCableStateInfo() {
}
export function getLandingPointsByCableName(cableName) {
- return landingPoints.filter(lp => lp.userData.cableNames?.includes(cableName));
+ return landingPoints.filter((lp) =>
+ lp.userData.cableNames?.includes(cableName),
+ );
}
export function getAllLandingPoints() {
return landingPoints;
}
-export function applyLandingPointVisualState(lockedCableName, dimAll = false) {
- const pulse = (Math.sin(Date.now() * 0.003) + 1) * 0.5;
- const brightness = 0.3;
-
- landingPoints.forEach(lp => {
- const isRelated = !dimAll && lp.userData.cableNames?.includes(lockedCableName);
-
+export function applyLandingPointVisualState(lockedCableName, dimAll = false, camera = null) {
+ const pulse =
+ (Math.sin(Date.now() * CABLE_CONFIG.landingPointVisual.pulseSpeed) + 1) * 0.5;
+ const brightness = CABLE_CONFIG.landingPointVisual.dimBrightness;
+ const relatedNames = Array.isArray(lockedCableName)
+ ? lockedCableName.filter(Boolean)
+ : lockedCableName
+ ? [lockedCableName]
+ : [];
+
+ landingPoints.forEach((lp) => {
+ const isRelated =
+ !dimAll &&
+ Array.isArray(lp.userData.cableNames) &&
+ lp.userData.cableNames.some((name) => relatedNames.includes(name));
+
if (isRelated) {
- lp.material.color.setHex(0xffaa00);
- lp.material.emissive.setHex(0x442200);
- lp.material.emissiveIntensity = 0.5 + pulse * 0.5;
- lp.material.opacity = 0.8 + pulse * 0.2;
- lp.scale.setScalar(1.2 + pulse * 0.3);
+ lp.material.color.setHex(CABLE_CONFIG.landingPoint.color);
+ lp.material.emissive.setHex(CABLE_CONFIG.landingPoint.emissive);
+ lp.material.emissiveIntensity =
+ CABLE_CONFIG.landingPointVisual.related.emissiveIntensityBase +
+ pulse * CABLE_CONFIG.landingPointVisual.related.emissiveIntensityPulse;
+ lp.material.opacity =
+ CABLE_CONFIG.landingPointVisual.related.opacityBase +
+ pulse * CABLE_CONFIG.landingPointVisual.related.opacityPulse;
+ const distanceScale = getLandingPointDistanceScale(lp, camera);
+ const baseScale = lp.userData?.baseScale || CABLE_CONFIG.landingPoint.baseScale;
+ lp.scale.setScalar(
+ (CABLE_CONFIG.landingPointVisual.related.scaleBase +
+ pulse * CABLE_CONFIG.landingPointVisual.related.scalePulse) *
+ baseScale *
+ distanceScale,
+ );
} else {
- const r = 255 * brightness;
- const g = 170 * brightness;
- const b = 0 * brightness;
+ const dimColor = CABLE_CONFIG.landingPointVisual.dimmed.colorRGB;
+ const r = dimColor.r * brightness;
+ const g = dimColor.g * brightness;
+ const b = dimColor.b * brightness;
lp.material.color.setRGB(r / 255, g / 255, b / 255);
- lp.material.emissive.setHex(0x000000);
- lp.material.emissiveIntensity = 0;
- lp.material.opacity = 0.3;
- lp.scale.setScalar(1.0);
+ lp.material.emissive.setHex(CABLE_CONFIG.landingPointVisual.dimmed.emissive);
+ lp.material.emissiveIntensity =
+ CABLE_CONFIG.landingPointVisual.dimmed.emissiveIntensity;
+ lp.material.opacity = CABLE_CONFIG.landingPointVisual.dimmed.opacity;
+ const distanceScale = getLandingPointDistanceScale(lp, camera);
+ const baseScale = lp.userData?.baseScale || CABLE_CONFIG.landingPoint.baseScale;
+ lp.scale.setScalar(baseScale * distanceScale);
}
});
}
-export function resetLandingPointVisualState() {
- landingPoints.forEach(lp => {
- lp.material.color.setHex(0xffaa00);
- lp.material.emissive.setHex(0x442200);
- lp.material.emissiveIntensity = 0.5;
- lp.material.opacity = 1.0;
- lp.scale.setScalar(1.0);
+export function resetLandingPointVisualState(camera = null) {
+ landingPoints.forEach((lp) => {
+ lp.material.color.setHex(CABLE_CONFIG.landingPoint.color);
+ lp.material.emissive.setHex(CABLE_CONFIG.landingPoint.emissive);
+ lp.material.emissiveIntensity = CABLE_CONFIG.landingPoint.emissiveIntensity;
+ lp.material.opacity = CABLE_CONFIG.landingPoint.opacity;
+ const distanceScale = getLandingPointDistanceScale(lp, camera);
+ const baseScale = lp.userData?.baseScale || CABLE_CONFIG.landingPoint.baseScale;
+ lp.scale.setScalar(baseScale * distanceScale);
});
}
export function toggleCables(show) {
cablesVisible = show;
- cableLines.forEach(cable => {
+ cableLines.forEach((cable) => {
cable.visible = cablesVisible;
});
- landingPoints.forEach(lp => {
+ landingPoints.forEach((lp) => {
lp.visible = cablesVisible;
});
}
diff --git a/frontend/public/earth/js/constants.js b/frontend/public/earth/js/constants.js
index fbb027a7..05008c6b 100644
--- a/frontend/public/earth/js/constants.js
+++ b/frontend/public/earth/js/constants.js
@@ -7,6 +7,9 @@ export const CONFIG = {
maxZoom: 5.0,
earthRadius: 100,
rotationSpeed: 0.0005,
+ dragRotationFactorBase: 0.005,
+ dragRotationScaleMin: 0.28,
+ dragRotationScaleMax: 2.0,
};
// Earth coordinate constants
@@ -26,8 +29,9 @@ export const EARTH_CONFIG = {
export const PATHS = {
cablesApi: '/api/v1/visualization/geo/cables',
landingPointsApi: '/api/v1/visualization/geo/landing-points',
- geoJSON: './geo.json',
- landingPointsStatic: './landing-point-geo.geojson',
+ bgpApi: '/api/v1/visualization/geo/bgp-anomalies',
+ bgpIncidentsApi: '/api/v1/visualization/geo/bgp-incidents',
+ bgpCollectorsApi: '/api/v1/visualization/geo/bgp-collectors',
};
// Cable colors mapping
@@ -44,7 +48,50 @@ export const CABLE_CONFIG = {
otherOpacity: 0.5,
otherBrightness: 0.6,
pulseSpeed: 0.008,
- pulseCoefficient: 0.4
+ pulseCoefficient: 0.4,
+ line: {
+ altitudeOffset: 0.2,
+ greatCircleSegments: 50,
+ nearPointThreshold: 0.01,
+ lineWidth: 1,
+ opacity: 1.0,
+ renderOrder: 1,
+ },
+ landingPoint: {
+ altitudeOffset: 0.1,
+ radius: 0.4,
+ widthSegments: 16,
+ heightSegments: 16,
+ baseScale: 2.5,
+ color: 0xffaa00,
+ emissive: 0x442200,
+ emissiveIntensity: 0.5,
+ opacity: 1.0,
+ },
+ landingPointSizeStabilization: {
+ enabled: true,
+ referenceFov: 75,
+ min: 0.12,
+ max: 3.0,
+ },
+ landingPointVisual: {
+ pulseSpeed: 0.003,
+ dimBrightness: 0.3,
+ related: {
+ emissiveIntensityBase: 0.5,
+ emissiveIntensityPulse: 0.5,
+ opacityBase: 0.8,
+ opacityPulse: 0.2,
+ scaleBase: 1.2,
+ scalePulse: 0.3,
+ },
+ dimmed: {
+ colorRGB: { r: 255, g: 170, b: 0 },
+ emissive: 0x000000,
+ emissiveIntensity: 0,
+ opacity: 0.3,
+ },
+ },
};
export const CABLE_STATE = {
@@ -54,7 +101,7 @@ export const CABLE_STATE = {
};
export const SATELLITE_CONFIG = {
- maxCount: 5000,
+ maxCount: -1,
trailLength: 10,
dotSize: 4,
ringSize: 0.07,
@@ -69,6 +116,94 @@ export const SATELLITE_CONFIG = {
dotOpacityMax: 1.0
};
+export const BGP_CONFIG = {
+ defaultFetchLimit: 200,
+ maxRenderedMarkers: 200,
+ altitudeOffset: 2.1,
+ collectorAltitudeOffset: 1.6,
+ marker: {
+ eventBaseScale: 6.2,
+ collectorBaseScale: 7.4,
+ hoverScale: 1.16,
+ dimmedScale: 0.92,
+ collectorStatusCoreBaseScale: 0.12,
+ collectorStatusCoreMinScale: 1.2,
+ },
+ pulse: {
+ eventSpeed: 0.0045,
+ collectorSpeed: 0.0024,
+ normalAmplitude: 0.03,
+ lockedAmplitude: 0.16,
+ },
+ regionScale: 11.5,
+ opacity: {
+ normal: 0.78,
+ hover: 1.0,
+ dimmed: 0.24,
+ collector: 0.62,
+ collectorHover: 0.9,
+ lockedMin: 0.65,
+ lockedMax: 1.0
+ },
+ severityColors: {
+ critical: 0xff4d4f,
+ high: 0xff9f43,
+ medium: 0xffd166,
+ low: 0x4dabf7
+ },
+ severityScales: {
+ critical: 1.18,
+ high: 1.08,
+ medium: 1.0,
+ low: 0.94
+ },
+ collectorColor: 0x6db7ff,
+ collectorHeatColors: {
+ idle: 0x6db7ff,
+ low: 0x60a5fa,
+ medium: 0xfbbf24,
+ high: 0xfb923c,
+ hot: 0xff5f57
+ },
+ collectorIcon: {
+ ringStroke: "rgba(111, 160, 197, 0.34)",
+ ringLineWidth: 1.2,
+ ringRadius: 22,
+ pathStroke: "rgba(64, 106, 136, 0.74)",
+ pathLineWidth: 0.9,
+ pathFill: "rgba(214,224,233,0.88)",
+ centerFill: "rgba(222,231,239,0.72)",
+ centerRadius: 0.85,
+ idleBaseColor: 0xb7c4cf,
+ idleBlend: 0.56,
+ idleOpacity: 0.74,
+ hoverBlend: 0.42,
+ hoverNeutralColor: 0xc8d5e0,
+ lockedBlend: 0.48,
+ lockedNeutralColor: 0xd8e4ed,
+ dimmedColor: 0x7d8ca3,
+ },
+ regionColor: 0x2dd4bf,
+ ring: {
+ scaleA: 2.5,
+ scaleB: 3.4,
+ opacity: 0.5,
+ speed: 0.001,
+ },
+ halo: {
+ collectorScale: 11.5,
+ collectorPulseScale: 16.5,
+ collectorCoverageScale: 22.5,
+ },
+ sizeStabilization: {
+ enabled: true,
+ collectorMin: 0.12,
+ collectorMax: 3.0,
+ eventMin: 0.12,
+ eventMax: 3.0,
+ },
+};
+
export const PREDICTED_ORBIT_CONFIG = {
sampleInterval: 10,
opacity: 0.8
diff --git a/frontend/public/earth/js/controls.js b/frontend/public/earth/js/controls.js
index 6ef89950..ea07bf13 100644
--- a/frontend/public/earth/js/controls.js
+++ b/frontend/public/earth/js/controls.js
@@ -1,25 +1,129 @@
// controls.js - Zoom, rotate and toggle controls
-import { CONFIG, EARTH_CONFIG } from './constants.js';
-import { updateZoomDisplay, showStatusMessage } from './ui.js';
-import { toggleTerrain } from './earth.js';
-import { reloadData, clearLockedObject } from './main.js';
-import { toggleSatellites, toggleTrails, getShowSatellites, getSatelliteCount } from './satellites.js';
-import { toggleCables, getShowCables } from './cables.js';
+import { CONFIG, EARTH_CONFIG } from "./constants.js";
+import { updateZoomDisplay, showStatusMessage } from "./ui.js";
+import { toggleTerrain } from "./earth.js";
+import {
+ reloadData,
+ clearLockedObject,
+ clearLockedObjectAndInfo,
+ setCablesEnabled,
+ setSatellitesEnabled,
+} from "./main.js";
+import {
+ toggleTrails,
+ getShowSatellites,
+ getSatelliteCount,
+} from "./satellites.js";
+import { getShowCables } from "./cables.js";
+import { toggleBGP, getShowBGP, getBGPCount } from "./bgp.js";
export let autoRotate = true;
export let zoomLevel = 1.0;
export let showTerrain = false;
-export let isDragging = false;
+export let layoutExpanded = false;
let earthObj = null;
+let listeners = [];
+let cleanupFns = [];
+
+function getFloatingGroups() {
+ return [
+ document.getElementById("zoom-control-group"),
+ document.getElementById("info-control-group"),
+ ].filter(Boolean);
+}
+
+function isFloatingMenuVisible() {
+ return getFloatingGroups().some((group) => {
+ return (
+ group.classList.contains("open") ||
+ group.matches(":hover") ||
+ group.matches(":focus-within")
+ );
+ });
+}
+
+function closeFloatingMenus() {
+ getFloatingGroups().forEach((group) => {
+ group.classList.remove("open");
+ group.classList.add("force-closed");
+ });
+
+ if (document.activeElement instanceof HTMLElement) {
+ document.activeElement.blur();
+ }
+}
+
+function clearForcedFloatingClose() {
+ getFloatingGroups().forEach((group) => {
+ group.classList.remove("force-closed");
+ });
+}
+
+function clearForcedFloatingCloseIfPointerOutside() {
+ getFloatingGroups().forEach((group) => {
+ if (!group.matches(":hover")) {
+ group.classList.remove("force-closed");
+ }
+ });
+}
+
+function setFloatingMenuOpen(group, shouldOpen) {
+ closeFloatingMenus();
+ clearForcedFloatingClose();
+ group?.classList.toggle("open", shouldOpen);
+}
+
+function setButtonTooltip(button, text) {
+ const tooltip = button?.querySelector(".tooltip");
+ if (tooltip) {
+ tooltip.textContent = text;
+ }
+}
+
+function clearSelectionIfHiding(shouldHide) {
+ if (shouldHide) {
+ clearLockedObject();
+ }
+}
+
+function bindFloatingMenu(trigger, group) {
+ bindListener(trigger, "click", (event) => {
+ event.stopPropagation();
+ const shouldOpen = !group?.classList.contains("open");
+ setFloatingMenuOpen(group, shouldOpen);
+ });
+
+ bindListener(group, "click", (event) => {
+ event.stopPropagation();
+ });
+}
+
+function bindListener(element, eventName, handler, options) {
+ if (!element) return;
+ element.addEventListener(eventName, handler, options);
+ listeners.push(() =>
+ element.removeEventListener(eventName, handler, options),
+ );
+}
+
+function resetCleanup() {
+ cleanupFns.forEach((cleanup) => cleanup());
+ cleanupFns = [];
+ listeners.forEach((cleanup) => cleanup());
+ listeners = [];
+}
export function setupControls(camera, renderer, scene, earth) {
+ resetCleanup();
earthObj = earth;
setupZoomControls(camera);
setupWheelZoom(camera, renderer);
setupRotateControls(camera, earth);
setupTerrainControls();
+ setupLiquidGlassInteractions();
+ setupKeyboardControls();
}
function setupZoomControls(camera) {
@@ -29,39 +133,40 @@ function setupZoomControls(camera) {
const HOLD_THRESHOLD = 150;
const LONG_PRESS_TICK = 50;
const CLICK_STEP = 10;
-
+
const MIN_PERCENT = CONFIG.minZoom * 100;
const MAX_PERCENT = CONFIG.maxZoom * 100;
-
+
function doZoomStep(direction) {
let currentPercent = Math.round(zoomLevel * 100);
- let newPercent = direction > 0 ? currentPercent + CLICK_STEP : currentPercent - CLICK_STEP;
-
+ let newPercent =
+ direction > 0 ? currentPercent + CLICK_STEP : currentPercent - CLICK_STEP;
+
if (newPercent > MAX_PERCENT) newPercent = MAX_PERCENT;
if (newPercent < MIN_PERCENT) newPercent = MIN_PERCENT;
-
+
zoomLevel = newPercent / 100;
applyZoom(camera);
}
-
+
function doContinuousZoom(direction) {
let currentPercent = Math.round(zoomLevel * 100);
let newPercent = direction > 0 ? currentPercent + 1 : currentPercent - 1;
-
+
if (newPercent > MAX_PERCENT) newPercent = MAX_PERCENT;
if (newPercent < MIN_PERCENT) newPercent = MIN_PERCENT;
-
+
zoomLevel = newPercent / 100;
applyZoom(camera);
}
-
+
function startContinuousZoom(direction) {
doContinuousZoom(direction);
- zoomInterval = setInterval(() => {
+ zoomInterval = window.setInterval(() => {
doContinuousZoom(direction);
}, LONG_PRESS_TICK);
}
-
+
function stopZoom() {
if (zoomInterval) {
clearInterval(zoomInterval);
@@ -72,15 +177,15 @@ function setupZoomControls(camera) {
holdTimeout = null;
}
}
-
+
function handleMouseDown(direction) {
startTime = Date.now();
stopZoom();
- holdTimeout = setTimeout(() => {
+ holdTimeout = window.setTimeout(() => {
startContinuousZoom(direction);
}, HOLD_THRESHOLD);
}
-
+
function handleMouseUp(direction) {
const heldTime = Date.now() - startTime;
stopZoom();
@@ -88,48 +193,72 @@ function setupZoomControls(camera) {
doZoomStep(direction);
}
}
-
- document.getElementById('zoom-in').addEventListener('mousedown', () => handleMouseDown(1));
- document.getElementById('zoom-in').addEventListener('mouseup', () => handleMouseUp(1));
- document.getElementById('zoom-in').addEventListener('mouseleave', stopZoom);
- document.getElementById('zoom-in').addEventListener('touchstart', (e) => { e.preventDefault(); handleMouseDown(1); });
- document.getElementById('zoom-in').addEventListener('touchend', () => handleMouseUp(1));
-
- document.getElementById('zoom-out').addEventListener('mousedown', () => handleMouseDown(-1));
- document.getElementById('zoom-out').addEventListener('mouseup', () => handleMouseUp(-1));
- document.getElementById('zoom-out').addEventListener('mouseleave', stopZoom);
- document.getElementById('zoom-out').addEventListener('touchstart', (e) => { e.preventDefault(); handleMouseDown(-1); });
- document.getElementById('zoom-out').addEventListener('touchend', () => handleMouseUp(-1));
-
- document.getElementById('zoom-value').addEventListener('click', function() {
+
+ cleanupFns.push(stopZoom);
+
+ const zoomIn = document.getElementById("zoom-in");
+ const zoomOut = document.getElementById("zoom-out");
+ const zoomValue = document.getElementById("zoom-value");
+
+ bindListener(zoomIn, "mousedown", () => handleMouseDown(1));
+ bindListener(zoomIn, "mouseup", () => handleMouseUp(1));
+ bindListener(zoomIn, "mouseleave", stopZoom);
+ bindListener(zoomIn, "touchstart", (e) => {
+ e.preventDefault();
+ handleMouseDown(1);
+ });
+ bindListener(zoomIn, "touchend", () => handleMouseUp(1));
+
+ bindListener(zoomOut, "mousedown", () => handleMouseDown(-1));
+ bindListener(zoomOut, "mouseup", () => handleMouseUp(-1));
+ bindListener(zoomOut, "mouseleave", stopZoom);
+ bindListener(zoomOut, "touchstart", (e) => {
+ e.preventDefault();
+ handleMouseDown(-1);
+ });
+ bindListener(zoomOut, "touchend", () => handleMouseUp(-1));
+
+ bindListener(zoomValue, "click", () => {
const startZoomVal = zoomLevel;
const targetZoom = 1.0;
const startDistance = CONFIG.defaultCameraZ / startZoomVal;
const targetDistance = CONFIG.defaultCameraZ / targetZoom;
-
- animateValue(0, 1, 600, (progress) => {
- const ease = 1 - Math.pow(1 - progress, 3);
- zoomLevel = startZoomVal + (targetZoom - startZoomVal) * ease;
- camera.position.z = CONFIG.defaultCameraZ / zoomLevel;
- const distance = startDistance + (targetDistance - startDistance) * ease;
- updateZoomDisplay(zoomLevel, distance.toFixed(0));
- }, () => {
- zoomLevel = 1.0;
- showStatusMessage('缩放已重置到100%', 'info');
- });
+
+ animateValue(
+ 0,
+ 1,
+ 600,
+ (progress) => {
+ const ease = 1 - Math.pow(1 - progress, 3);
+ zoomLevel = startZoomVal + (targetZoom - startZoomVal) * ease;
+ camera.position.z = CONFIG.defaultCameraZ / zoomLevel;
+ const distance =
+ startDistance + (targetDistance - startDistance) * ease;
+ updateZoomDisplay(zoomLevel, distance.toFixed(0));
+ },
+ () => {
+ zoomLevel = 1.0;
+ showStatusMessage("缩放已重置到100%", "info");
+ },
+ );
});
}
function setupWheelZoom(camera, renderer) {
- renderer.domElement.addEventListener('wheel', (e) => {
- e.preventDefault();
- if (e.deltaY < 0) {
- zoomLevel = Math.min(zoomLevel + 0.1, CONFIG.maxZoom);
- } else {
- zoomLevel = Math.max(zoomLevel - 0.1, CONFIG.minZoom);
- }
- applyZoom(camera);
- }, { passive: false });
+ bindListener(
+ renderer?.domElement,
+ "wheel",
+ (e) => {
+ e.preventDefault();
+ if (e.deltaY < 0) {
+ zoomLevel = Math.min(zoomLevel + 0.1, CONFIG.maxZoom);
+ } else {
+ zoomLevel = Math.max(zoomLevel - 0.1, CONFIG.minZoom);
+ }
+ applyZoom(camera);
+ },
+ { passive: false },
+ );
}
function applyZoom(camera) {
@@ -140,136 +269,292 @@ function applyZoom(camera) {
function animateValue(start, end, duration, onUpdate, onComplete) {
const startTime = performance.now();
-
+
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeProgress = 1 - Math.pow(1 - progress, 3);
-
+
const current = start + (end - start) * easeProgress;
onUpdate(current);
-
+
if (progress < 1) {
requestAnimationFrame(update);
} else if (onComplete) {
onComplete();
}
}
-
+
requestAnimationFrame(update);
}
export function resetView(camera) {
if (!earthObj) return;
-
+
function animateToView(targetLat, targetLon, targetRotLon) {
- const latRot = targetLat * Math.PI / 180;
- const targetRotX = EARTH_CONFIG.tiltRad + latRot * EARTH_CONFIG.latCoefficient;
- const targetRotY = -(targetRotLon * Math.PI / 180);
-
+ const latRot = (targetLat * Math.PI) / 180;
+ const targetRotX =
+ EARTH_CONFIG.tiltRad + latRot * EARTH_CONFIG.latCoefficient;
+ const targetRotY = -((targetRotLon * Math.PI) / 180);
+
const startRotX = earthObj.rotation.x;
const startRotY = earthObj.rotation.y;
const startZoom = zoomLevel;
const targetZoom = 1.0;
-
- animateValue(0, 1, 800, (progress) => {
- const ease = 1 - Math.pow(1 - progress, 3);
- earthObj.rotation.x = startRotX + (targetRotX - startRotX) * ease;
- earthObj.rotation.y = startRotY + (targetRotY - startRotY) * ease;
-
- zoomLevel = startZoom + (targetZoom - startZoom) * ease;
- camera.position.z = CONFIG.defaultCameraZ / zoomLevel;
- updateZoomDisplay(zoomLevel, camera.position.z.toFixed(0));
- }, () => {
- zoomLevel = 1.0;
- showStatusMessage('视角已重置', 'info');
- });
+
+ animateValue(
+ 0,
+ 1,
+ 800,
+ (progress) => {
+ const ease = 1 - Math.pow(1 - progress, 3);
+ earthObj.rotation.x = startRotX + (targetRotX - startRotX) * ease;
+ earthObj.rotation.y = startRotY + (targetRotY - startRotY) * ease;
+
+ zoomLevel = startZoom + (targetZoom - startZoom) * ease;
+ camera.position.z = CONFIG.defaultCameraZ / zoomLevel;
+ updateZoomDisplay(zoomLevel, camera.position.z.toFixed(0));
+ },
+ () => {
+ zoomLevel = 1.0;
+ showStatusMessage("视角已重置", "info");
+ },
+ );
}
-
+
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
- (pos) => animateToView(pos.coords.latitude, pos.coords.longitude, -pos.coords.longitude),
- () => animateToView(EARTH_CONFIG.chinaLat, EARTH_CONFIG.chinaLon, EARTH_CONFIG.chinaRotLon),
- { timeout: 5000, enableHighAccuracy: false }
+ (pos) =>
+ animateToView(
+ pos.coords.latitude,
+ pos.coords.longitude,
+ -pos.coords.longitude,
+ ),
+ () =>
+ animateToView(
+ EARTH_CONFIG.chinaLat,
+ EARTH_CONFIG.chinaLon,
+ EARTH_CONFIG.chinaRotLon,
+ ),
+ { timeout: 5000, enableHighAccuracy: false },
);
} else {
- animateToView(EARTH_CONFIG.chinaLat, EARTH_CONFIG.chinaLon, EARTH_CONFIG.chinaRotLon);
- }
-
- if (typeof window.clearLockedCable === 'function') {
- window.clearLockedCable();
+ animateToView(
+ EARTH_CONFIG.chinaLat,
+ EARTH_CONFIG.chinaLon,
+ EARTH_CONFIG.chinaRotLon,
+ );
}
+
+ clearLockedObject();
}
-function setupRotateControls(camera, earth) {
- const rotateBtn = document.getElementById('rotate-toggle');
-
- rotateBtn.addEventListener('click', function() {
+function setupRotateControls(camera) {
+ const rotateBtn = document.getElementById("rotate-toggle");
+ const resetViewBtn = document.getElementById("reset-view");
+
+ bindListener(rotateBtn, "click", () => {
const isRotating = toggleAutoRotate();
- showStatusMessage(isRotating ? '自动旋转已开启' : '自动旋转已暂停', 'info');
+ showStatusMessage(isRotating ? "自动旋转已开启" : "自动旋转已暂停", "info");
});
-
+
updateRotateUI();
-
- document.getElementById('reset-view').addEventListener('click', function() {
+
+ bindListener(resetViewBtn, "click", () => {
resetView(camera);
});
}
function setupTerrainControls() {
- document.getElementById('toggle-terrain').addEventListener('click', function() {
+ const container = document.getElementById("container");
+ const searchBtn = document.getElementById("search-action");
+ const infoGroup = document.getElementById("info-control-group");
+ const infoTrigger = document.getElementById("info-trigger");
+ const terrainBtn = document.getElementById("toggle-terrain");
+ const satellitesBtn = document.getElementById("toggle-satellites");
+ const bgpBtn = document.getElementById("toggle-bgp");
+ const trailsBtn = document.getElementById("toggle-trails");
+ const cablesBtn = document.getElementById("toggle-cables");
+ const layoutBtn = document.getElementById("layout-toggle");
+ const reloadBtn = document.getElementById("reload-data");
+ const zoomGroup = document.getElementById("zoom-control-group");
+ const zoomTrigger = document.getElementById("zoom-trigger");
+
+ if (trailsBtn) {
+ trailsBtn.classList.add("active");
+ setButtonTooltip(trailsBtn, "隐藏轨迹");
+ }
+
+ bindListener(searchBtn, "click", () => {
+ showStatusMessage("搜索功能待开发", "info");
+ });
+
+ bindListener(terrainBtn, "click", function () {
showTerrain = !showTerrain;
toggleTerrain(showTerrain);
- this.classList.toggle('active', showTerrain);
- this.querySelector('.tooltip').textContent = showTerrain ? '隐藏地形' : '显示地形';
- document.getElementById('terrain-status').textContent = showTerrain ? '开启' : '关闭';
- showStatusMessage(showTerrain ? '地形已显示' : '地形已隐藏', 'info');
+ this.classList.toggle("active", showTerrain);
+ setButtonTooltip(this, showTerrain ? "隐藏地形" : "显示地形");
+ const terrainStatus = document.getElementById("terrain-status");
+ if (terrainStatus)
+ terrainStatus.textContent = showTerrain ? "开启" : "关闭";
+ showStatusMessage(showTerrain ? "地形已显示" : "地形已隐藏", "info");
});
-
- document.getElementById('toggle-satellites').addEventListener('click', function() {
+
+ bindListener(satellitesBtn, "click", async function () {
const showSats = !getShowSatellites();
- if (!showSats) {
- clearLockedObject();
+ clearSelectionIfHiding(!showSats);
+ try {
+ await setSatellitesEnabled(showSats);
+ if (!showSats) {
+ showStatusMessage("卫星已隐藏", "info");
+ } else {
+ const satelliteCountEl = document.getElementById("satellite-count");
+ if (satelliteCountEl) {
+ satelliteCountEl.textContent = `${getSatelliteCount()} 颗`;
+ }
+ }
+ } catch (error) {
+ console.error("切换卫星显示失败:", error);
}
- toggleSatellites(showSats);
- this.classList.toggle('active', showSats);
- this.querySelector('.tooltip').textContent = showSats ? '隐藏卫星' : '显示卫星';
- document.getElementById('satellite-count').textContent = getSatelliteCount() + ' 颗';
- showStatusMessage(showSats ? '卫星已显示' : '卫星已隐藏', 'info');
});
-
- document.getElementById('toggle-trails').addEventListener('click', function() {
- const isActive = this.classList.contains('active');
- const showTrails = !isActive;
- toggleTrails(showTrails);
- this.classList.toggle('active', showTrails);
- this.querySelector('.tooltip').textContent = showTrails ? '隐藏轨迹' : '显示轨迹';
- showStatusMessage(showTrails ? '轨迹已显示' : '轨迹已隐藏', 'info');
- });
-
- document.getElementById('toggle-cables').addEventListener('click', function() {
- const showCables = !getShowCables();
- if (!showCables) {
- clearLockedObject();
+
+ bindListener(bgpBtn, "click", function () {
+ const showNextBGP = !getShowBGP();
+ clearSelectionIfHiding(!showNextBGP);
+ toggleBGP(showNextBGP);
+ this.classList.toggle("active", showNextBGP);
+ setButtonTooltip(this, showNextBGP ? "隐藏BGP观测" : "显示BGP观测");
+ const bgpCountEl = document.getElementById("bgp-anomaly-count");
+ if (bgpCountEl) {
+ bgpCountEl.textContent = `${getBGPCount()} 条`;
}
- toggleCables(showCables);
- this.classList.toggle('active', showCables);
- this.querySelector('.tooltip').textContent = showCables ? '隐藏线缆' : '显示线缆';
- showStatusMessage(showCables ? '线缆已显示' : '线缆已隐藏', 'info');
+ showStatusMessage(showNextBGP ? "BGP观测已显示" : "BGP观测已隐藏", "info");
});
-
- document.getElementById('reload-data').addEventListener('click', async () => {
+
+ bindListener(trailsBtn, "click", function () {
+ const isActive = this.classList.contains("active");
+ const nextShowTrails = !isActive;
+ toggleTrails(nextShowTrails);
+ this.classList.toggle("active", nextShowTrails);
+ setButtonTooltip(this, nextShowTrails ? "隐藏轨迹" : "显示轨迹");
+ showStatusMessage(nextShowTrails ? "轨迹已显示" : "轨迹已隐藏", "info");
+ });
+
+ bindListener(cablesBtn, "click", async function () {
+ const showNextCables = !getShowCables();
+ clearSelectionIfHiding(!showNextCables);
+ try {
+ await setCablesEnabled(showNextCables);
+ } catch (error) {
+ console.error("切换线缆显示失败:", error);
+ }
+ });
+
+ bindListener(reloadBtn, "click", async () => {
await reloadData();
- showStatusMessage('数据已重新加载', 'success');
});
-
- const toolbarToggle = document.getElementById('toolbar-toggle');
- const toolbar = document.getElementById('control-toolbar');
- if (toolbarToggle && toolbar) {
- toolbarToggle.addEventListener('click', () => {
- toolbar.classList.toggle('collapsed');
+
+ bindFloatingMenu(zoomTrigger, zoomGroup);
+ bindFloatingMenu(infoTrigger, infoGroup);
+
+ bindListener(document, "click", (event) => {
+ const openGroups = [zoomGroup, infoGroup].filter((group) =>
+ group?.classList.contains("open"),
+ );
+ if (openGroups.length === 0) return;
+
+ const clickedInsideOpenGroup = openGroups.some((group) =>
+ group.contains(event.target),
+ );
+ if (!clickedInsideOpenGroup) {
+ closeFloatingMenus();
+ }
+ });
+
+ bindListener(document, "mousemove", () => {
+ clearForcedFloatingCloseIfPointerOutside();
+ });
+
+ bindListener(layoutBtn, "click", () => {
+ const expanded = toggleLayoutExpanded(container);
+ showStatusMessage(expanded ? "布局已最大化" : "布局已恢复", "info");
+ });
+
+ updateLayoutUI(container);
+}
+
+function setupKeyboardControls() {
+ bindListener(document, "keydown", (event) => {
+ if (event.key !== "Escape") return;
+
+ if (isFloatingMenuVisible()) {
+ closeFloatingMenus();
+ return;
+ }
+
+ clearLockedObjectAndInfo();
+ });
+}
+
+function setupLiquidGlassInteractions() {
+ const surfaces = document.querySelectorAll(".liquid-glass-surface");
+
+ const resetSurface = (surface) => {
+ surface.style.setProperty("--elastic-x", "0px");
+ surface.style.setProperty("--elastic-y", "0px");
+ surface.style.setProperty("--tilt-x", "0deg");
+ surface.style.setProperty("--tilt-y", "0deg");
+ surface.style.setProperty("--glow-x", "50%");
+ surface.style.setProperty("--glow-y", "22%");
+ surface.style.setProperty("--glow-opacity", "0.24");
+ surface.classList.remove("is-pressed");
+ };
+
+ surfaces.forEach((surface) => {
+ resetSurface(surface);
+
+ bindListener(surface, "pointermove", (event) => {
+ const rect = surface.getBoundingClientRect();
+ const px = (event.clientX - rect.left) / rect.width;
+ const py = (event.clientY - rect.top) / rect.height;
+ const offsetX = (px - 0.5) * 6;
+ const offsetY = (py - 0.5) * 6;
+ const tiltX = (0.5 - py) * 8;
+ const tiltY = (px - 0.5) * 10;
+
+ surface.style.setProperty("--elastic-x", `${offsetX.toFixed(2)}px`);
+ surface.style.setProperty("--elastic-y", `${offsetY.toFixed(2)}px`);
+ surface.style.setProperty("--tilt-x", `${tiltX.toFixed(2)}deg`);
+ surface.style.setProperty("--tilt-y", `${tiltY.toFixed(2)}deg`);
+ surface.style.setProperty("--glow-x", `${(px * 100).toFixed(1)}%`);
+ surface.style.setProperty("--glow-y", `${(py * 100).toFixed(1)}%`);
+ surface.style.setProperty("--glow-opacity", "0.34");
});
- }
+
+ bindListener(surface, "pointerenter", () => {
+ surface.style.setProperty("--glow-opacity", "0.28");
+ });
+
+ bindListener(surface, "pointerleave", () => {
+ resetSurface(surface);
+ });
+
+ bindListener(surface, "pointerdown", () => {
+ surface.classList.add("is-pressed");
+ });
+
+ bindListener(surface, "pointerup", () => {
+ surface.classList.remove("is-pressed");
+ });
+
+ bindListener(surface, "pointercancel", () => {
+ resetSurface(surface);
+ });
+ });
+}
+
+export function teardownControls() {
+ resetCleanup();
}
export function getAutoRotate() {
@@ -277,12 +562,12 @@ export function getAutoRotate() {
}
function updateRotateUI() {
- const btn = document.getElementById('rotate-toggle');
+ const btn = document.getElementById("rotate-toggle");
if (btn) {
- btn.classList.toggle('active', autoRotate);
- btn.innerHTML = autoRotate ? '⏸️' : '▶️';
- const tooltip = btn.querySelector('.tooltip');
- if (tooltip) tooltip.textContent = autoRotate ? '暂停旋转' : '开始旋转';
+ btn.classList.toggle("active", autoRotate);
+ btn.classList.toggle("is-stopped", !autoRotate);
+ const tooltip = btn.querySelector(".tooltip");
+ if (tooltip) tooltip.textContent = autoRotate ? "暂停旋转" : "开始旋转";
}
}
@@ -294,9 +579,7 @@ export function setAutoRotate(value) {
export function toggleAutoRotate() {
autoRotate = !autoRotate;
updateRotateUI();
- if (window.clearLockedCable) {
- window.clearLockedCable();
- }
+ clearLockedObject();
return autoRotate;
}
@@ -307,3 +590,24 @@ export function getZoomLevel() {
export function getShowTerrain() {
return showTerrain;
}
+
+function updateLayoutUI(container) {
+ if (container) {
+ container.classList.toggle("layout-expanded", layoutExpanded);
+ }
+
+ const btn = document.getElementById("layout-toggle");
+ if (btn) {
+ btn.classList.toggle("active", layoutExpanded);
+ const tooltip = btn.querySelector(".tooltip");
+ const nextLabel = layoutExpanded ? "恢复布局" : "最大化布局";
+ btn.title = nextLabel;
+ if (tooltip) tooltip.textContent = nextLabel;
+ }
+}
+
+function toggleLayoutExpanded(container) {
+ layoutExpanded = !layoutExpanded;
+ updateLayoutUI(container);
+ return layoutExpanded;
+}
diff --git a/frontend/public/earth/js/earth.js b/frontend/public/earth/js/earth.js
index f30934d9..2522eb48 100644
--- a/frontend/public/earth/js/earth.js
+++ b/frontend/public/earth/js/earth.js
@@ -104,7 +104,7 @@ export function createClouds(scene, earthObj) {
earthObj.add(clouds);
textureLoader.load(
- 'https://threejs.org/examples/textures/planets/earth_clouds_1024.png',
+ './assets/earth_clouds_1024.png',
function(texture) {
material.map = texture;
material.needsUpdate = true;
diff --git a/frontend/public/earth/js/info-card.js b/frontend/public/earth/js/info-card.js
index e7281862..43d89247 100644
--- a/frontend/public/earth/js/info-card.js
+++ b/frontend/public/earth/js/info-card.js
@@ -1,4 +1,5 @@
// info-card.js - Unified info card module
+import { showStatusMessage } from './ui.js';
let currentType = null;
@@ -29,6 +30,52 @@ const CARD_CONFIG = {
{ key: 'apogee', label: '远地点', unit: 'km' }
]
},
+ bgp: {
+ icon: '📡',
+ title: 'BGP事件详情',
+ className: 'bgp',
+ fields: [
+ { key: 'anomaly_type', label: '事件类型' },
+ { key: 'severity', label: '严重度' },
+ { key: 'status', label: '状态' },
+ { key: 'route_change', label: '事件特征' },
+ { key: 'prefix', label: '前缀' },
+ { key: 'as_path_display', label: '传播路径' },
+ { key: 'origin_asn', label: '涉及 ASN' },
+ { key: 'new_origin_asn', label: '关联 ASN' },
+ { key: 'confidence', label: '置信度' },
+ { key: 'collector', label: '主观测站' },
+ { key: 'observed_by', label: '观测范围' },
+ { key: 'impacted_scope', label: '影响区域' },
+ { key: 'related_cables', label: '附近基础设施' },
+ { key: 'related_satellites', label: '附近卫星' },
+ { key: 'location', label: '观测位置' },
+ { key: 'created_at', label: '事件时间' },
+ { key: 'summary', label: '摘要' }
+ ]
+ },
+ bgp_collector: {
+ icon: '📍',
+ title: 'BGP观测站详情',
+ className: 'bgp',
+ fields: [
+ { key: 'collector', label: '采集器' },
+ { key: 'location', label: '观测位置' },
+ { key: 'anomaly_count', label: '当前事件数' },
+ { key: 'observation_count', label: '观测事件数' },
+ { key: 'recent_24h_observation_count', label: '近24h事件数' },
+ { key: 'recent_7d_observation_count', label: '近7d事件数' },
+ { key: 'prefix_count', label: '观测前缀数' },
+ { key: 'origin_asn_count', label: '观测 ASN 数' },
+ { key: 'top_event_types', label: '主要事件类型' },
+ { key: 'coverage_halo', label: '日常活跃度' },
+ { key: 'related_satellites', label: '附近卫星' },
+ { key: 'latest_event_type', label: '最近事件类型' },
+ { key: 'latest_observed_at', label: '最近活跃时间' },
+ { key: 'baseline_scope', label: '日常覆盖范围' },
+ { key: 'status', label: '状态' }
+ ]
+ },
supercomputer: {
icon: '🖥️',
title: '超算详情',
@@ -55,7 +102,60 @@ const CARD_CONFIG = {
};
export function initInfoCard() {
- // Close button removed - now uses external clear button
+ const card = document.getElementById('info-card');
+ const content = document.getElementById('info-card-content');
+ if (!card || !content) return;
+
+ if (card.dataset.interactionBound !== 'true') {
+ const stopEvent = (event) => {
+ event.stopPropagation();
+ };
+
+ [
+ 'mousemove',
+ 'mousedown',
+ 'mouseup',
+ 'click',
+ 'dblclick',
+ 'wheel',
+ 'pointerdown',
+ 'pointerup',
+ 'pointermove',
+ 'touchstart',
+ 'touchmove',
+ 'touchend',
+ ].forEach((eventName) => {
+ card.addEventListener(eventName, stopEvent, { passive: false });
+ });
+
+ card.dataset.interactionBound = 'true';
+ }
+
+ if (content.dataset.copyBound === 'true') return;
+
+ content.addEventListener('click', async (event) => {
+ const label = event.target.closest('.info-card-label');
+ if (!label) return;
+
+ const property = label.closest('.info-card-property');
+ const valueEl = property?.querySelector('.info-card-value');
+ const value = valueEl?.textContent?.trim();
+
+ if (!value || value === '-') {
+ showStatusMessage('无可复制内容', 'warning');
+ return;
+ }
+
+ try {
+ await navigator.clipboard.writeText(value);
+ showStatusMessage(`已复制${label.textContent}：${value}`, 'success');
+ } catch (error) {
+ console.error('Copy failed:', error);
+ showStatusMessage('复制失败', 'error');
+ }
+ });
+
+ content.dataset.copyBound = 'true';
}
export function setInfoCardNoBorder(noBorder = true) {
diff --git a/frontend/public/earth/js/legend.js b/frontend/public/earth/js/legend.js
new file mode 100644
index 00000000..94e44535
--- /dev/null
+++ b/frontend/public/earth/js/legend.js
@@ -0,0 +1,67 @@
+const LEGEND_MODES = {
+ cables: {
+ title: "线缆图例",
+ },
+ satellites: {
+ title: "卫星图例",
+ },
+ bgp: {
+ title: "BGP观测图例",
+ },
+};
+
+let currentLegendMode = "cables";
+let legendItemsByMode = {
+ cables: [],
+ satellites: [],
+ bgp: [],
+};
+
+export function initLegend() {
+ renderLegend(currentLegendMode);
+}
+
+export function setLegendMode(mode) {
+ const nextMode = LEGEND_MODES[mode] ? mode : "cables";
+ currentLegendMode = nextMode;
+ renderLegend(currentLegendMode);
+}
+
+export function getLegendMode() {
+ return currentLegendMode;
+}
+
+export function refreshLegend() {
+ renderLegend(currentLegendMode);
+}
+
+export function setLegendItems(mode, items) {
+ if (!LEGEND_MODES[mode]) return;
+ legendItemsByMode[mode] = Array.isArray(items) ? items : [];
+ if (mode === currentLegendMode) {
+ renderLegend(currentLegendMode);
+ }
+}
+
+function renderLegend(mode) {
+ const legend = document.getElementById("legend");
+ if (!legend) return;
+
+ const config = LEGEND_MODES[mode] || LEGEND_MODES.cables;
+ const items = legendItemsByMode[mode] || [];
+ const itemsHtml = items
+ .map(
+ (item) => `
+
+ `,
+ )
+ .join("");
+
+ legend.innerHTML = `
+
${config.title}
+
${itemsHtml}
+ `;
+}
diff --git a/frontend/public/earth/js/main.js b/frontend/public/earth/js/main.js
index 3c1c08c0..653be064 100644
--- a/frontend/public/earth/js/main.js
+++ b/frontend/public/earth/js/main.js
@@ -1,31 +1,142 @@
-import * as THREE from 'three';
-import { createNoise3D } from 'simplex-noise';
+import * as THREE from "three";
+import { createNoise3D } from "simplex-noise";
-import { CONFIG, CABLE_CONFIG, CABLE_STATE } from './constants.js';
-import { latLonToVector3, vector3ToLatLon, screenToEarthCoords } from './utils.js';
-import {
- showStatusMessage,
- updateCoordinatesDisplay,
- updateZoomDisplay,
+import { CONFIG, CABLE_CONFIG, CABLE_STATE } from "./constants.js";
+import { vector3ToLatLon, screenToEarthCoords } from "./utils.js";
+import {
+ showStatusMessage,
+ updateCoordinatesDisplay,
+ updateZoomDisplay,
updateEarthStats,
setLoading,
+ setLoadingMessage,
showTooltip,
- hideTooltip
-} from './ui.js';
-import { createEarth, createClouds, createTerrain, createStars, createGridLines, toggleTerrain, getEarth } from './earth.js';
-import { loadGeoJSONFromPath, loadLandingPoints, handleCableClick, clearCableSelection, getCableLines, getCablesById, lockedCable as cableLocked, getCableState, setCableState, clearAllCableStates, applyLandingPointVisualState, resetLandingPointVisualState, getAllLandingPoints, getShowCables } from './cables.js';
-import { createSatellites, loadSatellites, updateSatellitePositions, toggleSatellites, toggleTrails, getShowSatellites, getSatelliteCount, selectSatellite, getSatelliteData, getSatellitePoints, setSatelliteRingState, updateLockedRingPosition, updateHoverRingPosition, getSatellitePositions, showPredictedOrbit, hidePredictedOrbit, updateBreathingPhase, isSatelliteFrontFacing } from './satellites.js';
-import { setupControls, getAutoRotate, getShowTerrain, zoomLevel, setAutoRotate, toggleAutoRotate, resetView } from './controls.js';
-import { initInfoCard, showInfoCard, hideInfoCard, getCurrentType, setInfoCardNoBorder } from './info-card.js';
+ hideTooltip,
+ showError,
+ hideError,
+ clearUiState,
+} from "./ui.js";
+import {
+ createEarth,
+ createClouds,
+ createTerrain,
+ createStars,
+ createGridLines,
+ getEarth,
+} from "./earth.js";
+import {
+ loadGeoJSONFromPath,
+ loadLandingPoints,
+ handleCableClick,
+ clearCableSelection,
+ getCableLines,
+ getCableLegendItems,
+ getCableState,
+ setCableState,
+ clearAllCableStates,
+ applyLandingPointVisualState,
+ resetLandingPointVisualState,
+ getShowCables,
+ clearCableData,
+ getLandingPoints,
+ toggleCables,
+} from "./cables.js";
+import {
+ createSatellites,
+ loadSatellites,
+ updateSatellitePositions,
+ toggleSatellites,
+ getShowSatellites,
+ getSatelliteLegendItems,
+ setSelectedSatelliteLegend,
+ clearSelectedSatelliteLegend,
+ getSatelliteCount,
+ selectSatellite,
+ getSatellitePoints,
+ setSatelliteRingState,
+ updateLockedRingPosition,
+ updateHoverRingPosition,
+ getSatellitePositions,
+ showPredictedOrbit,
+ hidePredictedOrbit,
+ highlightRelatedSatellites,
+ clearRelatedSatelliteHighlights,
+ getRelatedSatelliteIndicesForRegions,
+ updateRelatedSatelliteHighlights,
+ updateBreathingPhase,
+ isSatelliteFrontFacing,
+ setSatelliteCamera,
+ setLockedSatelliteIndex,
+ resetSatelliteState,
+ clearSatelliteData,
+} from "./satellites.js";
+import {
+ loadBGPAnomalies,
+ getBGPAnomalyMarkers,
+ getBGPCollectorMarkers,
+ getBGPLegendItems,
+ getBGPCount,
+ getBGPCollectorCount,
+ getBGPStatusSummary,
+ getShowBGP,
+ clearBGPSelection,
+ setBGPMarkerState,
+ updateBGPVisualState,
+ clearBGPData,
+ toggleBGP,
+ formatBGPAnomalyTypeLabel,
+ formatBGPASPath,
+ formatBGPCollectorStatus,
+ formatBGPConfidence,
+ formatBGPImpactedScope,
+ formatBGPLocation,
+ formatBGPObservedTime,
+ formatBGPObservedBy,
+ formatBGPRelatedCables,
+ formatBGPRouteChange,
+ formatBGPTopEventTypes,
+ formatBGPScope,
+ formatBGPCollectorCoverageHalo,
+ formatBGPSeverityLabel,
+ formatBGPStatusLabel,
+ showBGPEventOverlay,
+ showBGPCollectorCoverageOverlay,
+} from "./bgp.js";
+import {
+ setupControls,
+ getAutoRotate,
+ getShowTerrain,
+ setAutoRotate,
+ resetView,
+ getZoomLevel,
+ teardownControls,
+} from "./controls.js";
+import {
+ initInfoCard,
+ showInfoCard,
+ hideInfoCard,
+ setInfoCardNoBorder,
+} from "./info-card.js";
+import {
+ initLegend,
+ setLegendMode,
+ refreshLegend,
+ setLegendItems,
+} from "./legend.js";
+
+export let scene;
+export let camera;
+export let renderer;
-export let scene, camera, renderer;
let simplex;
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
+let targetRotation = { x: 0, y: 0 };
+let inertialVelocity = { x: 0, y: 0 };
let hoveredCable = null;
+let hoveredBGP = null;
let hoveredSatellite = null;
let hoveredSatelliteIndex = null;
-let cableLockedData = null;
let lockedSatellite = null;
let lockedSatelliteIndex = null;
let lockedObject = null;
@@ -35,20 +146,141 @@ let isLongDrag = false;
let lastSatClickTime = 0;
let lastSatClickIndex = 0;
let lastSatClickPos = { x: 0, y: 0 };
+let lastBGPClickTime = 0;
+let lastBGPClickCollector = null;
+let lastBGPClickType = null;
+let lastBGPClickPos = { x: 0, y: 0 };
+let earthTexture = null;
+let animationFrameId = null;
+let initialized = false;
+let destroyed = false;
+let isDataLoading = false;
+let currentLoadToken = 0;
+let cablesEnabled = true;
+let satellitesEnabled = true;
+let cableToggleToken = 0;
+let satelliteToggleToken = 0;
-export function clearLockedObject() {
- hidePredictedOrbit();
+const clock = new THREE.Clock();
+const interactionRaycaster = new THREE.Raycaster();
+const interactionMouse = new THREE.Vector2();
+const scratchCameraToEarth = new THREE.Vector3();
+const scratchCableCenter = new THREE.Vector3();
+const scratchCableDirection = new THREE.Vector3();
+const scratchBGPDirection = new THREE.Vector3();
+const scratchBGPWorldPosition = new THREE.Vector3();
+
+const cleanupFns = [];
+const DRAG_SMOOTHING_FACTOR = 0.18;
+const INERTIA_DAMPING = 0.92;
+const INERTIA_MIN_VELOCITY = 0.00008;
+const HUD_INTERACTIVE_SELECTORS = [
+ "#info-panel",
+ "#info-panel *",
+ "#right-toolbar-group",
+ "#right-toolbar-group *",
+ "#coordinates-display",
+ "#coordinates-display *",
+ "#legend",
+ "#legend *",
+ "#earth-stats",
+ "#earth-stats *",
+];
+
+function bindListener(target, eventName, handler, options) {
+ if (!target) return;
+ target.addEventListener(eventName, handler, options);
+ cleanupFns.push(() =>
+ target.removeEventListener(eventName, handler, options),
+ );
+}
+
+function isEventOnHud(event) {
+ const target = event?.target;
+ if (!(target instanceof Element)) return false;
+ return HUD_INTERACTIVE_SELECTORS.some((selector) => target.closest(selector));
+}
+
+function getDragRotationFactor() {
+ const zoom = Math.max(getZoomLevel(), 0.01);
+ const scale = THREE.MathUtils.clamp(
+ 1 / zoom,
+ CONFIG.dragRotationScaleMin,
+ CONFIG.dragRotationScaleMax,
+ );
+ return CONFIG.dragRotationFactorBase * scale;
+}
+
+function disposeMaterial(material) {
+ if (!material) return;
+ if (Array.isArray(material)) {
+ material.forEach(disposeMaterial);
+ return;
+ }
+
+ if (material.map) material.map.dispose();
+ if (material.alphaMap) material.alphaMap.dispose();
+ if (material.aoMap) material.aoMap.dispose();
+ if (material.bumpMap) material.bumpMap.dispose();
+ if (material.displacementMap) material.displacementMap.dispose();
+ if (material.emissiveMap) material.emissiveMap.dispose();
+ if (material.envMap) material.envMap.dispose();
+ if (material.lightMap) material.lightMap.dispose();
+ if (material.metalnessMap) material.metalnessMap.dispose();
+ if (material.normalMap) material.normalMap.dispose();
+ if (material.roughnessMap) material.roughnessMap.dispose();
+ if (material.specularMap) material.specularMap.dispose();
+ material.dispose();
+}
+
+function disposeSceneObject(object) {
+ if (!object) return;
+
+ for (let i = object.children.length - 1; i >= 0; i -= 1) {
+ disposeSceneObject(object.children[i]);
+ }
+
+ if (object.geometry) {
+ object.geometry.dispose();
+ }
+
+ if (object.material) {
+ disposeMaterial(object.material);
+ }
+
+ if (object.parent) {
+ object.parent.remove(object);
+ }
+}
+
+function clearRuntimeSelection() {
hoveredCable = null;
+ hoveredBGP = null;
hoveredSatellite = null;
hoveredSatelliteIndex = null;
- clearAllCableStates();
- setSatelliteRingState(null, 'none', null);
lockedObject = null;
lockedObjectType = null;
lockedSatellite = null;
lockedSatelliteIndex = null;
- window.lockedSatelliteIndex = null;
- cableLockedData = null;
+ setLockedSatelliteIndex(null);
+ clearSelectedSatelliteLegend();
+}
+
+export function clearLockedObject() {
+ hidePredictedOrbit();
+ clearAllCableStates();
+ clearCableSelection();
+ clearBGPSelection();
+ clearRelatedSatelliteHighlights();
+ setSatelliteRingState(null, "none", null);
+ clearRuntimeSelection();
+ setLegendItems("satellites", getSatelliteLegendItems());
+}
+
+export function clearLockedObjectAndInfo() {
+ clearLockedObject();
+ hideInfoCard();
+ hideTooltip();
}
function isSameCable(cable1, cable2) {
@@ -59,499 +291,1352 @@ function isSameCable(cable1, cable2) {
return id1 === id2;
}
+function isSameBGPMarker(marker1, marker2) {
+ if (!marker1 || !marker2) return false;
+ const type1 = marker1.userData?.type;
+ const type2 = marker2.userData?.type;
+ if (type1 !== type2) return false;
+
+ if (type1 === "bgp") {
+ return marker1.userData?.id === marker2.userData?.id;
+ }
+ if (type1 === "bgp_collector") {
+ return marker1.userData?.collector === marker2.userData?.collector;
+ }
+ return false;
+}
+
+function getBGPCollectorMarkerByName(collector) {
+ return getBGPCollectorMarkers().find(
+ (marker) => marker.userData?.collector === collector,
+ );
+}
+
+function resetTransientBGPStates() {
+ getBGPCollectorMarkers().forEach((marker) => {
+ if (marker !== lockedObject) {
+ setBGPMarkerState(marker, "normal");
+ }
+ });
+ getBGPAnomalyMarkers().forEach((marker) => {
+ if (marker !== lockedObject) {
+ setBGPMarkerState(marker, "normal");
+ }
+ });
+}
+
+function clearTransientHoverState() {
+ resetTransientBGPStates();
+ hoveredBGP = null;
+
+ if (hoveredCable && !isSameCable(hoveredCable, lockedObject)) {
+ setCableState(hoveredCable.userData.cableId, CABLE_STATE.NORMAL);
+ }
+ hoveredCable = null;
+
+ if (hoveredSatelliteIndex !== null && hoveredSatelliteIndex !== lockedSatelliteIndex) {
+ setSatelliteRingState(hoveredSatelliteIndex, "none", null);
+ }
+ hoveredSatellite = null;
+ hoveredSatelliteIndex = null;
+}
+
+function applyBGPHoverState(marker) {
+ resetTransientBGPStates();
+ if (!marker) {
+ hoveredBGP = null;
+ return;
+ }
+
+ hoveredBGP = marker;
+ if (marker !== lockedObject) {
+ setBGPMarkerState(marker, "hover");
+ }
+
+ const relatedCollector =
+ marker.userData?.type === "bgp_collector"
+ ? marker
+ : getBGPCollectorMarkerByName(marker.userData?.collector);
+
+ if (relatedCollector && relatedCollector !== lockedObject && relatedCollector !== marker) {
+ setBGPMarkerState(relatedCollector, "linked");
+ }
+}
+
+function getPrimaryBGPHoverTarget(bgpAnomalyIntersects, bgpCollectorIntersects) {
+ if (bgpAnomalyIntersects.length > 0) {
+ return bgpAnomalyIntersects[0].object;
+ }
+ if (bgpCollectorIntersects.length > 0) {
+ return bgpCollectorIntersects[0].object;
+ }
+ return null;
+}
+
+function getPrimaryBGPClickTarget(
+ event,
+ bgpAnomalyIntersects,
+ bgpCollectorIntersects,
+) {
+ const anomalyMarker = bgpAnomalyIntersects[0]?.object || null;
+ const collectorMarker = bgpCollectorIntersects[0]?.object || null;
+ if (!anomalyMarker && !collectorMarker) return null;
+ if (!anomalyMarker) return collectorMarker;
+ if (!collectorMarker) return anomalyMarker;
+
+ const clickCollector = anomalyMarker.userData?.collector || collectorMarker.userData?.collector;
+ const isRepeatedClick =
+ clickCollector &&
+ clickCollector === lastBGPClickCollector &&
+ Date.now() - lastBGPClickTime < 650 &&
+ Math.abs(event.clientX - lastBGPClickPos.x) < 28 &&
+ Math.abs(event.clientY - lastBGPClickPos.y) < 28;
+
+ if (isRepeatedClick) {
+ return lastBGPClickType === "bgp" ? collectorMarker : anomalyMarker;
+ }
+
+ return anomalyMarker;
+}
+
function showCableInfo(cable) {
- showInfoCard('cable', {
+ setLegendMode("cables");
+ showInfoCard("cable", {
name: cable.userData.name,
owner: cable.userData.owner,
status: cable.userData.status,
length: cable.userData.length,
coords: cable.userData.coords,
- rfs: cable.userData.rfs
+ rfs: cable.userData.rfs,
});
}
function showSatelliteInfo(props) {
const meanMotion = props?.mean_motion || 0;
- const period = meanMotion > 0 ? (1440 / meanMotion).toFixed(1) : '-';
+ const period = meanMotion > 0 ? (1440 / meanMotion).toFixed(1) : "-";
const ecc = props?.eccentricity || 0;
const perigee = (6371 * (1 - ecc)).toFixed(0);
const apogee = (6371 * (1 + ecc)).toFixed(0);
-
- showInfoCard('satellite', {
- name: props?.name || '-',
+
+ setSelectedSatelliteLegend(props);
+ setLegendItems("satellites", getSatelliteLegendItems());
+ setLegendMode("satellites");
+ showInfoCard("satellite", {
+ name: props?.name || "-",
norad_id: props?.norad_cat_id,
- inclination: props?.inclination ? props.inclination.toFixed(2) : '-',
- period: period,
- perigee: perigee,
- apogee: apogee
+ inclination: props?.inclination ? props.inclination.toFixed(2) : "-",
+ period,
+ perigee,
+ apogee,
});
}
+function showBGPInfo(marker) {
+ setLegendMode("bgp");
+ const impactedRegions =
+ Array.isArray(marker.userData.impacted_regions) &&
+ marker.userData.impacted_regions.length > 0
+ ? marker.userData.impacted_regions
+ : [
+ {
+ city: marker.userData.city,
+ country: marker.userData.country,
+ },
+ ];
+ const observedBy =
+ marker.userData.observed_by ||
+ formatBGPObservedBy(marker.userData.collectors);
+ const impactedScope = formatBGPImpactedScope(impactedRegions);
+ const relatedCables = formatBGPRelatedCables(marker.userData.related_cables);
+ const narrative =
+ marker.userData.summary && marker.userData.summary !== "-"
+ ? marker.userData.summary
+ : buildBGPIncidentNarrative(marker, impactedRegions);
+ showInfoCard("bgp", {
+ anomaly_type: formatBGPAnomalyTypeLabel(
+ marker.userData.incident_type || marker.userData.anomaly_type,
+ ),
+ severity: formatBGPSeverityLabel(
+ marker.userData.rawSeverity || marker.userData.severity,
+ ),
+ status: formatBGPStatusLabel(marker.userData.status),
+ route_change:
+ marker.userData.route_change ||
+ formatBGPRouteChange(
+ marker.userData.origin_asn,
+ marker.userData.new_origin_asn,
+ ),
+ prefix:
+ Array.isArray(marker.userData.prefixes) && marker.userData.prefixes.length > 1
+ ? `${marker.userData.prefixes[0]} 等${marker.userData.prefixes.length}个`
+ : marker.userData.prefix,
+ as_path_display:
+ Array.isArray(marker.userData.as_path) && marker.userData.as_path.length > 0
+ ? formatBGPASPath(marker.userData.as_path)
+ : "-",
+ origin_asn:
+ Array.isArray(marker.userData.affected_asns) && marker.userData.affected_asns.length > 0
+ ? marker.userData.affected_asns.slice(0, 3).map((asn) => `AS${asn}`).join(", ")
+ : marker.userData.origin_asn,
+ new_origin_asn:
+ Array.isArray(marker.userData.affected_asns) && marker.userData.affected_asns.length > 3
+ ? `共${marker.userData.affected_asns.length}个ASN`
+ : marker.userData.new_origin_asn,
+ confidence: formatBGPConfidence(marker.userData.confidence),
+ collector: marker.userData.collector,
+ observed_by: observedBy,
+ impacted_scope: impactedScope,
+ related_cables: relatedCables,
+ related_satellites:
+ marker.userData.related_satellite_count > 0
+ ? `${marker.userData.related_satellite_count}颗事件附近卫星`
+ : "-",
+ location:
+ marker.userData.location ||
+ formatBGPLocation(marker.userData.city, marker.userData.country),
+ created_at: formatBGPObservedTime(marker.userData.created_at_raw),
+ summary: narrative,
+ });
+}
+
+function showBGPCollectorInfo(marker) {
+ setLegendMode("bgp");
+ showInfoCard("bgp_collector", {
+ collector: marker.userData.collector,
+ location: formatBGPLocation(marker.userData.city, marker.userData.country),
+ anomaly_count: marker.userData.anomaly_count ?? 0,
+ observation_count: marker.userData.observation_count ?? 0,
+ recent_24h_observation_count: marker.userData.recent_24h_observation_count ?? 0,
+ recent_7d_observation_count: marker.userData.recent_7d_observation_count ?? 0,
+ prefix_count: marker.userData.prefix_count ?? 0,
+ origin_asn_count: marker.userData.origin_asn_count ?? 0,
+ top_event_types: formatBGPTopEventTypes(marker.userData.top_event_types),
+ coverage_halo: formatBGPCollectorCoverageHalo(marker.userData),
+ related_satellites: "-",
+ latest_event_type: marker.userData.latest_event_type || "-",
+ latest_observed_at: formatBGPObservedTime(marker.userData.latest_observed_at),
+ baseline_scope: formatBGPScope(marker.userData.baseline_scope),
+ status: formatBGPCollectorStatus(marker.userData.status || "online"),
+ });
+}
+
+function getBGPRelatedCableNames(marker) {
+ const items = Array.isArray(marker?.userData?.related_cables)
+ ? marker.userData.related_cables
+ : [];
+
+ const names = [];
+ items.forEach((item) => {
+ const cableNames = Array.isArray(item?.cable_names) ? item.cable_names : [];
+ cableNames.forEach((name) => {
+ if (name && !names.includes(name)) {
+ names.push(name);
+ }
+ });
+ });
+ return names;
+}
+
+function getBGPInfrastructureSummary(marker) {
+ return {
+ cableCount: getBGPRelatedCableNames(marker).length,
+ regionCount: getBGPRelatedRegions(marker).length,
+ };
+}
+
+function buildBGPIncidentNarrative(marker, impactedRegions) {
+ const eventLabel = formatBGPAnomalyTypeLabel(
+ marker.userData.incident_type || marker.userData.anomaly_type,
+ );
+ const severityLabel = formatBGPSeverityLabel(
+ marker.userData.rawSeverity || marker.userData.severity,
+ );
+ const observedBy =
+ marker.userData.observed_by ||
+ formatBGPObservedBy(marker.userData.collectors);
+ const routeLabel =
+ marker.userData.route_change ||
+ formatBGPRouteChange(
+ marker.userData.origin_asn,
+ marker.userData.new_origin_asn,
+ );
+ const cableCount = getBGPRelatedCableNames(marker).length;
+ const regionCount = impactedRegions.length;
+
+ return `${eventLabel}，${severityLabel}；${observedBy}，影响${regionCount}个区域，关联${cableCount}条海缆线索${routeLabel && routeLabel !== "-" ? `，特征 ${routeLabel}` : ""}。`;
+}
+
+function getBGPRelatedRegions(marker) {
+ if (Array.isArray(marker?.userData?.impacted_regions) && marker.userData.impacted_regions.length > 0) {
+ return marker.userData.impacted_regions;
+ }
+
+ if (
+ marker?.userData?.type === "bgp_collector" &&
+ typeof marker.userData.latitude === "number" &&
+ typeof marker.userData.longitude === "number"
+ ) {
+ return [
+ {
+ collector: marker.userData.collector,
+ city: marker.userData.city,
+ country: marker.userData.country,
+ latitude: marker.userData.latitude,
+ longitude: marker.userData.longitude,
+ },
+ ];
+ }
+
+ return [];
+}
+
function applyCableVisualState() {
const allCables = getCableLines();
const pulse = (Math.sin(Date.now() * CABLE_CONFIG.pulseSpeed) + 1) * 0.5;
-
- allCables.forEach(c => {
- const cableId = c.userData.cableId;
+
+ allCables.forEach((cable) => {
+ const cableId = cable.userData.cableId;
const state = getCableState(cableId);
-
+
switch (state) {
case CABLE_STATE.LOCKED:
- c.material.opacity = CABLE_CONFIG.lockedOpacityMin + pulse * (CABLE_CONFIG.lockedOpacityMax - CABLE_CONFIG.lockedOpacityMin);
- c.material.color.setRGB(1, 1, 1);
+ cable.material.opacity =
+ CABLE_CONFIG.lockedOpacityMin +
+ pulse *
+ (CABLE_CONFIG.lockedOpacityMax - CABLE_CONFIG.lockedOpacityMin);
+ cable.material.color.setRGB(1, 1, 1);
break;
case CABLE_STATE.HOVERED:
- c.material.opacity = 1;
- c.material.color.setRGB(1, 1, 1);
+ cable.material.opacity = 1;
+ cable.material.color.setRGB(1, 1, 1);
break;
case CABLE_STATE.NORMAL:
default:
- if ((lockedObjectType === 'cable' && lockedObject) || (lockedObjectType === 'satellite' && lockedSatellite)) {
- c.material.opacity = CABLE_CONFIG.otherOpacity;
- const origColor = c.userData.originalColor;
+ if (
+ (lockedObjectType === "cable" && lockedObject) ||
+ (lockedObjectType === "satellite" && lockedSatellite) ||
+ (lockedObjectType === "bgp" && lockedObject)
+ ) {
+ cable.material.opacity = CABLE_CONFIG.otherOpacity;
+ const origColor = cable.userData.originalColor;
const brightness = CABLE_CONFIG.otherBrightness;
- c.material.color.setRGB(
- ((origColor >> 16) & 255) / 255 * brightness,
- ((origColor >> 8) & 255) / 255 * brightness,
- (origColor & 255) / 255 * brightness
+ cable.material.color.setRGB(
+ (((origColor >> 16) & 255) / 255) * brightness,
+ (((origColor >> 8) & 255) / 255) * brightness,
+ ((origColor & 255) / 255) * brightness,
);
} else {
- c.material.opacity = 1;
- c.material.color.setHex(c.userData.originalColor);
+ cable.material.opacity = 1;
+ cable.material.color.setHex(cable.userData.originalColor);
}
}
});
}
-window.addEventListener('error', (e) => {
- console.error('全局错误:', e.error);
- showStatusMessage('加载错误: ' + e.error?.message, 'error');
+function updatePointerFromEvent(event) {
+ interactionMouse.set(
+ (event.clientX / window.innerWidth) * 2 - 1,
+ -(event.clientY / window.innerHeight) * 2 + 1,
+ );
+ interactionRaycaster.setFromCamera(interactionMouse, camera);
+}
+
+function buildLoadErrorMessage(errors) {
+ if (errors.length === 0) return "";
+ return errors
+ .map(
+ ({ label, reason }) =>
+ `${label}加载失败: ${reason?.message || String(reason)}`,
+ )
+ .join("；");
+}
+
+function updateSatelliteToggleUi(enabled, satelliteCount = getSatelliteCount()) {
+ const satBtn = document.getElementById("toggle-satellites");
+ if (satBtn) {
+ satBtn.classList.toggle("active", enabled);
+ const tooltip = satBtn.querySelector(".tooltip");
+ if (tooltip) tooltip.textContent = enabled ? "隐藏卫星" : "显示卫星";
+ }
+
+ const satelliteCountEl = document.getElementById("satellite-count");
+ if (satelliteCountEl) {
+ satelliteCountEl.textContent = `${satelliteCount} 颗`;
+ }
+}
+
+function updateCableToggleUi(enabled) {
+ const cableBtn = document.getElementById("toggle-cables");
+ if (cableBtn) {
+ cableBtn.classList.toggle("active", enabled);
+ const tooltip = cableBtn.querySelector(".tooltip");
+ if (tooltip) tooltip.textContent = enabled ? "隐藏线缆" : "显示线缆";
+ }
+
+ const cableCountEl = document.getElementById("cable-count");
+ if (cableCountEl) {
+ cableCountEl.textContent = `${getCableLines().length}个`;
+ }
+
+ const landingPointCountEl = document.getElementById("landing-point-count");
+ if (landingPointCountEl) {
+ landingPointCountEl.textContent = `${getLandingPoints().length}个`;
+ }
+}
+
+async function ensureCablesEnabled() {
+ if (!scene || !camera || !renderer || destroyed) {
+ return 0;
+ }
+
+ const earth = getEarth();
+ if (!earth) return 0;
+
+ cablesEnabled = true;
+ if (getCableLines().length > 0 || getLandingPoints().length > 0) {
+ toggleCables(true);
+ updateCableToggleUi(true);
+ setLegendItems("cables", getCableLegendItems());
+ refreshLegend();
+ return getCableLines().length;
+ }
+
+ const requestToken = ++cableToggleToken;
+
+ clearCableData(earth);
+ const [cableCount] = await Promise.all([
+ loadGeoJSONFromPath(scene, earth),
+ loadLandingPoints(scene, earth),
+ ]);
+
+ if (requestToken !== cableToggleToken || !cablesEnabled || destroyed) {
+ clearCableData(earth);
+ return 0;
+ }
+
+ toggleCables(true);
+ updateCableToggleUi(true);
+ setLegendItems("cables", getCableLegendItems());
+ refreshLegend();
+ return cableCount;
+}
+
+function disableCables() {
+ cablesEnabled = false;
+ cableToggleToken += 1;
+ toggleCables(false);
+ updateCableToggleUi(false);
+ setLegendItems("cables", getCableLegendItems());
+ refreshLegend();
+}
+
+async function ensureSatellitesEnabled() {
+ if (!scene || !camera || !renderer || destroyed) return 0;
+
+ const earth = getEarth();
+ if (!earth) return 0;
+
+ satellitesEnabled = true;
+ const requestToken = ++satelliteToggleToken;
+
+ if (!getSatellitePoints()) {
+ createSatellites(scene, earth);
+ }
+
+ clearSatelliteData();
+ const satelliteCount = await loadSatellites();
+
+ if (
+ requestToken !== satelliteToggleToken ||
+ !satellitesEnabled ||
+ destroyed
+ ) {
+ resetSatelliteState();
+ return 0;
+ }
+
+ updateSatellitePositions(POSITION_UPDATE_FORCE_DELTA, true);
+ toggleSatellites(true);
+ updateSatelliteToggleUi(true, satelliteCount);
+ setLegendItems("satellites", getSatelliteLegendItems());
+ refreshLegend();
+ return satelliteCount;
+}
+
+function disableSatellites() {
+ satellitesEnabled = false;
+ satelliteToggleToken += 1;
+ resetSatelliteState();
+ updateSatelliteToggleUi(false, 0);
+ setLegendItems("satellites", getSatelliteLegendItems());
+ refreshLegend();
+}
+
+function updateStatsSummary() {
+ updateEarthStats({
+ cableCount: getCableLines().length,
+ landingPointCount:
+ document.getElementById("landing-point-count")?.textContent || 0,
+ bgpAnomalyCount: `${getBGPCount()} 条`,
+ bgpCollectorCount: `${getBGPCollectorCount()} 个`,
+ bgpStatusSummary: getBGPStatusSummary(),
+ terrainOn: getShowTerrain(),
+ textureQuality: "8K 卫星图",
+ });
+}
+
+window.addEventListener("error", (event) => {
+ console.error("全局错误:", event.error);
});
-window.addEventListener('unhandledrejection', (e) => {
- console.error('未处理的Promise错误:', e.reason);
+window.addEventListener("unhandledrejection", (event) => {
+ console.error("未处理的 Promise 错误:", event.reason);
});
export function init() {
+ if (initialized && !destroyed) return;
+
+ destroyed = false;
+ initialized = true;
simplex = createNoise3D();
-
+
scene = new THREE.Scene();
-
- camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ camera = new THREE.PerspectiveCamera(
+ 75,
+ window.innerWidth / window.innerHeight,
+ 0.1,
+ 1000,
+ );
camera.position.z = CONFIG.defaultCameraZ;
- window.camera = camera;
-
- renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, powerPreference: 'high-performance' });
+ setSatelliteCamera(camera);
+
+ renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: false,
+ powerPreference: "high-performance",
+ });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0a0a1a, 1);
renderer.setPixelRatio(window.devicePixelRatio);
- document.getElementById('container').appendChild(renderer.domElement);
-
+
+ const container = document.getElementById("container");
+ if (container) {
+ container.querySelector("canvas")?.remove();
+ container.appendChild(renderer.domElement);
+ }
+
addLights();
initInfoCard();
+ initLegend();
+ setLegendItems("cables", getCableLegendItems());
+ setLegendItems("satellites", getSatelliteLegendItems());
+ setLegendItems("bgp", getBGPLegendItems());
const earthObj = createEarth(scene);
+ targetRotation = {
+ x: earthObj.rotation.x,
+ y: earthObj.rotation.y,
+ };
+ inertialVelocity = { x: 0, y: 0 };
createClouds(scene, earthObj);
createTerrain(scene, earthObj, simplex);
createStars(scene);
createGridLines(scene, earthObj);
createSatellites(scene, earthObj);
-
+
setupControls(camera, renderer, scene, earthObj);
resetView(camera);
- setupEventListeners(camera, renderer);
-
+ setupEventListeners();
+
+ clock.start();
loadData();
-
animate();
+ registerGlobalApi();
+}
+
+function registerGlobalApi() {
+ window.__planetEarth = {
+ reloadData,
+ clearSelection: () => {
+ hideInfoCard();
+ clearLockedObject();
+ },
+ destroy,
+ init,
+ };
}
function addLights() {
- const ambientLight = new THREE.AmbientLight(0x404060);
- scene.add(ambientLight);
-
+ scene.add(new THREE.AmbientLight(0x404060));
+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);
-
+
const backLight = new THREE.DirectionalLight(0x446688, 0.3);
backLight.position.set(-5, 0, -5);
scene.add(backLight);
-
+
const pointLight = new THREE.PointLight(0xffffff, 0.4);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
}
-let earthTexture = null;
-
async function loadData(showWhiteSphere = false) {
- if (showWhiteSphere) {
- const earth = getEarth();
- if (earth && earth.material) {
- earthTexture = earth.material.map;
- earth.material.map = null;
- earth.material.color.setHex(0xffffff);
- earth.material.needsUpdate = true;
- }
- }
-
+ if (!scene || !camera || !renderer) return;
+ if (isDataLoading) return;
+
+ const earth = getEarth();
+ if (!earth) return;
+
+ const loadToken = ++currentLoadToken;
+ isDataLoading = true;
+ hideError();
+ setLoadingMessage(
+ showWhiteSphere ? "正在刷新全球态势数据..." : "正在初始化全球态势数据...",
+ showWhiteSphere
+ ? "重新同步卫星、海底光缆、登陆点与BGP态势数据"
+ : "同步卫星、海底光缆、登陆点与BGP态势数据",
+ );
setLoading(true);
- try {
- console.log('开始加载数据...');
- await Promise.all([
- (async () => {
- await loadGeoJSONFromPath(scene, getEarth());
- console.log('电缆数据加载完成');
- await loadLandingPoints(scene, getEarth());
- console.log('登陆点数据加载完成');
- })(),
- (async () => {
- const satCount = await loadSatellites();
- console.log(`卫星数据加载完成: ${satCount} 颗`);
- document.getElementById('satellite-count').textContent = satCount + ' 颗';
- updateSatellitePositions();
- console.log('卫星位置已更新');
- toggleSatellites(true);
- const satBtn = document.getElementById('toggle-satellites');
- if (satBtn) {
- satBtn.classList.add('active');
- satBtn.querySelector('.tooltip').textContent = '隐藏卫星';
- }
- })()
- ]);
- } catch (error) {
- console.error('加载数据失败:', error);
- showStatusMessage('加载数据失败: ' + error.message, 'error');
+ clearLockedObject();
+ hideInfoCard();
+
+ if (showWhiteSphere && earth.material) {
+ earthTexture = earth.material.map;
+ earth.material.map = null;
+ earth.material.color.setHex(0xffffff);
+ earth.material.needsUpdate = true;
}
+
+ const results = await Promise.allSettled([
+ cablesEnabled ? ensureCablesEnabled() : Promise.resolve(0),
+ satellitesEnabled ? ensureSatellitesEnabled() : Promise.resolve(0),
+ (async () => {
+ clearBGPData(earth);
+ const bgpResult = await loadBGPAnomalies(scene, earth);
+ toggleBGP(true);
+ const bgpBtn = document.getElementById("toggle-bgp");
+ if (bgpBtn) {
+ bgpBtn.classList.add("active");
+ const tooltip = bgpBtn.querySelector(".tooltip");
+ if (tooltip) tooltip.textContent = "隐藏BGP观测";
+ }
+ const bgpCountEl = document.getElementById("bgp-anomaly-count");
+ if (bgpCountEl) {
+ bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
+ }
+ const bgpCollectorEl = document.getElementById("bgp-collector-count");
+ if (bgpCollectorEl) {
+ bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
+ }
+ const bgpStatusEl = document.getElementById("bgp-status-summary");
+ if (bgpStatusEl) {
+ bgpStatusEl.textContent =
+ bgpResult.totalCount > 0
+ ? `${bgpResult.totalCount} 起活跃事件`
+ : bgpResult.anomalyCount > 0
+ ? `${bgpResult.anomalyCount} 条活跃异常`
+ : "当前无活跃事件";
+ }
+ return bgpResult;
+ })(),
+ ]);
+
+ if (loadToken !== currentLoadToken) {
+ isDataLoading = false;
+ return;
+ }
+
+ const errors = [];
+ if (results[0].status === "rejected") {
+ errors.push({ label: "电缆", reason: results[0].reason });
+ }
+ if (results[1].status === "rejected") {
+ errors.push({ label: "卫星", reason: results[1].reason });
+ }
+ if (results[2].status === "rejected") {
+ errors.push({ label: "BGP态势", reason: results[2].reason });
+ }
+
+ if (errors.length > 0) {
+ const errorMessage = buildLoadErrorMessage(errors);
+ showError(errorMessage);
+ showStatusMessage(errorMessage, "error");
+ } else {
+ hideError();
+ showStatusMessage("数据已重新加载", "success");
+ }
+
+ updateStatsSummary();
+ updateCableToggleUi(cablesEnabled);
+ updateSatelliteToggleUi(satellitesEnabled);
+ setLegendItems("cables", getCableLegendItems());
+ setLegendItems("satellites", getSatelliteLegendItems());
+ setLegendItems("bgp", getBGPLegendItems());
+ refreshLegend();
setLoading(false);
-
- if (showWhiteSphere) {
- const earth = getEarth();
- if (earth && earth.material) {
- earth.material.map = earthTexture;
- earth.material.color.setHex(0xffffff);
- earth.material.needsUpdate = true;
- }
+ isDataLoading = false;
+
+ if (showWhiteSphere && earth.material) {
+ earth.material.map = earthTexture;
+ earth.material.color.setHex(0xffffff);
+ earth.material.needsUpdate = true;
}
}
+const POSITION_UPDATE_FORCE_DELTA = 250;
+
export async function reloadData() {
await loadData(true);
}
-function setupEventListeners(camera, renderer) {
- window.addEventListener('resize', () => onWindowResize(camera, renderer));
-
- renderer.domElement.addEventListener('mousemove', (e) => onMouseMove(e, camera));
- renderer.domElement.addEventListener('mousedown', onMouseDown);
- renderer.domElement.addEventListener('mouseup', onMouseUp);
- renderer.domElement.addEventListener('click', (e) => onClick(e, camera, renderer));
+export async function setCablesEnabled(enabled) {
+ if (enabled === cablesEnabled) {
+ updateCableToggleUi(enabled);
+ return getCableLines().length;
+ }
+
+ if (!enabled) {
+ clearLockedObject();
+ hideInfoCard();
+ disableCables();
+ showStatusMessage("线缆已隐藏", "info");
+ return 0;
+ }
+
+ setLoadingMessage("正在加载线缆数据...", "重建海缆与登陆点对象");
+ setLoading(true);
+ hideError();
+
+ try {
+ const cableCount = await ensureCablesEnabled();
+ showStatusMessage("线缆已显示", "info");
+ return cableCount;
+ } catch (error) {
+ cablesEnabled = false;
+ clearCableData(getEarth());
+ updateCableToggleUi(false);
+ const message = `线缆加载失败: ${error?.message || String(error)}`;
+ showError(message);
+ showStatusMessage(message, "error");
+ throw error;
+ } finally {
+ setLoading(false);
+ }
}
-function onWindowResize(camera, renderer) {
+export async function setSatellitesEnabled(enabled) {
+ if (enabled === satellitesEnabled) {
+ updateSatelliteToggleUi(enabled);
+ return getSatelliteCount();
+ }
+
+ if (!enabled) {
+ clearLockedObject();
+ hideInfoCard();
+ disableSatellites();
+ return 0;
+ }
+
+ setLoadingMessage("正在加载卫星数据...", "重建卫星点位与轨迹缓存");
+ setLoading(true);
+ hideError();
+
+ try {
+ const satelliteCount = await ensureSatellitesEnabled();
+ showStatusMessage("卫星已显示", "info");
+ return satelliteCount;
+ } catch (error) {
+ satellitesEnabled = false;
+ resetSatelliteState();
+ updateSatelliteToggleUi(false, 0);
+ const message = `卫星加载失败: ${error?.message || String(error)}`;
+ showError(message);
+ showStatusMessage(message, "error");
+ throw error;
+ } finally {
+ setLoading(false);
+ }
+}
+
+function setupEventListeners() {
+ const handleResize = () => onWindowResize();
+ const handleMouseMove = (event) => onMouseMove(event);
+ const handleMouseDown = (event) => onMouseDown(event);
+ const handleMouseUp = () => onMouseUp();
+ const handleMouseLeave = () => onMouseLeave();
+ const handleClick = (event) => onClick(event);
+ const handlePageHide = () => destroy();
+
+ bindListener(window, "resize", handleResize);
+ bindListener(window, "pagehide", handlePageHide);
+ bindListener(window, "beforeunload", handlePageHide);
+ bindListener(window, "mousemove", handleMouseMove);
+ bindListener(renderer.domElement, "mousedown", handleMouseDown);
+ bindListener(window, "mouseup", handleMouseUp);
+ bindListener(renderer.domElement, "mouseleave", handleMouseLeave);
+ bindListener(renderer.domElement, "click", handleClick);
+}
+
+function onWindowResize() {
+ if (!camera || !renderer) return;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
-function getFrontFacingCables(cableLines, camera) {
+function getFrontFacingCables(cableLines) {
const earth = getEarth();
if (!earth) return cableLines;
-
- const cameraDir = new THREE.Vector3();
- camera.getWorldDirection(cameraDir);
-
- return cableLines.filter(cable => {
- const cablePos = new THREE.Vector3();
- cable.geometry.computeBoundingBox();
- const boundingBox = cable.geometry.boundingBox;
- if (boundingBox) {
- boundingBox.getCenter(cablePos);
- cable.localToWorld(cablePos);
+
+ scratchCameraToEarth.subVectors(camera.position, earth.position).normalize();
+
+ return cableLines.filter((cable) => {
+ if (!cable.userData.localCenter) {
+ return true;
}
-
- const toCamera = new THREE.Vector3().subVectors(camera.position, earth.position).normalize();
- const toCable = new THREE.Vector3().subVectors(cablePos, earth.position).normalize();
-
- return toCamera.dot(toCable) > 0;
+
+ scratchCableCenter.copy(cable.userData.localCenter);
+ cable.localToWorld(scratchCableCenter);
+ scratchCableDirection
+ .subVectors(scratchCableCenter, earth.position)
+ .normalize();
+ return scratchCameraToEarth.dot(scratchCableDirection) > 0;
});
}
-function onMouseMove(event, camera) {
+function getFrontFacingBGPMarkers(markers) {
+ const earth = getEarth();
+ if (!earth) return markers;
+
+ scratchCameraToEarth.subVectors(camera.position, earth.position).normalize();
+
+ return markers.filter((marker) => {
+ scratchBGPWorldPosition.copy(marker.position);
+ marker.parent?.localToWorld(scratchBGPWorldPosition);
+ scratchBGPDirection
+ .subVectors(scratchBGPWorldPosition, earth.position)
+ .normalize();
+ return scratchCameraToEarth.dot(scratchBGPDirection) > 0;
+ });
+}
+
+function onMouseMove(event) {
const earth = getEarth();
if (!earth) return;
-
- const raycaster = new THREE.Raycaster();
- const mouse = new THREE.Vector2(
- (event.clientX / window.innerWidth) * 2 - 1,
- -(event.clientY / window.innerHeight) * 2 + 1
+
+ if (isEventOnHud(event)) {
+ clearTransientHoverState();
+
+ if (lockedObjectType === "bgp" && lockedObject) {
+ applyBGPHoverState(lockedObject);
+ showBGPInfo(lockedObject);
+ } else if (lockedObjectType === "bgp_collector" && lockedObject) {
+ applyBGPHoverState(lockedObject);
+ showBGPCollectorInfo(lockedObject);
+ } else if (lockedObjectType === "cable" && lockedObject) {
+ showCableInfo(lockedObject);
+ } else if (lockedObjectType === "satellite" && lockedSatellite) {
+ showSatelliteInfo(lockedSatellite.properties);
+ } else {
+ hideInfoCard();
+ }
+ hideTooltip();
+ return;
+ }
+
+ if (isDragging) {
+ if (Date.now() - dragStartTime > 500) {
+ isLongDrag = true;
+ }
+
+ const deltaX = event.clientX - previousMousePosition.x;
+ const deltaY = event.clientY - previousMousePosition.y;
+ const dragRotationFactor = getDragRotationFactor();
+ const rotationDeltaY = deltaX * dragRotationFactor;
+ const rotationDeltaX = deltaY * dragRotationFactor;
+
+ targetRotation.y += rotationDeltaY;
+ targetRotation.x += rotationDeltaX;
+ inertialVelocity.y = rotationDeltaY;
+ inertialVelocity.x = rotationDeltaX;
+ previousMousePosition = { x: event.clientX, y: event.clientY };
+ hideTooltip();
+ return;
+ }
+
+ updatePointerFromEvent(event);
+
+ const frontCables = getFrontFacingCables(getCableLines());
+ const cableIntersects = interactionRaycaster.intersectObjects(frontCables);
+ const frontFacingBGPAnomalyMarkers = getFrontFacingBGPMarkers(
+ getBGPAnomalyMarkers(),
);
-
- raycaster.setFromCamera(mouse, camera);
-
- const allCableLines = getCableLines();
- const frontCables = getFrontFacingCables(allCableLines, camera);
- const intersects = raycaster.intersectObjects(frontCables);
-
- const hasHoveredCable = intersects.length > 0;
+ const frontFacingBGPCollectorMarkers = getFrontFacingBGPMarkers(
+ getBGPCollectorMarkers(),
+ );
+ const bgpAnomalyIntersects = getShowBGP()
+ ? interactionRaycaster.intersectObjects(frontFacingBGPAnomalyMarkers)
+ : [];
+ const bgpCollectorIntersects = getShowBGP()
+ ? interactionRaycaster.intersectObjects(frontFacingBGPCollectorMarkers)
+ : [];
+
let hoveredSat = null;
let hoveredSatIndexFromIntersect = null;
if (getShowSatellites()) {
const satPoints = getSatellitePoints();
if (satPoints) {
- const satIntersects = raycaster.intersectObject(satPoints);
+ const satIntersects = interactionRaycaster.intersectObject(satPoints);
if (satIntersects.length > 0) {
const satIndex = satIntersects[0].index;
if (isSatelliteFrontFacing(satIndex, camera)) {
hoveredSatIndexFromIntersect = satIndex;
- hoveredSat = selectSatellite(hoveredSatIndexFromIntersect);
+ hoveredSat = selectSatellite(satIndex);
}
}
}
}
- const hasHoveredSatellite = hoveredSat && hoveredSat.properties;
-
- if (hoveredCable) {
- if (!hasHoveredCable || !isSameCable(intersects[0]?.object, hoveredCable)) {
- if (!isSameCable(hoveredCable, lockedObject)) {
- setCableState(hoveredCable.userData.cableId, CABLE_STATE.NORMAL);
- }
- hoveredCable = null;
- }
+
+ const hoveredBGPMarker = getPrimaryBGPHoverTarget(
+ bgpAnomalyIntersects,
+ bgpCollectorIntersects,
+ );
+
+ if (hoveredBGP && !isSameBGPMarker(hoveredBGP, hoveredBGPMarker)) {
+ clearTransientHoverState();
}
-
- if (hoveredSatelliteIndex !== null && hoveredSatelliteIndex !== hoveredSatIndexFromIntersect) {
- if (hoveredSatelliteIndex !== lockedSatelliteIndex) {
- setSatelliteRingState(hoveredSatelliteIndex, 'none', null);
- }
- hoveredSatelliteIndex = null;
+
+ if (
+ hoveredCable &&
+ (!cableIntersects.length ||
+ !isSameCable(cableIntersects[0]?.object, hoveredCable))
+ ) {
+ clearTransientHoverState();
}
-
- if (hasHoveredCable && getShowCables()) {
- const cable = intersects[0].object;
- if (!isSameCable(cable, lockedObject)) {
- hoveredCable = cable;
- setCableState(cable.userData.cableId, CABLE_STATE.HOVERED);
+
+ if (
+ hoveredSatelliteIndex !== null &&
+ hoveredSatelliteIndex !== hoveredSatIndexFromIntersect
+ ) {
+ clearTransientHoverState();
+ }
+
+ if (
+ hoveredBGPMarker &&
+ getShowBGP() &&
+ lockedObjectType !== "bgp" &&
+ lockedObjectType !== "bgp_collector"
+ ) {
+ applyBGPHoverState(hoveredBGPMarker);
+ if (hoveredBGPMarker.userData?.type === "bgp") {
+ showBGPInfo(hoveredBGPMarker);
} else {
- hoveredCable = cable;
+ showBGPCollectorInfo(hoveredBGPMarker);
+ }
+ setInfoCardNoBorder(true);
+ hideTooltip();
+ } else if (cableIntersects.length > 0 && getShowCables()) {
+ const cable = cableIntersects[0].object;
+ hoveredCable = cable;
+ if (!isSameCable(cable, lockedObject)) {
+ setCableState(cable.userData.cableId, CABLE_STATE.HOVERED);
}
-
showCableInfo(cable);
setInfoCardNoBorder(true);
hideTooltip();
- } else if (hasHoveredSatellite) {
+ } else if (hoveredSat?.properties) {
hoveredSatellite = hoveredSat;
hoveredSatelliteIndex = hoveredSatIndexFromIntersect;
if (hoveredSatelliteIndex !== lockedSatelliteIndex) {
const satPositions = getSatellitePositions();
if (satPositions && satPositions[hoveredSatelliteIndex]) {
- setSatelliteRingState(hoveredSatelliteIndex, 'hover', satPositions[hoveredSatelliteIndex].current);
+ setSatelliteRingState(
+ hoveredSatelliteIndex,
+ "hover",
+ satPositions[hoveredSatelliteIndex].current,
+ );
}
}
showSatelliteInfo(hoveredSat.properties);
setInfoCardNoBorder(true);
- } else if (lockedObjectType === 'cable' && lockedObject) {
+ } else if (lockedObjectType === "bgp" && lockedObject) {
+ applyBGPHoverState(lockedObject);
+ showBGPInfo(lockedObject);
+ } else if (lockedObjectType === "bgp_collector" && lockedObject) {
+ applyBGPHoverState(lockedObject);
+ showBGPCollectorInfo(lockedObject);
+ } else if (lockedObjectType === "cable" && lockedObject) {
showCableInfo(lockedObject);
- } else if (lockedObjectType === 'satellite' && lockedSatellite) {
- if (lockedSatelliteIndex !== null && lockedSatelliteIndex !== undefined) {
- const satPositions = getSatellitePositions();
- if (satPositions && satPositions[lockedSatelliteIndex]) {
- setSatelliteRingState(lockedSatelliteIndex, 'locked', satPositions[lockedSatelliteIndex].current);
- }
+ } else if (lockedObjectType === "satellite" && lockedSatellite) {
+ const satPositions = getSatellitePositions();
+ if (lockedSatelliteIndex !== null && satPositions?.[lockedSatelliteIndex]) {
+ setSatelliteRingState(
+ lockedSatelliteIndex,
+ "locked",
+ satPositions[lockedSatelliteIndex].current,
+ );
}
showSatelliteInfo(lockedSatellite.properties);
} else {
+ resetTransientBGPStates();
hideInfoCard();
}
-
- const earthPoint = screenToEarthCoords(event.clientX, event.clientY, camera, earth);
+
+ const earthPoint = screenToEarthCoords(
+ event.clientX,
+ event.clientY,
+ camera,
+ earth,
+ document.body,
+ interactionRaycaster,
+ interactionMouse,
+ );
if (earthPoint) {
const coords = vector3ToLatLon(earthPoint);
updateCoordinatesDisplay(coords.lat, coords.lon, coords.alt);
-
- if (!isDragging) {
- showTooltip(event.clientX + 10, event.clientY + 10,
- `纬度: ${coords.lat}°
经度: ${coords.lon}°
海拔: ${coords.alt.toFixed(1)} km`);
- }
+ showTooltip(
+ event.clientX + 10,
+ event.clientY + 10,
+ `纬度: ${coords.lat}°
经度: ${coords.lon}°
海拔: ${coords.alt.toFixed(1)} km`,
+ );
} else {
hideTooltip();
}
-
- if (isDragging) {
- if (Date.now() - dragStartTime > 500) {
- isLongDrag = true;
- }
-
- const deltaX = event.clientX - previousMousePosition.x;
- const deltaY = event.clientY - previousMousePosition.y;
-
- earth.rotation.y += deltaX * 0.005;
- earth.rotation.x += deltaY * 0.005;
-
- previousMousePosition = { x: event.clientX, y: event.clientY };
- }
}
function onMouseDown(event) {
+ if (isEventOnHud(event)) {
+ return;
+ }
+
+ const earth = getEarth();
isDragging = true;
dragStartTime = Date.now();
isLongDrag = false;
previousMousePosition = { x: event.clientX, y: event.clientY };
- document.getElementById('container').classList.add('dragging');
+ inertialVelocity = { x: 0, y: 0 };
+ if (earth) {
+ targetRotation = {
+ x: earth.rotation.x,
+ y: earth.rotation.y,
+ };
+ }
+ document.getElementById("container")?.classList.add("dragging");
hideTooltip();
}
function onMouseUp() {
isDragging = false;
- document.getElementById('container').classList.remove('dragging');
+ document.getElementById("container")?.classList.remove("dragging");
}
-function onClick(event, camera, renderer) {
+function onMouseLeave() {
+ hideTooltip();
+}
+
+function onClick(event) {
const earth = getEarth();
if (!earth) return;
-
- const raycaster = new THREE.Raycaster();
- const mouse = new THREE.Vector2(
- (event.clientX / window.innerWidth) * 2 - 1,
- -(event.clientY / window.innerHeight) * 2 + 1
+ if (isEventOnHud(event)) return;
+
+ updatePointerFromEvent(event);
+
+ const cableIntersects = interactionRaycaster.intersectObjects(
+ getFrontFacingCables(getCableLines()),
);
-
- raycaster.setFromCamera(mouse, camera);
-
- const allCableLines = getCableLines();
- const frontCables = getFrontFacingCables(allCableLines, camera);
- const intersects = raycaster.intersectObjects(frontCables);
- const satIntersects = getShowSatellites() ? raycaster.intersectObject(getSatellitePoints()) : [];
-
- if (intersects.length > 0 && getShowCables()) {
+ const frontFacingBGPAnomalyMarkers = getFrontFacingBGPMarkers(
+ getBGPAnomalyMarkers(),
+ );
+ const frontFacingBGPCollectorMarkers = getFrontFacingBGPMarkers(
+ getBGPCollectorMarkers(),
+ );
+ const bgpAnomalyIntersects = getShowBGP()
+ ? interactionRaycaster.intersectObjects(frontFacingBGPAnomalyMarkers)
+ : [];
+ const bgpCollectorIntersects = getShowBGP()
+ ? interactionRaycaster.intersectObjects(frontFacingBGPCollectorMarkers)
+ : [];
+ const satIntersects = getShowSatellites()
+ ? interactionRaycaster.intersectObject(getSatellitePoints())
+ : [];
+
+ const clickedBGPMarker = getShowBGP()
+ ? getPrimaryBGPClickTarget(event, bgpAnomalyIntersects, bgpCollectorIntersects)
+ : null;
+
+ if (clickedBGPMarker?.userData?.type === "bgp") {
clearLockedObject();
-
- const clickedCable = intersects[0].object;
+
+ const clickedMarker = clickedBGPMarker;
+ setBGPMarkerState(clickedMarker, "locked");
+
+ lockedObject = clickedMarker;
+ lockedObjectType = "bgp";
+ lastBGPClickTime = Date.now();
+ lastBGPClickCollector = clickedMarker.userData?.collector || null;
+ lastBGPClickType = "bgp";
+ lastBGPClickPos = { x: event.clientX, y: event.clientY };
+ setAutoRotate(false);
+ showBGPEventOverlay(clickedMarker, earth);
+ {
+ const relatedSatelliteIndices = getRelatedSatelliteIndicesForRegions(
+ getBGPRelatedRegions(clickedMarker),
+ { limit: 6, maxAngleDeg: 20 },
+ );
+ clickedMarker.userData.related_satellite_count = relatedSatelliteIndices.length;
+ highlightRelatedSatellites(relatedSatelliteIndices, "#7dd3fc");
+ }
+ const incidentSummary = getBGPInfrastructureSummary(clickedMarker);
+ showBGPInfo(clickedMarker);
+ showStatusMessage(
+ `已选择BGP事件: ${clickedMarker.userData.collector} · ${incidentSummary.regionCount}个区域 / ${incidentSummary.cableCount}条相关海缆`,
+ "info",
+ );
+ return;
+ }
+
+ if (clickedBGPMarker?.userData?.type === "bgp_collector") {
+ clearLockedObject();
+
+ const clickedMarker = clickedBGPMarker;
+ setBGPMarkerState(clickedMarker, "locked");
+
+ lockedObject = clickedMarker;
+ lockedObjectType = "bgp_collector";
+ lastBGPClickTime = Date.now();
+ lastBGPClickCollector = clickedMarker.userData?.collector || null;
+ lastBGPClickType = "bgp_collector";
+ lastBGPClickPos = { x: event.clientX, y: event.clientY };
+ setAutoRotate(false);
+ showBGPCollectorCoverageOverlay(clickedMarker, earth);
+ clickedMarker.userData.related_satellite_count = 0;
+ showBGPCollectorInfo(clickedMarker);
+ showStatusMessage(
+ `已选择观测站: ${clickedMarker.userData.collector}`,
+ "info",
+ );
+ return;
+ }
+
+ if (cableIntersects.length > 0 && getShowCables()) {
+ clearLockedObject();
+
+ const clickedCable = cableIntersects[0].object;
const cableId = clickedCable.userData.cableId;
-
setCableState(cableId, CABLE_STATE.LOCKED);
-
+
lockedObject = clickedCable;
- lockedObjectType = 'cable';
- cableLockedData = { ...clickedCable.userData };
-
+ lockedObjectType = "cable";
setAutoRotate(false);
handleCableClick(clickedCable);
- } else if (satIntersects.length > 0) {
+ return;
+ }
+
+ if (satIntersects.length > 0) {
const now = Date.now();
const clickX = event.clientX;
const clickY = event.clientY;
-
- let selectedIndex;
- const frontFacingSats = satIntersects.filter(s => isSatelliteFrontFacing(s.index, camera));
+
+ const frontFacingSats = satIntersects.filter((sat) =>
+ isSatelliteFrontFacing(sat.index, camera),
+ );
if (frontFacingSats.length === 0) return;
-
- if (frontFacingSats.length > 1 &&
- now - lastSatClickTime < 500 &&
- Math.abs(clickX - lastSatClickPos.x) < 30 &&
- Math.abs(clickY - lastSatClickPos.y) < 30) {
- const currentIdx = frontFacingSats.findIndex(s => s.index === lastSatClickIndex);
- selectedIndex = frontFacingSats[(currentIdx + 1) % frontFacingSats.length].index;
- } else {
- selectedIndex = frontFacingSats[0].index;
+
+ let selectedIndex = frontFacingSats[0].index;
+ if (
+ frontFacingSats.length > 1 &&
+ now - lastSatClickTime < 500 &&
+ Math.abs(clickX - lastSatClickPos.x) < 30 &&
+ Math.abs(clickY - lastSatClickPos.y) < 30
+ ) {
+ const currentIdx = frontFacingSats.findIndex(
+ (sat) => sat.index === lastSatClickIndex,
+ );
+ selectedIndex =
+ frontFacingSats[(currentIdx + 1) % frontFacingSats.length].index;
}
-
+
lastSatClickTime = now;
lastSatClickIndex = selectedIndex;
lastSatClickPos = { x: clickX, y: clickY };
-
+
const sat = selectSatellite(selectedIndex);
-
- if (sat && sat.properties) {
- clearLockedObject();
-
- lockedObject = sat;
- lockedObjectType = 'satellite';
- lockedSatellite = sat;
- lockedSatelliteIndex = selectedIndex;
- window.lockedSatelliteIndex = selectedIndex;
- showPredictedOrbit(sat);
- setAutoRotate(false);
-
- const satPositions = getSatellitePositions();
- if (satPositions && satPositions[selectedIndex]) {
- setSatelliteRingState(selectedIndex, 'locked', satPositions[selectedIndex].current);
- }
-
- const props = sat.properties;
-
- const meanMotion = props.mean_motion || 0;
- const period = meanMotion > 0 ? (1440 / meanMotion).toFixed(1) : '-';
-
- const ecc = props.eccentricity || 0;
- const earthRadius = 6371;
- const perigee = (earthRadius * (1 - ecc)).toFixed(0);
- const apogee = (earthRadius * (1 + ecc)).toFixed(0);
-
- showInfoCard('satellite', {
- name: props.name,
- norad_id: props.norad_cat_id,
- inclination: props.inclination ? props.inclination.toFixed(2) : '-',
- period: period,
- perigee: perigee,
- apogee: apogee
- });
-
- showStatusMessage('已选择: ' + props.name, 'info');
- }
- } else {
- if (!isLongDrag) {
- clearLockedObject();
- setAutoRotate(true);
- clearCableSelection();
+ if (!sat?.properties) return;
+
+ clearLockedObject();
+
+ lockedObject = sat;
+ lockedObjectType = "satellite";
+ lockedSatellite = sat;
+ lockedSatelliteIndex = selectedIndex;
+ setLockedSatelliteIndex(selectedIndex);
+ showPredictedOrbit(sat);
+ setAutoRotate(false);
+
+ const satPositions = getSatellitePositions();
+ if (satPositions?.[selectedIndex]) {
+ setSatelliteRingState(
+ selectedIndex,
+ "locked",
+ satPositions[selectedIndex].current,
+ );
}
+
+ showSatelliteInfo(sat.properties);
+ showStatusMessage("已选择: " + sat.properties.name, "info");
+ return;
+ }
+
+ if (!isLongDrag) {
+ clearLockedObject();
+ setAutoRotate(true);
}
}
function animate() {
- requestAnimationFrame(animate);
-
- const earth = getEarth();
-
- if (getAutoRotate() && earth) {
- earth.rotation.y += CONFIG.rotationSpeed;
- }
-
- applyCableVisualState();
-
- if (lockedObjectType === 'cable' && lockedObject) {
- applyLandingPointVisualState(lockedObject.userData.name, false);
- } else if (lockedObjectType === 'satellite' && lockedSatellite) {
- applyLandingPointVisualState(null, true);
- } else {
- resetLandingPointVisualState();
- }
-
- updateSatellitePositions(16);
-
- const satPositions = getSatellitePositions();
-
- // 更新呼吸动画相位
- updateBreathingPhase();
+ if (destroyed) return;
- if (lockedObjectType === 'satellite' && lockedSatelliteIndex !== null) {
- if (satPositions && satPositions[lockedSatelliteIndex]) {
- updateLockedRingPosition(satPositions[lockedSatelliteIndex].current);
+ animationFrameId = requestAnimationFrame(animate);
+
+ const earth = getEarth();
+ const deltaTime = clock.getDelta() * 1000;
+ const hasInertia =
+ Math.abs(inertialVelocity.x) > INERTIA_MIN_VELOCITY ||
+ Math.abs(inertialVelocity.y) > INERTIA_MIN_VELOCITY;
+
+ if (getAutoRotate() && earth) {
+ earth.rotation.y += CONFIG.rotationSpeed * (deltaTime / 16);
+
+ // Keep the drag target aligned with autorotation only when the user is not
+ // actively dragging and there is no residual inertial motion to preserve.
+ if (!isDragging && !hasInertia) {
+ targetRotation.y = earth.rotation.y;
+ targetRotation.x = earth.rotation.x;
}
- } else if (hoveredSatelliteIndex !== null && satPositions && satPositions[hoveredSatelliteIndex]) {
+ }
+
+ if (earth) {
+ if (isDragging) {
+ // Smoothly follow the drag target to match the legacy interaction feel.
+ earth.rotation.x +=
+ (targetRotation.x - earth.rotation.x) * DRAG_SMOOTHING_FACTOR;
+ earth.rotation.y +=
+ (targetRotation.y - earth.rotation.y) * DRAG_SMOOTHING_FACTOR;
+ } else if (
+ Math.abs(inertialVelocity.x) > INERTIA_MIN_VELOCITY ||
+ Math.abs(inertialVelocity.y) > INERTIA_MIN_VELOCITY
+ ) {
+ // Continue rotating after release and gradually decay the motion.
+ targetRotation.x += inertialVelocity.x * (deltaTime / 16);
+ targetRotation.y += inertialVelocity.y * (deltaTime / 16);
+ earth.rotation.x +=
+ (targetRotation.x - earth.rotation.x) * DRAG_SMOOTHING_FACTOR;
+ earth.rotation.y +=
+ (targetRotation.y - earth.rotation.y) * DRAG_SMOOTHING_FACTOR;
+ inertialVelocity.x *= Math.pow(INERTIA_DAMPING, deltaTime / 16);
+ inertialVelocity.y *= Math.pow(INERTIA_DAMPING, deltaTime / 16);
+ } else {
+ inertialVelocity.x = 0;
+ inertialVelocity.y = 0;
+ targetRotation.x = earth.rotation.x;
+ targetRotation.y = earth.rotation.y;
+ }
+ }
+
+ applyCableVisualState();
+ updateBGPVisualState(lockedObjectType, lockedObject, camera);
+
+ if (lockedObjectType === "cable" && lockedObject) {
+ applyLandingPointVisualState(lockedObject.userData.name, false, camera);
+ } else if (
+ lockedObjectType === "satellite" && lockedSatellite
+ ) {
+ applyLandingPointVisualState(null, true, camera);
+ } else if (lockedObjectType === "bgp" && lockedObject) {
+ const relatedCableNames = getBGPRelatedCableNames(lockedObject);
+ clearAllCableStates();
+ relatedCableNames.forEach((name) => {
+ getCableLines().forEach((cable) => {
+ if (cable.userData?.name === name) {
+ setCableState(cable.userData.cableId, CABLE_STATE.LOCKED);
+ }
+ });
+ });
+ applyLandingPointVisualState(
+ relatedCableNames.length > 0 ? relatedCableNames : null,
+ relatedCableNames.length === 0,
+ camera,
+ );
+ } else if (lockedObjectType === "bgp_collector" && lockedObject) {
+ clearAllCableStates();
+ resetLandingPointVisualState(camera);
+ } else {
+ resetLandingPointVisualState(camera);
+ }
+
+ updateSatellitePositions(deltaTime);
+ updateBreathingPhase(deltaTime);
+ updateRelatedSatelliteHighlights();
+
+ const satPositions = getSatellitePositions();
+ if (
+ lockedObjectType === "satellite" &&
+ lockedSatelliteIndex !== null &&
+ satPositions?.[lockedSatelliteIndex]
+ ) {
+ updateLockedRingPosition(satPositions[lockedSatelliteIndex].current);
+ } else if (
+ hoveredSatelliteIndex !== null &&
+ satPositions?.[hoveredSatelliteIndex]
+ ) {
updateHoverRingPosition(satPositions[hoveredSatelliteIndex].current);
}
-
+
renderer.render(scene, camera);
}
-window.clearLockedCable = function() {
+export function destroy() {
+ if (destroyed) return;
+ destroyed = true;
+ currentLoadToken += 1;
+ isDataLoading = false;
+
+ if (animationFrameId) {
+ cancelAnimationFrame(animationFrameId);
+ animationFrameId = null;
+ }
+
+ teardownControls();
+ while (cleanupFns.length) {
+ const cleanup = cleanupFns.pop();
+ cleanup?.();
+ }
+
clearLockedObject();
-};
+ clearCableData(getEarth());
+ clearBGPData(getEarth());
+ resetSatelliteState();
+ clearUiState();
-window.clearSelection = function() {
- hideInfoCard();
- window.clearLockedCable();
-};
+ if (scene) {
+ disposeSceneObject(scene);
+ }
-document.addEventListener('DOMContentLoaded', init);
+ if (renderer) {
+ renderer.dispose();
+ if (typeof renderer.forceContextLoss === "function") {
+ renderer.forceContextLoss();
+ }
+ renderer.domElement?.remove();
+ }
+
+ scene = null;
+ camera = null;
+ renderer = null;
+ initialized = false;
+
+ delete window.__planetEarth;
+}
+
+document.addEventListener("DOMContentLoaded", init);
diff --git a/frontend/public/earth/js/satellites.js b/frontend/public/earth/js/satellites.js
index 597ed25a..c237210e 100644
--- a/frontend/public/earth/js/satellites.js
+++ b/frontend/public/earth/js/satellites.js
@@ -1,68 +1,201 @@
// satellites.js - Satellite visualization module with real SGP4 positions and animations
-import * as THREE from 'three';
-import { twoline2satrec, sgp4, propagate, degreesToRadians, radiansToDegrees, eciToGeodetic } from 'satellite.js';
-import { CONFIG, SATELLITE_CONFIG } from './constants.js';
+import * as THREE from "three";
+import { twoline2satrec, propagate } from "satellite.js";
+import { CONFIG, SATELLITE_CONFIG } from "./constants.js";
+import { latLonToVector3 } from "./utils.js";
let satellitePoints = null;
let satelliteTrails = null;
let satelliteData = [];
let showSatellites = false;
let showTrails = true;
-let animationTime = 0;
let selectedSatellite = null;
let satellitePositions = [];
let hoverRingSprite = null;
let lockedRingSprite = null;
let lockedDotSprite = null;
-export let breathingPhase = 0;
+let predictedOrbitLine = null;
+let relatedSatelliteSprites = [];
+let earthObjRef = null;
+let sceneRef = null;
+let cameraRef = null;
+let lockedSatelliteIndex = null;
+let hoveredSatelliteIndex = null;
+let positionUpdateAccumulator = 0;
+let satelliteCapacity = 0;
+let selectedSatelliteLegendKey = null;
-export function updateBreathingPhase() {
- breathingPhase += SATELLITE_CONFIG.breathingSpeed;
-}
-
-const SATELLITE_API = SATELLITE_CONFIG.apiPath + '?limit=' + SATELLITE_CONFIG.maxCount;
-const MAX_SATELLITES = SATELLITE_CONFIG.maxCount;
const TRAIL_LENGTH = SATELLITE_CONFIG.trailLength;
const DOT_TEXTURE_SIZE = 32;
+const POSITION_UPDATE_INTERVAL_MS = 250;
+
+const scratchWorldSatellitePosition = new THREE.Vector3();
+const scratchToCamera = new THREE.Vector3();
+const scratchToSatellite = new THREE.Vector3();
+
+export let breathingPhase = 0;
+
+const SATELLITE_LEGEND_RULES = [
+ {
+ key: "starlink",
+ label: "Starlink",
+ color: "#00e6ff",
+ match: (props) => (props?.name || "").includes("STARLINK"),
+ },
+ {
+ key: "geo",
+ label: "GEO / 倾角 20-30",
+ color: "#ffcc00",
+ match: (props) => {
+ const inclination = props?.inclination || 53;
+ return inclination > 20 && inclination < 30;
+ },
+ },
+ {
+ key: "iridium",
+ label: "Iridium",
+ color: "#ff8000",
+ match: (props) => (props?.name || "").includes("IRIDIUM"),
+ },
+ {
+ key: "mid-inclination",
+ label: "倾角 50-70",
+ color: "#00ff4d",
+ match: (props) => {
+ const inclination = props?.inclination || 53;
+ return inclination > 50 && inclination < 70;
+ },
+ },
+ {
+ key: "other",
+ label: "其他卫星",
+ color: "#ffffff",
+ match: () => true,
+ },
+];
+
+export function updateBreathingPhase(deltaTime = 16) {
+ breathingPhase += SATELLITE_CONFIG.breathingSpeed * (deltaTime / 16);
+}
+
+export function getSatelliteLegendItems() {
+ const presentKeys = new Set();
+
+ satelliteData.forEach((satellite) => {
+ const props = satellite?.properties || {};
+ const rule = SATELLITE_LEGEND_RULES.find((item) => item.match(props));
+ if (rule) {
+ presentKeys.add(rule.key);
+ }
+ });
+
+ if (presentKeys.size === 0) {
+ return SATELLITE_LEGEND_RULES.map(({ label, color }) => ({ label, color }));
+ }
+
+ const items = SATELLITE_LEGEND_RULES
+ .filter((item) => presentKeys.has(item.key))
+ .map(({ key, label, color }) => ({ key, label, color }));
+
+ if (!selectedSatelliteLegendKey) {
+ return items.map(({ label, color }) => ({ label, color }));
+ }
+
+ const selectedIndex = items.findIndex(
+ (item) => item.key === selectedSatelliteLegendKey,
+ );
+
+ if (selectedIndex > 0) {
+ const [selectedItem] = items.splice(selectedIndex, 1);
+ items.unshift(selectedItem);
+ }
+
+ return items.map(({ label, color }) => ({ label, color }));
+}
+
+export function setSelectedSatelliteLegend(props) {
+ const rule = SATELLITE_LEGEND_RULES.find((item) =>
+ item.match(props || {}),
+ );
+ selectedSatelliteLegendKey = rule?.key || null;
+}
+
+export function clearSelectedSatelliteLegend() {
+ selectedSatelliteLegendKey = null;
+}
+
+function disposeMaterial(material) {
+ if (!material) return;
+ if (Array.isArray(material)) {
+ material.forEach(disposeMaterial);
+ return;
+ }
+ if (material.map) {
+ material.map.dispose();
+ }
+ material.dispose();
+}
+
+function disposeObject3D(object, parent = earthObjRef) {
+ if (!object) return;
+ if (parent) {
+ parent.remove(object);
+ } else if (object.parent) {
+ object.parent.remove(object);
+ }
+ if (object.geometry) {
+ object.geometry.dispose();
+ }
+ if (object.material) {
+ disposeMaterial(object.material);
+ }
+}
function createDotTexture() {
- const canvas = document.createElement('canvas');
+ const canvas = document.createElement("canvas");
canvas.width = DOT_TEXTURE_SIZE;
canvas.height = DOT_TEXTURE_SIZE;
- const ctx = canvas.getContext('2d');
+ const ctx = canvas.getContext("2d");
const center = DOT_TEXTURE_SIZE / 2;
const radius = center - 2;
-
- const gradient = ctx.createRadialGradient(center, center, 0, center, center, radius);
- gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
- gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.8)');
- gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
-
+
+ const gradient = ctx.createRadialGradient(
+ center,
+ center,
+ 0,
+ center,
+ center,
+ radius,
+ );
+ gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
+ gradient.addColorStop(0.5, "rgba(255, 255, 255, 0.8)");
+ gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(center, center, radius, 0, Math.PI * 2);
ctx.fill();
-
+
const texture = new THREE.CanvasTexture(canvas);
texture.needsUpdate = true;
return texture;
}
-function createRingTexture(innerRadius, outerRadius, color = '#ffffff') {
+function createRingTexture(innerRadius, outerRadius, color = "#ffffff") {
const size = DOT_TEXTURE_SIZE * 2;
- const canvas = document.createElement('canvas');
+ const canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
- const ctx = canvas.getContext('2d');
+ const ctx = canvas.getContext("2d");
const center = size / 2;
-
+
ctx.strokeStyle = color;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(center, center, (innerRadius + outerRadius) / 2, 0, Math.PI * 2);
ctx.stroke();
-
+
const texture = new THREE.CanvasTexture(canvas);
texture.needsUpdate = true;
return texture;
@@ -70,16 +203,10 @@ function createRingTexture(innerRadius, outerRadius, color = '#ffffff') {
export function createSatellites(scene, earthObj) {
initSatelliteScene(scene, earthObj);
-
- const positions = new Float32Array(MAX_SATELLITES * 3);
- const colors = new Float32Array(MAX_SATELLITES * 3);
-
const dotTexture = createDotTexture();
-
+
const pointsGeometry = new THREE.BufferGeometry();
- pointsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
- pointsGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-
+
const pointsMaterial = new THREE.PointsMaterial({
size: SATELLITE_CONFIG.dotSize,
map: dotTexture,
@@ -87,269 +214,400 @@ export function createSatellites(scene, earthObj) {
transparent: true,
opacity: 0.9,
sizeAttenuation: false,
- alphaTest: 0.1
+ alphaTest: 0.1,
});
-
+
satellitePoints = new THREE.Points(pointsGeometry, pointsMaterial);
satellitePoints.visible = false;
- satellitePoints.userData = { type: 'satellitePoints' };
-
+ satellitePoints.userData = { type: "satellitePoints" };
+
const originalScale = { x: 1, y: 1, z: 1 };
- satellitePoints.onBeforeRender = (renderer, scene, camera, geometry, material) => {
+ satellitePoints.onBeforeRender = () => {
if (earthObj && earthObj.scale.x !== 1) {
satellitePoints.scale.set(
originalScale.x / earthObj.scale.x,
originalScale.y / earthObj.scale.y,
- originalScale.z / earthObj.scale.z
+ originalScale.z / earthObj.scale.z,
);
} else {
- satellitePoints.scale.set(originalScale.x, originalScale.y, originalScale.z);
+ satellitePoints.scale.set(
+ originalScale.x,
+ originalScale.y,
+ originalScale.z,
+ );
}
};
-
+
earthObj.add(satellitePoints);
-
- const trailPositions = new Float32Array(MAX_SATELLITES * TRAIL_LENGTH * 3);
- const trailColors = new Float32Array(MAX_SATELLITES * TRAIL_LENGTH * 3);
-
+
const trailGeometry = new THREE.BufferGeometry();
- trailGeometry.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3));
- trailGeometry.setAttribute('color', new THREE.BufferAttribute(trailColors, 3));
-
+
const trailMaterial = new THREE.LineBasicMaterial({
vertexColors: true,
transparent: true,
opacity: 0.3,
- blending: THREE.AdditiveBlending
+ blending: THREE.AdditiveBlending,
});
-
+
satelliteTrails = new THREE.LineSegments(trailGeometry, trailMaterial);
satelliteTrails.visible = false;
- satelliteTrails.userData = { type: 'satelliteTrails' };
+ satelliteTrails.userData = { type: "satelliteTrails" };
earthObj.add(satelliteTrails);
-
- satellitePositions = [];
- for (let i = 0; i < MAX_SATELLITES; i++) {
- satellitePositions.push({
- current: new THREE.Vector3(),
- trail: [],
- trailIndex: 0,
- trailCount: 0
- });
- }
-
+ ensureSatelliteCapacity(0);
+
+ positionUpdateAccumulator = POSITION_UPDATE_INTERVAL_MS;
return satellitePoints;
}
+function getRequestedSatelliteLimit() {
+ return SATELLITE_CONFIG.maxCount < 0 ? null : SATELLITE_CONFIG.maxCount;
+}
+
+function createSatellitePositionState() {
+ return {
+ current: new THREE.Vector3(),
+ trail: [],
+ trailIndex: 0,
+ trailCount: 0,
+ };
+}
+
+function ensureSatelliteCapacity(count) {
+ if (!satellitePoints || !satelliteTrails) return;
+
+ const nextCapacity = Math.max(count, 0);
+ if (nextCapacity === satelliteCapacity) return;
+
+ const positions = new Float32Array(nextCapacity * 3);
+ const colors = new Float32Array(nextCapacity * 3);
+ satellitePoints.geometry.setAttribute(
+ "position",
+ new THREE.BufferAttribute(positions, 3),
+ );
+ satellitePoints.geometry.setAttribute(
+ "color",
+ new THREE.BufferAttribute(colors, 3),
+ );
+ satellitePoints.geometry.setDrawRange(0, 0);
+
+ const trailPositions = new Float32Array(nextCapacity * TRAIL_LENGTH * 3);
+ const trailColors = new Float32Array(nextCapacity * TRAIL_LENGTH * 3);
+ satelliteTrails.geometry.setAttribute(
+ "position",
+ new THREE.BufferAttribute(trailPositions, 3),
+ );
+ satelliteTrails.geometry.setAttribute(
+ "color",
+ new THREE.BufferAttribute(trailColors, 3),
+ );
+
+ satellitePositions = Array.from(
+ { length: nextCapacity },
+ createSatellitePositionState,
+ );
+ satelliteCapacity = nextCapacity;
+}
+
function computeSatellitePosition(satellite, time) {
try {
const props = satellite.properties;
if (!props || !props.norad_cat_id) {
return null;
}
-
- const noradId = props.norad_cat_id;
- const inclination = props.inclination || 53;
- const raan = props.raan || 0;
- const eccentricity = props.eccentricity || 0.0001;
- const argOfPerigee = props.arg_of_perigee || 0;
- const meanAnomaly = props.mean_anomaly || 0;
- const meanMotion = props.mean_motion || 15;
- const epoch = props.epoch || '';
-
- // Simplified epoch calculation
- let epochDate = epoch && epoch.length >= 10 ? new Date(epoch) : time;
- const epochYear = epochDate.getUTCFullYear() % 100;
- const startOfYear = new Date(Date.UTC(epochDate.getUTCFullYear(), 0, 1));
- const dayOfYear = Math.floor((epochDate - startOfYear) / 86400000) + 1;
- const msOfDay = epochDate.getUTCHours() * 3600000 + epochDate.getUTCMinutes() * 60000 + epochDate.getUTCSeconds() * 1000 + epochDate.getUTCMilliseconds();
- const dayFraction = msOfDay / 86400000;
- const epochStr = String(epochYear).padStart(2, '0') + String(dayOfYear).padStart(3, '0') + '.' + dayFraction.toFixed(8).substring(2);
-
- // Format eccentricity as "0.0001652" (7 chars after decimal)
- const eccStr = '0' + eccentricity.toFixed(7);
- const tleLine1 = `1 ${noradId.toString().padStart(5)}U 00001A ${epochStr} .00000000 00000-0 00000-0 0 9999`;
- const tleLine2 = `2 ${noradId.toString().padStart(5)} ${raan.toFixed(4).padStart(8)} ${inclination.toFixed(4).padStart(8)} ${eccStr.substring(1)} ${argOfPerigee.toFixed(4).padStart(8)} ${meanAnomaly.toFixed(4).padStart(8)} ${meanMotion.toFixed(8).padStart(11)} 0 9999`;
-
- const satrec = twoline2satrec(tleLine1, tleLine2);
+
+ const satrec = buildSatrecFromProperties(props, time);
if (!satrec || satrec.error) {
return null;
}
-
+
const positionAndVelocity = propagate(satrec, time);
if (!positionAndVelocity || !positionAndVelocity.position) {
return null;
}
-
+
const x = positionAndVelocity.position.x;
const y = positionAndVelocity.position.y;
const z = positionAndVelocity.position.z;
-
- if (!x || !y || !z) {
+
+ if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
return null;
}
-
+
const r = Math.sqrt(x * x + y * y + z * z);
- const earthRadius = 6371;
- const displayRadius = CONFIG.earthRadius * (earthRadius / 6371) * 1.05;
-
+ const displayRadius = CONFIG.earthRadius * 1.05;
const scale = displayRadius / r;
-
+
return new THREE.Vector3(x * scale, y * scale, z * scale);
- } catch (e) {
+ } catch (error) {
return null;
}
}
+function buildSatrecFromProperties(props, fallbackTime) {
+ if (props.tle_line1 && props.tle_line2) {
+ // Prefer source-provided TLE lines so the client does not need to rebuild them.
+ const satrec = twoline2satrec(props.tle_line1, props.tle_line2);
+ if (!satrec.error) {
+ return satrec;
+ }
+ }
+
+ const tleLines = buildTleLinesFromElements(props, fallbackTime);
+ if (!tleLines) {
+ return null;
+ }
+
+ return twoline2satrec(tleLines.line1, tleLines.line2);
+}
+
+function computeTleChecksum(line) {
+ let sum = 0;
+
+ for (const char of line.slice(0, 68)) {
+ if (char >= "0" && char <= "9") {
+ sum += Number(char);
+ } else if (char === "-") {
+ sum += 1;
+ }
+ }
+
+ return String(sum % 10);
+}
+
+function buildTleLinesFromElements(props, fallbackTime) {
+ if (!props?.norad_cat_id) {
+ return null;
+ }
+
+ const requiredValues = [
+ props.inclination,
+ props.raan,
+ props.eccentricity,
+ props.arg_of_perigee,
+ props.mean_anomaly,
+ props.mean_motion,
+ ];
+ if (requiredValues.some((value) => value === null || value === undefined)) {
+ return null;
+ }
+
+ const epochDate =
+ props.epoch && String(props.epoch).length >= 10
+ ? new Date(props.epoch)
+ : fallbackTime;
+ if (Number.isNaN(epochDate.getTime())) {
+ return null;
+ }
+
+ const epochYear = epochDate.getUTCFullYear() % 100;
+ const startOfYear = new Date(Date.UTC(epochDate.getUTCFullYear(), 0, 1));
+ const dayOfYear = Math.floor((epochDate - startOfYear) / 86400000) + 1;
+ const msOfDay =
+ epochDate.getUTCHours() * 3600000 +
+ epochDate.getUTCMinutes() * 60000 +
+ epochDate.getUTCSeconds() * 1000 +
+ epochDate.getUTCMilliseconds();
+ const dayFraction = msOfDay / 86400000;
+ const epochStr =
+ String(epochYear).padStart(2, "0") +
+ String(dayOfYear).padStart(3, "0") +
+ dayFraction.toFixed(8).slice(1);
+
+ const eccentricityDigits = Math.round(Number(props.eccentricity) * 1e7)
+ .toString()
+ .padStart(7, "0");
+
+ // Keep a local fallback for historical rows that do not have stored TLE lines yet.
+ const line1Core = `1 ${String(props.norad_cat_id).padStart(5, "0")}U 00001A ${epochStr} .00000000 00000-0 00000-0 0 999`;
+ const line2Core = `2 ${String(props.norad_cat_id).padStart(5, "0")} ${Number(
+ props.inclination,
+ )
+ .toFixed(4)
+ .padStart(
+ 8,
+ )} ${Number(props.raan).toFixed(4).padStart(8)} ${eccentricityDigits} ${Number(
+ props.arg_of_perigee,
+ )
+ .toFixed(4)
+ .padStart(8)} ${Number(props.mean_anomaly).toFixed(4).padStart(8)} ${Number(
+ props.mean_motion,
+ )
+ .toFixed(8)
+ .padStart(11)}00000`;
+
+ return {
+ line1: line1Core + computeTleChecksum(line1Core),
+ line2: line2Core + computeTleChecksum(line2Core),
+ };
+}
+
function generateFallbackPosition(satellite, index, total) {
const radius = CONFIG.earthRadius + 5;
-
+
const noradId = satellite.properties?.norad_cat_id || index;
const inclination = satellite.properties?.inclination || 53;
const raan = satellite.properties?.raan || 0;
const meanAnomaly = satellite.properties?.mean_anomaly || 0;
-
- const hash = String(noradId).split('').reduce((a, b) => a + b.charCodeAt(0), 0);
+
+ const hash = String(noradId)
+ .split("")
+ .reduce((a, b) => a + b.charCodeAt(0), 0);
const randomOffset = (hash % 1000) / 1000;
-
+
const normalizedIndex = index / total;
- const theta = normalizedIndex * Math.PI * 2 * 10 + (raan * Math.PI / 180);
- const phi = (inclination * Math.PI / 180) + (meanAnomaly * Math.PI / 180 * 0.1);
-
+ const theta = normalizedIndex * Math.PI * 2 * 10 + (raan * Math.PI) / 180;
+ const phi =
+ (inclination * Math.PI) / 180 + ((meanAnomaly * Math.PI) / 180) * 0.1;
+
const adjustedPhi = Math.abs(phi % Math.PI);
const adjustedTheta = theta + randomOffset * Math.PI * 2;
-
+
const x = radius * Math.sin(adjustedPhi) * Math.cos(adjustedTheta);
const y = radius * Math.cos(adjustedPhi);
const z = radius * Math.sin(adjustedPhi) * Math.sin(adjustedTheta);
-
+
return new THREE.Vector3(x, y, z);
}
export async function loadSatellites() {
- try {
- const response = await fetch(SATELLITE_API);
- if (!response.ok) {
- throw new Error(`HTTP ${response.status}`);
- }
-
- const data = await response.json();
- satelliteData = data.features || [];
-
- console.log(`Loaded ${satelliteData.length} satellites`);
- return satelliteData.length;
- } catch (error) {
- console.error('Failed to load satellites:', error);
- return [];
+ const limit = getRequestedSatelliteLimit();
+ const url = new URL(SATELLITE_CONFIG.apiPath, window.location.origin);
+ if (limit !== null) {
+ url.searchParams.set("limit", String(limit));
}
+
+ const response = await fetch(url.toString());
+ if (!response.ok) {
+ throw new Error(`卫星接口返回 HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+ satelliteData = data.features || [];
+ ensureSatelliteCapacity(satelliteData.length);
+ positionUpdateAccumulator = POSITION_UPDATE_INTERVAL_MS;
+ return satelliteData.length;
}
-export function updateSatellitePositions(deltaTime = 0) {
+export function updateSatellitePositions(deltaTime = 0, force = false) {
if (!satellitePoints || satelliteData.length === 0) return;
-
- animationTime += deltaTime * 0.001;
-
+
+ const shouldUpdateTrails =
+ showSatellites || showTrails || lockedSatelliteIndex !== null;
+ positionUpdateAccumulator += deltaTime;
+
+ if (!force && positionUpdateAccumulator < POSITION_UPDATE_INTERVAL_MS) {
+ return;
+ }
+
+ const elapsedMs = Math.max(
+ positionUpdateAccumulator,
+ POSITION_UPDATE_INTERVAL_MS,
+ );
+ positionUpdateAccumulator = 0;
+
const positions = satellitePoints.geometry.attributes.position.array;
const colors = satellitePoints.geometry.attributes.color.array;
-
const trailPositions = satelliteTrails.geometry.attributes.position.array;
const trailColors = satelliteTrails.geometry.attributes.color.array;
-
- const baseTime = new Date();
- const count = Math.min(satelliteData.length, MAX_SATELLITES);
-
+ const baseTime = new Date(Date.now() + elapsedMs);
+ const count = Math.min(satelliteData.length, satelliteCapacity);
+
for (let i = 0; i < count; i++) {
const satellite = satelliteData[i];
const props = satellite.properties;
-
const timeOffset = (i / count) * 2 * Math.PI * 0.1;
- const adjustedTime = new Date(baseTime.getTime() + timeOffset * 1000 * 60 * 10);
-
+ const adjustedTime = new Date(
+ baseTime.getTime() + timeOffset * 1000 * 60 * 10,
+ );
+
let pos = computeSatellitePosition(satellite, adjustedTime);
-
if (!pos) {
pos = generateFallbackPosition(satellite, i, count);
}
-
+
satellitePositions[i].current.copy(pos);
-
- const satPos = satellitePositions[i];
- if (i !== window.lockedSatelliteIndex) {
+
+ if (shouldUpdateTrails && i !== lockedSatelliteIndex) {
+ const satPos = satellitePositions[i];
satPos.trail[satPos.trailIndex] = pos.clone();
satPos.trailIndex = (satPos.trailIndex + 1) % TRAIL_LENGTH;
if (satPos.trailCount < TRAIL_LENGTH) satPos.trailCount++;
}
-
+
positions[i * 3] = pos.x;
positions[i * 3 + 1] = pos.y;
positions[i * 3 + 2] = pos.z;
-
+
const inclination = props?.inclination || 53;
- const name = props?.name || '';
- const isStarlink = name.includes('STARLINK');
+ const name = props?.name || "";
+ const isStarlink = name.includes("STARLINK");
const isGeo = inclination > 20 && inclination < 30;
- const isIridium = name.includes('IRIDIUM');
-
- let r, g, b;
+ const isIridium = name.includes("IRIDIUM");
+
+ let r;
+ let g;
+ let b;
if (isStarlink) {
- r = 0.0; g = 0.9; b = 1.0;
+ r = 0.0;
+ g = 0.9;
+ b = 1.0;
} else if (isGeo) {
- r = 1.0; g = 0.8; b = 0.0;
+ r = 1.0;
+ g = 0.8;
+ b = 0.0;
} else if (isIridium) {
- r = 1.0; g = 0.5; b = 0.0;
+ r = 1.0;
+ g = 0.5;
+ b = 0.0;
} else if (inclination > 50 && inclination < 70) {
- r = 0.0; g = 1.0; b = 0.3;
+ r = 0.0;
+ g = 1.0;
+ b = 0.3;
} else {
- r = 1.0; g = 1.0; b = 1.0;
+ r = 1.0;
+ g = 1.0;
+ b = 1.0;
}
-
+
colors[i * 3] = r;
colors[i * 3 + 1] = g;
colors[i * 3 + 2] = b;
-
- const sp = satellitePositions[i];
- const trail = sp.trail;
- const tc = sp.trailCount;
- const ti = sp.trailIndex;
-
+
+ const satPosition = satellitePositions[i];
for (let j = 0; j < TRAIL_LENGTH; j++) {
const trailIdx = (i * TRAIL_LENGTH + j) * 3;
-
- if (j < tc) {
- const idx = (ti - tc + j + TRAIL_LENGTH) % TRAIL_LENGTH;
- const t = trail[idx];
- if (t) {
- trailPositions[trailIdx] = t.x;
- trailPositions[trailIdx + 1] = t.y;
- trailPositions[trailIdx + 2] = t.z;
- const alpha = (j + 1) / tc;
+
+ if (j < satPosition.trailCount) {
+ const idx =
+ (satPosition.trailIndex - satPosition.trailCount + j + TRAIL_LENGTH) %
+ TRAIL_LENGTH;
+ const trailPoint = satPosition.trail[idx];
+ if (trailPoint) {
+ trailPositions[trailIdx] = trailPoint.x;
+ trailPositions[trailIdx + 1] = trailPoint.y;
+ trailPositions[trailIdx + 2] = trailPoint.z;
+ const alpha = (j + 1) / satPosition.trailCount;
trailColors[trailIdx] = r * alpha;
trailColors[trailIdx + 1] = g * alpha;
trailColors[trailIdx + 2] = b * alpha;
- } else {
- trailPositions[trailIdx] = pos.x;
- trailPositions[trailIdx + 1] = pos.y;
- trailPositions[trailIdx + 2] = pos.z;
- trailColors[trailIdx] = 0;
- trailColors[trailIdx + 1] = 0;
- trailColors[trailIdx + 2] = 0;
+ continue;
}
- } else {
- trailPositions[trailIdx] = pos.x;
- trailPositions[trailIdx + 1] = pos.y;
- trailPositions[trailIdx + 2] = pos.z;
- trailColors[trailIdx] = 0;
- trailColors[trailIdx + 1] = 0;
- trailColors[trailIdx + 2] = 0;
}
+
+ trailPositions[trailIdx] = pos.x;
+ trailPositions[trailIdx + 1] = pos.y;
+ trailPositions[trailIdx + 2] = pos.z;
+ trailColors[trailIdx] = 0;
+ trailColors[trailIdx + 1] = 0;
+ trailColors[trailIdx + 2] = 0;
}
}
-
- for (let i = count; i < MAX_SATELLITES; i++) {
+
+ for (let i = count; i < satelliteCapacity; i++) {
positions[i * 3] = 0;
positions[i * 3 + 1] = 0;
positions[i * 3 + 2] = 0;
-
+
for (let j = 0; j < TRAIL_LENGTH; j++) {
const trailIdx = (i * TRAIL_LENGTH + j) * 3;
trailPositions[trailIdx] = 0;
@@ -357,13 +615,24 @@ export function updateSatellitePositions(deltaTime = 0) {
trailPositions[trailIdx + 2] = 0;
}
}
-
+
satellitePoints.geometry.attributes.position.needsUpdate = true;
satellitePoints.geometry.attributes.color.needsUpdate = true;
satellitePoints.geometry.setDrawRange(0, count);
-
+
satelliteTrails.geometry.attributes.position.needsUpdate = true;
satelliteTrails.geometry.attributes.color.needsUpdate = true;
+
+ // Keep the hover ring synced with the propagated satellite position even
+ // when the pointer stays still and no new hover event is emitted.
+ if (
+ hoveredSatelliteIndex !== null &&
+ hoveredSatelliteIndex >= 0 &&
+ hoveredSatelliteIndex < count &&
+ hoveredSatelliteIndex !== lockedSatelliteIndex
+ ) {
+ updateHoverRingPosition(satellitePositions[hoveredSatelliteIndex].current);
+ }
}
export function toggleSatellites(visible) {
@@ -415,254 +684,437 @@ export function getSatellitePositions() {
return satellitePositions;
}
-export function isSatelliteFrontFacing(index, camera) {
- if (!earthObjRef || !camera) return true;
- const positions = satellitePositions;
- if (!positions || !positions[index]) return true;
-
- const satPos = positions[index].current;
- if (!satPos) return true;
-
- const worldSatPos = satPos.clone().applyMatrix4(earthObjRef.matrixWorld);
- const toCamera = new THREE.Vector3().subVectors(camera.position, earthObjRef.position).normalize();
- const toSat = new THREE.Vector3().subVectors(worldSatPos, earthObjRef.position).normalize();
-
- return toCamera.dot(toSat) > 0;
+export function setSatelliteCamera(camera) {
+ cameraRef = camera;
}
-let earthObjRef = null;
-let sceneRef = null;
+export function setLockedSatelliteIndex(index) {
+ lockedSatelliteIndex = index;
+}
-export function showHoverRing(position, isLocked = false) {
- if (!sceneRef || !earthObjRef) return;
-
- const ringTexture = createRingTexture(8, 12, isLocked ? '#ffcc00' : '#ffffff');
- const spriteMaterial = new THREE.SpriteMaterial({
- map: ringTexture,
- transparent: true,
- opacity: 0.8,
- depthTest: false,
- sizeAttenuation: false
- });
-
- const ringSize = SATELLITE_CONFIG.ringSize;
- const sprite = new THREE.Sprite(spriteMaterial);
- sprite.position.copy(position);
-
- const camera = window.camera;
- const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
- const scale = ringSize;
- sprite.scale.set(scale, scale, 1);
-
- earthObjRef.add(sprite);
-
- if (isLocked) {
- if (lockedRingSprite) {
- earthObjRef.remove(lockedRingSprite);
- }
- lockedRingSprite = sprite;
-
- if (lockedDotSprite) {
- earthObjRef.remove(lockedDotSprite);
- }
- const dotCanvas = createBrighterDotCanvas();
- const dotTexture = new THREE.CanvasTexture(dotCanvas);
- dotTexture.needsUpdate = true;
- const dotMaterial = new THREE.SpriteMaterial({
- map: dotTexture,
- transparent: true,
- opacity: 1.0,
- depthTest: false
- });
- lockedDotSprite = new THREE.Sprite(dotMaterial);
- lockedDotSprite.position.copy(position);
- lockedDotSprite.scale.set(4 * cameraDistance / 200, 4 * cameraDistance / 200, 1);
-
- earthObjRef.add(lockedDotSprite);
- } else {
- if (hoverRingSprite) {
- earthObjRef.remove(hoverRingSprite);
- }
- hoverRingSprite = sprite;
- }
-
- return sprite;
+export function setHoveredSatelliteIndex(index) {
+ hoveredSatelliteIndex = index;
+}
+
+export function isSatelliteFrontFacing(index, camera = cameraRef) {
+ if (!earthObjRef || !camera) return true;
+ if (!satellitePositions || !satellitePositions[index]) return true;
+
+ const satPos = satellitePositions[index].current;
+ if (!satPos) return true;
+
+ scratchWorldSatellitePosition
+ .copy(satPos)
+ .applyMatrix4(earthObjRef.matrixWorld);
+ scratchToCamera.subVectors(camera.position, earthObjRef.position).normalize();
+ scratchToSatellite
+ .subVectors(scratchWorldSatellitePosition, earthObjRef.position)
+ .normalize();
+
+ return scratchToCamera.dot(scratchToSatellite) > 0;
}
function createBrighterDotCanvas() {
const size = DOT_TEXTURE_SIZE * 2;
- const canvas = document.createElement('canvas');
+ const canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
- const ctx = canvas.getContext('2d');
+ const ctx = canvas.getContext("2d");
const center = size / 2;
- const gradient = ctx.createRadialGradient(center, center, 0, center, center, center);
- gradient.addColorStop(0, 'rgba(255, 255, 200, 1)');
- gradient.addColorStop(0.3, 'rgba(255, 220, 100, 0.9)');
- gradient.addColorStop(0.7, 'rgba(255, 180, 50, 0.5)');
- gradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+ const gradient = ctx.createRadialGradient(
+ center,
+ center,
+ 0,
+ center,
+ center,
+ center,
+ );
+ gradient.addColorStop(0, "rgba(255, 255, 200, 1)");
+ gradient.addColorStop(0.3, "rgba(255, 220, 100, 0.9)");
+ gradient.addColorStop(0.7, "rgba(255, 180, 50, 0.5)");
+ gradient.addColorStop(1, "rgba(255, 150, 0, 0)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, size, size);
return canvas;
}
+function createRingSprite(position, isLocked = false) {
+ if (!earthObjRef) return null;
+
+ const ringTexture = createRingTexture(
+ 8,
+ 12,
+ isLocked ? "#ffcc00" : "#ffffff",
+ );
+ const spriteMaterial = new THREE.SpriteMaterial({
+ map: ringTexture,
+ transparent: true,
+ opacity: 0.8,
+ depthTest: false,
+ sizeAttenuation: false,
+ });
+
+ const sprite = new THREE.Sprite(spriteMaterial);
+ sprite.position.copy(position);
+ sprite.scale.set(SATELLITE_CONFIG.ringSize, SATELLITE_CONFIG.ringSize, 1);
+ earthObjRef.add(sprite);
+ return sprite;
+}
+
+function createRelatedSatelliteSprite(position, color = "#7dd3fc") {
+ if (!earthObjRef) return null;
+
+ const ringTexture = createRingTexture(7, 11, color);
+ const spriteMaterial = new THREE.SpriteMaterial({
+ map: ringTexture,
+ transparent: true,
+ opacity: 0.55,
+ depthTest: false,
+ sizeAttenuation: false,
+ });
+
+ const sprite = new THREE.Sprite(spriteMaterial);
+ sprite.position.copy(position);
+ sprite.scale.set(SATELLITE_CONFIG.ringSize * 0.8, SATELLITE_CONFIG.ringSize * 0.8, 1);
+ earthObjRef.add(sprite);
+ return sprite;
+}
+
+export function showHoverRing(position, isLocked = false) {
+ if (!earthObjRef || !position) return null;
+
+ if (isLocked) {
+ hideLockedRing();
+ lockedRingSprite = createRingSprite(position, true);
+
+ const dotCanvas = createBrighterDotCanvas();
+ const dotTexture = new THREE.CanvasTexture(dotCanvas);
+ const dotMaterial = new THREE.SpriteMaterial({
+ map: dotTexture,
+ transparent: true,
+ opacity: 1.0,
+ depthTest: false,
+ });
+ lockedDotSprite = new THREE.Sprite(dotMaterial);
+ lockedDotSprite.position.copy(position);
+ lockedDotSprite.scale.set(4, 4, 1);
+ earthObjRef.add(lockedDotSprite);
+ return lockedRingSprite;
+ }
+
+ hideHoverRings();
+ hoverRingSprite = createRingSprite(position, false);
+ return hoverRingSprite;
+}
+
export function hideHoverRings() {
- if (!earthObjRef) return;
-
if (hoverRingSprite) {
- earthObjRef.remove(hoverRingSprite);
+ disposeObject3D(hoverRingSprite);
hoverRingSprite = null;
}
}
export function hideLockedRing() {
- if (!earthObjRef) return;
if (lockedRingSprite) {
- earthObjRef.remove(lockedRingSprite);
+ disposeObject3D(lockedRingSprite);
lockedRingSprite = null;
}
if (lockedDotSprite) {
- earthObjRef.remove(lockedDotSprite);
+ disposeObject3D(lockedDotSprite);
lockedDotSprite = null;
}
}
export function updateLockedRingPosition(position) {
- const ringSize = SATELLITE_CONFIG.ringSize;
- const camera = window.camera;
- const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
- if (lockedRingSprite && position) {
+ if (!position) return;
+ if (lockedRingSprite) {
lockedRingSprite.position.copy(position);
- const breathScale = 1 + Math.sin(breathingPhase) * SATELLITE_CONFIG.breathingScaleAmplitude;
- lockedRingSprite.scale.set(ringSize * breathScale, ringSize * breathScale, 1);
- const breathOpacity = SATELLITE_CONFIG.breathingOpacityMin + Math.sin(breathingPhase) * (SATELLITE_CONFIG.breathingOpacityMax - SATELLITE_CONFIG.breathingOpacityMin);
- lockedRingSprite.material.opacity = breathOpacity;
+ const breathScale =
+ 1 + Math.sin(breathingPhase) * SATELLITE_CONFIG.breathingScaleAmplitude;
+ lockedRingSprite.scale.set(
+ SATELLITE_CONFIG.ringSize * breathScale,
+ SATELLITE_CONFIG.ringSize * breathScale,
+ 1,
+ );
+ lockedRingSprite.material.opacity =
+ SATELLITE_CONFIG.breathingOpacityMin +
+ Math.sin(breathingPhase) *
+ (SATELLITE_CONFIG.breathingOpacityMax -
+ SATELLITE_CONFIG.breathingOpacityMin);
}
- if (lockedDotSprite && position) {
+
+ if (lockedDotSprite) {
lockedDotSprite.position.copy(position);
- const dotBreathScale = 1 + Math.sin(breathingPhase) * SATELLITE_CONFIG.dotBreathingScaleAmplitude;
- lockedDotSprite.scale.set(4 * cameraDistance / 200 * dotBreathScale, 4 * cameraDistance / 200 * dotBreathScale, 1);
- lockedDotSprite.material.opacity = SATELLITE_CONFIG.dotOpacityMin + Math.sin(breathingPhase) * (SATELLITE_CONFIG.dotOpacityMax - SATELLITE_CONFIG.dotOpacityMin);
+ const dotBreathScale =
+ 1 +
+ Math.sin(breathingPhase) * SATELLITE_CONFIG.dotBreathingScaleAmplitude;
+ lockedDotSprite.scale.set(4 * dotBreathScale, 4 * dotBreathScale, 1);
+ lockedDotSprite.material.opacity =
+ SATELLITE_CONFIG.dotOpacityMin +
+ Math.sin(breathingPhase) *
+ (SATELLITE_CONFIG.dotOpacityMax - SATELLITE_CONFIG.dotOpacityMin);
}
}
export function updateHoverRingPosition(position) {
- const ringSize = SATELLITE_CONFIG.ringSize;
- const camera = window.camera;
- const cameraDistance = camera ? camera.position.distanceTo(position) : 400;
- const scale = ringSize;
if (hoverRingSprite && position) {
hoverRingSprite.position.copy(position);
- hoverRingSprite.scale.set(scale, scale, 1);
+ hoverRingSprite.scale.set(
+ SATELLITE_CONFIG.ringSize,
+ SATELLITE_CONFIG.ringSize,
+ 1,
+ );
}
}
export function setSatelliteRingState(index, state, position) {
switch (state) {
- case 'hover':
+ case "hover":
+ hoveredSatelliteIndex = index;
hideHoverRings();
showHoverRing(position, false);
break;
- case 'locked':
+ case "locked":
+ hoveredSatelliteIndex = null;
hideHoverRings();
showHoverRing(position, true);
break;
- case 'none':
+ case "none":
+ hoveredSatelliteIndex = null;
hideHoverRings();
hideLockedRing();
break;
}
}
+export function clearRelatedSatelliteHighlights() {
+ relatedSatelliteSprites.forEach((item) => {
+ if (item.sprite) {
+ disposeObject3D(item.sprite);
+ }
+ });
+ relatedSatelliteSprites = [];
+}
+
+export function highlightRelatedSatellites(indices, color = "#7dd3fc") {
+ clearRelatedSatelliteHighlights();
+ if (!Array.isArray(indices) || indices.length === 0) return;
+
+ indices.forEach((index) => {
+ const pos = satellitePositions?.[index]?.current;
+ if (!pos) return;
+ const sprite = createRelatedSatelliteSprite(pos, color);
+ if (!sprite) return;
+ relatedSatelliteSprites.push({ index, sprite, color });
+ });
+}
+
+export function updateRelatedSatelliteHighlights() {
+ if (relatedSatelliteSprites.length === 0) return;
+ relatedSatelliteSprites = relatedSatelliteSprites.filter((item) => {
+ const pos = satellitePositions?.[item.index]?.current;
+ if (!pos || !item.sprite) return false;
+ item.sprite.position.copy(pos);
+ return true;
+ });
+}
+
+export function getRelatedSatelliteIndicesForRegions(
+ regions,
+ { limit = 6, maxAngleDeg = 22 } = {},
+) {
+ if (!Array.isArray(regions) || regions.length === 0 || satellitePositions.length === 0) {
+ return [];
+ }
+
+ const regionVectors = regions
+ .filter(
+ (region) =>
+ typeof region?.latitude === "number" &&
+ typeof region?.longitude === "number",
+ )
+ .map((region) =>
+ latLonToVector3(region.latitude, region.longitude, CONFIG.earthRadius + 1)
+ .clone()
+ .normalize(),
+ );
+
+ if (regionVectors.length === 0) return [];
+
+ const threshold = Math.cos((maxAngleDeg * Math.PI) / 180);
+ const ranked = [];
+
+ satellitePositions.forEach((item, index) => {
+ const current = item?.current;
+ if (!current || current.lengthSq() === 0) return;
+ const satVector = current.clone().normalize();
+ let bestDot = -1;
+ regionVectors.forEach((regionVector) => {
+ bestDot = Math.max(bestDot, satVector.dot(regionVector));
+ });
+ if (bestDot >= threshold) {
+ ranked.push({ index, score: bestDot });
+ }
+ });
+
+ return ranked
+ .sort((a, b) => b.score - a.score)
+ .slice(0, limit)
+ .map((item) => item.index);
+}
+
export function initSatelliteScene(scene, earth) {
sceneRef = scene;
earthObjRef = earth;
}
-let predictedOrbitLine = null;
-
function calculateOrbitalPeriod(meanMotion) {
return 86400 / meanMotion;
}
-function calculatePredictedOrbit(satellite, periodSeconds, sampleInterval = 10) {
+function calculatePredictedOrbit(
+ satellite,
+ periodSeconds,
+ sampleInterval = 10,
+) {
const points = [];
const samples = Math.ceil(periodSeconds / sampleInterval);
const now = new Date();
-
- // Full orbit: from now to now+period (complete circle forward)
+
for (let i = 0; i <= samples; i++) {
const time = new Date(now.getTime() + i * sampleInterval * 1000);
const pos = computeSatellitePosition(satellite, time);
if (pos) points.push(pos);
}
-
- // If we don't have enough points, use fallback orbit
+
if (points.length < samples * 0.5) {
points.length = 0;
const radius = CONFIG.earthRadius + 5;
- const noradId = satellite.properties?.norad_cat_id || 0;
const inclination = satellite.properties?.inclination || 53;
const raan = satellite.properties?.raan || 0;
- const meanAnomaly = satellite.properties?.mean_anomaly || 0;
-
+
for (let i = 0; i <= samples; i++) {
const theta = (i / samples) * Math.PI * 2;
- const phi = (inclination * Math.PI / 180);
- const x = radius * Math.sin(phi) * Math.cos(theta + raan * Math.PI / 180);
+ const phi = (inclination * Math.PI) / 180;
+ const x =
+ radius * Math.sin(phi) * Math.cos(theta + (raan * Math.PI) / 180);
const y = radius * Math.cos(phi);
- const z = radius * Math.sin(phi) * Math.sin(theta + raan * Math.PI / 180);
+ const z =
+ radius * Math.sin(phi) * Math.sin(theta + (raan * Math.PI) / 180);
points.push(new THREE.Vector3(x, y, z));
}
}
-
+
return points;
}
export function showPredictedOrbit(satellite) {
hidePredictedOrbit();
-
- const props = satellite.properties;
- const meanMotion = props?.mean_motion || 15;
+ if (!earthObjRef) return;
+
+ const meanMotion = satellite.properties?.mean_motion || 15;
const periodSeconds = calculateOrbitalPeriod(meanMotion);
-
const points = calculatePredictedOrbit(satellite, periodSeconds);
if (points.length < 2) return;
-
+
const positions = new Float32Array(points.length * 3);
const colors = new Float32Array(points.length * 3);
-
+
for (let i = 0; i < points.length; i++) {
positions[i * 3] = points[i].x;
positions[i * 3 + 1] = points[i].y;
positions[i * 3 + 2] = points[i].z;
-
+
const t = i / (points.length - 1);
colors[i * 3] = 1 - t * 0.4;
colors[i * 3 + 1] = 1 - t * 0.6;
colors[i * 3 + 2] = t;
}
-
+
const geometry = new THREE.BufferGeometry();
- geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
- geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-
+ geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+ geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+
const material = new THREE.LineBasicMaterial({
vertexColors: true,
transparent: true,
opacity: 0.8,
- blending: THREE.AdditiveBlending
+ blending: THREE.AdditiveBlending,
});
-
+
predictedOrbitLine = new THREE.Line(geometry, material);
earthObjRef.add(predictedOrbitLine);
}
export function hidePredictedOrbit() {
if (predictedOrbitLine) {
- earthObjRef.remove(predictedOrbitLine);
- predictedOrbitLine.geometry.dispose();
- predictedOrbitLine.material.dispose();
+ disposeObject3D(predictedOrbitLine);
predictedOrbitLine = null;
}
}
+
+export function clearSatelliteData() {
+ satelliteData = [];
+ selectedSatellite = null;
+ lockedSatelliteIndex = null;
+ hoveredSatelliteIndex = null;
+ positionUpdateAccumulator = 0;
+
+ satellitePositions.forEach((position) => {
+ position.current.set(0, 0, 0);
+ position.trail = [];
+ position.trailIndex = 0;
+ position.trailCount = 0;
+ });
+
+ if (satellitePoints) {
+ const positionAttr = satellitePoints.geometry.attributes.position;
+ const colorAttr = satellitePoints.geometry.attributes.color;
+ if (positionAttr?.array) {
+ positionAttr.array.fill(0);
+ positionAttr.needsUpdate = true;
+ }
+ if (colorAttr?.array) {
+ colorAttr.array.fill(0);
+ colorAttr.needsUpdate = true;
+ }
+ satellitePoints.geometry.setDrawRange(0, 0);
+ }
+
+ if (satelliteTrails) {
+ const trailPositionAttr = satelliteTrails.geometry.attributes.position;
+ const trailColorAttr = satelliteTrails.geometry.attributes.color;
+ if (trailPositionAttr?.array) {
+ trailPositionAttr.array.fill(0);
+ trailPositionAttr.needsUpdate = true;
+ }
+ if (trailColorAttr?.array) {
+ trailColorAttr.array.fill(0);
+ trailColorAttr.needsUpdate = true;
+ }
+ }
+
+ hideHoverRings();
+ hideLockedRing();
+ hidePredictedOrbit();
+ clearRelatedSatelliteHighlights();
+}
+
+export function resetSatelliteState() {
+ clearSatelliteData();
+
+ if (satellitePoints) {
+ disposeObject3D(satellitePoints);
+ satellitePoints = null;
+ }
+
+ if (satelliteTrails) {
+ disposeObject3D(satelliteTrails);
+ satelliteTrails = null;
+ }
+
+ satellitePositions = [];
+ satelliteCapacity = 0;
+ showSatellites = false;
+ showTrails = true;
+}
diff --git a/frontend/public/earth/js/ui.js b/frontend/public/earth/js/ui.js
index da36d359..d472a18f 100644
--- a/frontend/public/earth/js/ui.js
+++ b/frontend/public/earth/js/ui.js
@@ -1,71 +1,178 @@
// ui.js - UI update functions
+let statusTimeoutId = null;
+let statusHideTimeoutId = null;
+let statusReplayTimeoutId = null;
+
// Show status message
-export function showStatusMessage(message, type = 'info') {
- const statusEl = document.getElementById('status-message');
- statusEl.textContent = message;
- statusEl.className = `status-message ${type}`;
- statusEl.style.display = 'block';
-
- setTimeout(() => {
- statusEl.style.display = 'none';
- }, 3000);
+export function showStatusMessage(message, type = "info") {
+ const statusEl = document.getElementById("status-message");
+ if (!statusEl) return;
+
+ if (statusTimeoutId) {
+ clearTimeout(statusTimeoutId);
+ statusTimeoutId = null;
+ }
+
+ if (statusHideTimeoutId) {
+ clearTimeout(statusHideTimeoutId);
+ statusHideTimeoutId = null;
+ }
+
+ if (statusReplayTimeoutId) {
+ clearTimeout(statusReplayTimeoutId);
+ statusReplayTimeoutId = null;
+ }
+
+ const startShow = () => {
+ statusEl.textContent = message;
+ statusEl.className = `status-message ${type}`;
+ statusEl.style.display = "block";
+ statusEl.offsetHeight;
+ statusEl.classList.add("visible");
+
+ statusTimeoutId = setTimeout(() => {
+ statusEl.classList.remove("visible");
+ statusHideTimeoutId = setTimeout(() => {
+ statusEl.style.display = "none";
+ statusEl.textContent = "";
+ statusHideTimeoutId = null;
+ }, 280);
+ statusTimeoutId = null;
+ }, 3000);
+ };
+
+ if (statusEl.classList.contains("visible")) {
+ statusEl.classList.remove("visible");
+ statusReplayTimeoutId = setTimeout(() => {
+ startShow();
+ statusReplayTimeoutId = null;
+ }, 180);
+ return;
+ }
+
+ startShow();
}
// Update coordinates display
export function updateCoordinatesDisplay(lat, lon, alt = 0) {
- document.getElementById('longitude-value').textContent = lon.toFixed(2) + '°';
- document.getElementById('latitude-value').textContent = lat.toFixed(2) + '°';
- document.getElementById('mouse-coords').textContent =
- `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
+ const longitudeEl = document.getElementById("longitude-value");
+ const latitudeEl = document.getElementById("latitude-value");
+ const mouseCoordsEl = document.getElementById("mouse-coords");
+
+ if (longitudeEl) longitudeEl.textContent = lon.toFixed(2) + "°";
+ if (latitudeEl) latitudeEl.textContent = lat.toFixed(2) + "°";
+ if (mouseCoordsEl) {
+ mouseCoordsEl.textContent = `鼠标: ${lat.toFixed(2)}°, ${lon.toFixed(2)}°`;
+ }
}
// Update zoom display
export function updateZoomDisplay(zoomLevel, distance) {
const percent = Math.round(zoomLevel * 100);
- document.getElementById('zoom-value').textContent = percent + '%';
- document.getElementById('zoom-level').textContent = '缩放: ' + percent + '%';
- const slider = document.getElementById('zoom-slider');
+ const zoomValueEl = document.getElementById("zoom-value");
+ const zoomLevelEl = document.getElementById("zoom-level");
+ const slider = document.getElementById("zoom-slider");
+ const cameraDistanceEl = document.getElementById("camera-distance");
+
+ if (zoomValueEl) zoomValueEl.textContent = percent + "%";
+ if (zoomLevelEl) zoomLevelEl.textContent = "缩放: " + percent + "%";
if (slider) slider.value = zoomLevel;
- document.getElementById('camera-distance').textContent = distance + ' km';
+ if (cameraDistanceEl) cameraDistanceEl.textContent = distance + " km";
}
// Update earth stats
export function updateEarthStats(stats) {
- document.getElementById('cable-count').textContent = stats.cableCount || 0;
- document.getElementById('landing-point-count').textContent = stats.landingPointCount || 0;
- document.getElementById('terrain-status').textContent = stats.terrainOn ? '开启' : '关闭';
- document.getElementById('texture-quality').textContent = stats.textureQuality || '8K 卫星图';
+ const cableCountEl = document.getElementById("cable-count");
+ const landingPointCountEl = document.getElementById("landing-point-count");
+ const bgpAnomalyCountEl = document.getElementById("bgp-anomaly-count");
+ const bgpCollectorCountEl = document.getElementById("bgp-collector-count");
+ const bgpStatusSummaryEl = document.getElementById("bgp-status-summary");
+ const terrainStatusEl = document.getElementById("terrain-status");
+ const textureQualityEl = document.getElementById("texture-quality");
+
+ if (cableCountEl) cableCountEl.textContent = stats.cableCount || 0;
+ if (landingPointCountEl)
+ landingPointCountEl.textContent = stats.landingPointCount || 0;
+ if (bgpAnomalyCountEl)
+ bgpAnomalyCountEl.textContent = stats.bgpAnomalyCount || 0;
+ if (bgpCollectorCountEl)
+ bgpCollectorCountEl.textContent = stats.bgpCollectorCount || 0;
+ if (bgpStatusSummaryEl)
+ bgpStatusSummaryEl.textContent = stats.bgpStatusSummary || "-";
+ if (terrainStatusEl)
+ terrainStatusEl.textContent = stats.terrainOn ? "开启" : "关闭";
+ if (textureQualityEl)
+ textureQualityEl.textContent = stats.textureQuality || "8K 卫星图";
}
// Show/hide loading
export function setLoading(loading) {
- const loadingEl = document.getElementById('loading');
- loadingEl.style.display = loading ? 'block' : 'none';
+ const loadingEl = document.getElementById("loading");
+ if (!loadingEl) return;
+ loadingEl.style.display = loading ? "block" : "none";
+}
+
+export function setLoadingMessage(title, subtitle = "") {
+ const titleEl = document.getElementById("loading-title");
+ const subtitleEl = document.getElementById("loading-subtitle");
+
+ if (titleEl) {
+ titleEl.textContent = title;
+ }
+
+ if (subtitleEl) {
+ subtitleEl.textContent = subtitle;
+ }
}
// Show tooltip
export function showTooltip(x, y, content) {
- const tooltip = document.getElementById('tooltip');
+ const tooltip = document.getElementById("tooltip");
+ if (!tooltip) return;
tooltip.innerHTML = content;
- tooltip.style.left = x + 'px';
- tooltip.style.top = y + 'px';
- tooltip.style.display = 'block';
+ tooltip.style.left = x + "px";
+ tooltip.style.top = y + "px";
+ tooltip.style.display = "block";
}
// Hide tooltip
export function hideTooltip() {
- document.getElementById('tooltip').style.display = 'none';
+ const tooltip = document.getElementById("tooltip");
+ if (tooltip) {
+ tooltip.style.display = "none";
+ }
}
// Show error message
export function showError(message) {
- const errorEl = document.getElementById('error-message');
+ const errorEl = document.getElementById("error-message");
+ if (!errorEl) return;
errorEl.textContent = message;
- errorEl.style.display = 'block';
+ errorEl.style.display = "block";
}
// Hide error message
export function hideError() {
- document.getElementById('error-message').style.display = 'none';
+ const errorEl = document.getElementById("error-message");
+ if (errorEl) {
+ errorEl.style.display = "none";
+ errorEl.textContent = "";
+ }
+}
+
+export function clearUiState() {
+ if (statusTimeoutId) {
+ clearTimeout(statusTimeoutId);
+ statusTimeoutId = null;
+ }
+
+ const statusEl = document.getElementById("status-message");
+ if (statusEl) {
+ statusEl.style.display = "none";
+ statusEl.textContent = "";
+ }
+
+ hideTooltip();
+ hideError();
}
diff --git a/frontend/public/earth/js/utils.js b/frontend/public/earth/js/utils.js
index dcc70ebe..1bd3ee94 100644
--- a/frontend/public/earth/js/utils.js
+++ b/frontend/public/earth/js/utils.js
@@ -1,8 +1,8 @@
// utils.js - Utility functions for coordinate conversion
-import * as THREE from 'three';
+import * as THREE from "three";
-import { CONFIG } from './constants.js';
+import { CONFIG } from "./constants.js";
// Convert latitude/longitude to 3D vector
export function latLonToVector3(lat, lon, radius = CONFIG.earthRadius) {
@@ -18,26 +18,33 @@ export function latLonToVector3(lat, lon, radius = CONFIG.earthRadius) {
// Convert 3D vector to latitude/longitude
export function vector3ToLatLon(vector) {
- const radius = Math.sqrt(vector.x * vector.x + vector.y * vector.y + vector.z * vector.z);
- const lat = 90 - (Math.acos(vector.y / radius) * 180 / Math.PI);
-
- let lon = (Math.atan2(vector.z, -vector.x) * 180 / Math.PI) - 180;
-
+ const radius = Math.sqrt(
+ vector.x * vector.x + vector.y * vector.y + vector.z * vector.z,
+ );
+ const lat = 90 - (Math.acos(vector.y / radius) * 180) / Math.PI;
+
+ let lon = (Math.atan2(vector.z, -vector.x) * 180) / Math.PI - 180;
+
while (lon <= -180) lon += 360;
while (lon > 180) lon -= 360;
return {
lat: parseFloat(lat.toFixed(4)),
lon: parseFloat(lon.toFixed(4)),
- alt: radius - CONFIG.earthRadius
+ alt: radius - CONFIG.earthRadius,
};
}
// Convert screen coordinates to Earth surface 3D coordinates
-export function screenToEarthCoords(clientX, clientY, camera, earth, domElement = document.body) {
- const raycaster = new THREE.Raycaster();
- const mouse = new THREE.Vector2();
-
+export function screenToEarthCoords(
+ clientX,
+ clientY,
+ camera,
+ earth,
+ domElement = document.body,
+ raycaster = new THREE.Raycaster(),
+ mouse = new THREE.Vector2(),
+) {
if (domElement === document.body) {
mouse.x = (clientX / window.innerWidth) * 2 - 1;
mouse.y = -(clientY / window.innerHeight) * 2 + 1;
@@ -60,17 +67,26 @@ export function screenToEarthCoords(clientX, clientY, camera, earth, domElement
}
// Calculate accurate spherical distance between two points (Haversine formula)
-export function calculateDistance(lat1, lon1, lat2, lon2, radius = CONFIG.earthRadius) {
+export function calculateDistance(
+ lat1,
+ lon1,
+ lat2,
+ lon2,
+ radius = CONFIG.earthRadius,
+) {
const toRad = (angle) => (angle * Math.PI) / 180;
-
+
const dLat = toRad(lat2 - lat1);
const dLon = toRad(lon2 - lon1);
-
- const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
- Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
- Math.sin(dLon / 2) * Math.sin(dLon / 2);
-
+
+ const a =
+ Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+ Math.cos(toRad(lat1)) *
+ Math.cos(toRad(lat2)) *
+ Math.sin(dLon / 2) *
+ Math.sin(dLon / 2);
+
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
+
return radius * c;
}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index aeb7a8e2..d4457f0a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import DataSources from './pages/DataSources/DataSources'
import DataList from './pages/DataList/DataList'
import Earth from './pages/Earth/Earth'
import Settings from './pages/Settings/Settings'
+import BGP from './pages/BGP/BGP'
function App() {
const { token } = useAuthStore()
@@ -18,14 +19,15 @@ function App() {
return (
- } />
} />
+ } />
} />
} />
} />
} />
+ } />
} />
- } />
+ } />
)
}
diff --git a/frontend/src/components/AppLayout/AppLayout.tsx b/frontend/src/components/AppLayout/AppLayout.tsx
index 74167315..83fe521e 100644
--- a/frontend/src/components/AppLayout/AppLayout.tsx
+++ b/frontend/src/components/AppLayout/AppLayout.tsx
@@ -6,11 +6,13 @@ import {
UserOutlined,
SettingOutlined,
BarChartOutlined,
+ DeploymentUnitOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined,
} from '@ant-design/icons'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
import { useAuthStore } from '../../stores/auth'
+import packageJson from '../../../package.json'
const { Sider, Content } = Layout
const { Text } = Typography
@@ -21,16 +23,19 @@ interface AppLayoutProps {
function AppLayout({ children }: AppLayoutProps) {
const location = useLocation()
+ const navigate = useNavigate()
const { user, logout } = useAuthStore()
const [collapsed, setCollapsed] = useState(false)
const showBanner = true
+ const appVersion = `v${packageJson.version}`
const menuItems = [
- { key: '/', icon:
, label:
仪表盘 },
- { key: '/datasources', icon:
, label:
数据源 },
- { key: '/data', icon:
, label:
采集数据 },
- { key: '/users', icon:
, label:
用户管理 },
- { key: '/settings', icon:
, label:
系统配置 },
+ { key: '/admin', icon:
, label: '仪表盘' },
+ { key: '/datasources', icon:
, label: '数据源' },
+ { key: '/data', icon:
, label: '采集数据' },
+ { key: '/bgp', icon:
, label: 'BGP观测' },
+ { key: '/users', icon:
, label: '用户管理' },
+ { key: '/settings', icon:
, label: '系统配置' },
]
return (
@@ -64,6 +69,11 @@ function AppLayout({ children }: AppLayoutProps) {
mode="inline"
selectedKeys={[location.pathname]}
items={menuItems}
+ onClick={({ key }) => {
+ if (key !== location.pathname) {
+ navigate(key)
+ }
+ }}
/>
@@ -74,6 +84,10 @@ function AppLayout({ children }: AppLayoutProps) {