Aaltronav/dougal-software
1
0
Fork 0
mirror of https://gitlab.com/wgp/dougal/software.git synced 2025-12-06 09:27:07 +00:00
Code Issues Packages Projects Releases Activity

Implement planned lines layer

Browse Source
This commit is contained in:
D. Berge
2025-08-06 11:20:09 +02:00
parent 8855da743b
commit 78838cbc41
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
lib/www/client/source/src/views/MapLayersMixin.vue
View File

@@ -3,7 +3,7 @@
// https://deck.gl/docs/developer-guide/performance#supply-attributes-directly // https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
import { Deck, WebMercatorViewport, FlyToInterpolator, CompositeLayer } from '@deck.gl/core'; import { Deck, WebMercatorViewport, FlyToInterpolator, CompositeLayer } from '@deck.gl/core';
import { GeoJsonLayer, LineLayer, BitmapLayer, ScatterplotLayer, ColumnLayer, IconLayer } from '@deck.gl/layers'; import { GeoJsonLayer, LineLayer, PathLayer, BitmapLayer, ScatterplotLayer, ColumnLayer, IconLayer } from '@deck.gl/layers';
import {HeatmapLayer} from '@deck.gl/aggregation-layers'; import {HeatmapLayer} from '@deck.gl/aggregation-layers';
import { TileLayer, MVTLayer } from '@deck.gl/geo-layers'; import { TileLayer, MVTLayer } from '@deck.gl/geo-layers';
@@ -325,21 +325,34 @@ export default {
}, },
plannedLinesLinesLayer (options = {}) { plannedLinesLinesLayer (options = {}) {
return new LineLayer({ return new PathLayer({
id: 'plan', id: 'planl',
data: `/api/project/${this.$route.params.project}/plan`, data: [...this.plannedSequences], // Create new array to trigger Deck.gl update
widthMinPixels: 2, dataTransform: (sequences) => {
widthUnits: "pixels", // Raise the data 10 m above ground so that it's visible over heatmaps, etc.
getSourcePosition: d => d.geometry.coordinates[0], return sequences.map( seq => ({
getTargetPosition: d => d.geometry.coordinates[1], ...seq,
getLineWidth: 8, geometry: {
...seq.geometry,
coordinates: seq.geometry.coordinates.map( pos => [...pos, 10] )
}
}))
},
getPath: d => d.geometry.coordinates,
//getSourcePosition: d => d.geometry.coordinates[0],
//getTargetPosition: d => d.geometry.coordinates[1],
widthUnits: "meters",
widthMinPixels: 4,
getWidth: 25,
//getLineWidth: 10,
getColor: (d) => { getColor: (d) => {
const k = d.azimuth/360*255; const k = (d?.azimuth??0)/360*255;
return [ k, 128, k, 200 ]; return [ k, 128, k, 200 ];
}, },
stroked: true,
pickable: true, pickable: true,
...options ...options
}) });
}, },
rawSequencesLinesLayer (options = {}) { rawSequencesLinesLayer (options = {}) {

6
lib/www/client/source/src/views/MapTooltipsMixin.vue
View File

@@ -22,7 +22,7 @@ export default {
return this.preplotPointsTooltip(args); return this.preplotPointsTooltip(args);
} else if (args?.layer?.id == "ppll" || args?.layer?.id == "psll") { } else if (args?.layer?.id == "ppll" || args?.layer?.id == "psll") {
return this.preplotLinesTooltip(args); return this.preplotLinesTooltip(args);
} else if (args?.layer?.id == "plan") { } else if (args?.layer?.id == "planl") {
return this.plannedLinesTooltip(args); return this.plannedLinesTooltip(args);
} else if (args?.layer?.id == "seqrl" || args?.layer?.id == "seqfl") { } else if (args?.layer?.id == "seqrl" || args?.layer?.id == "seqfl") {
return this.sequenceLinesTooltip(args); return this.sequenceLinesTooltip(args);
@@ -173,13 +173,13 @@ export default {
let html = `Planned sequence <b>${p.sequence}</b></br>\n` + let html = `Planned sequence <b>${p.sequence}</b></br>\n` +
`Line <b>${p.line}</b> – ${p.name}</br>\n` + `Line <b>${p.line}</b> – ${p.name}</br>\n` +
`${p.num_points} Points</br>\n` + `${p.num_points} Points</br>\n` +
`${p.length} m ${p.azimuth.toFixed(2)}°</br>\n` + `${p.length.toFixed(0)} m ${p.azimuth.toFixed(2)}°</br>\n` +
`${duration} @ ${speed.toFixed(1)} kt</br>\n` + `${duration} @ ${speed.toFixed(1)} kt</br>\n` +
`<b>${p.fsp}</b> @ ${(new Date(p.ts0))?.toISOString()}</br>\n` + `<b>${p.fsp}</b> @ ${(new Date(p.ts0))?.toISOString()}</br>\n` +
`<b>${p.lsp}</b> @ ${(new Date(p.ts1))?.toISOString()}`; `<b>${p.lsp}</b> @ ${(new Date(p.ts1))?.toISOString()}`;
if (p.remarks) { if (p.remarks) {
html += `</br>\n<hr/>${p.remarks}`; html += `</br>\n<hr/>${this.$root.markdown(p.remarks)}`;
} }
return {html, style: this.tooltipDefaultStyle}; return {html, style: this.tooltipDefaultStyle};