adam/aprsNotifyJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP: Almost all functionality of Map rewritten

Browse Source
This commit is contained in:
Adam Goldsmith 2019-07-15 20:13:04 -04:00
parent 87b8f9e9ba
commit d4826c540c
1 changed files with 142 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/Map.vue
View File

@ -8,21 +8,26 @@
<vl-layer-vector v-for="(gpxURL, name) in routes" :key="name">
<vl-source-vector :url="gpxURL" :format-factory="gpxFormatFactory">
</vl-source-vector>
</vl-layer-vector>
<vl-style-box>
<vl-style-stroke color="hsl(200, 90%, 30%)" :width="5">
</vl-style-stroke>
</vl-style-box>
</vl-layer-vector>
</vl-layer-group>
<!-- Station Paths -->
<vl-layer-group>
<vl-layer-group
v-for="(packets, callsign, idx) in paths"
v-for="(packets, callsign, idx) in stationPaths"
:key="callsign"
>
<!--Paths -->
<vl-layer-vector>
<vl-source-vector>
<vl-feature>
<vl-geom-line-string :coordinates="packetsToPoints(packets)">
<vl-geom-line-string
:coordinates="packetsToStationPathPoints(packets)"
>
</vl-geom-line-string>
</vl-feature>
</vl-source-vector>
@ -36,7 +41,9 @@
<vl-layer-vector>
<vl-source-vector>
<vl-feature>
<vl-geom-multi-point :coordinates="packetsToPoints(packets)">
<vl-geom-multi-point
:coordinates="packetsToStationPathPoints(packets)"
>
</vl-geom-multi-point>
</vl-feature>
</vl-source-vector>
@ -49,6 +56,49 @@
</vl-layer-vector>
</vl-layer-group>
</vl-layer-group>
<!-- Digipeater locations -->
<vl-layer-vector>
<vl-source-vector>
<vl-feature v-for="(position, callsign) in digiPos" :key="callsign">
<vl-geom-point :coordinates="position"> </vl-geom-point>
<vl-style-box>
<vl-style-circle>
<vl-style-fill :color="digiColors[callsign].hex()">
</vl-style-fill
></vl-style-circle>
<vl-style-text :text="callsign" :offsetY="12"> </vl-style-text>
</vl-style-box>
</vl-feature>
</vl-source-vector>
</vl-layer-vector>
<!-- Packet Paths -->
<vl-layer-group>
<vl-layer-group
v-for="(pkts, callsign) in stationPaths"
:key="callsign"
>
<!--Paths -->
<vl-layer-vector render-mode="image">
<vl-source-vector>
<template v-for="packet in pkts">
<vl-feature
v-for="[coords, digi] in packetToPacketPathPoints(packet)"
:key="digi"
>
<vl-geom-line-string :coordinates="coords">
</vl-geom-line-string>
<vl-style-box>
<vl-style-stroke :color="colorForDigi(digi)">
</vl-style-stroke>
</vl-style-box>
</vl-feature>
</template>
</vl-source-vector>
</vl-layer-vector>
</vl-layer-group>
</vl-layer-group>
</vl-view>
</vl-map>
</template>
@ -98,16 +148,60 @@ export default {
return new GPX(options);
},
packetsToPoints(packets) {
packetsToStationPathPoints(packets) {
return packets.map(packet => [
packet.data.longitude,
packet.data.latitude
]);
},
packetToPacketPathPoints(packet) {
return this.pathToString(packet.via).map((hop, index, hops) => {
if (this.digiPos[hop] === undefined) {
console.log(hop);
}
// first point in path is originating station
let previous =
index === 0
? [packet.data.longitude, packet.data.latitude]
: this.digiPos[hops[index - 1]] || [0, 0];
return [[previous, this.digiPos[hop] || [0, 0]], hop];
});
},
pathToString(path) {
return path
.filter(
station => !station.call.match(/WIDE[12]|qA?|UV[123]|.*\*$|UNCAN/)
)
.map(station =>
station
.toString()
.trim()
.replace(/\*$/, "")
);
},
groupByCall(acc, packet) {
let callsign = packet.from.toString().trim();
if (!(callsign in acc)) acc[callsign] = [];
acc[callsign].push(packet);
return acc;
},
colorForDigi(digi) {
if (digi in this.digiColors) {
return this.digiColors[digi].hex();
} else {
return "black";
}
}
},
computed: {
paths() {
stationPaths() {
return (
this.packets
.filter(
@ -117,22 +211,55 @@ export default {
)
// filter to just positional data
.filter(packet => "data" in packet && "latitude" in packet.data)
// join into Arrays of points
.reduce((acc, packet) => {
let callsign = packet.from.toString().trim();
if (!(callsign in acc)) acc[callsign] = [];
acc[callsign].push(packet);
return acc;
}, {})
// group by callsign
.reduce(this.groupByCall, {})
);
},
digis() {
let digiCalls = new Set(
this.packets
.map(packet => this.pathToString(packet.via))
.reduce((acc, stations) => acc.concat(stations))
);
return (
this.packets
// filter to digis
.filter(packet => digiCalls.has(packet.from.toString().trim()))
// filter to just positional data
.filter(packet => "data" in packet && "latitude" in packet.data)
// group by call
.reduce(this.groupByCall, {})
);
},
digiPos() {
return Object.entries(this.digis).reduce((acc, [digi, packets]) => {
let lastPacket = packets[packets.length - 1];
acc[digi] = [lastPacket.data.longitude, lastPacket.data.latitude];
return acc;
}, {});
},
stationColors() {
return distinctColors({
count: Object.keys(this.paths).length,
count: Object.keys(this.stationPaths).length,
lightMin: 20,
lightMax: 80
});
},
digiColors() {
let colors = distinctColors({
count: Object.keys(this.digis).length,
lightMin: 20,
lightMax: 80
});
return Object.keys(this.digis).reduce((acc, callsign, index) => {
acc[callsign] = colors[index];
return acc;
}, {});
}
}
};