Khởi tạo ban đầu

2025-11-28 16:59:57 +07:00
parent 2911be97b2
commit 4ba46a7df2
131 changed files with 28066 additions and 0 deletions
--- a/components/map/PolygonWithLabel.tsx
+++ b/components/map/PolygonWithLabel.tsx
@@ -0,0 +1,148 @@
+import { ANDROID_PLATFORM } from "@/constants";
+import { usePlatform } from "@/hooks/use-platform";
+import { getPolygonCenter } from "@/utils/polyline";
+import React, { useRef } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { MapMarker, Marker, Polygon } from "react-native-maps";
+
+export interface PolygonWithLabelProps {
+  coordinates: {
+    latitude: number;
+    longitude: number;
+  }[];
+  label?: string;
+  content?: string;
+  fillColor?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  zIndex?: number;
+  zoomLevel?: number;
+}
+
+/**
+ * Component render Polygon kèm Label/Text ở giữa
+ */
+export const PolygonWithLabel: React.FC<PolygonWithLabelProps> = ({
+  coordinates,
+  label,
+  content,
+  fillColor = "rgba(16, 85, 201, 0.6)",
+  strokeColor = "rgba(16, 85, 201, 0.8)",
+  strokeWidth = 2,
+  zIndex = 50,
+  zoomLevel = 10,
+}) => {
+  if (!coordinates || coordinates.length < 3) {
+    return null;
+  }
+  const platform = usePlatform();
+  const markerRef = useRef<MapMarker>(null);
+
+  const centerPoint = getPolygonCenter(coordinates);
+
+  // Tính font size dựa trên zoom level
+  // Zoom càng thấp (xa ra) thì font size càng nhỏ
+  const calculateFontSize = (baseSize: number) => {
+    const baseZoom = 10;
+    // Giảm scale factor để text không quá to khi zoom out
+    const scaleFactor = Math.pow(2, (zoomLevel - baseZoom) * 0.3);
+    return Math.max(baseSize * scaleFactor, 5); // Tối thiểu 5px
+  };
+
+  const labelFontSize = calculateFontSize(12);
+  const contentFontSize = calculateFontSize(10);
+  // console.log("zoom level: ", zoomLevel);
+
+  const paddingScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.2), 0.5);
+  const minWidthScale = Math.max(Math.pow(2, (zoomLevel - 10) * 0.25), 0.9);
+  return (
+    <>
+      <Polygon
+        coordinates={coordinates}
+        fillColor={fillColor}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        zIndex={zIndex}
+      />
+      {label && (
+        <Marker
+          ref={markerRef}
+          coordinate={centerPoint}
+          zIndex={50}
+          tracksViewChanges={platform === ANDROID_PLATFORM ? false : true}
+          anchor={{ x: 0.5, y: 0.5 }}
+          title={platform === ANDROID_PLATFORM ? label : undefined}
+          description={platform === ANDROID_PLATFORM ? content : undefined}
+        >
+          <View style={styles.markerContainer}>
+            <View
+              style={[
+                {
+                  paddingHorizontal: 5 * paddingScale,
+                  paddingVertical: 5 * paddingScale,
+                  minWidth: 80,
+                  maxWidth: 150 * minWidthScale,
+                },
+              ]}
+            >
+              <Text
+                style={[styles.labelText, { fontSize: labelFontSize }]}
+                numberOfLines={2}
+              >
+                {label}
+              </Text>
+              {content && (
+                <Text
+                  style={[
+                    styles.contentText,
+                    { fontSize: contentFontSize, marginTop: 2 * paddingScale },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {content}
+                </Text>
+              )}
+            </View>
+          </View>
+        </Marker>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  labelContainer: {
+    backgroundColor: "rgba(16, 85, 201, 0.95)",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 18,
+    borderWidth: 2,
+    borderColor: "#fff",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.4,
+    shadowRadius: 5,
+    elevation: 8,
+    minWidth: 80,
+    maxWidth: 250,
+  },
+  labelText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold",
+    letterSpacing: 0.3,
+    textAlign: "center",
+  },
+  contentText: {
+    color: "#fff",
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.2,
+    textAlign: "center",
+    opacity: 0.95,
+  },
+});