display map junction in dreamview (#2793)

modules/dreamview/frontend/src/renderer/map.js

@@ -21,6 +21,7 @@ const colorMapping = {
     CORAL: 0xFF7F50,
     RED: 0xFF6666,
     GREEN: 0x006400,
+    BLUE: 0x30A5FF,
     PURE_WHITE: 0xFFFFFF,
     DEFAULT: 0xC0C0C0
 };
@@ -160,6 +161,20 @@ export default class Map {
         return drewObjects;
     }
 
+    addBorder(borderPolygon, color, coordinates, scene) {
+        const drewObjects = [];
+
+        const border = coordinates.applyOffsetToArray(borderPolygon.polygon.point);
+        border.push(border[0]);
+
+        const mesh = drawSegmentsFromPoints(
+            border, color, 2, 0, true, false, 1.0);
+        scene.add(mesh);
+        drewObjects.push(mesh);
+
+        return drewObjects;
+    }
+
     addZone(zone, color, coordinates, scene) {
         const drewObjects = [];
 
@@ -414,6 +429,12 @@ export default class Map {
                                 newData[kind][i], colorMapping.PURE_WHITE, coordinates, scene)
                         }));
                         break;
+                    case "junction":
+                        this.data[kind].push(Object.assign(newData[kind][i], {
+                            drewObjects: this.addBorder(
+                                newData[kind][i], colorMapping.BLUE, coordinates, scene)
+                        }));
+                        break;
                     case "overlap":
                         this.extractOverlaps(newData['overlap']);
                         break;