Update index.html

index.html

@@ -276,197 +276,152 @@
             // ... [이전에 정의된 나머지 스테이션들도 포함]
         ];
 
-        class RadarSystem {
-            constructor() {
-                this.canvas = document.getElementById('map');
-                this.ctx = this.canvas.getContext('2d');
-                this.targets = new Set();
-                this.signalLines = new Set();
-                this.setupWorldMap();
-                this.setupCanvas();
-                this.renderReceivers();
-                this.startTracking();
-
-                window.addEventListener('resize', this.handleResize.bind(this));
-            }
-
-
-setupWorldMap() {
-                this.worldMap = L.map('world-map', {
-                    center: [20, 0],
-                    zoom: 2,
-                    zoomControl: true,
-                    dragging: true,
-                    scrollWheelZoom: true,
-                    doubleClickZoom: true
-                });
-
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© OpenStreetMap contributors'
-                }).addTo(this.worldMap);
-
-                // 각 SDR 스테이션에 마커 추가
-                sdrStations.forEach(station => {
-                    const marker = L.circle([station.location[0], station.location[1]], {
-                        color: '#0f0',
-                        fillColor: '#0f0',
-                        fillOpacity: 0.5,
-                        radius: 50000
-                    }).addTo(this.worldMap);
-
-                    marker.bindPopup(`
-                        <div style="color: black;">
-                            <strong>${station.name}</strong><br>
-                            📡 ${station.url}<br>
-                            📻 ${station.frequency}<br>
-                            Range: ${station.range}km
-                        </div>
-                    `);
-                });
-            }
-
-            setupCanvas() {
-                const container = document.getElementById('map-container');
-                this.canvas.width = container.offsetWidth;
-                this.canvas.height = container.offsetHeight;
-            }
-
-            handleResize() {
-                const container = document.getElementById('map-container');
-                this.canvas.width = container.offsetWidth;
-                this.canvas.height = container.offsetHeight;
-                this.worldMap.invalidateSize();
-            }
-
-            renderReceivers() {
-                const container = document.getElementById('receivers');
-                container.innerHTML = sdrStations.map(station => `
-                    <div class="receiver" id="rx-${station.url.split(':')[0]}">
-                        <div class="status">
-                            <div class="led ${station.active ? 'active' : 'inactive'}"></div>
-                            <strong>${station.name}</strong>
-                        </div>
-                        <div>📡 ${station.url}</div>
-                        <div>📻 ${station.frequency}</div>
-                        <div>📍 ${station.location.join(', ')}</div>
-                        <div>Range: ${station.range}km</div>
-                        <div class="signal-strength">
-                            <div class="signal-bar"></div>
-                        </div>
-                    </div>
-                `).join('');
-            }
-
-            generateTarget() {
-                const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
-                const range = 5;
-                return {
-                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
-                    position: {
-                        lat: station.location[0] + (Math.random() - 0.5) * range,
-                        lon: station.location[1] + (Math.random() - 0.5) * range
-                    },
-                    speed: Math.random() * 100 + 50,
-                    heading: Math.random() * 360,
-                    station: station
-                };
-            }
+class RadarSystem {
+    constructor() {
+        this.canvas = document.getElementById('map');
+        this.ctx = this.canvas.getContext('2d');
+        this.targets = new Set();
+        this.signalLines = new Set();
+        this.setupWorldMap();
+        this.setupCanvas();
+        this.renderReceivers();
+        this.startTracking();
+
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+
+    setupWorldMap() {
+        // 지도 초기화 설정 수정
+        this.worldMap = L.map('world-map', {
+            center: [30, 0],
+            zoom: 3,
+            minZoom: 2,
+            maxZoom: 18,
+            zoomControl: true,
+            dragging: true,
+            scrollWheelZoom: true,
+            doubleClickZoom: true
+        });
 
-            updateTargets() {
-                if (Math.random() < 0.1 && this.targets.size < 10) {
-                    const newTarget = this.generateTarget();
-                    this.targets.add(newTarget);
-                    
-                    const targetMarker = L.circle([newTarget.position.lat, newTarget.position.lon], {
-                        color: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
-                        fillColor: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
-                        fillOpacity: 0.5,
-                        radius: 20000
-                    }).addTo(this.worldMap);
-
-                    newTarget.marker = targetMarker;
-                }
+        // 타일 레이어 스타일 수정
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors',
+            noWrap: false,
+            bounds: [[-90, -180], [90, 180]]
+        }).addTo(this.worldMap);
+
+        // 줌 컨트롤 위치 조정
+        L.control.zoom({
+            position: 'topright'
+        }).addTo(this.worldMap);
+
+        // SDR 스테이션 마커 추가
+        sdrStations.forEach(station => {
+            // 스테이션 마커
+            const stationMarker = L.circleMarker([station.location[0], station.location[1]], {
+                radius: 8,
+                color: '#0f0',
+                fillColor: '#0f0',
+                fillOpacity: 0.5,
+                weight: 2
+            }).addTo(this.worldMap);
+
+            // 범위 원
+            L.circle([station.location[0], station.location[1]], {
+                radius: station.range * 1000, // km를 m로 변환
+                color: '#0f0',
+                fillColor: '#0f0',
+                fillOpacity: 0.1,
+                weight: 1
+            }).addTo(this.worldMap);
+
+            // 팝업 정보
+            stationMarker.bindPopup(`
+                <div style="color: black;">
+                    <strong>${station.name}</strong><br>
+                    📡 ${station.url}<br>
+                    📻 ${station.frequency}<br>
+                    Range: ${station.range}km
+                </div>
+            `);
+        });
+    }
+
+    generateTarget() {
+        const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
+        const range = station.range / 100; // 범위 조정
+        return {
+            type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
+            position: {
+                lat: station.location[0] + (Math.random() - 0.5) * range,
+                lon: station.location[1] + (Math.random() - 0.5) * range
+            },
+            speed: Math.random() * 100 + 50,
+            heading: Math.random() * 360,
+            station: station
+        };
+    }
+
+    updateTargets() {
+        if (Math.random() < 0.1 && this.targets.size < 10) {
+            const newTarget = this.generateTarget();
+            this.targets.add(newTarget);
+            
+            // 타겟 마커 스타일 수정
+            const targetMarker = L.circleMarker([newTarget.position.lat, newTarget.position.lon], {
+                radius: 5,
+                color: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
+                fillColor: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
+                fillOpacity: 0.8,
+                weight: 2
+            }).addTo(this.worldMap);
+
+            newTarget.marker = targetMarker;
+        }
 
-                this.targets.forEach(target => {
-                    const rad = target.heading * Math.PI / 180;
-                    target.position.lat += Math.cos(rad) * target.speed * 0.00001;
-                    target.position.lon += Math.sin(rad) * target.speed * 0.00001;
-
-                    if (target.marker) {
-                        target.marker.setLatLng([target.position.lat, target.position.lon]);
-                    }
-
-                    const distance = this.calculateDistance(
-                        target.position.lat,
-                        target.position.lon,
-                        target.station.location[0],
-                        target.station.location[1]
-                    );
-
-                    if (distance > target.station.range) {
-                        if (target.marker) {
-                            this.worldMap.removeLayer(target.marker);
-                        }
-                        this.targets.delete(target);
-                    }
-                });
-            }
+        this.targets.forEach(target => {
+            const rad = target.heading * Math.PI / 180;
+            target.position.lat += Math.cos(rad) * target.speed * 0.00001;
+            target.position.lon += Math.sin(rad) * target.speed * 0.00001;
 
-            calculateDistance(lat1, lon1, lat2, lon2) {
-                const R = 6371;
-                const dLat = (lat2 - lat1) * Math.PI / 180;
-                const dLon = (lon2 - lon1) * Math.PI / 180;
-                const a = 
-                    Math.sin(dLat/2) * Math.sin(dLat/2) +
-                    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
-                    Math.sin(dLon/2) * Math.sin(dLon/2);
-                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
-                return R * c;
+            if (target.marker) {
+                target.marker.setLatLng([target.position.lat, target.position.lon]);
             }
 
-            addDetection(target) {
-                const container = document.getElementById('detections');
-                const detection = document.createElement('div');
-                detection.className = 'detection';
-                detection.innerHTML = `
-                    ${target.type === 'aircraft' ? '✈️' : '🚗'} Signal detected at 
-                    ${target.position.lat.toFixed(4)}, ${target.position.lon.toFixed(4)}
-                    <br>Speed: ${target.speed.toFixed(1)} km/h
-                    <br>Heading: ${target.heading.toFixed(1)}°
-                    <br>Station: ${target.station.name}
-                `;
-                container.insertBefore(detection, container.firstChild);
-
-                if (container.children.length > 5) {
-                    container.removeChild(container.lastChild);
-                }
+            const distance = this.calculateDistance(
+                target.position.lat,
+                target.position.lon,
+                target.station.location[0],
+                target.station.location[1]
+            );
 
-                const receiver = document.getElementById(`rx-${target.station.url.split(':')[0]}`);
-                if (receiver) {
-                    const signalBar = receiver.querySelector('.signal-bar');
-                    if (signalBar) {
-                        signalBar.style.width = `${Math.random() * 40 + 60}%`;
-                    }
+            if (distance > target.station.range) {
+                if (target.marker) {
+                    this.worldMap.removeLayer(target.marker);
                 }
-
-                this.addSignalLine(target);
-            }
-
-            addSignalLine(target) {
-                const stationLatLng = L.latLng(target.station.location[0], target.station.location[1]);
-                const targetLatLng = L.latLng(target.position.lat, target.position.lon);
-
-                const line = L.polyline([stationLatLng, targetLatLng], {
-                    color: '#0f0',
-                    weight: 2,
-                    opacity: 0.6,
-                    dashArray: '5, 10'
-                }).addTo(this.worldMap);
-
-                setTimeout(() => {
-                    this.worldMap.removeLayer(line);
-                }, 2000);
+                this.targets.delete(target);
             }
+        });
+    }
+
+    addSignalLine(target) {
+        const stationLatLng = L.latLng(target.station.location[0], target.station.location[1]);
+        const targetLatLng = L.latLng(target.position.lat, target.position.lon);
+
+        // 신호선 스타일 수정
+        const line = L.polyline([stationLatLng, targetLatLng], {
+            color: '#0f0',
+            weight: 2,
+            opacity: 0.8,
+            dashArray: '5, 10',
+            className: 'signal-line'
+        }).addTo(this.worldMap);
+
+        // 신호선 애니메이션
+        setTimeout(() => {
+            this.worldMap.removeLayer(line);
+        }, 2000);
+    }
 
             startTracking() {
                 setInterval(() => {