heatmap

src/routes/TimeLine.svelte

@@ -0,0 +1,215 @@
+<!-- Timeline.svelte -->
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    
+    export let initialHour = 0;
+    export let totalHours = 72; // 3 суток
+    export let updateInterval = 3; // шаг в 3 часа
+    export let playSpeed = 2000; // скорость анимации (мс)
+    
+    let currentHour = initialHour;
+    let isPlaying = false;
+    let timer;
+    
+    // События для коммуникации с родительским компонентом
+    const dispatch = createEventDispatcher();
+    
+    // Автоматическое проигрывание
+    function togglePlay() {
+        isPlaying = !isPlaying;
+        
+        if (isPlaying) {
+        timer = setInterval(() => {
+            currentHour = (currentHour + updateInterval) % totalHours;
+            dispatchTimeUpdate();
+        }, playSpeed);
+        } else {
+        clearInterval(timer);
+        }
+    }
+    
+    function dispatchTimeUpdate() {
+        dispatch('timeupdate', {
+        hour: currentHour,
+        timestamp: calculateTimestamp(currentHour)
+        });
+    }
+    
+    function calculateTimestamp(hour) {
+        const now = new Date();
+        now.setHours(now.getHours() + hour);
+        return now;
+    }
+    
+    function formatTime(hours) {
+        const days = Math.floor(hours / 24);
+        const remainingHours = hours % 24;
+        const time = calculateTimestamp(hours);
+        
+        return `+${days}d ${remainingHours}h (${time.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})})`;
+    }
+    
+    // Очистка при размонтировании
+    onDestroy(() => {
+        clearInterval(timer);
+    });
+</script>
+
+<div class="timeline-container">
+    <div class="timeline-controls">
+        <button 
+        on:click={() => {
+            currentHour = Math.max(0, currentHour - updateInterval);
+            dispatchTimeUpdate();
+        }} 
+        disabled={currentHour <= 0}
+        class="control-button"
+        >
+        ← Назад
+        </button>
+        
+        <button 
+        on:click={togglePlay} 
+        class="control-button play-button {isPlaying ? 'playing' : ''}"
+        >
+        {isPlaying ? '❚❚' : '▶'}
+        </button>
+        
+        <button 
+        on:click={() => {
+            currentHour = Math.min(totalHours, currentHour + updateInterval);
+            dispatchTimeUpdate();
+        }} 
+        disabled={currentHour >= totalHours}
+        class="control-button"
+        >
+        Вперёд →
+        </button>
+        
+        <div class="time-display">
+        {formatTime(currentHour)}
+        </div>
+    </div>
+    
+    <input
+        type="range"
+        min="0"
+        max={totalHours}
+        step={updateInterval}
+        bind:value={currentHour}
+        on:input={() => dispatchTimeUpdate()}
+        class="timeline-slider"
+    />
+    
+    <div class="time-marks">
+        {#each Array(Math.floor(totalHours / updateInterval) + 1) as _, i}
+        <div
+            class="time-mark {currentHour === i * updateInterval ? 'active' : ''}"
+            on:click={() => {
+            currentHour = i * updateInterval;
+            dispatchTimeUpdate();
+            }}
+        >
+            {i * updateInterval % 24 === 0 ? `День ${Math.floor(i * updateInterval / 24) + 1}` : ''}
+        </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .timeline-container {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 90%;
+        max-width: 800px;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 8px;
+        padding: 10px 15px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+    }
+    
+    .timeline-controls {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+    }
+    
+    .control-button {
+        background: #f0f0f0;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 5px 10px;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    
+    .control-button:hover {
+        background: #e0e0e0;
+    }
+    
+    .control-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    
+    .play-button {
+        width: 40px;
+        background: #4CAF50;
+        color: white;
+        border: none;
+    }
+    
+    .play-button.playing {
+        background: #f44336;
+    }
+    
+    .time-display {
+        font-weight: bold;
+        min-width: 180px;
+        text-align: center;
+        font-family: monospace;
+    }
+    
+    .timeline-slider {
+        width: 100%;
+        margin: 5px 0;
+        cursor: pointer;
+    }
+    
+    .time-marks {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 5px;
+    }
+    
+    .time-mark {
+        cursor: pointer;
+        padding: 2px 5px;
+        font-size: 12px;
+        position: relative;
+    }
+    
+    .time-mark:before {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        width: 1px;
+        height: 10px;
+        background: #ccc;
+    }
+    
+    .time-mark.active {
+        font-weight: bold;
+        color: #2196F3;
+    }
+    
+    .time-mark.active:before {
+        background: #2196F3;
+        height: 15px;
+    }
+</style>

src/routes/WindVisualisation.svelte

@@ -20,36 +20,54 @@
 
     // Функция для нормализации данных тепловой карты
     const prepareHeatData = (windData) => {
-        if (!windData || !windData.header || !windData.data) {
+        if (!windData || windData.length < 2) {
-        console.warn("Wind data is missing or incomplete");
+            console.warn("Invalid wind data structure");
-        return [];
+            return [];
         }
         
-        const { lo1, la1, dx, dy, nx, ny } = windData.header;
+        // Получаем U и V компоненты
+        const uComponent = windData.find(item => item.header.parameterNumber === 2);
+        const vComponent = windData.find(item => item.header.parameterNumber === 3);
+        
+        if (!uComponent || !vComponent) {
+            console.warn("Missing wind components");
+            return [];
+        }
+        
+        const header = uComponent.header; // Используем header из U компоненты
+        const { lo1, la1, dx, dy, nx, ny } = header;
         const heatData = [];
         let maxSpeed = 0;
         
+        // Проверяем совпадение размеров данных
+        if (uComponent.data.length !== vComponent.data.length) {
+            console.warn("U and V components have different lengths");
+            return [];
+        }
+        
         // Собираем данные и находим максимальную скорость
-        for (let y = 0; y < ny; y++) {
+        for (let i = 0; i < uComponent.data.length; i++) {
-            for (let x = 0; x < nx; x++) {
+            const u = uComponent.data[i];
-                const u = windData.data[y][x * 2];
+            const v = vComponent.data[i];
-                const v = windData.data[y][x * 2 + 1];
+            const speed = Math.sqrt(u * u + v * v);
-                const speed = Math.sqrt(u * u + v * v);
             
-                if (!isNaN(speed)) {
+            if (!isNaN(speed)) {
-                    const lat = la1 - y * dy;
+                // Вычисляем координаты для текущей точки
-                    const lng = lo1 + x * dx;
+                const y = Math.floor(i / nx);
-                    heatData.push([lat, lng, speed]);
+                const x = i % nx;
-                    maxSpeed = Math.max(maxSpeed, speed);
+                const lat = la1 - y * dy;
-                }
+                const lng = lo1 + x * dx;
+                
+                heatData.push([lat, lng, speed]);
+                maxSpeed = Math.max(maxSpeed, speed);
             }
         }
         
-        console.log('Prepared heat data: ${heatData.length} points, max speed: ${maxSpeed}');
+        console.log(`Prepared heat data: ${heatData.length} points, max speed: ${maxSpeed}`);
         
         // Нормализуем значения интенсивности от 0 до 1
         if (maxSpeed > 0) {
-        return heatData.map(([lat, lng, intensity]) => [lat, lng, intensity / maxSpeed]);
+            return heatData.map(([lat, lng, intensity]) => [lat, lng, intensity / maxSpeed]);
         }
         
         return heatData;
@@ -58,27 +76,27 @@
     // Создание тепловой карты
     const createHeatLayer = (data) => {
         if (!data || data.length === 0) {
-        console.warn("No valid heat data provided");
+            console.warn("No valid heat data provided");
-        return null;
+            return null;
         }
         
         try {
-        return L.heatLayer(data, {
+            return L.heatLayer(data, {
-            radius: 15,
+                radius: 20, // Увеличьте радиус для глобальной карты
-            blur: 20,
+                blur: 15,
-            maxZoom: 17,
+                maxZoom: 10,
-            minOpacity: 0.5,
+                minOpacity: 0.7,
-            gradient: {
+                gradient: {
-            0.1: 'blue',
+                    0.1: 'blue',
-            0.3: 'cyan',
+                    0.3: 'cyan',
-            0.5: 'lime',
+                    0.5: 'lime',
-            0.7: 'yellow',
+                    0.7: 'yellow',
-            1.0: 'red'
+                    1.0: 'red'
-            }
+                }
-        });
+            });
         } catch (e) {
-        console.error("Failed to create heat layer:", e);
+            console.error("Failed to create heat layer:", e);
-        return null;
+            return null;
         }
     };
 
@@ -124,7 +142,6 @@
             map.removeControl(layerControl);
         }
         
-        const baseLayers = {};
         const overlays = {};
         
         if (velocityLayer) {
@@ -223,7 +240,7 @@
         font-size: 14px;
         cursor: pointer;
     }
-    .wind-heat-legend {
+    :global(.wind-heat-legend) {
         padding: 8px 10px;
         background: rgba(255, 255, 255, 0.9);
         border-radius: 5px;
@@ -233,23 +250,23 @@
         font-family: Arial, sans-serif;
     }
     
-    .wind-heat-legend h4 {
+    :global(.wind-heat-legend h4) {
         margin: 0 0 5px;
         font-size: 14px;
         font-weight: bold;
     }
     
-    .legend-scale {
+    :global(legend-scale) {
         display: flex;
         margin-bottom: 3px;
     }
     
-    .legend-color {
+    :global(legend-color) {
         height: 12px;
         flex-grow: 1;
     }
     
-    .legend-labels {
+    :global(.legend-labels) {
         display: flex;
         justify-content: space-between;
         font-size: 11px;

src/routes/map.svelte

@@ -29,7 +29,7 @@
     onMount(async () => {
         if (!mapContainer) return;
 
-        map = L.map(mapContainer).setView([51.505, -0.09], 13);
+        map = L.map(mapContainer).setView([30, 0], 2);
         plotLayerGroup = L.layerGroup().addTo(map);
 
         L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {