From 7f4ad4633d0f872de535d6007f054395c98a9c47 Mon Sep 17 00:00:00 2001 From: yezhichao <651778286@qq.com> Date: Tue, 30 Nov 2021 05:45:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9C=B0=E5=9B=BE=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=9A=84=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/main/app.ts | 4 +- src/render/components/Map copy.vue | 63 ---------------- src/render/components/Map.vue | 110 ++++++++++++++++------------ src/render/page/DataMonitorPage.vue | 2 +- yarn.lock | 15 +--- 6 files changed, 67 insertions(+), 128 deletions(-) delete mode 100644 src/render/components/Map copy.vue diff --git a/package.json b/package.json index f33a423..b4769c8 100644 --- a/package.json +++ b/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", diff --git a/src/main/app.ts b/src/main/app.ts index fc1dae4..c3f5518 100644 --- a/src/main/app.ts +++ b/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]) diff --git a/src/render/components/Map copy.vue b/src/render/components/Map copy.vue deleted file mode 100644 index 1f309ef..0000000 --- a/src/render/components/Map copy.vue +++ /dev/null @@ -1,63 +0,0 @@ - - - \ No newline at end of file diff --git a/src/render/components/Map.vue b/src/render/components/Map.vue index 3eefd0c..ac9eedd 100644 --- a/src/render/components/Map.vue +++ b/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 }) \ No newline at end of file diff --git a/src/render/page/DataMonitorPage.vue b/src/render/page/DataMonitorPage.vue index 7813fa6..bfe97a4 100644 --- a/src/render/page/DataMonitorPage.vue +++ b/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(() => { diff --git a/yarn.lock b/yarn.lock index dd353b1..7ee8ec1 100644 --- a/yarn.lock +++ b/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=