Frontline

MapPolygons.js

@@ -1,42 +1,134 @@
+//import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
 import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
 import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
 import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
 import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
+import { getFrontline } from "athena-utils/shape/Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 
 mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
-    const map = new mapboxgl.Map({
-        container: 'map',
-        center: [10, 50],
-        zoom: 5
-    });
+const map = new mapboxgl.Map({
+    container: 'map',
+    center: [10, 50],
+    zoom: 5
+});
 
 map.on('load', () => {
     const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
     const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
     const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
     const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);
+    const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
+
+    var frontlineFeatureCollection = [];
+    var frontlineFeatureCollectionA = [];
+
+    if (frontlineData.style === BOTH_SIDES) {
+         frontlineFeatureCollection = {
+            type: "FeatureCollection",
+            features: [
+                frontlineGeoJSON.bodyLeft,
+                ...frontlineGeoJSON.protrusionsLeft
+            ]
+        };
+        frontlineFeatureCollectionA = {
+        type: "FeatureCollection",
+        features: [
+            frontlineGeoJSON.bodyRight,
+            ...frontlineGeoJSON.protrusionsRight
+        ]
+    };
+    }else {
+        frontlineFeatureCollection = {
+            type: "FeatureCollection",
+            features: [
+                frontlineGeoJSON.body,
+                ...frontlineGeoJSON.protrusions
+            ]
+        };
+    };
+
+    // FRONTLINE
+    map.addSource("frontlinePolygon", {
+        "type": "geojson",
+        "data": frontlineFeatureCollection
+    });
 
-    //ARROW
-    map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
     map.addLayer({
-        "id": "arrow-shape",
+        "id": "frontlinePolygon",
         "type": "fill",
-        "source": "arrow-shape",
+        "source": "frontlinePolygon",
+        "layout": {},
         "paint": {
-            "fill-color": "#ff0000",
-            "fill-opacity": 0.7
+            "fill-color": "blue",
+            "fill-opacity": 0.6
         }
     });
     map.addLayer({
-        "id": "arrow-outline",
+        "id": "frontlinePolygon-outline",
         "type": "line",
-        "source": "arrow-shape",
+        "source": "frontlinePolygon",
         "paint": {
             "line-color": "#000000",
             "line-width": 2,
             "line-opacity": 1
         }
     });
+
+    if (frontlineData.style === BOTH_SIDES) {
+        map.addSource("frontlinePolygonA", {
+            "type": "geojson",
+            "data": frontlineFeatureCollectionA
+        });
+
+        map.addLayer({
+            "id": "frontlinePolygonA",
+            "type": "fill",
+            "source": "frontlinePolygonA",
+            "layout": {},
+            "paint": {
+                "fill-color": "green",
+                "fill-opacity": 0.6
+            }
+        });
+        map.addLayer({
+            "id": "frontlinePolygonA-outline",
+            "type": "line",
+            "source": "frontlinePolygonA",
+            "paint": {
+                "line-color": "#000000",
+                "line-width": 2,
+                "line-opacity": 1
+            }
+        });
+    }
+    // FRONTLINE
+
+    //ARROW
+    if (fullPolygon.length != 0)
+    {
+        map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
+
+        map.addLayer({
+            "id": "arrow-shape",
+            "type": "fill",
+            "source": "arrow-shape",
+            "paint": {
+                "fill-color": "#ff0000",
+                "fill-opacity": 0.7
+            }
+        });
+        map.addLayer({
+            "id": "arrow-outline",
+            "type": "line",
+            "source": "arrow-shape",
+            "paint": {
+                "line-color": "#000000",
+                "line-width": 2,
+                "line-opacity": 1
+            }
+        });
+    }
     //ARROW
 
     // CIRCLE
@@ -161,11 +253,31 @@ const arrowData = {
   };
 //ARROW
 
+//FRONTLINE
+const frontlinePoints = [
+        [10.42076, 40.08804],
+        [25.42076, 80.08804],
+        [65.42076, 75.08804]
+    ];
+const frontlineData = {
+    points: frontlinePoints,
+    splineStep: 0.08,
+    offsetDistance: 20000,
+    style: BOTH_SIDES,
+    };
+const protrusionData = {
+    length: 30000,
+    startSize: 10000,
+    endSize: 1000,
+    gap: 30000,
+};
+//FRONTLINE
+
 //CIRCLE
 const circleCenter = [20, 80];
 const circleRadius = 120;
 const circleDensity = 20;
-//CORCLE
+//CIRCLE
 
 //MAP GRID
 function generateLatLonGrid(step = 10) {