Function AmapView

frontend/src/maps.tsx:212–445

({
  config,
  challenge,
  cells = [],
  unlocked = new Set(),
  mine = new Set(),
  currentPosition,
  currentCellId,
  selectedCenter,
  selectedRadiusM,
  rotationDeg = 0,
  onCenterChange,
  onCellClick,
  className,
}: MapProps)

}

function AmapView({
  config,
  challenge,
  cells = [],
  unlocked = new Set(),
  mine = new Set(),
  currentPosition,
  currentCellId,
  selectedCenter,
  selectedRadiusM,
  rotationDeg = 0,
  onCenterChange,
  onCellClick,
  className,
}: MapProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<any>(null);
  const staticOverlaysRef = useRef<any[]>([]);
  const cellPolygonsRef = useRef<Map<string, any>>(new Map());
  const previousCellStyleRef = useRef<CellStyleState | null>(null);
  const positionOverlaysRef = useRef<PositionOverlayState | null>(null);
  const onCenterChangeRef = useRef(onCenterChange);
  const onCellClickRef = useRef(onCellClick);
  const fitKeyRef = useRef("");
  const [error, setError] = useState("");
  const [mapReady, setMapReady] = useState(0);
  const [zoom, setZoom] = useState(challenge ? 15 : 13);

  onCenterChangeRef.current = onCenterChange;
  onCellClickRef.current = onCellClick;

  useEffect(() => {
    if (!config?.has_amap || !containerRef.current || mapRef.current) return;
    loadAmap(config, ["AMap.ControlBar"])
      .then((AMap: any) => {
        const center = selectedCenter
          ? [selectedCenter.lng, selectedCenter.lat]
          : challenge
            ? [challenge.center_lng, challenge.center_lat]
            : [116.4074, 39.9042];
        const map = new AMap.Map(containerRef.current, {
          zoom,
          center,
          rotation: normalizeRotation(rotationDeg),
          rotateEnable: true,
          viewMode: "2D",
          mapStyle: "amap://styles/whitesmoke",
        });
        map.on("zoomchange", () => setZoom(map.getZoom()));
        map.on("click", (event: any) => {
          onCenterChangeRef.current?.({ lat: event.lnglat.lat, lng: event.lnglat.lng });
        });
        mapRef.current = { map, AMap } satisfies AMapContext;
        setMapReady((value) => value + 1);
      })
      .catch((err) => setError(String(err)));
  }, [challenge, config, selectedCenter]);