mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

wind view checkbox

Browse source
This commit is contained in:
Vasilisk9812 2025-06-27 22:15:02 +09:00
parent f4b397043a
commit 74340cf28e
3 changed files with 102 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

23
package-lock.json generated
View file

@ -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",

4
package.json
View file

@ -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"
}
}

94
src/routes/WindVisualisation.svelte
View file

@ -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();
};
</script>
<div class="layer-controls">
<div class="control-group">
<label>
<input type="checkbox" bind:checked={showHeatmap}> Тепловая карта
</label>
<label>
<input type="checkbox" bind:checked={showVectors}> Векторы ветра
</label>
</div>
</div>
<style>
.layer-controls {
position: absolute;
bottom: 30px;
left: 10px;
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.control-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.control-group label {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
cursor: pointer;
}
.wind-heat-legend {
padding: 8px 10px;
background: rgba(255, 255, 255, 0.9);