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

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

@@ -0,0 +1,74 @@
+import { FeatureLike } from 'ol/Feature';
+import { Coordinate } from 'ol/coordinate';
+import { Circle, Point } from 'ol/geom';
+import { Fill, Stroke, Style, Text } from 'ol/style';
+import { ZoneData } from '../type';
+
+const getCircleStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
+  // Base style configuration for each zone type
+  console.log('Type: ', zoneData.type);
+
+  const circleStyles = {
+    warning: {
+      fill: new Fill({ color: 'rgba(250, 206, 104, 0.5)' }), // Yellow with transparency
+      stroke: new Stroke({ color: '#FFC107', width: 2 }),
+      textColor: '#856404',
+    },
+    alarm: {
+      fill: new Fill({ color: 'rgba(220, 53, 69, 0.8)' }), // 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 = circleStyles[zoneData.type] || circleStyles.default;
+
+  // Create styles array - we might need multiple styles for proper rendering
+  const styles: Style[] = [];
+
+  // Main style for Circle geometry (uses fill/stroke directly, not image)
+  const mainStyle = new Style({
+    fill: styleConfig.fill,
+    stroke: styleConfig.stroke,
+  });
+  styles.push(mainStyle);
+
+  // Add text style if message exists
+  if (zoneData.message && zoneData.message.trim()) {
+    const textStyle = new Style({
+      geometry: (feature: FeatureLike) => {
+        // Get the center of the circle for text placement
+        const geometry = feature.getGeometry();
+        if (geometry && geometry.getType() === 'Circle') {
+          // For Circle geometry, get the center and return it as a Point geometry
+          const circle = geometry as Circle;
+          const center: Coordinate = circle.getCenter();
+          return new Point(center);
+        }
+        return geometry;
+      },
+      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,
+        }),
+        textAlign: 'center',
+        textBaseline: 'middle',
+      }),
+    });
+    styles.push(textStyle);
+  }
+
+  // Return single style if no text, or array if text exists
+  return styles.length === 1 ? styles[0] : styles;
+};
+
+export default getCircleStyleFromData;