refactor(robotaxi/geofence): 统一使用polygon实现所有围栏样式。

hejianhao

2026-06-14 3e869b52c28e017f623965fabf7c4fee49eefcda

refactor(robotaxi/geofence): 统一使用polygon实现所有围栏样式。

 src/pages/robotaxi/home/components/home-map-panel.tsx

@@ -18,8 +18,6 @@
  mergedMapMarkers: any[];
  /** 地图多边形围栏。 */
  polygons: any[];
  /** 地图多边形虚线边框围栏。 */
  fencePolylines: any[];
  /** 是否拒绝定位。 */
  isLocationAuthDenied: boolean;
  /** 当前选中城市名称。 */
@@ -103,7 +101,6 @@
      scale={props.mapScale}
      markers={displayMarkers}
      polygons={props.polygons}
      polyline={props.fencePolylines}
      showLocation={!!props.longitude}
      onRegionChange={props.onRegionChange}
      onMarkerTap={props.onMarkerTap}

 src/pages/robotaxi/home/hooks/use-fence-manager.ts

@@ -32,8 +32,6 @@
  hasActiveOrder: boolean;
  /** 设置地图多边形。 */
  setPolygons: (value: any[]) => void;
  /** 设置场站围栏虚线。 */
  setFencePolylines: (value: any[]) => void;
};

type FenceManagerState = {
@@ -56,8 +54,7 @@
    skipNextLocationCenterRef,
    shouldIgnoreRegionChange,
    hasActiveOrder,
    setPolygons,
    setFencePolylines
    setPolygons
  } = deps;

  /**
@@ -67,7 +64,6 @@
    operatingGeofenceListRef.current = [];
    stationGeofenceListRef.current = [];
    setPolygons([]);
    setFencePolylines([]);
  };

  /**
@@ -78,12 +74,11 @@
      ? nextOperatingGeofenceList
      : operatingGeofenceListRef.current;
    const { polygons: operatingPolygons } = formatGeofenceByType(operatingGeofenceSource);
    const { polygons: stationPolygons, fencePolylines: stationFencePolylines } = formatGeofenceByType(
    const { polygons: stationPolygons } = formatGeofenceByType(
      matchedStationGeofence ? [matchedStationGeofence] : []
    );

    setPolygons([...operatingPolygons, ...stationPolygons]);
    setFencePolylines(stationFencePolylines);
  };

  /**

 src/pages/robotaxi/home/hooks/use-map-state.ts

@@ -34,7 +34,6 @@
  const [latitude, setLatitude] = useState<number | null>(null);
  const [markers, setMarkers] = useState<any[]>([]);
  const [polygons, setPolygons] = useState<any[]>([]);
  const [fencePolylines, setFencePolylines] = useState<any[]>([]);
  const [mapScale, setMapScale] = useState(14);
  const [isOperatingArea, setIsOperatingArea] = useState(true);
  const [electronicAreaId, setElectronicAreaId] = useState('');
@@ -148,7 +147,6 @@
    latitude,
    markers,
    polygons,
    fencePolylines,
    mapScale,
    isOperatingArea,
    electronicAreaId,
@@ -159,7 +157,6 @@
    setLatitude,
    setMarkers,
    setPolygons,
    setFencePolylines,
    setMapScale,
    setIsOperatingArea,
    setElectronicAreaId,

 src/pages/robotaxi/home/hooks/use-navigation.ts

@@ -50,12 +50,8 @@
  selectedCity: any;
  /** 地图围栏 */
  polygons: any[];
  /** 场站围栏虚线边框 */
  fencePolylines: any[];
  /** 设置地图围栏 */
  setPolygons: (v: any[]) => void;
  /** 设置场站围栏虚线边框 */
  setFencePolylines: (v: any[]) => void;
  /** 设置定位拒绝状态 */
  setIsLocationAuthDenied: (v: boolean) => void;
  /** 设置地图缩放 */
