bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现地图数据的更新

master
yezhichao 2021-11-30 05:45:19 +08:00
parent bb7975f161
commit 7f4ad4633d
6 changed files with 67 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

4
src/main/app.ts
View File

@ -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])

63
src/render/components/Map copy.vue
View File

@ -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>

110
src/render/components/Map.vue
View File

@ -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>

2
src/render/page/DataMonitorPage.vue
View File

@ -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(() => {

15
yarn.lock
View File

@ -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=