实现地图数据的更新

src/main/app.ts

@@ -27,8 +27,8 @@ function launch() {
   const displays = screen.getAllDisplays()
 
   if (displays.length !== 4) {
-    // createWindow('satellite-data-monitor-platform', displays[0])
-    createWindow('satellite-info-monitor-platform', displays[0])
+    createWindow('satellite-data-monitor-platform', displays[0])
+    // createWindow('satellite-info-monitor-platform', displays[0])
     // createWindow('satellite-signal-monitor-platform', displays[0])
     // createWindow('satellite-state-monitor-platform', displays[0])
     

src/render/components/Map copy.vue

@@ -1,63 +0,0 @@
-<template>
-  <div id="map-container" class="w-h-full"></div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue'
-
-let map 			  = null
-const initMap 	= () => {
-  if (typeof(BMapGL) == 'undefined') {
-    alert('地图api加载失败')
-    return
-  }
-
-  map = new BMapGL.Map('map-container', {
-    style: {
-      styleJson: styleJson2
-    }
-  });
-  map.centerAndZoom(new BMapGL.Point(79.068798, 39.868490), 11);
-  map.enableScrollWheelZoom(true);
-  map.setTilt(50);
-}
-
-const loadPrism = () => {
-  if (!map) return
-
-  const bd = new BMapGL.Boundary();
-  bd.get('图木舒克', function (rs) {
-      const count = rs.boundaries.length;
-      
-      for (let i = 0; i < count; i++) {
-        const path   = [];
-        const str    = rs.boundaries[i].replace(' ', '');
-        const points = str.split(';');
-
-        for (let j = 0; j < points.length; j++) {
-          const lng = points[j].split(',')[0];
-          const lat = points[j].split(',')[1];
-          path.push(new BMapGL.Point(lng, lat));
-        }
-
-        const prism = new BMapGL.Prism(path, 1000, {
-          topFillColor: '#5679ea',
-          topFillOpacity: 0.6,
-          sideFillColor: '#5679ea',
-          sideFillOpacity: 0.9
-        });
-
-        map.addOverlay(prism);
-      }
-  });
-}
-
-onMounted(() => {
-  initMap()
-  loadPrism()
-})
-
-const update = () => console.log
-
-defineExpose({ update })
-</script>

src/render/components/Map.vue

@@ -6,20 +6,38 @@
 import { reactive } from 'vue'
 import { use, registerMap } from "echarts/core";
 import { CanvasRenderer } from 'echarts/renderers'
-import { ScatterChart } from 'echarts/charts';
-import { Map3DChart } from 'echarts-gl/charts';
+import { MapChart, ScatterChart } from 'echarts/charts';
 import VChart from "vue-echarts";
 
 import tmskMap from "../assets/geojson/659003.json";
 
-use([ CanvasRenderer, Map3DChart, ScatterChart ]);
+use([ CanvasRenderer, MapChart, ScatterChart ]);
 
 registerMap('tmsk', tmskMap);
 
 const option = reactive({
-  series: [{
-    type: 'map3D',
+  geo: {
     map: 'tmsk',
+    itemStyle: {
+      normal: {
+        areaColor: '#013C62',
+        shadowColor: '#182f68',
+        shadowOffsetX: 0,
+        shadowOffsetY: 25
+      },
+      emphasis: {
+        areaColor: '#2AB8FF',
+        borderWidth: 0,
+        color: 'green',
+        label: {
+          show: false
+        }
+      }
+    }
+  },
+  series: [{
+    type: 'map',
+    mapType: 'tmsk',
     label: {
       show: true
     },
@@ -28,50 +46,48 @@ const option = reactive({
       borderWidth: 1,
     },
     shading: 'color'
-  },
-  // {
-  //   //设置为分散点
-  //   type: 'scatter',
-  //   //series坐标系类型
-  //   coordinateSystem: 'geo',
-  //   //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-  //   symbol: 'pin',
-  //   // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
-  //   symbolSize: [40,40],
-  //   //气泡字体设置
-  //   label: {
-  //       normal: {
-  //           show: false,//是否显示
-  //           textStyle: {
-  //               color: '#fff',//字体颜色
-  //               fontSize: 8,//字体大小
-  //           },
-  //           //返回气泡数据
-  //           formatter (value){
-  //               return value.data.value[2]
-  //           }
-  //       }
-  //   },
-  //   itemStyle: {
-  //       normal: {
-  //           color: '#1E90FF', //标志颜色
-  //       }
-  //   },
-  //   //给区域赋值
-  //   data: {
-  //     value: [79.068798, 39.868490]
-  //   },
-  //   showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
-  //   rippleEffect: {//涟漪特效相关配置。
-  //       brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
-  //   },
-  //   hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。
-  //   zlevel: 1//所属图形的 zlevel 值
-  // }
-  ]
+  }, {
+    //设置为分散点
+    type: 'scatter',
+    //series坐标系类型
+    coordinateSystem: 'geo',
+    //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+    symbol: 'pin',
+    // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+    symbolSize: [40,40],
+    //气泡字体设置
+    label: {
+      normal: {
+        show: false,//是否显示
+        textStyle: {
+          color: '#fff',//字体颜色
+          fontSize: 8,//字体大小
+        },
+        //返回气泡数据
+        formatter (value){
+          return value.data.value[2]
+        }
+      }
+    },
+    itemStyle: {
+      normal: {
+        color: '#1E90FF', //标志颜色
+      }
+    },
+    // //给区域赋值
+    data: [{}],
+    showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
+    rippleEffect: {//涟漪特效相关配置。
+        brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
+    },
+    hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。
+    zlevel: 1//所属图形的 zlevel 值
+  }]
 });
 
-const update = console.log
+const update = (longitude: number, latitude: number) => {
+  option.series[1].data[0].value = [longitude, latitude]
+}
 
 defineExpose({ update })
 </script>

src/render/page/DataMonitorPage.vue

@@ -52,7 +52,7 @@ const update               = (nmeaStr: string) => {
   clock.value.update(dateTime)
   compass.value.update(variation, variationPole)
   waterLevel.value.update(alt)
-  // map.value.update(lon, lonPole, lat, latPole)
+  map.value.update(longitude, latitude)
 }
 
 onMounted(() => {