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(); }; +
+
+ + +
+