diff --git a/apps/web/src/pages/dashboard/DashboardPage.tsx b/apps/web/src/pages/dashboard/DashboardPage.tsx index 32e34e8..a80d705 100644 --- a/apps/web/src/pages/dashboard/DashboardPage.tsx +++ b/apps/web/src/pages/dashboard/DashboardPage.tsx @@ -464,10 +464,10 @@ export function DashboardPage() { {baseMap === 'ocean' ? ( - ) : ( + ) : baseMap !== 'osm' ? ( - )} - {baseMap !== 'ocean' && } + ) : null} + {baseMap !== 'ocean' && baseMap !== 'osm' && } {selectedLegacyVessel ? ( setSelectedMmsi(null)} onSelectMmsi={setSelectedMmsi} imo={selectedTarget && selectedTarget.imo > 0 ? selectedTarget.imo : undefined} shipImagePath={selectedTarget?.shipImagePath} shipImageCount={selectedTarget?.shipImageCount} onOpenImageModal={handlePanelOpenImageModal} /> diff --git a/apps/web/src/pages/dashboard/DashboardSidebar.tsx b/apps/web/src/pages/dashboard/DashboardSidebar.tsx index e6cbd8a..44019e5 100644 --- a/apps/web/src/pages/dashboard/DashboardSidebar.tsx +++ b/apps/web/src/pages/dashboard/DashboardSidebar.tsx @@ -157,10 +157,10 @@ export function DashboardSidebar({
+
자유 시점 - setBaseMap(baseMap === 'ocean' ? 'enhanced' : 'ocean')} - title="Ocean 전용 지도 (해양 정보 극대화)" - className="px-2 py-0.5 text-[9px]" - > - Ocean - setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))} @@ -185,6 +177,31 @@ export function DashboardSidebar({ > 3D + + setBaseMap('enhanced')} + title="기본 지도 (MapTiler Enhanced)" + className="px-2 py-0.5 text-[9px]" + > + Base + + setBaseMap('osm')} + title="OSM 기본 래스터 지도" + className="px-2 py-0.5 text-[9px]" + > + OSM + + setBaseMap('ocean')} + title="Ocean 전용 지도 (해양 정보 극대화)" + className="px-2 py-0.5 text-[9px]" + > + Ocean +
} > diff --git a/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts b/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts index b9f3287..7d30a91 100644 --- a/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts +++ b/apps/web/src/widgets/map3d/hooks/useBaseMapToggle.ts @@ -63,6 +63,7 @@ export function useBaseMapToggle( const apply = () => { if (!map.isStyleLoaded()) return; + if (baseMap === 'osm') return; const seaVisibility = 'visible' as const; const seaRegex = /(water|sea|ocean|river|lake|coast|bay)/i; diff --git a/apps/web/src/widgets/map3d/layers/bathymetry.ts b/apps/web/src/widgets/map3d/layers/bathymetry.ts index 0ad3e2e..5bc8904 100644 --- a/apps/web/src/widgets/map3d/layers/bathymetry.ts +++ b/apps/web/src/widgets/map3d/layers/bathymetry.ts @@ -394,6 +394,23 @@ export async function resolveMapStyle(baseMap: BaseMapId, signal: AbortSignal): const { resolveOceanStyle } = await import('../../../features/oceanMap/lib/resolveOceanStyle'); return resolveOceanStyle(signal); } + if (baseMap === 'osm') { + void signal; + return { + version: 8, + name: 'OSM Raster', + glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf', + sources: { + osm: { + type: 'raster', + tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'], + tileSize: 256, + attribution: '© OpenStreetMap contributors', + }, + }, + layers: [{ id: 'osm', type: 'raster', source: 'osm' }], + } satisfies StyleSpecification; + } // 레거시 베이스맵 비활성 — 향후 위성/라이트 테마 등 추가 시 재활용 // if (baseMap === 'legacy') return '/map/styles/carto-dark.json'; void baseMap; diff --git a/apps/web/src/widgets/map3d/types.ts b/apps/web/src/widgets/map3d/types.ts index af087a7..417154d 100644 --- a/apps/web/src/widgets/map3d/types.ts +++ b/apps/web/src/widgets/map3d/types.ts @@ -14,7 +14,7 @@ export type Map3DSettings = { showDensity: boolean; }; -export type BaseMapId = 'enhanced' | 'ocean' | 'legacy'; +export type BaseMapId = 'enhanced' | 'osm' | 'ocean' | 'legacy'; export type MapProjectionId = 'mercator' | 'globe'; export interface MapViewState {