diff --git a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts b/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts index 19b143e..6215356 100644 --- a/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts +++ b/apps/web/src/widgets/map3d/hooks/useZonesLayer.ts @@ -12,6 +12,33 @@ import type { BaseMapId, MapProjectionId } from '../types'; import { kickRepaint, onMapStyleReady } from '../lib/mapCore'; import { guardedSetVisibility } from '../lib/layerHelpers'; +/** Globe tessellation에서 vertex 65535 초과를 방지하기 위해 좌표 수를 줄임. + * 수역 폴리곤(해안선 디테일 2100+ vertex)이 globe에서 70,000+로 폭증하므로 + * ring당 최대 maxPts개로 서브샘플링. 라벨 centroid에는 영향 없음. */ +function simplifyZonesForGlobe(zones: ZonesGeoJson): ZonesGeoJson { + const MAX_PTS = 60; + const subsample = (ring: GeoJSON.Position[]): GeoJSON.Position[] => { + if (ring.length <= MAX_PTS) return ring; + const step = Math.ceil(ring.length / MAX_PTS); + const out: GeoJSON.Position[] = [ring[0]]; + for (let i = step; i < ring.length - 1; i += step) out.push(ring[i]); + out.push(ring[0]); // close ring + return out; + }; + return { + ...zones, + features: zones.features.map((f) => ({ + ...f, + geometry: { + ...f.geometry, + coordinates: f.geometry.coordinates.map((polygon) => + polygon.map((ring) => subsample(ring)), + ), + }, + })), + }; +} + export function useZonesLayer( mapRef: MutableRefObject, projectionBusyRef: MutableRefObject, @@ -61,11 +88,13 @@ export function useZonesLayer( if (!map.isStyleLoaded()) return; try { + // globe: 서브샘플링된 데이터로 vertex 폭증 방지, mercator: 원본 데이터 + const sourceData = projection === 'globe' ? simplifyZonesForGlobe(zones) : zones; const existing = map.getSource(srcId) as GeoJSONSource | undefined; if (existing) { - existing.setData(zones); + existing.setData(sourceData); } else { - map.addSource(srcId, { type: 'geojson', data: zones } as GeoJSONSourceSpecification); + map.addSource(srcId, { type: 'geojson', data: sourceData } as GeoJSONSourceSpecification); } const style = map.getStyle();