实现地图数据的更新

package.json

@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "echarts": "^5.2.2",
-    "echarts-gl": "^2.0.8",
     "echarts-liquidfill": "^3.1.0",
     "electron-store": "^8.0.1",
     "nmea": "git+https://e.coding.net/hwasmart/beidou-satellite-data-monitor/node-nmea.git",

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-data-monitor-platform', displays[0])
-    createWindow('satellite-info-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 { MapChart, ScatterChart } from 'echarts/charts';
-import { Map3DChart } from 'echarts-gl/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: [{
+  geo: {
-    type: 'map3D',
     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',
-  //   type: 'scatter',
+    //series坐标系类型
-  //   //series坐标系类型
+    coordinateSystem: 'geo',
-  //   coordinateSystem: 'geo',
+    //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-  //   //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+    symbol: 'pin',
-  //   symbol: 'pin',
+    // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
-  //   // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
+    symbolSize: [40,40],
-  //   symbolSize: [40,40],
+    //气泡字体设置
-  //   //气泡字体设置
+    label: {
-  //   label: {
+      normal: {
-  //       normal: {
+        show: false,//是否显示
-  //           show: false,//是否显示
+        textStyle: {
-  //           textStyle: {
+          color: '#fff',//字体颜色
-  //               color: '#fff',//字体颜色
+          fontSize: 8,//字体大小
-  //               fontSize: 8,//字体大小
+        },
-  //           },
+        //返回气泡数据
-  //           //返回气泡数据
+        formatter (value){
-  //           formatter (value){
+          return value.data.value[2]
-  //               return value.data.value[2]
+        }
-  //           }
+      }
-  //       }
+    },
-  //   },
+    itemStyle: {
-  //   itemStyle: {
+      normal: {
-  //       normal: {
+        color: '#1E90FF', //标志颜色
-  //           color: '#1E90FF', //标志颜色
+      }
-  //       }
+    },
-  //   },
+    // //给区域赋值
-  //   //给区域赋值
+    data: [{}],
-  //   data: {
+    showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
-  //     value: [79.068798, 39.868490]
+    rippleEffect: {//涟漪特效相关配置。
-  //   },
+        brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
-  //   showEffectOn: 'render',//配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
+    },
-  //   rippleEffect: {//涟漪特效相关配置。
+    hoverAnimation: true,//是否开启鼠标 hover 的提示动画效果。
-  //       brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'
+    zlevel: 1//所属图形的 zlevel 值
-  //   },
+  }]
-  //   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(() => {

yarn.lock

@@ -923,11 +923,6 @@ ci-info@^3.2.0:
   resolved "https://registry.npmmirror.com/ci-info/download/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
   integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
-claygl@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.npm.taobao.org/claygl/download/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
-  integrity sha1-em4pAyEFGaw1iEj114Bw7SEWhfM=
-
 cli-boxes@^2.2.1:
   version "2.2.1"
   resolved "https://registry.nlark.com/cli-boxes/download/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
@@ -1398,14 +1393,6 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts-gl@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.nlark.com/echarts-gl/download/echarts-gl-2.0.8.tgz?cache=0&sync_timestamp=1628224311710&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts-gl%2Fdownload%2Fecharts-gl-2.0.8.tgz#81260be0891e5e30c1710311f8b764d65329b03c"
-  integrity sha1-gSYL4IkeXjDBcQMR+Ldk1lMpsDw=
-  dependencies:
-    claygl "^1.2.1"
-    zrender "^5.1.1"
-
 echarts-liquidfill@^3.1.0:
   version "3.1.0"
   resolved "https://registry.nlark.com/echarts-liquidfill/download/echarts-liquidfill-3.1.0.tgz#4ec70f3697382d0404c95fff9f3e8dd85c8377da"
@@ -4136,7 +4123,7 @@ yn@3.1.1:
   resolved "https://registry.nlark.com/yn/download/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha1-HodAGgnXZ8HV6rJqbkwYUYLS61A=
 
-zrender@5.2.1, zrender@^5.1.1:
+zrender@5.2.1:
   version "5.2.1"
   resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
   integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=