@@ -315,19 +311,16 @@
      const res: any = await getGeofence({ cityCode: deps.selectedCity.code });
      const geofenceList = filterRenderableGeofence(res).filter((item) => Number(item?.type) === GeofenceType.OPERATING); // 查看运营区域时仅展示运营区
      if (geofenceList.length > 0) {
        const { polygons: nextFormattedPolygons, fencePolylines: nextFencePolylines } = formatGeofenceByType(geofenceList); // 围栏格式统一复用公共实现
        const { polygons: nextFormattedPolygons } = formatGeofenceByType(geofenceList); // 围栏格式统一复用公共实现
        nextPolygons = nextFormattedPolygons;
        deps.setPolygons(nextPolygons);
        deps.setFencePolylines(nextFencePolylines);
      } else {
        nextPolygons = [];
        deps.setPolygons([]);
        deps.setFencePolylines([]);
      }
    } catch (err) {
      nextPolygons = [];
      deps.setPolygons([]);
      deps.setFencePolylines([]);
    }
    if (!nextPolygons || nextPolygons.length === 0) {
      Taro.showToast({ title: '此城市暂未开通运营区域', icon: 'none' });

 src/pages/robotaxi/home/index.tsx

@@ -123,7 +123,6 @@
    latitude,
    markers: siteMarkers,
    polygons,
    fencePolylines,
    mapScale,
    isOperatingArea,
    electronicAreaId,
@@ -132,7 +131,6 @@
    setLongitude,
    setLatitude,
    setPolygons,
    setFencePolylines,
    setMapScale,
    setIsLocationAuthDenied,
    shouldIgnoreRegionChange,
@@ -176,10 +174,9 @@
    syncSelectedCityFromStorage,
    consumeCitySwitchFlag
  } = useCitySwitch();
  const { displayPolygons, displayFencePolylines, handleScaleChange } = useStationScaleFocus({
  const { displayPolygons, handleScaleChange } = useStationScaleFocus({
    currentSite: siteState.currentSite,
    originalPolygons: mapState.polygons,
    originalFencePolylines: mapState.fencePolylines
    originalPolygons: mapState.polygons
  }); // 场站缩放聚焦与围栏展示控制

  const { isMaintain, maintainBounce, hotfixEndText, triggerMaintainBounce } = useHotfixCheck();
@@ -201,8 +198,7 @@
    skipNextLocationCenterRef,
    shouldIgnoreRegionChange,
    hasActiveOrder: Boolean(orderData?.id),
    setPolygons,
    setFencePolylines
    setPolygons
  });
  const { getLocationInfo } = useLocationFlow({
    mapState,
@@ -335,9 +331,7 @@
    recommendedDropoffStation: capsuleSite,
    selectedCity,
    polygons,
    fencePolylines,
    setPolygons,
    setFencePolylines,
    setIsLocationAuthDenied,
    setMapScale,
    getLocationInfo,
@@ -516,7 +510,6 @@
        latitude={latitude}
        mapScale={mapScale}
        mergedMapMarkers={mergedMapMarkers}
        fencePolylines={displayFencePolylines}
        polygons={displayPolygons}
        isLocationAuthDenied={isLocationAuthDenied}
        selectedCityName={selectedCity?.name}

 src/robotaxi/hooks/use-station-scale-focus.ts

@@ -1,13 +1,11 @@
import { useMemo, useState, useCallback } from 'react';
import { GEOFENCE_STATION_FILL_COLOR, GEOFENCE_STATION_STROKE_COLOR } from '../constants/geofence';
import { GEOFENCE_STATION_FILL_COLOR } from '../constants/geofence';

type Deps = {
  /** 当前选中的站点对象 */
  currentSite: any;
  /** 原始的多边形围栏列表 */
  originalPolygons: any[];
  /** 原始的虚线边框列表 */
  originalFencePolylines: any[];
};

/**
@@ -17,7 +15,7 @@
 * 1. 当地图放大操作使得缩放达到 16 级及以上时，去掉运营区围栏蒙层，仅展示场站围栏。
 * 2. 缩放比例小于 16 时，恢复展示所有围栏。
 */
export default function useStationScaleFocus({ currentSite, originalPolygons, originalFencePolylines }: Deps) {
export default function useStationScaleFocus({ currentSite, originalPolygons }: Deps) {
  const isStationSite = useMemo(() => {
    if (!currentSite) return false;
    return !!currentSite.stationId;
@@ -42,17 +40,8 @@
    return originalPolygons.filter(polygon => polygon.fillColor === GEOFENCE_STATION_FILL_COLOR);
  }, [shouldFocusFence, originalPolygons]);

  const displayFencePolylines = useMemo(() => {
    if (!shouldFocusFence) {
      return originalFencePolylines;
    }
    // 放大到 16+ 级时，仅保留场站的虚线边框
    return originalFencePolylines.filter(polyline => polyline.color === GEOFENCE_STATION_STROKE_COLOR);
  }, [shouldFocusFence, originalFencePolylines]);

  return {
    displayPolygons,
    displayFencePolylines,
    isStationSite,
    handleScaleChange
  };

 src/robotaxi/pages/begin-route/hooks/use-smooth-route-motion.ts

@@ -201,13 +201,27 @@
    const points = sanitizeRoutePoints(snapshot.points);
    const routeIndex = buildRouteIndex(points);
    const remainingDistanceMeters = toMeters(snapshot.distance) ?? routeIndex.totalDistance;
    const initialVehiclePoint = resolveVehiclePoint(
      snapshot.points,
      snapshot.vehicleMoveAlongPoints,
      snapshot.eraseVehiclePointMode
    );
    const initialProgressDistance = initialVehiclePoint
      ? Math.max(0, Math.min(
        routeIndex.totalDistance,
        projectPointToRoute(routeIndex, initialVehiclePoint, 0)
      ))
      : 0;
    resetRuntimeState();
    runtimeRef.current = {
      routeIndex,
      baseRemainingDistanceMeters: remainingDistanceMeters,
      displayDistanceMeters: 0,
      targetDistanceMeters: 0,
      erasedDistanceMeters: 0,
      baseRemainingDistanceMeters: Math.min(
        routeIndex.totalDistance,
        remainingDistanceMeters + initialProgressDistance
      ),
      displayDistanceMeters: initialProgressDistance,
      targetDistanceMeters: initialProgressDistance,
      erasedDistanceMeters: initialProgressDistance,
      lastSocketTimestamp: Number.isFinite(snapshot.timestamp) ? Number(snapshot.timestamp) : 0,
      routeReady: points.length > 1,
    };

 src/robotaxi/pages/operating-area/index.tsx

@@ -5,14 +5,23 @@

import { getOpenCity } from '../../api/select-city';
import { getGeofence } from '../../api/home';
import { extractPointsFromPolygons, findMatchedPolygon, getDistance } from '../../../utils/Robotaxi-public-method';
import { extractPointsFromPolygons, findMatchedPolygon } from '../../../utils/Robotaxi-public-method';
import { withRobotaxiWhitelist } from '../../../utils/whitelist';

const DEFAULT_MAP_LONGITUDE = 116.397128;
const DEFAULT_MAP_LATITUDE = 39.916527;
const MAP_INCLUDE_POINTS_PADDING = [10, 10, 10, 10];
const POLYGON_STROKE_COLOR = '#A1B1FF';
const SELECTED_POLYGON_FILL_COLOR = '#6d7fd933';
const UNSELECTED_POLYGON_FILL_COLOR = '#6d7fd91a';
const POLYGON_STROKE_WIDTH = 2;
const SELECTED_POLYGON_DASH_ARRAY = [0, 0];
const UNSELECTED_POLYGON_DASH_ARRAY = [10, 10];

function OperatingArea() {
  const [longitude, setLongitude] = useState<number | null>(null);
  const [latitude, setLatitude] = useState<number | null>(null);
  const [polygons, setPolygons] = useState<any[]>([]);
  const [polylines, setPolylines] = useState<any[]>([]);
  const [cityList, setCityList] = useState<any[]>([]);
  const [selectedCityCode, setSelectedCityCode] = useState<string>('');
  const [rawGeofenceData, setRawGeofenceData] = useState<any[]>([]);
@@ -48,8 +57,7 @@
    return geofenceList.map((item, index) => ({
      ...item,
      mapPolygonId: index + 1,
      polygonPoints: buildPolygonPoints(item.points),
      polylinePoints: buildPolylinePoints(item.points)
      polygonPoints: buildPolygonPoints(item.points)
    }));
  };

@@ -60,14 +68,6 @@
    }));
  };

  const buildPolylinePoints = (points: any[] = []) => {
    const polygonPoints = buildPolygonPoints(points);
    if (polygonPoints.length === 0) {
      return [];
    }
    return [...polygonPoints, polygonPoints[0]];
  };

  const updatePolygonsStyle = (geofenceList: any[], selectedId: number | null) => {
    if (!geofenceList || !Array.isArray(geofenceList)) {
      return [];
@@ -76,32 +76,13 @@
      const isSelected = item.mapPolygonId === selectedId;
      return {
        points: item.polygonPoints || [],
        strokeWidth: 0,
        strokeColor: 'rgba(0, 0, 0, 0)',
        fillColor: isSelected ? '#6d7fd933' : '#6d7fd91a',
        strokeWidth: POLYGON_STROKE_WIDTH,
        strokeColor: POLYGON_STROKE_COLOR,
        fillColor: isSelected ? SELECTED_POLYGON_FILL_COLOR : UNSELECTED_POLYGON_FILL_COLOR,
        dashArray: isSelected ? SELECTED_POLYGON_DASH_ARRAY : UNSELECTED_POLYGON_DASH_ARRAY,
        zIndex: 1,
        id: item.mapPolygonId
      }
    });
  };

  const updatePolylineStyle = (geofenceList: any[], selectedId: number | null) => {
    if (!geofenceList || !Array.isArray(geofenceList)) {
      return [];
    }
    return geofenceList.map((item, index) => {
      const isSelected = item.mapPolygonId === selectedId;
      return {
        points: item.polylinePoints || [],
        color: '#A1B1FF',
        width: 2,
        dottedLine: !isSelected,
        arrowLine: false,
        borderColor: '#A1B1FF',
        borderWidth: 0,
        zIndex: isSelected ? 3 : 2,
        id: Number(item.mapPolygonId ?? index + 1)
      };
    });
  };

