map: separate out station paths into separate layers
This commit is contained in:
parent
8220194c29
commit
bd14d1fa56
55
src/map.js
55
src/map.js
@ -43,31 +43,17 @@ class ColorGenerator {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function pathStyle(feature) {
|
function transformGeometry(geometry) {
|
||||||
let styles = [
|
return geometry.transform(new Projection({code: "EPSG:4326"}),
|
||||||
new Style({stroke: new Stroke(
|
tile_layer.getSource().getProjection());
|
||||||
{color: 'hsl(' + feature.getProperties().hue + ', 75%, 50%)', width: 2}
|
|
||||||
)})
|
|
||||||
];
|
|
||||||
|
|
||||||
return styles;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let colorGen;
|
|
||||||
|
|
||||||
function plotPaths(packets) {
|
function plotPaths(packets) {
|
||||||
let vector_layer = new VectorLayer({
|
let path_layers = new LayerGroup({title: "Station Paths"});
|
||||||
title: "Station Paths",
|
map.addLayer(path_layers);
|
||||||
source: new VectorSource(),
|
|
||||||
style: pathStyle
|
|
||||||
});
|
|
||||||
map.addLayer(vector_layer);
|
|
||||||
|
|
||||||
packets
|
let paths = packets
|
||||||
.filter(packet => packet.date > new Date("2018-07-14") && packet.date < new Date("2018-07-15"))
|
.filter(packet => packet.date > new Date("2018-07-14") && packet.date < new Date("2018-07-15"))
|
||||||
// filter by callsign
|
|
||||||
.filter(packet => (packet.from !== undefined) &&
|
|
||||||
(packet.from.toString() === "W1HS-9"))
|
|
||||||
// filter to just positional data
|
// filter to just positional data
|
||||||
.filter(packet => 'data' in packet && 'latitude' in packet.data)
|
.filter(packet => 'data' in packet && 'latitude' in packet.data)
|
||||||
// join into Arrays of points
|
// join into Arrays of points
|
||||||
@ -76,18 +62,25 @@ function plotPaths(packets) {
|
|||||||
acc.get(packet.from.toString()).push([packet.data.longitude,
|
acc.get(packet.from.toString()).push([packet.data.longitude,
|
||||||
packet.data.latitude]);
|
packet.data.latitude]);
|
||||||
return acc;
|
return acc;
|
||||||
}, new Map())
|
}, new Map());
|
||||||
// plot on map
|
|
||||||
.forEach((points, callsign, map) => {
|
|
||||||
colorGen = colorGen || new ColorGenerator(map.size);
|
|
||||||
let pathFeature = new Feature({
|
|
||||||
geometry: new LineString(points),
|
|
||||||
hue: colorGen.get()
|
|
||||||
});
|
|
||||||
|
|
||||||
vector_layer.getSource().addFeature(pathFeature);
|
let colorGen = new ColorGenerator(paths.size);
|
||||||
pathFeature.getGeometry().transform(new Projection({code: "EPSG:4326"}),
|
|
||||||
tile_layer.getSource().getProjection());
|
// plot on map
|
||||||
|
paths.forEach((points, callsign) => {
|
||||||
|
let path_layer = new VectorLayer({
|
||||||
|
title: callsign,
|
||||||
|
source: new VectorSource({features: [
|
||||||
|
new Feature({
|
||||||
|
geometry: transformGeometry(new LineString(points))
|
||||||
|
})
|
||||||
|
]}),
|
||||||
|
style: new Style({
|
||||||
|
stroke: new Stroke(
|
||||||
|
{color: 'hsl(' + colorGen.get() + ', 75%, 50%)', width: 2}
|
||||||
|
)})
|
||||||
|
});
|
||||||
|
path_layers.getLayers().push(path_layer);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user