语图page

src/pages/Page/canvas/ConstellationDiagram/ConstellationDiagram.md

@@ -0,0 +1 @@
+- [卫星星座图绘制原理](https://juejin.cn/post/6844904142448640007)

src/pages/Page/canvas/ConstellationDiagram/index.page.vue

@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 
 import { 星座图示例数据_50点 } from './_星座图示例数据_50.js';
+import './konva.2.4.2.min.js'; // 引入 Konva 库
 import { PlanisphereWidget } from './planispherewidget.js'; // 导入 onMounted
 
 definePage({

src/pages/Page/canvas/ConstellationDiagram/planispherewidget.js

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import './konva.2.4.2.min';
-
 export class PlanisphereWidget {
   constructor(id, options) {
     console.log('PlanisphereWidget  ' + id);
@@ -428,16 +426,16 @@ export class PlanisphereWidget {
     this.destroy();
   }
   // initResize() {
-  //     var _self = this;
-  //     $(this.container).resize(function () {
-  //         var target = this;
-  //         if (target.resizeFlag) {
-  //             clearTimeout(target.resizeFlag);
-  //         }
-  //         target.resizeFlag = setTimeout(function () {
-  //             _self.init();
-  //             target.resizeFlag = null;
-  //         }, 100);
-  //     });
+  //   var _self = this;
+  //   $(this.container).resize(function () {
+  //     var target = this;
+  //     if (target.resizeFlag) {
+  //       clearTimeout(target.resizeFlag);
+  //     }
+  //     target.resizeFlag = setTimeout(function () {
+  //       _self.init();
+  //       target.resizeFlag = null;
+  //     }, 100);
+  //   });
   // }
 }

src/pages/Page/canvas/Spectrogram/Spectrogram.md

@@ -0,0 +1,10 @@
+在卫星领域，语谱图（spectrogram）也发挥着重要的作用，主要应用于以下方面：
+
+- **信号分析与识别:**
+  - **信号干扰检测:** 通过观察语谱图，可以快速发现是否存在对卫星信号的干扰，例如人为的干扰（jamming）或意外的频率冲突。干扰信号通常在语谱图上会显示出异常的能量分布或特定的频率模式。
+  - **信号欺骗检测 (Spoofing):** 在卫星导航领域，语谱图可以帮助识别欺骗信号。欺骗信号可能会伪造卫星的定位信息，语谱图可以显示出与真实信号不同的特征。
+- **雷达应用:**
+  - **空间目标监视 (Space Domain Awareness):** 雷达卫星或地面雷达站利用语谱图分析反射回来的信号，可以识别和跟踪空间中的物体，如废弃的卫星或碎片。通过分析信号的多普勒频移等信息，可以估计目标的速度和距离。
+  - 研究报告提到，通过观察RHESSI卫星的观测数据生成的语谱图，可以进行空间目标监视的微多普勒特征分析。
+- **科学研究:**
+  - **粒子数据分析:** 在某些卫星任务中，例如分析太空中的粒子 flux（流量），可以将粒子能量随时间和空间（例如 McIlwain L 参数）的变化绘制成二维彩色图，这种图也被称为语谱图。虽然这里的语谱图侧重于能量分布而非频率，但可视化的原理是相似的。

src/pages/Page/canvas/Spectrogram/colormapwidget.js

@@ -0,0 +1,153 @@
+// @ts-nocheck
+colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];
+
+colormapwidget.prototype.getGradientColors = function (name) {
+  if (name == 'blue') {
+    return ['#050525', '#000CFF', '#33FFFF', '#F9FFFF'];
+  } else if (name == 'gray') {
+    return ['#050525', '#FBFBFB'];
+  } else if (name == 'cooledit') {
+    return ['#010E19', '#720271', '#D7032C', '#FDBC5F', '#F8FFED'];
+  } else {
+    return ['#050525', '#0000CF', '#00FF20', '#EFFF00', '#FF007C'];
+  }
+};
+// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
+colormapwidget.prototype.colorRgb = function (sColor) {
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  var sColor = sColor.toLowerCase();
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#';
+      for (var i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+      sColor = sColorNew;
+    }
+    //处理六位的颜色值
+    var sColorChange = [];
+    for (var i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+    }
+    return sColorChange;
+  } else {
+    return sColor;
+  }
+};
+
+// 将rgb表示方式转换为hex表示方式
+colormapwidget.prototype.colorHex = function (rgb) {
+  var reg = /(\d{1,3}),(\d{1,3}),(\d{1,3})/;
+  var arr = reg.exec(rgb);
+
+  function hex(x) {
+    return ('0' + parseInt(x).toString(16)).slice(-2);
+  }
+  var _hex = '#' + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
+  return _hex.toUpperCase();
+};
+
+//计算两个颜色的step个阶梯色
+colormapwidget.prototype.gradientColor = function (startColor, endColor, step) {
+  var startRGB = this.colorRgb(startColor); //转换为rgb数组模式
+  var startR = startRGB[0];
+  var startG = startRGB[1];
+  var startB = startRGB[2];
+
+  var endRGB = this.colorRgb(endColor);
+  var endR = endRGB[0];
+  var endG = endRGB[1];
+  var endB = endRGB[2];
+
+  var sR = (endR - startR) / step; //总差值
+  var sG = (endG - startG) / step;
+  var sB = (endB - startB) / step;
+
+  var colorArr = [];
+  for (var i = 0; i < step; i++) {
+    //计算每一步的hex值
+    //var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
+    //colorArr.push(hex);
+    colorArr.push([parseInt(sR * i + startR), parseInt(sG * i + startG), parseInt(sB * i + startB)]);
+  }
+  return colorArr;
+};
+
+colormapwidget.prototype.setDbRange = function (count) {
+  this.count = count;
+  this.mapCount = count;
+  this.calColors();
+};
+
+colormapwidget.prototype.getColors = function () {
+  if (
+    this.name === this.buff_name &&
+    this.gravity === this.buff_gravity &&
+    this.gravity_value === this.buff_gravity_value &&
+    this.count === this.buff_count
+  )
+    return this.buff_colors;
+
+  return this.calColors();
+};
+colormapwidget.prototype.getMapColors = function () {
+  return this.buff_mapCountcolors;
+};
+
+colormapwidget.prototype.calColors = function () {
+  this.buff_name = this.name;
+  this.buff_gravity = this.gravity;
+  this.buff_gravity_value = this.gravity_value;
+  this.buff_count = this.count;
+
+  this.buff_colors = this._calColorsByCount(this.count);
+  this.buff_mapCountcolors = this._calColorsByCount(this.mapCount);
+
+  return this.buff_colors;
+};
+
+colormapwidget.prototype._calColorsByCount = function (count) {
+  //console.log("_calColorsByCount " + count)
+  var colors = this.getGradientColors(this.name);
+  var arr = [];
+  var stepSpan = colors.length - 1;
+  if (!this.gravity) {
+    var step = Math.ceil(count / stepSpan);
+    for (var i = 0; i < stepSpan; i++) {
+      var carr = this.gradientColor(colors[i], colors[i + 1], step);
+      arr = arr.concat(carr);
+    }
+  } else {
+    var pStart = this.gravity_value - 0.2;
+    pStart = pStart < 0 ? 0 : pStart;
+    var pEnd = this.gravity_value + 0.2;
+    pEnd = pEnd > 1 ? 1 : pEnd;
+    pStart = count * pStart;
+    pEnd = count * pEnd;
+
+    for (var i = 0; i < pStart; i++) {
+      arr.push(this.colorRgb(colors[0]));
+    }
+
+    var step = Math.ceil((pEnd - pStart + 1) / stepSpan);
+    for (var i = 0; i < stepSpan; i++) {
+      var carr = this.gradientColor(colors[i], colors[i + 1], step);
+      arr = arr.concat(carr);
+    }
+
+    for (var i = pEnd; i < count; i++) {
+      arr.push(this.colorRgb(colors[colors.length - 1]));
+    }
+  }
+  return arr;
+};
+
+function colormapwidget(option) {
+  this.name = option && option.name ? option.name : 'default';
+  this.gravity = option && option.gravity ? option.gravity : false;
+  this.gravity_value = option && option.gravity_value ? option.gravity_value : 0.5;
+  this.count = option && option.count ? option.count : 200;
+  this.mapCount = option && option.mapCount ? option.mapCount : 200;
+
+  this.getColors();
+}

src/pages/Page/canvas/Spectrogram/index.page.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '语图',
+  },
+});
+</script>
+
+<template>
+  <div>
+    <MD b="1px solid black" p-4 />
+  </div>
+</template>
+
+<style scoped></style>

src/types/shims/md.d.ts

@@ -0,0 +1,8 @@
+declare module '*.md' {
+  import type { ComponentOptions } from 'vue';
+
+  const Component: ComponentOptions;
+  export default Component;
+}
+
+export {};