@@ -115,7 +96,6 @@
      setOperatingTimeInfo(targetPolygon);
    }
    setPolygons(updatePolygonsStyle(geofenceList, polygonId));
    setPolylines(updatePolylineStyle(geofenceList, polygonId));
  };

  /**
@@ -145,7 +125,6 @@
        }
        const newPolygons = updatePolygonsStyle(normalizedGeofenceData, firstPolygonId);
        setPolygons(newPolygons);
        setPolylines(updatePolylineStyle(normalizedGeofenceData, firstPolygonId));

        if (normalizedGeofenceData.length > 0 && normalizedGeofenceData[0]?.points?.length > 0) {
          const firstPoint = normalizedGeofenceData[0].points[0];
@@ -160,7 +139,7 @@
            setTimeout(() => {
              mapCtx.includePoints({
                points: points,
                padding: [10, 10, 10, 10]
                padding: MAP_INCLUDE_POINTS_PADDING
              });
            }, 500);
          }
@@ -168,7 +147,6 @@
      } else {
        setRawGeofenceData([]);
        setPolygons([]);
        setPolylines([]);
        setSelectedPolygonId(null);
        setOperatingTimeInfo(null);
      }
@@ -176,7 +154,6 @@
      console.error('获取电子围栏失败', err);
      setRawGeofenceData([]);
      setPolygons([]);
      setPolylines([]);
      setSelectedPolygonId(null);
      setOperatingTimeInfo(null);
    });
@@ -231,7 +208,7 @@
    if (points.length > 0) {
      mapCtx.includePoints({
        points,
        padding: [10, 10, 10, 10]
        padding: MAP_INCLUDE_POINTS_PADDING
      });
    }
  };
@@ -292,11 +269,10 @@
      <Map
        id="map"
        className="map"
        longitude={longitude || 116.397128}
        latitude={latitude || 39.916527}
        longitude={longitude || DEFAULT_MAP_LONGITUDE}
        latitude={latitude || DEFAULT_MAP_LATITUDE}
        // scale={30}
        polygons={polygons}
        polyline={polylines}
        showLocation={false}
        style={{ width: '100%', height: '65%' }}
        onPolygonTap={handlePolygonTap}

 src/robotaxi/pages/select-map-site/hooks/use-select-map-site-state.ts

@@ -30,7 +30,6 @@
  const [showTipPopup, setShowTipPopup] = useState(false); // 提示弹窗是否显示
  const [tipType, setTipType] = useState(''); // 提示类型 1:上下车点近 2：距上车点远
  const [polygons, setPolygons] = useState<any[]>([]); // 地图围栏
  const [fencePolylines, setFencePolylines] = useState<any[]>([]); // 围栏虚线边框
  const [isOperatingArea, setIsOperatingArea] = useState(false); // 是否在运营区域内
  const [nearbySites, setNearbySites] = useState<any[]>([]); // 附近站点列表
  const [distanceConfig, setDistanceConfig] = useState<any>({}); // 距离限制配置
@@ -55,8 +54,8 @@
  const router = Taro.useRouter(); // 路由实例

  const mapPolylines = useMemo(() => {
    return [...fencePolylines, ...polyline];
  }, [fencePolylines, polyline]); // 地图折线集合（围栏边框 + 步行线）
    return polyline;
  }, [polyline]); // 地图折线集合（仅步行路线）

  return {
    showCustomerService,
@@ -89,8 +88,6 @@
    setTipType,
    polygons,
    setPolygons,
    fencePolylines,
    setFencePolylines,
    isOperatingArea,
    setIsOperatingArea,
    nearbySites,

 src/robotaxi/pages/select-map-site/hooks/use-select-map-site.ts

@@ -288,7 +288,7 @@
   */
  const renderableGeofenceList = useMemo(() => {
    return filterRenderableGeofence(state.geofenceListRef.current || []);
  }, [state.fencePolylines, state.polygons]);
  }, [state.polygons]);

  /**
   * 同运营区围栏集合，保持原始蓝色/场站色展示。
@@ -315,7 +315,7 @@
   */
  const selectableGeofenceDisplay = useMemo(() => {
    if (selectableGeofenceList.length === 0) {
      return { polygons: [], fencePolylines: [] };
      return { polygons: [] };
    }
    return formatGeofenceByType(selectableGeofenceList);
  }, [selectableGeofenceList]);
