feat: labels added

EPFL-ENAC · Oct 21, 2024 · 8b7f3c4 · 8b7f3c4
1 parent 122d9ac
commit 8b7f3c4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/frontend/src/components/map/AzimuthView.vue b/frontend/src/components/map/AzimuthView.vue
@@ -19,7 +19,7 @@ import OSM from 'ol/source/OSM';
 import { fromLonLat, get } from 'ol/proj';
 import { Feature } from 'ol';
 import { Point, LineString } from 'ol/geom';
-import { Style, Circle, Fill, Stroke } from 'ol/style';
+import { Style, Circle, Fill, Stroke, Text } from 'ol/style';
 import { Campaign } from 'src/models';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
@@ -106,6 +106,7 @@ function initCampaign(campaign: Campaign) {
 
   const pointStart = new Feature({
     geometry: new Point(fromLonLat([start[1], start[0]], stereographicPole)),
+    name: campaign.acronym,
   });
   const pointEnd = new Feature({
     geometry: new Point(fromLonLat([end[1], end[0]], stereographicPole)),
@@ -150,11 +151,19 @@ function addFeatureLayer(campaign: Campaign, features: [Feature]) {
 
   const vectorLayer = new VectorLayer({
     source: vectorSource,
-    style: new Style({
+    style: (feature) => new Style({
       image: new Circle({
         radius: 6,
         fill: new Fill({ color: campaign.color ? campaign.color : 'red' }),
       }),
+      // Style for the label
+      text: new Text({
+        font: '12px Calibri,sans-serif',
+        fill: new Fill({ color: '#000' }), // Text color
+        stroke: new Stroke({ color: '#fff', width: 2 }), // Outline around text
+        text: feature.get('name'), // Get the label text from the 'name' property
+        offsetY: -15 // Offset to position the label above the point
+      }),
       stroke: new Stroke({
         color: campaign.track?.color ? campaign.track.color : 'orange',
         width: 3,

diff --git a/frontend/src/components/map/GlobeView.vue b/frontend/src/components/map/GlobeView.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 });
 </script>
 <script setup lang="ts">
-import { Viewer, Cartesian3, PolylineOutlineMaterialProperty, Color, defined } from 'cesium';
+import { LabelStyle, Viewer, Cartesian3, PolylineOutlineMaterialProperty, Color, defined, HorizontalOrigin, Cartesian2 } from 'cesium';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 import { Campaign } from 'src/models';
 import { CsvLine } from '../models';
@@ -110,6 +110,19 @@ function initCampaign(campaign: Campaign) {
     },
   });
 
+  globe.value.entities.add({
+    position: Cartesian3.fromDegrees(start[1], start[0]),
+    label: {
+      text: campaign.acronym,
+      outlineColor: Color.BLACK,
+      outlineWidth: 2,
+      font: '20px sans-serif',
+      horizontalOrigin: HorizontalOrigin.CENTER,
+      pixelOffset: new Cartesian2(0.0, -20),
+      style: LabelStyle.FILL_AND_OUTLINE,
+    },
+  });
+
   if (campaign.end_location) {
     globe.value.entities.add({
       name: campaign.acronym,