diff --git a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts b/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts index e1f19fd..19b143e 100644 --- a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts +++ b/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts @@ -10,6 +10,7 @@ import type { ZonesGeoJson } from '../../../entities/zone/api/useZones'; import type { MapToggleState } from '../../../features/mapToggles/MapToggles'; import type { BaseMapId, MapProjectionId } from '../types'; import { kickRepaint, onMapStyleReady } from '../lib/mapCore'; +import { guardedSetVisibility } from '../lib/layerHelpers'; export function useZonesLayer( mapRef: MutableRefObject, @@ -48,22 +49,13 @@ export function useZonesLayer( const ensure = () => { if (projectionBusyRef.current) return; - const visibility = overlays.zones ? 'visible' : 'none'; - try { - if (map.getLayer(fillId)) map.setLayoutProperty(fillId, 'visibility', visibility); - } catch { - // ignore - } - try { - if (map.getLayer(lineId)) map.setLayoutProperty(lineId, 'visibility', visibility); - } catch { - // ignore - } - try { - if (map.getLayer(labelId)) map.setLayoutProperty(labelId, 'visibility', visibility); - } catch { - // ignore - } + const visibility: 'visible' | 'none' = overlays.zones ? 'visible' : 'none'; + // globe 모드에서 fill polygon은 tessellation으로 vertex 65535 초과 → 숨김 + // (해안선 디테일 2100+ vertex가 globe에서 100,000+로 폭증하여 노란 막대 아티팩트 발생) + const fillVisibility: 'visible' | 'none' = projection === 'globe' ? 'none' : visibility; + guardedSetVisibility(map, fillId, fillVisibility); + guardedSetVisibility(map, lineId, visibility); + guardedSetVisibility(map, labelId, visibility); if (!zones) return; if (!map.isStyleLoaded()) return; @@ -160,7 +152,7 @@ export function useZonesLayer( ] as unknown as number) : 0.12, }, - layout: { visibility }, + layout: { visibility: fillVisibility }, } as unknown as LayerSpecification, before, );