heatmap
This commit is contained in:
Vasilisk9812
parent
74340cf28e
commit
aa0ff91a7d
3 changed files with 273 additions and 41 deletions
215
src/routes/TimeLine.svelte
Normal file
215
src/routes/TimeLine.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -20,32 +20,50 @@
|
|||
|
||||
// Функция для нормализации данных тепловой карты
|
||||
const prepareHeatData = (windData) => {
|
||||
if (!windData || !windData.header || !windData.data) {
|
||||
console.warn("Wind data is missing or incomplete");
|
||||
if (!windData || windData.length < 2) {
|
||||
console.warn("Invalid wind data structure");
|
||||
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 x = 0; x < nx; x++) {
|
||||
const u = windData.data[y][x * 2];
|
||||
const v = windData.data[y][x * 2 + 1];
|
||||
for (let i = 0; i < uComponent.data.length; i++) {
|
||||
const u = uComponent.data[i];
|
||||
const v = vComponent.data[i];
|
||||
const speed = Math.sqrt(u * u + v * v);
|
||||
|
||||
if (!isNaN(speed)) {
|
||||
// Вычисляем координаты для текущей точки
|
||||
const y = Math.floor(i / nx);
|
||||
const x = i % nx;
|
||||
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) {
|
||||
|
|
@ -64,10 +82,10 @@
|
|||
|
||||
try {
|
||||
return L.heatLayer(data, {
|
||||
radius: 15,
|
||||
blur: 20,
|
||||
maxZoom: 17,
|
||||
minOpacity: 0.5,
|
||||
radius: 20, // Увеличьте радиус для глобальной карты
|
||||
blur: 15,
|
||||
maxZoom: 10,
|
||||
minOpacity: 0.7,
|
||||
gradient: {
|
||||
0.1: 'blue',
|
||||
0.3: 'cyan',
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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", {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue