/** * pagine dell'evento in corso parte dati * * 27/02/2024 filippo start version * * 04/03/2024 filippo recupero delle cumulate di pioggia ai vari intervalli * 05/03/2024 filippo miglioramenti nei testi della pagina sui pulsanti di cumulata di pioggia * 06/03/2024 filippo aggiunta isolinee 24 ore * 13/03/2024 filippo coloro il pallino stazione idro in base al trend +/-/= * 29/10/2024 filippo modifiche come da indicazioni di oggi di Zardini * 30/10/2024 filippo modifiche sui nomi dei pulsanti come da mail di oggi di Zardini * 28/01/2025 filippo modificato link di chiamata dati stazione aggiunta del parametro &return=replace */ // link per ottenere i dati visualizzati const GraficoMeteo = '/dati-ambientali/dati-in-diretta/meteo-idro-nivo/variabili_meteo?'; const GraficoIdro = '/dati-ambientali/dati-in-diretta/meteo-idro-nivo/variabili_idro?'; // flag per avere i console.log attivi oppure no const DEBUG = false; // pulsante premuto var currentBtn; var currentOrario = 0; // aggregazion ipresenti per l'envento in corso var evento = {}; var img = {'x_min' : 10.6234,'x_max' : 13.1019,'y_min' : 44.7455,'y_max' : 46.8}; // link per recuperare le stazioni per sensore; verranno aggiunti: orario e coordcd per ottenere // https://api.arpa.veneto.it/REST/v1/meteo_meteogrammi?orario=0&rete=MGRAMMI&coordcd=18 const lnkStazioni = 'https://api.arpa.veneto.it/REST/v1/meteo_meteogrammi'; // link per recuperare l'immagine iso // https://api.arpa.veneto.it/REST/v1/meteo_meteogrammi_img?tipo=PREC3&orario=0 const lnkISO = 'https://api.arpa.veneto.it/REST/v1/meteo_meteogrammi_img'; // cartella per il file monitoraggioesteso.json e le varie immagini const pathEvento = 'https://www.arpa.veneto.it/risorse/data-meteo/eventoincorso/'; const nomeJson = 'monitoraggioesteso.json'; // oggetto kml var kmlProvince; // simbolo punto della stazione const pointDimension = 8; const colorFill = 'rgb(0, 200, 0)'; const colorLine = 'rgb(0, 0, 0)'; const sfondoEtichetta = 'rgb(240,255,255)'; const fontStz = '14px "Titillium Web", Geneva, Tahoma, sans-serif'; // colore di fondo del pulsante selezionato const btnBackgroundColor = 'skyblue'; // nome del layer aggiunto nella mappa const layerMappa = 'STZ_VALORI'; // oggetto mappa var map; // oggetto popup sul punto stazione var popup; // elenco dei sensori visualizzati // mettere
quando serve: l'unità di misura verrà appesa al testo di "pulsante" const pulsanti = []; pulsanti['PREC'] = { pulsante: 'Precipitazione giornaliera
dalle ore 00', coordcd: 23, targa: 'PREC', unitaMis: 'mm', rete: 'MGRAMMI'}; pulsanti['LIVIDRO'] = { pulsante: 'Livello idrometrico
', coordcd: 20005, targa: 'LIVIDRO', unitaMis: 'm', rete: 'MGRAMMI'}; pulsanti['TEMP'] = { pulsante: 'Temperatura
', coordcd: 18, targa: 'TEMP', unitaMis: '°C', rete: 'MGRAMMI'}; pulsanti['VVENTO'] = { pulsante: 'Velocità/direzione vento
', coordcd: 12, targa: 'VVENTO', unitaMis: 'm/s', rete: 'MGRAMMI'}; pulsanti['ISOIETEH1'] = { pulsante: 'Isoiete ultima
ora', coordcd: -1, targa: 'ISOIETEH1', unitaMis: 'mm'}; pulsanti['ISOIETEH3'] = { pulsante: 'Isoiete ultime
3 ore', coordcd: -1, targa: 'ISOIETEH3', unitaMis: 'mm'}; pulsanti['ISOIETEH6'] = { pulsante: 'Isoiete ultime
6 ore', coordcd: -1, targa: 'ISOIETEH6', unitaMis: 'mm'}; pulsanti['ISOIETEH12'] = { pulsante: 'Isoiete ultime
12 ore', coordcd: -1, targa: 'ISOIETEH12', unitaMis: 'mm'}; pulsanti['ISOIETEH24'] = { pulsante: 'Isoiete ultime
24 ore', coordcd: -1, targa: 'ISOIETEH24', unitaMis: 'mm'}; pulsanti['ISOIETETOT'] = { pulsante: 'Isoiete da
inizio evento', coordcd: -1, targa: 'ISOIETETOT', unitaMis: 'mm'}; //------------------------------------------------------------------------------ // array dei colori per le etichette con temperatura var rampTemp = []; rampTemp.push( { 'Valore': -99, 'R': 0, 'G': 0, 'B': 100, 'color': 'white' } ); rampTemp.push( { 'Valore': -25, 'R': 0, 'G': 0, 'B': 100, 'color': 'white' } ); rampTemp.push( { 'Valore': -20, 'R': 0, 'G': 2, 'B': 140, 'color': 'white' } ); rampTemp.push( { 'Valore': -18, 'R': 0, 'G': 1, 'B': 178, 'color': 'white' } ); rampTemp.push( { 'Valore': -16, 'R': 0, 'G': 0, 'B': 255, 'color': 'white' } ); rampTemp.push( { 'Valore': -14, 'R': 0, 'G': 51, 'B': 255, 'color': 'white' } ); rampTemp.push( { 'Valore': -12, 'R': 0, 'G': 102, 'B': 255, 'color': 'white' } ); rampTemp.push( { 'Valore': -10, 'R': 0, 'G': 153, 'B': 255, 'color': 'black' } ); rampTemp.push( { 'Valore': -8, 'R': 0, 'G': 204, 'B': 255, 'color': 'black' } ); rampTemp.push( { 'Valore': -6, 'R': 63, 'G': 216, 'B': 255, 'color': 'black' } ); rampTemp.push( { 'Valore': -4, 'R': 127, 'G': 229, 'B': 255, 'color': 'black' } ); rampTemp.push( { 'Valore': -2, 'R': 191, 'G': 242, 'B': 255, 'color': 'black' } ); rampTemp.push( { 'Valore': 0, 'R': 254, 'G': 254, 'B': 254, 'color': 'black' } ); rampTemp.push( { 'Valore': 2, 'R': 179, 'G': 236, 'B': 185, 'color': 'black' } ); rampTemp.push( { 'Valore': 4, 'R': 153, 'G': 217, 'B': 166, 'color': 'black' } ); rampTemp.push( { 'Valore': 6, 'R': 128, 'G': 198, 'B': 147, 'color': 'black' } ); rampTemp.push( { 'Valore': 8, 'R': 102, 'G': 179, 'B': 128, 'color': 'black' } ); rampTemp.push( { 'Valore': 10, 'R': 77, 'G': 160, 'B': 109, 'color': 'white' } ); rampTemp.push( { 'Valore': 12, 'R': 54, 'G': 157, 'B': 81, 'color': 'white' } ); rampTemp.push( { 'Valore': 14, 'R': 95, 'G': 153, 'B': 102, 'color': 'white' } ); rampTemp.push( { 'Valore': 16, 'R': 85, 'G': 159, 'B': 83, 'color': 'white' } ); rampTemp.push( { 'Valore': 18, 'R': 140, 'G': 166, 'B': 115, 'color': 'white' } ); rampTemp.push( { 'Valore': 20, 'R': 184, 'G': 179, 'B': 128, 'color': 'white' } ); rampTemp.push( { 'Valore': 22, 'R': 229, 'G': 192, 'B': 141, 'color': 'white' } ); rampTemp.push( { 'Valore': 24, 'R': 232, 'G': 168, 'B': 124, 'color': 'white' } ); rampTemp.push( { 'Valore': 26, 'R': 235, 'G': 144, 'B': 106, 'color': 'white' } ); rampTemp.push( { 'Valore': 28, 'R': 238, 'G': 120, 'B': 89, 'color': 'white' } ); rampTemp.push( { 'Valore': 30, 'R': 242, 'G': 96, 'B': 71, 'color': 'white' } ); rampTemp.push( { 'Valore': 32, 'R': 245, 'G': 72, 'B': 54, 'color': 'white' } ); rampTemp.push( { 'Valore': 34, 'R': 248, 'G': 48, 'B': 36, 'color': 'white' } ); rampTemp.push( { 'Valore': 36, 'R': 251, 'G': 24, 'B': 18, 'color': 'white' } ); rampTemp.push( { 'Valore': 38, 'R': 252, 'G': 18, 'B': 77, 'color': 'white' } ); // rampTemp.push( { 'Valore': 40, 'R': 253, 'G': 12, 'B': 136, 'color': 'white' } ); rampTemp.push( { 'Valore': 100, 'R': 255, 'G': 255, 'B': 255, 'color': 'white' } ); //------------------------------------------------------------------------------ // array dei colori per le etichette con precipitazione var rampPrec = []; rampPrec.push( { 'Valore': 0, 'R': 255, 'G': 255, 'B': 255, 'color': 'black' } ); rampPrec.push( { 'Valore': 1, 'R': 243, 'G': 243, 'B': 255, 'color': 'black' } ); rampPrec.push( { 'Valore': 2, 'R': 231, 'G': 231, 'B': 255, 'color': 'black' } ); rampPrec.push( { 'Valore': 4, 'R': 206, 'G': 206, 'B': 255, 'color': 'black' } ); rampPrec.push( { 'Valore': 6, 'R': 181, 'G': 181, 'B': 255, 'color': 'black' } ); rampPrec.push( { 'Valore': 8, 'R': 156, 'G': 156, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 10, 'R': 132, 'G': 132, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 15, 'R': 70, 'G': 70, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 20, 'R': 8, 'G': 8, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 30, 'R': 76, 'G': 0, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 40, 'R': 157, 'G': 0, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 50, 'R': 238, 'G': 0, 'B': 255, 'color': 'white' } ); rampPrec.push( { 'Valore': 75, 'R': 255, 'G': 0, 'B': 133, 'color': 'white' } ); rampPrec.push( { 'Valore': 100, 'R': 255, 'G': 0, 'B': 0, 'color': 'white' } ); rampPrec.push( { 'Valore': 200, 'R': 153, 'G': 50, 'B': 255, 'color': 'white' } ); //------------------------------------------------------------------------------ // array dei colori per le etichette con livello idrometrico var rampIdro = []; rampIdro.push( { 'Valore': -20, 'R': 127, 'G': 229, 'B': 255, 'color': 'black' } ); // blu rampIdro.push( { 'Valore': 0, 'R': 128, 'G': 198, 'B': 147, 'color': 'black' } ); // verde rampIdro.push( { 'Valore': 20, 'R': 235, 'G': 144, 'B': 106, 'color': 'white' } ); // rosso rampIdro.push( { 'Valore': 100, 'R': 255, 'G': 255, 'B': 255, 'color': 'white' } ); // per finire la scala // indice per avere i colori del trend di livello const LIVELLO_STAZIONARIO = 0; const LIVELLO_DIMINUZIONE = 1; const LIVELLO_AUMENTO = 2; /*------------------------------------------------------------------------------ */ function getParameterByName(name) { name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]"); var regex = new RegExp("[\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } /** * ritorna una data (2022-09-12T01:00:00) in UTC * in realtà, visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvIstante = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 2022-09-12T01:00:00 // 0123456789012345678 var cosa = new Date(Date.UTC(ist.substring(0, 4), parseFloat(ist.substring(5, 7))-1, ist.substring(8, 10), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /*------------------------------------------------------------------------------ ritorna una stringa con la data nel formato indicato */ Date.prototype.Formato = function( formato ) { var mm = ('0' + (this.getUTCMonth()+1) ) .slice(-2); var dd = ('0' + this.getUTCDate()).slice(-2); var yyyy = this.getUTCFullYear(); var hh = ('0' + (this.getUTCHours())).slice(-2); var mi = ('0' + this.getUTCMinutes()).slice(-2); var ss = ('0' + this.getUTCSeconds()).slice(-2); var mesi = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno','Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']; var giorni = ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']; var sRet = ''; switch (formato) { case 'gg g mmm YYYY': sRet =giorni[ this.getUTCDay() ] + ' ' + this.getUTCDate() + ' ' + mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'DD/MM/YYYY': sRet = dd + '/' + mm + '/' + yyyy; break; case 'DD/MM/YYYY HH': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh; break; case 'DD/MM/YYYY HH:mm': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + mi; break; case 'DD HH' : sRet = dd + ' ' + hh; break; case 'DD' : sRet = dd; break; case 'HH:mm': sRet = hh + ':' + mi; break; case 'HH': sRet = hh; break; case 'mm': sRet = mi; break; case 'YYYYMMDDHHmm': sRet = yyyy + mm + dd + hh + mi; break; case 'YYYY-MM-DDTHH-mm': sRet = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi + ':00'; break; default: sRet = this.toString(); break; } return sRet; } /** * Ritorno PADOVA come Padova */ function titleCase(string){ return string[0].toUpperCase() + string.slice(1).toLowerCase(); } /** * div sulla pagina utilizzati da questa procedura */ function CreaPaginaMappa() { CaricaMappa(); AddStazioni(); } /** * livello kml delle Province */ function addKmlProvince() { kmlProvince = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ url: 'https://www.arpa.veneto.it/api/risorse/data-meteo/kml/Province.kml', format: new ARPAVAPI.openlayers.format.KML() }), name: 'kmlProvince', }); map.addLayer( kmlProvince ); } /** * create map */ function CaricaMappa(divMappa) { // spazio dove mettere il testo del popup sulla stazione const divHint = document.createElement('div'); divHint.setAttribute('id', 'hintStazione'); divHint.setAttribute('class', 'ol-overlay-container ol-selectable'); divHint.style.transform= 'translate(-50%, -105%)'; divHint.style.borderStyle = "solid"; divHint.style.borderWidth = "thin"; divHint.style.borderRadius = "5px"; divHint.style.whiteSpace = 'nowrap'; divHint.style.backgroundColor = "#636363"; divHint.style.borderColor = "#C4C4C4"; divHint.style.padding = "5px"; divHint.style.color = "white"; divHint.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHint.style.fontSize = '10px'; block.append(divHint); const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; map = new ARPAVAPI.openlayers.ol.Map({ target: divMappa, view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.8, 45.9], 'EPSG:4326', 'EPSG:3857'), zoom: 8.5, maxZoom: 13, extent: MAP_DEFAULT_EXTENT, }), controls: [ new ARPAVAPI.openlayers.control.Zoom() ] }); // aggiungo lo sfondo var olOSM = new ARPAVAPI.openlayers.layer.Tile({ source: new ARPAVAPI.openlayers.source.OSM({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', }) }); map.addLayer( olOSM ); // add kml delle province addKmlProvince(); // popup sulla stazione popup = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazione'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); map.addOverlay(popup) // click sul punto map.on('singleclick', function (evt) { clickMap(evt); }); // change mouse cursor when over marker map.on('pointermove', function (evt) { mouseMoveOnMap(evt); }); } /** * gestione del click sul punto della stazione */ function clickMap(evt) { const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { vediDati( feature.getProperties().data ); } } /** * change mouse cursor when over marker */ function mouseMoveOnMap(evt) { if (evt.dragging) return; var pixel = evt.map.getEventPixel(evt.originalEvent); var hit = map.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappa); } }); if (hit) { evt.map.getTargetElement().style.cursor = 'pointer'; const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if (feature) { const stz = feature.getProperties().data; if (stz) { const frase = stz.nome_stazione; document.getElementById('hintStazione').innerHTML = frase; popup.setPosition(evt.coordinate); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } else { evt.map.getTargetElement().style.cursor = ''; popup.setPosition(undefined); } } //------------------------------------------------------------------------- // funzione di log su console se DEBUG function myConsoleLog(sFrase) { if (DEBUG) { console.log(sFrase); } } // ------------------------------------------------------------------------ function CreaDivPagina() { var frase = '\

