apps/web/src/widgets/map3d/hooks/useNativeMapLayers.ts

@@ -14,7 +14,7 @@
  * 별도 useEffect에서 처리합니다.
  */
 import { useEffect, useRef, type MutableRefObject } from 'react';
-import maplibregl, { type LayerSpecification } from 'maplibre-gl';
+import maplibregl, { type GeoJSONSourceSpecification, type LayerSpecification } from 'maplibre-gl';
 import { ensureGeoJsonSource, ensureLayer, setLayerVisibility, cleanupLayers } from '../lib/layerHelpers';
 import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 
@@ -23,6 +23,8 @@ import { kickRepaint, onMapStyleReady } from '../lib/mapCore';
 export interface NativeSourceConfig {
   id: string;
   data: GeoJSON.GeoJSON | null;
+  /** GeoJSON source 옵션 (tolerance, buffer 등) */
+  options?: Partial<Omit<GeoJSONSourceSpecification, 'type' | 'data'>>;
 }
 
 export interface NativeLayerSpec {
@@ -101,7 +103,7 @@ export function useNativeMapLayers(
         // 3. Source 생성/업데이트
         for (const src of cfg.sources) {
           if (src.data) {
-            ensureGeoJsonSource(map, src.id, src.data);
+            ensureGeoJsonSource(map, src.id, src.data, src.options);
           }
         }
 

apps/web/src/widgets/map3d/hooks/useSubcablesLayer.ts

@@ -33,6 +33,7 @@ const LAYER_SPECS: NativeLayerSpec[] = [
     sourceId: SRC_ID,
     paint: { 'line-color': 'rgba(0,0,0,0)', 'line-width': 14, 'line-opacity': 0 },
     layout: { 'line-cap': 'round', 'line-join': 'round' },
+    minzoom: 3,
   },
   {
     id: CASING_ID,
@@ -44,6 +45,7 @@ const LAYER_SPECS: NativeLayerSpec[] = [
       'line-opacity': CASING_OPACITY_DEFAULT,
     },
     layout: { 'line-cap': 'round', 'line-join': 'round' },
+    minzoom: 3,
   },
   {
     id: LINE_ID,
@@ -68,6 +70,7 @@ const LAYER_SPECS: NativeLayerSpec[] = [
     },
     filter: ['==', ['get', 'id'], ''],
     layout: { 'line-cap': 'round', 'line-join': 'round' },
+    minzoom: 3,
   },
   {
     id: POINTS_ID,
@@ -156,7 +159,7 @@ export function useSubcablesLayer(
     reorderGlobeFeatureLayers,
     {
       sources: [
-        { id: SRC_ID, data: subcableGeo },
+        { id: SRC_ID, data: subcableGeo, options: { tolerance: 1, buffer: 64 } },
         { id: POINTS_SRC_ID, data: pointsGeoJson },
       ],
       layers: LAYER_SPECS,

apps/web/src/widgets/map3d/lib/layerHelpers.ts

@@ -71,6 +71,7 @@ export function ensureGeoJsonSource(
   map: maplibregl.Map,
   sourceId: string,
   data: GeoJSON.GeoJSON,
+  options?: Partial<Omit<GeoJSONSourceSpecification, 'type' | 'data'>>,
 ) {
   const existing = map.getSource(sourceId);
   if (existing) {
@@ -79,6 +80,7 @@ export function ensureGeoJsonSource(
     map.addSource(sourceId, {
       type: 'geojson',
       data,
+      ...options,
     } satisfies GeoJSONSourceSpecification);
   }
 }