@@ -342,28 +342,6 @@
    selectableGeofenceDisplay.polygons,
    state.polygons
  ]);

  /**
   * 围栏边框展示：禁用态边框改由 polygon 自身虚线能力承载，这里仅保留同运营区原始折线。
   */
  const displayFencePolylines = useMemo(() => {
    if (!referenceElectronicAreaId || renderableGeofenceList.length === 0) {
      return state.fencePolylines;
    }
    return selectableGeofenceDisplay.fencePolylines;
  }, [
    referenceElectronicAreaId,
    renderableGeofenceList.length,
    selectableGeofenceDisplay.fencePolylines,
    state.fencePolylines
  ]);

  /**
   * 地图最终折线集合：跨运营区灰显后的围栏边框 + 步行路线。
   */
  const displayMapPolylines = useMemo(() => {
    return [...displayFencePolylines, ...state.polyline];
  }, [displayFencePolylines, state.polyline]);

  /**
   * 当前可选运营区围栏集合，用于“查看运营区域”回视图。
@@ -832,19 +810,13 @@
      getGeofence({ cityCode: selectedCity.code }).then((res: any) => {
        if (res && Array.isArray(res)) {
          const renderableGeofenceList = filterRenderableGeofence(res);
          const stationGeofenceList = renderableGeofenceList.filter((item) => Number(item?.type) === GeofenceType.STATION);
          const { polygons: newPolygons, fencePolylines: nextFencePolylines } = formatGeofenceByType(renderableGeofenceList);
          const { polygons: newPolygons } = formatGeofenceByType(renderableGeofenceList);
          state.geofenceListRef.current = renderableGeofenceList;
          state.stationMetaMapRef.current = buildStationMetaMap(renderableGeofenceList);
          state.setPolygons(newPolygons.map((polygon: any, index: number) => ({
            ...polygon,
            electronicAreaId: String(renderableGeofenceList[index]?.electronicAreaId || ''),
            geofenceType: Number(renderableGeofenceList[index]?.type || 0)
          })));
          state.setFencePolylines(nextFencePolylines.map((polyline: any, index: number) => ({
            ...polyline,
            electronicAreaId: String(stationGeofenceList[index]?.electronicAreaId || ''),
            geofenceType: Number(stationGeofenceList[index]?.type || 0)
          })));
          if (!hasCachedSite && renderableGeofenceList.length > 0 && renderableGeofenceList[0]?.points?.length > 0) {
            const firstPoint = renderableGeofenceList[0].points[0];
@@ -868,7 +840,6 @@
          state.geofenceListRef.current = [];
          state.stationMetaMapRef.current = {};
          state.setPolygons([]);
          state.setFencePolylines([]);
          if (!hasCachedSite) {
            getLocationInfo();
          }
@@ -878,7 +849,6 @@
        state.geofenceListRef.current = [];
        state.stationMetaMapRef.current = {};
        state.setPolygons([]);
        state.setFencePolylines([]);
        if (!hasCachedSite) {
          getLocationInfo();
        }
@@ -972,7 +942,7 @@
    latitude: state.latitude,
    mapScale: state.mapScale,
    markers: state.markers,
    mapPolylines: displayMapPolylines,
    mapPolylines: state.mapPolylines,
    polygons: displayPolygons,
    handleRegionChange,
    handleMarkerTap,

 src/robotaxi/pages/select-map-site/index.tsx

@@ -21,10 +21,9 @@
    onScaleChange: (scale) => handleScaleChangeRef.current?.(scale)
  });

  const { displayPolygons, displayFencePolylines, handleScaleChange } = useStationScaleFocus({
  const { displayPolygons, handleScaleChange } = useStationScaleFocus({
    currentSite: selectMapSite.selectedSite,
    originalPolygons: selectMapSite.polygons,
    originalFencePolylines: selectMapSite.mapPolylines
    originalPolygons: selectMapSite.polygons
  }); // 场站缩放聚焦与围栏展示控制

  useEffect(() => {
@@ -52,7 +51,7 @@
      latitude={selectMapSite.latitude}
      mapScale={selectMapSite.mapScale}
      markers={selectMapSite.markers}
      mapPolylines={displayFencePolylines}
      mapPolylines={selectMapSite.mapPolylines}
      polygons={displayPolygons}
      handleRegionChange={selectMapSite.handleRegionChange}
      handleMarkerTap={selectMapSite.handleMarkerTap}

 src/utils/Robotaxi-public-method.ts

@@ -566,6 +566,8 @@
  return geofenceList.filter((item) => [GEOFENCE_TYPE_OPERATING, GEOFENCE_TYPE_STATION].includes(Number(item?.type)));
};

const GEOFENCE_STATION_DASH_ARRAY = [10, 10] as [number, number];

/**
 * 格式化电子围栏面覆盖物，场站围栏使用独立配色以便和运营区区分。
 */
@@ -580,9 +582,10 @@
        latitude: p.lat,
        longitude: p.lng
      })),
      strokeWidth: type === GEOFENCE_TYPE_STATION ? 1 : 2,
      strokeWidth: 2,
      strokeColor: type === GEOFENCE_TYPE_STATION ? GEOFENCE_STATION_STROKE_COLOR : '#A1B1FF',
      fillColor: type === GEOFENCE_TYPE_STATION ? GEOFENCE_STATION_FILL_COLOR : '#6d7fd933',
      dashArray: type === GEOFENCE_TYPE_STATION ? GEOFENCE_STATION_DASH_ARRAY : [0, 0],
      zIndex: 1
    }
  });