Spaces:

aiqtech
/

terrain

Running

App Files Files Community

aiqtech commited on 3 days ago

Commit

55df423

verified ·

1 Parent(s): 5377d50

Update index.html

Browse files

Files changed (1) hide show

index.html +601 -19

index.html CHANGED Viewed

@@ -1,19 +1,601 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>디지털 등고선 지형 지도</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 1200px;
+            width: 100%;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 2em;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .map-container {
+            position: relative;
+            margin: 20px auto;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        }
+        canvas {
+            display: block;
+            cursor: crosshair;
+            width: 100%;
+            height: auto;
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin: 20px 0;
+            flex-wrap: wrap;
+        }
+        button {
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        .info-panel {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        .info-item {
+            text-align: center;
+            padding: 10px;
+            background: white;
+            border-radius: 8px;
+            min-width: 120px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .info-label {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .info-value {
+            font-size: 18px;
+            font-weight: bold;
+            color: #333;
+        }
+        .legend {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .legend-color {
+            width: 30px;
+            height: 20px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+        }
+        .tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 14px;
+            pointer-events: none;
+            z-index: 1000;
+            display: none;
+            transition: all 0.2s ease;
+        }
+        select {
+            padding: 10px 15px;
+            border-radius: 8px;
+            border: 2px solid #667eea;
+            background: white;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        select:hover {
+            border-color: #764ba2;
+        }
+        select:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🗺️ 디지털 등고선 지형 지도</h1>
+        <div class="controls">
+            <button onclick="generateNewTerrain()">🏔️ 새로운 지형 생성</button>
+            <button onclick="toggleContours()">📊 등고선 표시/숨기기</button>
+            <button onclick="toggleHeatmap()">🌡️ 히트맵 전환</button>
+            <button onclick="toggle3D()">🎮 3D 뷰 전환</button>
+            <select id="terrainType" onchange="changeTerrainType()">
+                <option value="mountain">⛰️ 산악 지형</option>
+                <option value="valley">🏞️ 계곡 지형</option>
+                <option value="plateau">🏔️ 고원 지형</option>
+                <option value="island">🏝️ 섬 지형</option>
+            </select>
+            <button onclick="exportMap()">💾 지도 저장</button>
+        </div>
+        <div class="map-container">
+            <canvas id="mapCanvas"></canvas>
+            <div class="tooltip" id="tooltip"></div>
+        </div>
+        <div class="info-panel">
+            <div class="info-item">
+                <div class="info-label">좌표</div>
+                <div class="info-value" id="coordinates">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">고도</div>
+                <div class="info-value" id="elevation">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">경사도</div>
+                <div class="info-value" id="slope">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">등고선 간격</div>
+                <div class="info-value">10m</div>
+            </div>
+        </div>
+        <div class="legend">
+            <div class="legend-item">
+                <div class="legend-color" style="background: #0d4f8b;"></div>
+                <span>낮은 고도 (0-200m)</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color" style="background: #61a861;"></div>
+                <span>중간 고도 (200-500m)</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color" style="background: #f5deb3;"></div>
+                <span>높은 고도 (500-800m)</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color" style="background: #8b4513;"></div>
+                <span>최고 고도 (800m+)</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        const canvas = document.getElementById('mapCanvas');
+        const ctx = canvas.getContext('2d');
+        const tooltip = document.getElementById('tooltip');
+        // 캔버스 크기 설정
+        const WIDTH = 800;
+        const HEIGHT = 600;
+        canvas.width = WIDTH;
+        canvas.height = HEIGHT;
+        // 지형 데이터를 저장할 배열
+        let heightMap = [];
+        let showContours = true;
+        let showHeatmap = false;
+        let is3D = false;
+        let terrainType = 'mountain';
+        // 노이즈 함수 (Perlin noise 간단 구현)
+        function noise(x, y, scale, octaves) {
+            let value = 0;
+            let amplitude = 1;
+            let frequency = scale;
+            let maxValue = 0;
+            for (let i = 0; i < octaves; i++) {
+                value += amplitude * simpleNoise(x * frequency, y * frequency);
+                maxValue += amplitude;
+                amplitude *= 0.5;
+                frequency *= 2;
+            }
+            return value / maxValue;
+        }
+        function simpleNoise(x, y) {
+            const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+            return (n - Math.floor(n)) * 2 - 1;
+        }
+        // 지형 생성 함수
+        function generateTerrain() {
+            heightMap = [];
+            const gridSize = 100;
+            for (let y = 0; y < gridSize; y++) {
+                heightMap[y] = [];
+                for (let x = 0; x < gridSize; x++) {
+                    let height = 0;
+                    switch(terrainType) {
+                        case 'mountain':
+                            // 산악 지형
+                            height = noise(x, y, 0.02, 6) * 0.6;
+                            height += noise(x, y, 0.05, 4) * 0.3;
+                            height += noise(x, y, 0.1, 2) * 0.1;
+                            height = Math.pow(Math.abs(height), 1.2) * Math.sign(height);
+                            break;
+                        case 'valley':
+                            // 계곡 지형
+                            const distX = (x - gridSize/2) / gridSize;
+                            const distY = (y - gridSize/2) / gridSize;
+                            const dist = Math.sqrt(distX*distX + distY*distY);
+                            height = noise(x, y, 0.03, 4) * 0.5;
+                            height *= (1 - dist * 0.5);
+                            height -= dist * 0.3;
+                            break;
+                        case 'plateau':
+                            // 고원 지형
+                            height = noise(x, y, 0.02, 3) * 0.3;
+                            if (height > 0.1) height = 0.3 + noise(x, y, 0.05, 2) * 0.1;
+                            break;
+                        case 'island':
+                            // 섬 지형
+                            const centerX = (x - gridSize/2) / gridSize;
+                            const centerY = (y - gridSize/2) / gridSize;
+                            const radius = Math.sqrt(centerX*centerX + centerY*centerY);
+                            height = noise(x, y, 0.03, 5) * 0.6;
+                            height *= Math.max(0, 1 - radius * 2);
+                            break;
+                    }
+                    // 정규화 (0-1 범위)
+                    height = Math.max(0, Math.min(1, (height + 1) / 2));
+                    heightMap[y][x] = height;
+                }
+            }
+        }
+        // 등고선 계산
+        function calculateContours(interval) {
+            const contours = [];
+            const levels = [];
+            for (let level = 0; level <= 1; level += interval) {
+                levels.push(level);
+            }
+            return { contours, levels };
+        }
+        // 지도 그리기
+        function drawMap() {
+            ctx.clearRect(0, 0, WIDTH, HEIGHT);
+            const gridSize = heightMap.length;
+            const cellWidth = WIDTH / gridSize;
+            const cellHeight = HEIGHT / gridSize;
+            // 배경 그리기 (높이맵 또는 히트맵)
+            for (let y = 0; y < gridSize; y++) {
+                for (let x = 0; x < gridSize; x++) {
+                    const height = heightMap[y][x];
+                    if (showHeatmap) {
+                        // 히트맵 색상
+                        const hue = (1 - height) * 240;
+                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
+                    } else {
+                        // 지형 색상
+                        ctx.fillStyle = getTerrainColor(height);
+                    }
+                    if (is3D) {
+                        // 3D 효과
+                        const offset = height * 10;
+                        ctx.fillRect(
+                            x * cellWidth + offset,
+                            y * cellHeight - offset,
+                            cellWidth + 1,
+                            cellHeight + 1
+                        );
+                    } else {
+                        ctx.fillRect(
+                            x * cellWidth,
+                            y * cellHeight,
+                            cellWidth + 1,
+                            cellHeight + 1
+                        );
+                    }
+                }
+            }
+            // 등고선 그리기
+            if (showContours) {
+                ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+                ctx.lineWidth = 1;
+                const contourLevels = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+                for (let level of contourLevels) {
+                    ctx.beginPath();
+                    for (let y = 0; y < gridSize - 1; y++) {
+                        for (let x = 0; x < gridSize - 1; x++) {
+                            const corners = [
+                                heightMap[y][x],
+                                heightMap[y][x + 1],
+                                heightMap[y + 1][x + 1],
+                                heightMap[y + 1][x]
+                            ];
+                            drawContourCell(
+                                x * cellWidth,
+                                y * cellHeight,
+                                cellWidth,
+                                cellHeight,
+                                corners,
+                                level
+                            );
+                        }
+                    }
+                    // 주 등고선은 굵게
+                    if (level % 0.2 === 0) {
+                        ctx.lineWidth = 2;
+                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+                    } else {
+                        ctx.lineWidth = 1;
+                        ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+                    }
+                    ctx.stroke();
+                }
+            }
+            // 그리드 표시
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+            ctx.lineWidth = 0.5;
+            for (let i = 0; i <= gridSize; i += 10) {
+                ctx.beginPath();
+                ctx.moveTo(i * cellWidth, 0);
+                ctx.lineTo(i * cellWidth, HEIGHT);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(0, i * cellHeight);
+                ctx.lineTo(WIDTH, i * cellHeight);
+                ctx.stroke();
+            }
+        }
+        // Marching squares 알고리즘으로 등고선 그리기
+        function drawContourCell(x, y, width, height, corners, level) {
+            let state = 0;
+            if (corners[0] > level) state |= 1;
+            if (corners[1] > level) state |= 2;
+            if (corners[2] > level) state |= 4;
+            if (corners[3] > level) state |= 8;
+            switch(state) {
+                case 1: case 14:
+                    drawLine(x, y + height * interpolate(corners[0], corners[3], level),
+                            x + width * interpolate(corners[0], corners[1], level), y);
+                    break;
+                case 2: case 13:
+                    drawLine(x + width * interpolate(corners[0], corners[1], level), y,
+                            x + width, y + height * interpolate(corners[1], corners[2], level));
+                    break;
+                case 3: case 12:
+                    drawLine(x, y + height * interpolate(corners[0], corners[3], level),
+                            x + width, y + height * interpolate(corners[1], corners[2], level));
+                    break;
+                case 4: case 11:
+                    drawLine(x + width, y + height * interpolate(corners[1], corners[2], level),
+                            x + width * interpolate(corners[3], corners[2], level), y + height);
+                    break;
+                case 5:
+                    drawLine(x, y + height * interpolate(corners[0], corners[3], level),
+                            x + width * interpolate(corners[0], corners[1], level), y);
+                    drawLine(x + width, y + height * interpolate(corners[1], corners[2], level),
+                            x + width * interpolate(corners[3], corners[2], level), y + height);
+                    break;
+                case 6: case 9:
+                    drawLine(x + width * interpolate(corners[0], corners[1], level), y,
+                            x + width * interpolate(corners[3], corners[2], level), y + height);
+                    break;
+                case 7: case 8:
+                    drawLine(x, y + height * interpolate(corners[0], corners[3], level),
+                            x + width * interpolate(corners[3], corners[2], level), y + height);
+                    break;
+                case 10:
+                    drawLine(x + width * interpolate(corners[0], corners[1], level), y,
+                            x + width, y + height * interpolate(corners[1], corners[2], level));
+                    drawLine(x, y + height * interpolate(corners[0], corners[3], level),
+                            x + width * interpolate(corners[3], corners[2], level), y + height);
+                    break;
+            }
+        }
+        function interpolate(v1, v2, level) {
+            return (level - v1) / (v2 - v1);
+        }
+        function drawLine(x1, y1, x2, y2) {
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+        }
+        // 지형 색상 결정
+        function getTerrainColor(height) {
+            if (height < 0.2) return '#0d4f8b';      // 깊은 물
+            if (height < 0.3) return '#1e7eb8';      // 얕은 물
+            if (height < 0.4) return '#61a861';      // 낮은 지대 (초록)
+            if (height < 0.5) return '#8fc68f';      // 평지
+            if (height < 0.6) return '#c4d4aa';      // 언덕
+            if (height < 0.7) return '#f5deb3';      // 높은 언덕
+            if (height < 0.8) return '#d2b48c';      // 낮은 산
+            if (height < 0.9) return '#8b4513';      // 산
+            return '#fff';                           // 눈 덮인 산꼭대기
+        }
+        // 마우스 이벤트 처리
+        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);
+            const gridSize = heightMap.length;
+            const gridX = Math.floor(x / (WIDTH / gridSize));
+            const gridY = Math.floor(y / (HEIGHT / gridSize));
+            if (gridX >= 0 && gridX < gridSize && gridY >= 0 && gridY < gridSize) {
+                const height = heightMap[gridY][gridX];
+                const elevation = Math.round(height * 1000);
+                // 경사도 계산
+                let slope = 0;
+                if (gridX > 0 && gridX < gridSize - 1 && gridY > 0 && gridY < gridSize - 1) {
+                    const dx = heightMap[gridY][gridX + 1] - heightMap[gridY][gridX - 1];
+                    const dy = heightMap[gridY + 1][gridX] - heightMap[gridY - 1][gridX];
+                    slope = Math.round(Math.sqrt(dx * dx + dy * dy) * 100);
+                }
+                document.getElementById('coordinates').textContent = `${gridX}, ${gridY}`;
+                document.getElementById('elevation').textContent = `${elevation}m`;
+                document.getElementById('slope').textContent = `${slope}°`;
+                // 툴팁 표시
+                tooltip.style.display = 'block';
+                tooltip.style.left = e.clientX + 10 + 'px';
+                tooltip.style.top = e.clientY - 30 + 'px';
+                tooltip.textContent = `고도: ${elevation}m`;
+            }
+        });
+        canvas.addEventListener('mouseleave', () => {
+            tooltip.style.display = 'none';
+            document.getElementById('coordinates').textContent = '-';
+            document.getElementById('elevation').textContent = '-';
+            document.getElementById('slope').textContent = '-';
+        });
+        // 컨트롤 함수들
+        function generateNewTerrain() {
+            generateTerrain();
+            drawMap();
+        }
+        function toggleContours() {
+            showContours = !showContours;
+            drawMap();
+        }
+        function toggleHeatmap() {
+            showHeatmap = !showHeatmap;
+            drawMap();
+        }
+        function toggle3D() {
+            is3D = !is3D;
+            drawMap();
+        }
+        function changeTerrainType() {
+            terrainType = document.getElementById('terrainType').value;
+            generateTerrain();
+            drawMap();
+        }
+        function exportMap() {
+            const link = document.createElement('a');
+            link.download = 'topographic-map.png';
+            link.href = canvas.toDataURL();
+            link.click();
+        }
+        // 초기화
+        generateTerrain();
+        drawMap();
+        // 화면 크기 변경 대응
+        window.addEventListener('resize', () => {
+            drawMap();
+        });
+    </script>
+</body>
+</html>