From 7912fd5f1a7a52783ba6f663437e915d332d96a7 Mon Sep 17 00:00:00 2001 From: panaaj <38519157+panaaj@users.noreply.github.com> Date: Sat, 22 Jun 2024 14:32:50 +0930 Subject: [PATCH] Use AIS shiptype to format AIS vessel display. (#162, #164) --- src/app/modules/map/mapconfig.ts | 145 +++++++++++++++++- .../resources/layer-skvessels.component.ts | 19 ++- .../modules/skresources/resource-dialogs.ts | 7 +- src/assets/help/index.html | 38 ++++- src/assets/img/ais_cargo.png | Bin 0 -> 286 bytes src/assets/img/ais_inactive.png | Bin 473 -> 249 bytes src/assets/img/ais_passenger.png | Bin 0 -> 249 bytes src/assets/img/ais_special.png | Bin 0 -> 237 bytes src/assets/img/ais_tanker.png | Bin 0 -> 269 bytes 9 files changed, 203 insertions(+), 6 deletions(-) create mode 100644 src/assets/img/ais_cargo.png create mode 100644 src/assets/img/ais_passenger.png create mode 100644 src/assets/img/ais_special.png create mode 100644 src/assets/img/ais_tanker.png diff --git a/src/app/modules/map/mapconfig.ts b/src/app/modules/map/mapconfig.ts index db0524b2..0e87943a 100644 --- a/src/app/modules/map/mapconfig.ts +++ b/src/app/modules/map/mapconfig.ts @@ -318,7 +318,150 @@ export const aisVesselStyles = { text: '', offsetY: -12 }) - }) + }), + // vessel state + moored: new Style({ + // moored state + image: new Circle({ + radius: 5, + stroke: new Stroke({ + width: 2, + color: 'white' + }), + fill: new Fill({ + color: '#FF00FF' + }) + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }), + // vessel type & state + 50: { + // special + default: new Style({ + image: new Icon({ + src: './assets/img/ais_special.png', + rotateWithView: true, + rotation: 0 + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }), + moored: new Style({ + // moored state + image: new Circle({ + radius: 5, + stroke: new Stroke({ + width: 2, + color: '#000000' + }), + fill: new Fill({ + color: '#808080' + }) + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }) + }, + 60: { + // passenger + default: new Style({ + image: new Icon({ + src: './assets/img/ais_passenger.png', + rotateWithView: true, + rotation: 0 + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }), + moored: new Style({ + // moored state + image: new Circle({ + radius: 5, + stroke: new Stroke({ + width: 2, + color: '#7F6A00' + }), + fill: new Fill({ + color: '#FFE97F' + }) + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }) + }, + 70: { + // cargo + default: new Style({ + image: new Icon({ + src: './assets/img/ais_cargo.png', + rotateWithView: true, + rotation: 0 + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }), + moored: new Style({ + // moored state + image: new Circle({ + radius: 5, + stroke: new Stroke({ + width: 2, + color: '#267F00' + }), + fill: new Fill({ + color: '#4CFF00' + }) + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }) + }, + 80: { + // tanker + default: new Style({ + image: new Icon({ + src: './assets/img/ais_tanker.png', + rotateWithView: true, + rotation: 0 + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }), + moored: new Style({ + // moored state + image: new Circle({ + radius: 5, + stroke: new Stroke({ + width: 2, + color: '#0026FF' + }), + fill: new Fill({ + color: '#0094FF' + }) + }), + text: new Text({ + text: '', + offsetY: -12 + }) + }) + } }; export const atonStyles = { diff --git a/src/app/modules/map/ol/lib/resources/layer-skvessels.component.ts b/src/app/modules/map/ol/lib/resources/layer-skvessels.component.ts index e9e471d7..b68aa51d 100644 --- a/src/app/modules/map/ol/lib/resources/layer-skvessels.component.ts +++ b/src/app/modules/map/ol/lib/resources/layer-skvessels.component.ts @@ -338,12 +338,13 @@ export class SKVesselsLayerComponent implements OnInit, OnDestroy, OnChanges { } // build target style - buildTargetStyle(id: string, item, setStale = false): Style { + buildTargetStyle(id: string, item: SKVessel, setStale = false): Style { let s: Style; const lbl = item.name ?? item.callsign ?? item.mmsi ?? ''; // ** stale check time ref const now = new Date().valueOf(); + const st = item.type.id ? Math.floor(item.type.id / 10) * 10 : -1; if (typeof this.targetStyles !== 'undefined') { if (id === this.focusId && this.targetStyles.focus) { s = this.targetStyles.focus; @@ -354,10 +355,24 @@ export class SKVesselsLayerComponent implements OnInit, OnDestroy, OnChanges { ) { // stale s = this.targetStyles.inactive; + } else if (item.type && this.targetStyles[st]) { + // ship type & state + if (item.state && this.targetStyles[st][item.state]) { + s = this.targetStyles[st][item.state]; + } else { + s = this.targetStyles[st]['default']; + } } else if (item.buddy && this.targetStyles.buddy) { + // buddy s = this.targetStyles.buddy; } else { - s = this.targetStyles.default; + // all others + if (item.state && this.targetStyles[item.state]) { + // state only + s = this.targetStyles[item.state]; + } else { + s = this.targetStyles.default; + } } } else if (this.layerProperties && this.layerProperties.style) { s = this.layerProperties.style; diff --git a/src/app/modules/skresources/resource-dialogs.ts b/src/app/modules/skresources/resource-dialogs.ts index 70ad019d..f79d5ac1 100644 --- a/src/app/modules/skresources/resource-dialogs.ts +++ b/src/app/modules/skresources/resource-dialogs.ts @@ -248,7 +248,12 @@ export class ResourceDialog implements OnInit {