\
\ \

\
\ Click sul nome della stazione per la sua pagina dati \

\ '; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); // aggiungo gli stili che uso CreaStyle('Mappa-Tabella'); // bottoni dei sensori var frase = '

'; var frase2 = '

'; // per tutti i bottoni previsti // pulsanti['TEMP'] = { pulsante: 'Temperatura aria', coordcd: 18, targa: 'TEMP', unitaMis: '°C'}; Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; let um = ''; if (element.unitaMis) { um = ' (' + element.unitaMis + ')'; /* if (element.targa.indexOf('ISO') >= 0) { um = '
isoiete (' + element.unitaMis + ')'; } else { um = '
(' + element.unitaMis + ')'; } */ } const bt = ''; if (element.targa.indexOf('ISO') >= 0) { frase2 += bt; } else { frase += bt; } }); frase += '

'; frase2 += '

'; const divBottoni = document.createElement('div'); divBottoni.setAttribute('id', 'divBottoni'); divBottoni.innerHTML = frase + '

' + frase2; // metto i pulsanti dentro al div della mappa divBottoni.setAttribute('class', 'col-11 ol-overlaycontainer layer-button-control text-left btn-toolbar'); divBottoni.setAttribute('role', 'toolbar'); divBottoni.setAttribute('style', 'position: absolute; left: 80px; pointer-events: auto; z-index: 4000;') document.getElementById('mappa').append(divBottoni); // evento click su ogni bottone in modo da fare vedere i punti delle stazioni con il sensore voluto Object.entries(pulsanti).forEach(entry => { const [key, element] = entry; const bt = document.getElementById('btn' + element.targa ); bt.setAttribute('style', 'background: white; padding: 5px 5px;') // se iso allora li spengo tutti in quanto si attiveranno a seconda se ci sono le informazioni relative if (element.targa.indexOf('ISO') >= 0) { bt.style.display = 'none'; } bt.onclick = function () { AggiungiLivello(element); } }); // mappa geografica CaricaMappa('mappa'); } /** * */ function CreaStyle(dove) { let css = '.piccolo { \ padding: 6px 6px; \ font-size: 14px; \ line-height: 1.45; \ }'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /** * carico il livello indicato */ function AggiungiLivello(btn) { // cambio del colore sul pulsante premuto if (currentBtn) { document.getElementById( 'btn' + currentBtn.targa ).classList.remove('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.remove('text-white'); } currentBtn = btn; document.getElementById( 'btn' + currentBtn.targa ).classList.add('bg-primary'); document.getElementById( 'btn' + currentBtn.targa ).classList.add('text-white'); if (currentBtn.targa.indexOf('ISO') >= 0 ) { addImmagineIso( pathEvento + evento[currentBtn.targa].aggrCorpo.NOMEFILE ); TabellaIso(evento[currentBtn.targa].aggrCorpo.TABELLA); CaricaLegendaColori('Precipitazione', rampPrec); } else { // visualizzo le stazioni del sensore indicato addStazioni(); // faccio vedere le province che addImmagineIso spegne kmlProvince.setVisible( true ); } } /** * Aggiungo l'immagine indicata */ async function addImmagineIso(lnkImage) { // etichetta del significato della mappa visualizzata if (document.getElementById('aggiornamento')) { document.getElementById('aggiornamento').innerHTML = 'Recupero immagine'; } var extent = new ARPAVAPI.openlayers.extent.applyTransform([img.x_min, img.y_min, img.x_max, img.y_max], ARPAVAPI.openlayers.proj.getTransform("EPSG:4326","EPSG:3857") ); const imageLayer = new ARPAVAPI.openlayers.layer.Image({ source: new ARPAVAPI.openlayers.source.ImageStatic({ imageLoadFunction: function (image) { image.getImage().src = lnkImage; }, projection: 'EPSG:3857', imageExtent: extent, imageSize: [1186, 978], // con queste l'immagine è più precisa nel posizionamento gis }), visible: true, name: layerMappa, }); // cancello i layer delle stazioni e delle iso cancellaLayer(); // aggiungo il nuovo layer dell'immagine map.addLayer( imageLayer ); // spengo il layer delle province kmlProvince.setVisible( false ); // informazioni sul significato della mappa visualizzata AggiornaOrarioRifer( evento.orariRiferimento, evento.aggiornamento ); } /** * ritorno il colore rgb in base alla rampa e valore */ function ScalaColori(rampa, valore) { var colore = 'rgb(255,255,255)'; // pallino bianco se fuori scala rampa.forEach(function(classe) { if (valore >= classe.Valore) { colore = 'rgb(' + classe.R + ',' + classe.G + ',' + classe.B + ')'; } }); return colore; } /** * ritorno il pallino colorato da valore; se valore == colorFill allora niente rampa colori */ function PallinoStazione(rampa, valore) { var colore = colorFill; if (valore != colorFill) { // colore da rampa colore = ScalaColori(rampa, valore); } var im = new ARPAVAPI.openlayers.style.Circle({ radius: pointDimension, fill: new ARPAVAPI.openlayers.style.Fill({color: colore}), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: colorLine, width: 1 }) }); return im; } // carico il file nomeJson async function GestioneEvento() { const lnk = pathEvento + nomeJson; const response = await fetch(lnk); const esteso = (await response.json()); evento.aggiornamento = new Date().ConvIstante( esteso.ISTANTERUN ); evento.orariRiferimento = new Date().ConvIstante( esteso.FINE ); // informazioni dell'inizio evento if (esteso.MONITORAGGIO == 'ATTIVO') { evento.inizioMonitoraggio = new Date().ConvIstante( esteso.INIZIOMONITORAGGIO ); } // in base alle aggregazioni presenti attivo il pulsante relativo Object.entries(esteso.AGGREGAZIONI).forEach(entry => { const [key, aggregaz] = entry; const bt = document.getElementById('btnISOIETE' + key ); bt.style.display = 'block'; // valorizzo l'array usato dalla AggiungiLivello evento['ISOIETE' + key] = {'aggrKey': key, 'aggrCorpo':aggregaz}; }); } /** * recupero le stazioni e le visualizzo */ async function addStazioni() { if (document.getElementById('aggiornamento')) { document.getElementById('aggiornamento').innerHTML = 'Recupero stazioni'; } document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('scalaColori').innerHTML = ''; const lnk = lnkStazioni + '?rete=' + currentBtn.rete + '&coordcd=' + currentBtn.coordcd + '&orario=' + currentOrario + '&rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; // carico le stazioni nel geoJSON e valorizzo le variabili per le informazioni let nomeSensore = '', um = '', dataAggio = 0, dataRifer = 0; let coord = []; stzData.forEach((stazione, index) => { let posiz = 'bottom'; if ( coord.includes( stazione.point) ) { posiz = 'top'; } coord.push( stazione.point ); geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, xTextBaseline: posiz, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); if (nomeSensore.length == 0) { nomeSensore = stazione.nome_sensore; um = stazione.misura; dataAggio = new Date().ConvIstante( stazione.aggiornamento ); dataRifer = new Date().ConvIstante( stazione.dataora ); } }); // punto della stazione di colore standard let iconStyle = new ARPAVAPI.openlayers.style.Style({ image: PallinoStazione(rampTemp, colorFill), }); // se vento allora uso una freccia if (currentBtn.targa == 'VVENTO') { iconStyle = new ARPAVAPI.openlayers.style.Style({ image: new ARPAVAPI.openlayers.style.Icon({ rotation: 0, opacity: 1, width: 12, height: 17, scale : [0.5, 1], src: '/risorse/data-meteo/meteogrammi/freccia.png', }) }); } // label stazione var labelStyle = new ARPAVAPI.openlayers.style.Style({ text: new ARPAVAPI.openlayers.style.Text({ placement: 'point', font: fontStz, overflow: true, fill: new ARPAVAPI.openlayers.style.Fill({ color: 'black', }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: sfondoEtichetta, width: 4, }), offsetY: -3, textBaseline: 'bottom', textAlign: 'center', rotation: 0, }) }); var style = [iconStyle, labelStyle]; const vectorLayer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), visible: true, name: layerMappa, style: function(feature) { // valore da visualizzare in base al sensore let et = feature.getProperties().data.valore; let trend = '='; if ( et ) { switch (currentBtn.targa) { case 'LIVIDRO': trend = JSON.parse(et).TREND; et = JSON.parse(et).LIVELLO; break; case 'VVENTO': const tuplaVento = JSON.parse(et); et = tuplaVento.VELOCITA; // rotazione della freccia in radianti var im = iconStyle.getImage(); im.setRotation ( (tuplaVento.DIREZIONE + 180) * (Math.PI / 180) ); im.setOpacity( 1 ); iconStyle.setImage( im ); break; case 'VISIB': // etichetta in base alla visibilità if (isNumeric(et)) { const visi = 1 * et; if (visi <= 0.999) { et = ( 1000 * visi) + ' m'; } if (visi > 0.999) { et = visi.toFixed(1) + ' Km'; } if (visi > 9.999) { et = '>10 Km'; } } break; } } else { et = '>>'; // se vento tolgo la freccia if (currentBtn.targa == 'VVENTO') { var im = iconStyle.getImage(); im.setOpacity( 0 ); iconStyle.setImage( im ); } } labelStyle.getText().setText( '' + et ); // posizione dell'etichetta labelStyle.getText().setTextBaseline( feature.getProperties().xTextBaseline ); // colore del pallino e dell'etichetta let xColo = ''; switch (currentBtn.targa) { case 'TEMP': xColo = PallinoStazione(rampTemp, et); iconStyle.setImage( xColo ); break; case 'PREC': xColo = PallinoStazione(rampPrec, et); iconStyle.setImage( xColo ); break; case 'VISIB': // passo il valore in Km xColo = PallinoStazione(rampVisib, feature.getProperties().data.valore ) ; iconStyle.setImage( xColo ); break; case 'LIVIDRO': switch ( trend ) { case '+': xColo = PallinoStazione(rampIdro, 25); // rosso iconStyle.setImage( xColo ); break; case '-': xColo = PallinoStazione(rampIdro, 10); // verde iconStyle.setImage( xColo ); break; case '=': xColo = PallinoStazione(rampIdro, -10); // blu iconStyle.setImage( xColo ); break; } break; default: xColo = colorFill; break; } return [iconStyle, labelStyle]; }, }); // cancello i layer delle stazioni e delle iso cancellaLayer(); // aggiungo il nuovo layer delle stazioni map.addLayer( vectorLayer ); // orario di riferimento dei dati visualizzati AggiornaOrarioRifer( dataRifer, dataAggio ); // tabella delle stazioni del sensore visualizzato TabellaStazioni(stzData, lnk); // scala dei colori usati per i pallini switch (currentBtn.targa) { case 'TEMP': CaricaLegendaColori('Temperatura', rampTemp); break; case 'PREC': CaricaLegendaColori('Precipitazione', rampPrec); break; case 'VISIB': CaricaLegendaColori('Visibilità', rampVisib); break; case 'LIVIDRO': CaricaLegendaColoriLivello(); break; } } /** * valorizza il div scalaColori con la rampa indicata */ function CaricaLegendaColori(etichetta, rampa) { const leg = document.getElementById('scalaColori'); // se esiste già il pulsante allora lo elimino leg.innerHTML = ''; // pulsante per vedere la rampa colori const bottone = document.createElement('button'); bottone.setAttribute('id', 'btnLegenda'); bottone.setAttribute('class', 'btn btn-outline-primary btn-sm'); bottone.innerHTML = 'Legenda colori ' + etichetta; bottone.onclick = function () { document.getElementById('legendaColori').classList.toggle("d-none"); } leg.appendChild(bottone); // contenitore rampa colori const rampaDiv = document.createElement('div'); rampaDiv.setAttribute('id', 'legendaColori'); rampaDiv.setAttribute('class', 'd-none'); leg.appendChild(rampaDiv); var precedente = -100; var fine = rampa.length; for (var i = 1; i < fine; i++) { var classe = rampa[i]; const livello = document.createElement('div'); livello.setAttribute('id', 'legenda-' + i); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + classe.color + "; background-color:rgb(" + rampa[i-1].R + "," + rampa[i-1].G + "," + rampa[i-1].B + ");" ); if (i == (fine -1) ) { livello.innerHTML = etichetta + ' > ' + precedente + ' ' + currentBtn.unitaMis; } else { if (precedente != -100) { livello.innerHTML = etichetta + ' > ' + precedente + ' e <= ' + classe.Valore + ' ' + currentBtn.unitaMis; } else { livello.innerHTML = etichetta + ' <= ' + classe.Valore + ' ' + currentBtn.unitaMis; } } precedente = classe.Valore; rampaDiv.appendChild(livello); } } /** * valorizza il div scalaColori per il livello idrometrico */ function CaricaLegendaColoriLivello() { const leg = document.getElementById('scalaColori'); // se esiste già il pulsante allora lo elimino leg.innerHTML = ''; // pulsante per vedere la rampa colori const bottone = document.createElement('button'); bottone.setAttribute('id', 'btnLegenda'); bottone.setAttribute('class', 'btn btn-outline-primary btn-sm'); bottone.innerHTML = 'Legenda colori livello idrometrico'; bottone.onclick = function () { document.getElementById('legendaColori').classList.toggle("d-none"); } leg.appendChild(bottone); // contenitore rampa colori const rampaDiv = document.createElement('div'); rampaDiv.setAttribute('id', 'legendaColori'); rampaDiv.setAttribute('class', 'd-none'); leg.appendChild(rampaDiv); //----------------------------------------------------------- // verde var livello = document.createElement('div'); livello.setAttribute('id', 'legenda-verde'); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + rampIdro[LIVELLO_DIMINUZIONE].color + "; background-color:rgb(" + rampIdro[LIVELLO_DIMINUZIONE].R + "," + rampIdro[LIVELLO_DIMINUZIONE].G + "," + rampIdro[LIVELLO_DIMINUZIONE].B + ");" ); livello.innerHTML = 'Livello idrometrico in diminuzione'; rampaDiv.appendChild(livello); //----------------------------------------------------------- // blu livello = document.createElement('div'); livello.setAttribute('id', 'legenda-blu'); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + rampIdro[LIVELLO_STAZIONARIO].color + "; background-color:rgb(" + rampIdro[LIVELLO_STAZIONARIO].R + "," + rampIdro[LIVELLO_STAZIONARIO].G + "," + rampIdro[LIVELLO_STAZIONARIO].B + ");" ); livello.innerHTML = 'Livello idrometrico stazionario'; rampaDiv.appendChild(livello); //----------------------------------------------------------- // rosso livello = document.createElement('div'); livello.setAttribute('id', 'legenda-rosso'); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + rampIdro[LIVELLO_AUMENTO].color + "; background-color:rgb(" + rampIdro[LIVELLO_AUMENTO].R + "," + rampIdro[LIVELLO_AUMENTO].G + "," + rampIdro[LIVELLO_AUMENTO].B + ");" ); livello.innerHTML = 'Livello idrometrico in aumento'; rampaDiv.appendChild(livello); livello = document.createElement('div'); livello.setAttribute('id', 'legenda-spiega'); livello.innerHTML = "

Ultimo valore rispetto a quello dell'ora precedente

"; rampaDiv.appendChild(livello); } /** * ritorna i gradi decimali in sessagesimali (gradi primi secondi) */ function CoordGradi( coord ) { const g = Math.floor(coord); const p = Math.floor( (coord - g ) * 60); const s = (coord - g - (p/60) ) * 60 * 60; const s2 = Math.round(s*1000)/1000; // tre decimali arrotondati const ret = ' ' + g + '° ' + p + "' " + s2 + "'' " myConsoleLog('CoordGradi ' + coord + ' ->' + ret ); return ret; } /** * cancello i layer delle stazioni e delle iso */ function cancellaLayer() { map.getLayers().forEach(layer => { if ( layer && layer.get('name') ) { if ( layer.get('name') == layerMappa) { map.removeLayer(layer); } } }); } /** * Aggiorno il div orarioRifer */ function AggiornaOrarioRifer( dataRifer, dataAggio ) { const lblOrario = document.getElementById('orarioRifer'); lblOrario.innerHTML = ''; const titolo = document.createElement('p'); titolo.setAttribute('id', 'titoloOrarioRifer'); // titolo.setAttribute('class', 'h4'); // per la brillanza non c'è orario di riferimento var titoletto = currentBtn.pulsante + ' (' + currentBtn.unitaMis + ') alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); titolo.innerHTML = titoletto; lblOrario.appendChild(titolo); document.getElementById('aggiornamento').innerHTML = 'Elaborazione delle ' + dataAggio.Formato('HH:mm') + ' solari.'; // se sono sui pulsanti isoiete allora si tratta della cumulata ultime x ore switch (currentBtn.targa) { case 'ISOIETEH1': titolo.innerHTML = 'Precipitazion cumulata ultima ora alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; case 'ISOIETEH3': titolo.innerHTML = 'Precipitazione cumulata ultime 3 ore alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; case 'ISOIETEH6': titolo.innerHTML = 'Precipitazione cumulata ultime 6 ore alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; case 'ISOIETEH12': titolo.innerHTML = 'Precipitazione cumulata ultime 12 ore alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; case 'ISOIETEH24': titolo.innerHTML = 'Precipitazione cumulata ultime 24 ore alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; case 'ISOIETETOT': titolo.innerHTML = 'Precipitazione cumulata da ' + evento.inizioMonitoraggio.Formato('gg g mmm YYYY') + ' alle ' + evento.inizioMonitoraggio.Formato('HH:mm') + ' solari ' + 'sino alle ' + dataRifer.Formato('HH:mm') + ' solari di ' + dataRifer.Formato('gg g mmm YYYY'); break; } } /** * visualizzo la tabella delle stazioni ISO */ function TabellaIso(stzData) { document.getElementById('tabellaStazioni').innerHTML = 'Caricamento dati'; var table = document.createElement('table'); table.setAttribute('id', 'eleStazioni'); table.setAttribute('class', 'table table-sm table-striped table-bordered table-hover table-condensed'); var body = table.createTBody(); // titolo della tabella come prima riga // titolo della tabella in base al pulsante premuto var titoloTabella = ''; switch (currentBtn.targa) { case 'ISOIETEH1': titoloTabella = 'Precipitazion cumulata ultima ora alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; case 'ISOIETEH3': titoloTabella = 'Precipitazione cumulata ultime 3 ore alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; case 'ISOIETEH6': titoloTabella = 'Precipitazione cumulata ultime 6 ore alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; case 'ISOIETEH12': titoloTabella = 'Precipitazione cumulata ultime 12 ore alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; case 'ISOIETEH24': titoloTabella = 'Precipitazione cumulata ultime 24 ore alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; case 'ISOIETETOT': titoloTabella = 'Precipitazione cumulata da ' + evento.inizioMonitoraggio.Formato('gg g mmm YYYY') + ' alle ' + evento.inizioMonitoraggio.Formato('HH:mm') + ' solari
' + 'sino alle ' + evento.orariRiferimento.Formato('HH:mm') + ' solari di ' + evento.orariRiferimento.Formato('gg g mmm YYYY'); break; } const header = table.createTHead(); const rowhead = header.insertRow(0); const cellhead = rowhead.insertCell(0); cellhead.colSpan = "2"; cellhead.innerHTML = titoloTabella; cellhead.style.textAlign = "center"; cellhead.style.backgroundColor = btnBackgroundColor; for (let index = 0; index < stzData.length; index++) { const e1 = stzData[index]; const objStaz = { 'codseqst' : e1.codseqst } var row = body.insertRow(-1); const cell1 = row.insertCell(-1); const cell2 = row.insertCell(-1); const mm = (Math.round(e1.prec*10)/10); var smm = mm.toString(); if ( ! smm.includes('.') ) { smm = smm + '.0'; } cell1.innerHTML = smm + ' (mm)'; cell1.style.textAlign = "center"; cell2.innerHTML = e1.nome; cell2.onclick = function () { vediDati( objStaz ); } cell2.onmouseover = function () { cell2.style.cursor = "pointer"; } cell2.onmouseout = function () { cell2.style.cursor = "default"; } }; var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('tabellaStazioni').append(divTab); } /** * Visualizzo la tabella delle stazioni meteo */ function TabellaStazioni(stzData, lnk) { document.getElementById('tabellaStazioni').innerHTML = 'Caricamento dati'; // metto le stazioni in ordine alfabetico per provincia (sono già in ordine alfabetico basta dividerle per provincia) let ord = {'BELLUNO' : [], 'PADOVA' : [], 'ROVIGO' : [], 'TREVISO' : [], 'VENEZIA' : [], 'VICENZA' : [], 'VERONA' : [], 'UDINE' : []}; stzData.forEach((stazione, index) => { ord[ stazione.provincia ].push( stazione ); }); // myConsoleLog( JSON.stringify(ord, null, 4) ); var table = document.createElement('table'); table.setAttribute('id', 'eleStazioni'); table.setAttribute('class', 'table table-sm table-striped table-bordered table-hover table-condensed'); var body = table.createTBody(); // ciclo le province Object.keys(ord).forEach( nomeProv => { // metto la provincia solo se ci sono stazioni if ( ord[nomeProv].length == 0 ) { return; // equivalente a contineu; questo fa andare alla prossima provincia } var rowProv = body.insertRow(-1); var cellProv = rowProv.insertCell(-1); cellProv.colSpan = '2'; cellProv.innerHTML = 'Stazioni nella provincia di ' + titleCase(nomeProv); cellProv.style.textAlign = "center"; cellProv.style.backgroundColor = btnBackgroundColor; // ciclo le stazioni della provincia for (let index = 0; index < ord[nomeProv].length; index += 2) { const e1 = ord[nomeProv][index]; const e2 = ord[nomeProv][index+1]; var row = body.insertRow(-1); const cell1 = row.insertCell(-1); const cell2 = row.insertCell(-1); cell1.innerHTML = e1.nome_stazione + ' (' + e1.codice_stazione + ')'; cell1.onclick = function () { vediDati( e1 ); } cell1.onmouseover = function () { cell1.style.cursor = "pointer"; } cell1.onmouseout = function () { cell1.style.cursor = "default"; } if (e2) { cell2.innerHTML = e2.nome_stazione + ' (' + e2.codice_stazione + ')'; cell2.onclick = function () { vediDati( e2 ); } cell2.onmouseover = function () { cell2.style.cursor = "pointer"; } cell2.onmouseout = function () { cell2.style.cursor = "default"; } } else { cell2.innerHTML = ''; } } }); var divTab = document.createElement('div'); divTab.setAttribute('id', 'tabElencoStazioni'); divTab.setAttribute('class', 'bmodal-body'); divTab.style.height = "500px"; divTab.style.overflowY = "scroll"; divTab.append(table); document.getElementById('tabellaStazioni').innerHTML = ''; document.getElementById('tabellaStazioni').append(divTab); var jsonRif = document.createElement('a'); jsonRif.setAttribute('href', lnk); jsonRif.setAttribute('target', '_blank'); jsonRif.setAttribute('type', 'text/json'); jsonRif.innerHTML = 'Anagrafica stazioni in formato JSON'; document.getElementById('tabellaStazioni').append(jsonRif); document.getElementById('tabellaStazioni').style.border = ""; } /** * vediDati: richiama la pagina del grafico stazione */ function vediDati( tuplaStaz ) { var lnk = GraficoMeteo; if (currentBtn.targa == 'LIVIDRO') { lnk = GraficoIdro; } // siccome posso arrivare anche dalla tabella iso if ( tuplaStaz.codice_stazione ) { lnk += 'codseqst=' + tuplaStaz.codseqst + '&focus=' + currentBtn.targa + '&return=replace'; } else { lnk = GraficoMeteo + 'codseqst=' + tuplaStaz.codseqst + '&focus=PREC' + '&return=replace'; } window.open(lnk, 'GrafStaz'); } // inizio della pagina function main() { CreaDivPagina(); // all'apertura sulla mappa visualizzo le stazioni idrometriche let primoPulsante = Object.values(pulsanti)[0].targa; // se ho il focus allora mappa sul sensore desiderato (se c'è) if (focus.length > 0) { primoPulsante = focus; } document.getElementById( 'btn' + primoPulsante ).click(); // carico il file nomeJson GestioneEvento(); } main();

Pannello Meteo/Segnalazioni

Questa pagina ti è stata utile?