From 74340cf28e9f716d6a1feab29bc078ef68c26873 Mon Sep 17 00:00:00 2001 From: Vasilisk9812 Date: Fri, 27 Jun 2025 22:15:02 +0900 Subject: [PATCH 1/2] wind view checkbox --- package-lock.json | 23 ++++++- package.json | 4 +- src/routes/WindVisualisation.svelte | 94 +++++++++++++++++++++++------ 3 files changed, 102 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index a86bf92..fc9ed4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,9 @@ "bootstrap-icons": "^1.11.3", "js-cookie": "^3.0.5", "leaflet": "^1.9.4", - "leaflet-velocity": "^2.1.4" + "leaflet-heatmap": "^1.0.0", + "leaflet-velocity": "^2.1.4", + "leaflet.heat": "^0.2.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^4.0.0", @@ -1053,6 +1055,11 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/heatmap.js": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/heatmap.js/-/heatmap.js-2.0.5.tgz", + "integrity": "sha512-CG2gYFP5Cv9IQCXEg3ZRxnJDyAilhWnQlAuHYGuWVzv6mFtQelS1bR9iN80IyDmFECbFPbg6I0LR5uAFHgCthw==" + }, "node_modules/import-meta-resolve": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", @@ -1093,11 +1100,25 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, + "node_modules/leaflet-heatmap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/leaflet-heatmap/-/leaflet-heatmap-1.0.0.tgz", + "integrity": "sha512-WP/emZYwjWaEnWMcE2dftuJvtjp53zmJcHtVTHUqPN7AQEowHxDTLH5j1BJjE4uL1K5dJclBLX4oLpnOGS/qTw==", + "dependencies": { + "heatmap.js": "*", + "leaflet": "*" + } + }, "node_modules/leaflet-velocity": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/leaflet-velocity/-/leaflet-velocity-2.1.4.tgz", "integrity": "sha512-uTmSb2/Kn28S0itlmJBMy2ZRKsisWUr2wm9rtkKXjpq9Sai7tqKdTRHKfLgTOgEdWFf5Ctt2bQoB7kb50qC7eg==" }, + "node_modules/leaflet.heat": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz", + "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ==" + }, "node_modules/locate-character": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", diff --git a/package.json b/package.json index db0e69e..5a20907 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "bootstrap-icons": "^1.11.3", "js-cookie": "^3.0.5", "leaflet": "^1.9.4", - "leaflet-velocity": "^2.1.4" + "leaflet-heatmap": "^1.0.0", + "leaflet-velocity": "^2.1.4", + "leaflet.heat": "^0.2.0" } } diff --git a/src/routes/WindVisualisation.svelte b/src/routes/WindVisualisation.svelte index b028916..6184958 100644 --- a/src/routes/WindVisualisation.svelte +++ b/src/routes/WindVisualisation.svelte @@ -92,28 +92,54 @@ if (legend) map.removeControl(legend); // Создаем слой векторов ветра - velocityLayer = L.velocityLayer({ - displayValues: true, - displayOptions: { - velocityType: 'Wind Speed', - position: 'bottomleft', - emptyString: 'No wind data', - }, - data: windData - }).addTo(map); + if (showVectors) { + velocityLayer = L.velocityLayer({ + displayValues: true, + displayOptions: { + velocityType: 'Wind Speed', + position: 'bottomleft', + emptyString: 'No wind data', + }, + data: windData + }).addTo(map); + } // Создаем тепловую карту - const heatData = prepareHeatData(windData); - heatLayer = createHeatLayer(heatData); - - if (heatLayer) { - heatLayer.addTo(map); - createLegend(Math.max(...heatData.map(point => point[2]))); - } else { - console.warn("Heat layer was not created"); + if (showHeatmap) { + const heatData = prepareHeatData(windData); + heatLayer = createHeatLayer(heatData); + + if (heatLayer) { + heatLayer.addTo(map); + createLegend(Math.max(...heatData.map(point => point[2]))); + } } + + // Обновляем контроль слоев + updateLayerControl(); }; + const updateLayerControl = () => { + if (layerControl) { + map.removeControl(layerControl); + } + + const baseLayers = {}; + const overlays = {}; + + if (velocityLayer) { + overlays['Векторы ветра'] = velocityLayer; + } + + if (heatLayer) { + overlays['Тепловая карта'] = heatLayer; + } + + layerControl = L.control.layers(null, overlays, { + collapsed: false, + position: 'topright' + }).addTo(map); + }; // Создание легенды с учетом максимальной скорости const createLegend = (maxSpeed) => { if (!map) return; @@ -162,7 +188,41 @@ updateLayers(); }; +
+
+ + +
+
\ No newline at end of file diff --git a/src/routes/WindVisualisation.svelte b/src/routes/WindVisualisation.svelte index 6184958..713cde8 100644 --- a/src/routes/WindVisualisation.svelte +++ b/src/routes/WindVisualisation.svelte @@ -20,36 +20,54 @@ // Функция для нормализации данных тепловой карты const prepareHeatData = (windData) => { - if (!windData || !windData.header || !windData.data) { - console.warn("Wind data is missing or incomplete"); - return []; + 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]; - const speed = Math.sqrt(u * u + v * v); + 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 lat = la1 - y * dy; - const lng = lo1 + x * dx; - heatData.push([lat, lng, speed]); - maxSpeed = Math.max(maxSpeed, speed); - } + 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) { - 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"); - return null; + console.warn("No valid heat data provided"); + return null; } try { - return L.heatLayer(data, { - radius: 15, - blur: 20, - maxZoom: 17, - minOpacity: 0.5, - gradient: { - 0.1: 'blue', - 0.3: 'cyan', - 0.5: 'lime', - 0.7: 'yellow', - 1.0: 'red' - } - }); + return L.heatLayer(data, { + radius: 20, // Увеличьте радиус для глобальной карты + blur: 15, + maxZoom: 10, + minOpacity: 0.7, + gradient: { + 0.1: 'blue', + 0.3: 'cyan', + 0.5: 'lime', + 0.7: 'yellow', + 1.0: 'red' + } + }); } catch (e) { - console.error("Failed to create heat layer:", e); - return null; + console.error("Failed to create heat layer:", e); + 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; diff --git a/src/routes/map.svelte b/src/routes/map.svelte index 88fec6d..b039764 100644 --- a/src/routes/map.svelte +++ b/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", {