Update index.html

index.html

@@ -325,6 +325,9 @@
         const scales = [2500, 5000, 10000, 25000, 50000];
         let currentScaleIndex = 1; // 기본 1:5000
         let currentScale = scales[currentScaleIndex];
+        let zoomLevel = 1; // 줌 레벨 (0.5 ~ 4)
+        let offsetX = 0; // 뷰포트 오프셋
+        let offsetY = 0;
         
         // 지형 데이터를 저장할 변수들
         let heightMap = [];
@@ -337,6 +340,9 @@
         let showRivers = true;
         let terrainType = 'mountain';
         let seed = Math.random() * 10000;
+        let isDragging = false;
+        let dragStartX = 0;
+        let dragStartY = 0;
         
         // 개선된 노이즈 함수
         function noise(x, y, scale, octaves, seed) {
@@ -595,6 +601,12 @@
         function drawMap() {
             ctx.clearRect(0, 0, WIDTH, HEIGHT);
             
+            // 줌과 오프셋 적용
+            ctx.save();
+            ctx.translate(WIDTH/2, HEIGHT/2);
+            ctx.scale(zoomLevel, zoomLevel);
+            ctx.translate(-WIDTH/2 + offsetX, -HEIGHT/2 + offsetY);
+            
             const gridSize = heightMap.length;
             const cellWidth = WIDTH / gridSize;
             const cellHeight = HEIGHT / gridSize;
@@ -742,6 +754,7 @@
             });
             
             // 축척 막대 그리기
+            ctx.restore(); // 줌 효과 제거 후 축척 막대 그리기
             drawScaleBar();
         }
         
@@ -840,8 +853,19 @@
         // 마우스 이벤트
         canvas.addEventListener('mousemove', (e) => {
             const rect = canvas.getBoundingClientRect();
-            const x = (e.clientX - rect.left) * (WIDTH / rect.width);
-            const y = (e.clientY - rect.top) * (HEIGHT / rect.height);
+            
+            if (isDragging) {
+                const dx = e.clientX - dragStartX;
+                const dy = e.clientY - dragStartY;
+                offsetX = dx / zoomLevel;
+                offsetY = dy / zoomLevel;
+                drawMap();
+                return;
+            }
+            
+            // 줌을 고려한 마우스 좌표 계산
+            const x = ((e.clientX - rect.left) * (WIDTH / rect.width) - WIDTH/2) / zoomLevel + WIDTH/2 - offsetX;
+            const y = ((e.clientY - rect.top) * (HEIGHT / rect.height) - HEIGHT/2) / zoomLevel + HEIGHT/2 - offsetY;
             
             const gridSize = heightMap.length;
             const gridX = Math.floor(x / (WIDTH / gridSize));
@@ -859,9 +883,11 @@
                     slope = Math.round(Math.sqrt(dx * dx + dy * dy) * 100);
                 }
                 
-                // 실제 거리 계산
-                const realX = (gridX * currentScale / 1000).toFixed(1);
-                const realY = (gridY * currentScale / 1000).toFixed(1);
+                // 실제 거리 계산 (줌 레벨 고려)
+                const mapWidthKm = (WIDTH * currentScale / zoomLevel) / 1000000;
+                const mapHeightKm = (HEIGHT * currentScale / zoomLevel) / 1000000;
+                const realX = (gridX * mapWidthKm / gridSize).toFixed(2);
+                const realY = (gridY * mapHeightKm / gridSize).toFixed(2);
                 
                 document.getElementById('coordinates').textContent = `${gridX}, ${gridY}`;
                 document.getElementById('elevation').textContent = `${elevation}m`;
@@ -875,7 +901,24 @@
             }
         });
         
+        // 드래그 이벤트
+        canvas.addEventListener('mousedown', (e) => {
+            if (e.button === 0) { // 왼쪽 버튼
+                isDragging = true;
+                dragStartX = e.clientX - offsetX * zoomLevel;
+                dragStartY = e.clientY - offsetY * zoomLevel;
+                canvas.style.cursor = 'grabbing';
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            isDragging = false;
+            canvas.style.cursor = 'crosshair';
+        });
+        
         canvas.addEventListener('mouseleave', () => {
+            isDragging = false;
+            canvas.style.cursor = 'crosshair';
             tooltip.style.display = 'none';
             document.getElementById('coordinates').textContent = '-';
             document.getElementById('elevation').textContent = '-';
@@ -883,6 +926,19 @@
             document.getElementById('realDistance').textContent = '-';
         });
         
+        // 마우스 휠 줌
+        canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            const newZoom = zoomLevel * delta;
+            
+            if (newZoom >= 0.5 && newZoom <= 4) {
+                zoomLevel = newZoom;
+                updateScaleInfo();
+                drawMap();
+            }
+        });
+        
         // 컨트롤 함수들
         function generateNewTerrain() {
             generateTerrain();
@@ -919,6 +975,9 @@
             if (currentScaleIndex > 0) {
                 currentScaleIndex--;
                 currentScale = scales[currentScaleIndex];
+                zoomLevel = Math.min(4, zoomLevel * 1.5);
+                offsetX = 0;
+                offsetY = 0;
                 updateScaleInfo();
                 drawMap();
             }
@@ -928,24 +987,28 @@
             if (currentScaleIndex < scales.length - 1) {
                 currentScaleIndex++;
                 currentScale = scales[currentScaleIndex];
+                zoomLevel = Math.max(0.5, zoomLevel / 1.5);
+                offsetX = 0;
+                offsetY = 0;
                 updateScaleInfo();
                 drawMap();
             }
         }
         
         function updateScaleInfo() {
-            document.getElementById('scaleInfo').textContent = `1:${currentScale}`;
+            const effectiveScale = currentScale / zoomLevel;
+            document.getElementById('scaleInfo').textContent = `1:${Math.round(effectiveScale)}`;
             
-            // 지도 전체 크기 계산
-            const widthKm = (WIDTH * currentScale / 1000000).toFixed(1);
-            const heightKm = (HEIGHT * currentScale / 1000000).toFixed(1);
+            // 지도 전체 크기 계산 (줌 고려)
+            const widthKm = (WIDTH * effectiveScale / 1000000).toFixed(1);
+            const heightKm = (HEIGHT * effectiveScale / 1000000).toFixed(1);
             
             // 최대 20km x 15km 제한
             const actualWidthKm = Math.min(20, widthKm);
             const actualHeightKm = Math.min(15, heightKm);
             
             document.getElementById('mapSizeInfo').textContent = 
-                `지도 범위: ${actualWidthKm}km × ${actualHeightKm}km`;
+                `지도 범위: ${actualWidthKm}km × ${actualHeightKm}km (줌: ${(zoomLevel * 100).toFixed(0)}%)`;
         }
         
         function exportMap() {