feat(sgw): Add new services and utilities for ship, trip, and photo management

src/pages/Slave/SGW/Map/components/PolygonStyle.tsx

@@ -0,0 +1,56 @@
+import { Fill, Stroke, Style, Text } from 'ol/style';
+import { ZoneData } from '../type';
+
+const getZoneStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
+  // Base style configuration for each zone type
+  const zoneStyles = {
+    warning: {
+      fill: new Fill({ color: 'rgba(255, 193, 7, 0.3)' }), // Yellow with transparency
+      stroke: new Stroke({ color: '#FFC107', width: 2 }),
+      textColor: '#856404',
+    },
+    alarm: {
+      fill: new Fill({ color: 'rgba(220, 53, 69, 0.3)' }), // Red with transparency
+      stroke: new Stroke({ color: '#DC3545', width: 3 }),
+      textColor: '#721C24',
+    },
+    default: {
+      fill: new Fill({ color: 'rgba(108, 117, 125, 0.2)' }), // Gray with transparency
+      stroke: new Stroke({ color: '#6C757D', width: 1 }),
+      textColor: '#383D41',
+    },
+  };
+
+  const styleConfig = zoneStyles[zoneData.type] || zoneStyles.default;
+
+  // Create the base style
+  const baseStyle = {
+    fill: styleConfig.fill,
+    stroke: styleConfig.stroke,
+  };
+
+  // Add text style if message exists
+  if (zoneData.message && zoneData.message.trim()) {
+    return new Style({
+      ...baseStyle,
+      text: new Text({
+        font: 'bold 14px Arial, sans-serif',
+        text: zoneData.message,
+        fill: new Fill({ color: styleConfig.textColor }),
+        stroke: new Stroke({
+          color: 'white',
+          width: 3,
+        }),
+        placement: 'point', // Center text in polygon
+        overflow: true, // Allow text to overflow if needed
+        textAlign: 'center',
+        textBaseline: 'middle',
+      }),
+    });
+  }
+
+  // Return style without text if no message
+  return new Style(baseStyle);
+};
+
+export default getZoneStyleFromData;