diff --git a/tiles-client/src/app/geojson-upload/geojson-upload.component.html b/tiles-client/src/app/geojson-upload/geojson-upload.component.html index 4cb62c7..7625a40 100644 --- a/tiles-client/src/app/geojson-upload/geojson-upload.component.html +++ b/tiles-client/src/app/geojson-upload/geojson-upload.component.html @@ -1,4 +1,4 @@ -
+
- +
+ + + + + + +
[] = []; first = 0; rows = 1; + totalPages: number = 0; + inputPage: number = 1; constructor(public pointService: PointService) { } @@ -23,8 +26,10 @@ export class GeojsonUploadComponent { try { const geojson: FeatureCollection = JSON.parse(reader.result as string); this.features = geojson.features.filter(f => f.geometry.type === 'Point'); + this.totalPages = Math.ceil(this.features.length / this.rows); if (this.features.length > 0) { const firstFeature = this.features[0]; + this.pointService.setPointInfo(firstFeature.properties) const lat = firstFeature.geometry.coordinates[1]; const lon = firstFeature.geometry.coordinates[0]; this.pointService.setPoint({lat, lon}); @@ -45,11 +50,19 @@ export class GeojsonUploadComponent { const feature = this.features[this.first]; const lat = feature.geometry.coordinates[1]; const lon = feature.geometry.coordinates[0]; + this.pointService.setPointInfo(feature.properties) this.pointService.setPoint({lat, lon}); } this.updatePaginatedFeatures(); } + goToPage() { + if (this.inputPage < 1 || this.inputPage > this.totalPages) { + this.inputPage = 1; // Ou defina um comportamento de fallback + } + const newFirst = (this.inputPage - 1) * this.rows; + this.onPageChange({ first: newFirst, rows: this.rows, page: this.inputPage - 1 }); + } updatePaginatedFeatures() { const start = this.first; const end = this.first + this.rows; diff --git a/tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html b/tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html index e16d89c..bbd11b9 100644 --- a/tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html +++ b/tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html @@ -1,4 +1,24 @@ -

Latitude: {{ lat | number }}, Longitude: {{ lon | number }}

+
Latitude: {{ lat | number }}, Longitude: {{ lon | number }}
+ + +
+ + + + Key + Value + + + + + {{ key }} + {{ pointInfo[key] }} + + + +
+ +
@@ -10,7 +30,17 @@

Latitude: {{ lat | number }}, Lo (onChange)="updateLandsatMaps()" > - + + + + + 2019 + i), - "month": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"] - }, { "name": "landsat", "visparam": ["landsat-tvi-false", "landsat-tvi-true", "landsat-tvi-agri"], "period": ["WET", "DRY", "MONTH"], - "year": Array.from({ length: currentYear - 1985 + 1 }, (_, i) => 1985 + i), + "year": Array.from({length: currentYear - 1985 + 1}, (_, i) => 1985 + i), "month": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"] } ] @@ -43,7 +38,6 @@ const CAPABILITIES = { styleUrls: ['./map-grid-landsat.component.scss'] }) export class MapGridLandsatComponent implements OnInit { - public sentinelMaps: (PeriodMapItem | MonthMapItem)[] = []; public landsatMaps: (PeriodMapItem | MonthMapItem)[] = []; private centerCoordinates = fromLonLat([-57.149819, -21.329828]); private mapsInstances: { id: string, map: Map }[] = []; @@ -53,20 +47,21 @@ export class MapGridLandsatComponent implements OnInit { public landsatYears: any[] = []; public selectedLandsatYear: number | string = currentYear; - public sentinelPeriods = ["WET", "DRY", "MONTH"]; public landsatPeriods = ["WET", "DRY", "MONTH"]; - public sentinelVisParams = ["tvi-green", "tvi-red", "tvi-rgb"]; public landsatVisParams = ["landsat-tvi-false", "landsat-tvi-true", "landsat-tvi-agri"]; - public selectedSentinelPeriod = this.sentinelPeriods[0]; public selectedLandsatPeriod = this.landsatPeriods[0]; - public selectedSentinelVisParam = this.sentinelVisParams[0]; public selectedLandsatVisParam = this.landsatVisParams[0]; - constructor(public pointService: PointService) {} + public yearTypes = ['TRADITIONAL', 'PRODES-YEAR']; + public selectedYearType: string = this.yearTypes[0]; + public pointInfo$: Observable = this.pointService.pointInfo$; + + constructor(public pointService: PointService) { + } ngOnInit(): void { this.initializeMaps(); - this.pointService.setPoint({lat: -21.329828, lon: -57.149819}) + this.pointService.setPoint({lat: -21.329828, lon: -57.149819}); this.pointService.point$.subscribe({ next: point => { if (point.lat && point.lon) { @@ -80,8 +75,9 @@ export class MapGridLandsatComponent implements OnInit { if (landsatCapabilities) { this.landsatYears = landsatCapabilities.year; } - this.landsatYears.unshift('Todos') + this.landsatYears.unshift('Todos'); } + private addMarker(lat: number, lon: number, map: Map): void { const iconFeature = new Feature({ geometry: new Point(fromLonLat([lon, lat])), @@ -102,67 +98,98 @@ export class MapGridLandsatComponent implements OnInit { const vectorLayer = new VectorLayer({ source: vectorSource, }); - map.addLayer(vectorLayer) + map.addLayer(vectorLayer); } + private initializeMaps(): void { - this.createMaps('sentinel', this.selectedSentinelPeriod, this.selectedSentinelVisParam); this.createMaps('landsat', this.selectedLandsatPeriod, this.selectedLandsatVisParam); } - private createMaps(type: 'sentinel' | 'landsat', selectedPeriod: string, visparam: string): void { - if (type === 'sentinel') { - this.sentinelMaps = []; - } else { - this.landsatMaps = []; - } + private createMaps(type: 'landsat', selectedPeriod: string, visparam: string): void { + this.landsatMaps = []; - const capabilities = CAPABILITIES.collections.find(c => c.name === (type === 'sentinel' ? 's2_harmonized' : 'landsat')); + const capabilities = CAPABILITIES.collections.find(c => c.name === 'landsat'); if (capabilities) { for (let year of capabilities.year) { - if (this.selectedLandsatYear != 'Todos' && year !== this.selectedLandsatYear) { - continue; - } - if (selectedPeriod === 'MONTH') { - for (let month of capabilities.month) { - if (year === currentYear && parseInt(month, 10) > currentMonth) { - break; - } - let mapId = `${type}-map-${month}-${year}`; - this.addMap(type, mapId, 'MONTH', year, visparam, month); + if (this.selectedYearType === 'PRODES-YEAR') { + if (this.selectedLandsatYear != 'Todos' && year !== this.selectedLandsatYear) { + continue; } + const startDate = new Date(year - 1, 8, 1); // September 1 of previous year + const endDate = new Date(year, 7, 31); // August 31 of the current year + this.loadProdesYearMaps(type, year, visparam, startDate, endDate, selectedPeriod); } else { - let mapId = `${type}-map-${selectedPeriod}-${year}`; - this.addMap(type, mapId, selectedPeriod, year, visparam); + if (this.selectedLandsatYear != 'Todos' && year !== this.selectedLandsatYear) { + continue; + } + this.loadTraditionalYearMaps(type, year, visparam, selectedPeriod); } } } } - private addMap(type: 'sentinel' | 'landsat', mapId: string, periodOrMonth: string, _year: number | string, visparam: string, month?: string): void { - if (_year == 'Todos') { - return; +private loadProdesYearMaps(type: 'landsat', year: number, visparam: string, startDate: Date, endDate: Date, selectedPeriod: string): void { + // Se o selectedPeriod for 'MONTH', carregar os meses entre startDate e endDate + if (selectedPeriod === 'MONTH') { + let startMonth = startDate.getMonth() + 1; // meses em JavaScript são baseados em 0 + let startYear = startDate.getFullYear(); + let endMonth = endDate.getMonth() + 1; + let endYear = endDate.getFullYear(); + + // Loop para cada mês entre startDate e endDate + for (let y = startYear; y <= endYear; y++) { + let fromMonth = (y === startYear) ? startMonth : 1; + let toMonth = (y === endYear) ? endMonth : 12; + + for (let m = fromMonth; m <= toMonth; m++) { + let month = m < 10 ? `0${m}` : `${m}`; // Formata o mês com dois dígitos + if (y === currentYear && parseInt(month, 10) > currentMonth) { + break; + } + + // Gera o ID do mapa e adiciona à lista + let mapId = `${type}-map-${month}-${y}`; + this.landsatMaps.push({ month, year: y, id: mapId }); + + // Adiciona o mapa + this.addMap(type, mapId, 'MONTH', y, visparam, month); + } } - const year = Number(_year); - if (type === 'sentinel') { - if (periodOrMonth === 'MONTH') { - this.sentinelMaps.push({ month: month as string, year, id: mapId }); - } else { - this.sentinelMaps.push({ period: periodOrMonth, year, id: mapId }); + } else { + // Se não for 'MONTH', carrega o mapa do período selecionado + let mapId = `${type}-map-${selectedPeriod}-${year}`; + this.landsatMaps.push({ period: selectedPeriod, year, id: mapId }); + this.addMap(type, mapId, selectedPeriod, year, visparam); + } +} + + private loadTraditionalYearMaps(type: 'landsat', year: number, visparam: string, selectedPeriod: string): void { + if (selectedPeriod === 'MONTH') { + for (let month of CAPABILITIES.collections[0].month) { + if (year === currentYear && parseInt(month, 10) > currentMonth) { + break; + } + let mapId = `${type}-map-${month}-${year}`; + + // Adiciona o mapa à lista de mapas Landsat + this.landsatMaps.push({month, year, id: mapId}); + + this.addMap(type, mapId, 'MONTH', year, visparam, month); } } else { - if (periodOrMonth === 'MONTH') { - this.landsatMaps.push({ month: month as string, year, id: mapId }); - } else { - this.landsatMaps.push({ period: periodOrMonth, year, id: mapId }); - } + let mapId = `${type}-map-${selectedPeriod}-${year}`; + + // Adiciona o mapa à lista de mapas Landsat + this.landsatMaps.push({period: selectedPeriod, year, id: mapId}); + + this.addMap(type, mapId, selectedPeriod, year, visparam); } - this.createMap(mapId, periodOrMonth, year, type, visparam, month); } - private createMap(mapId: string, periodOrMonth: string, year: number, type: string, visparam: string, month?: string): void { + private addMap(type: 'landsat', mapId: string, periodOrMonth: string, year: number, visparam: string, month?: string): void { + const url = `https://tm{1-5}.lapig.iesa.ufg.br/api/layers/landsat/{x}/{y}/{z}?period=${periodOrMonth}&year=${year}&visparam=${visparam}${periodOrMonth === 'MONTH' ? `&month=${month}` : ''}`; setTimeout(() => { - const url = `https://tm{1-5}.lapig.iesa.ufg.br/api/layers/${type === 'sentinel' ? 's2_harmonized' : 'landsat'}/{x}/{y}/{z}?period=${periodOrMonth}&year=${year}&visparam=${visparam}${periodOrMonth === 'MONTH' ? `&month=${month}` : ''}`; const map = new Map({ target: mapId, layers: [ @@ -172,7 +199,7 @@ export class MapGridLandsatComponent implements OnInit { attributions: `${periodOrMonth === 'MONTH' ? `Month ${month}` : periodOrMonth} - ${year}`, attributionsCollapsible: false, }), - }) + }), ], view: new View({ center: this.centerCoordinates, @@ -183,14 +210,14 @@ export class MapGridLandsatComponent implements OnInit { handleDownEvent: (event) => { const coordinates = toLonLat(event.coordinate) as [number, number]; this.updateCenterCoordinates(coordinates); - return true; // stop event propagation + return true; } - }) - ]) + }), + ]), }); const projectedCoordinate = transform(this.centerCoordinates, 'EPSG:3857', 'EPSG:4326'); this.addMarker(projectedCoordinate[1], projectedCoordinate[0], map); - this.mapsInstances.push({ id: mapId, map }); + this.mapsInstances.push({id: mapId, map}); }, 0); } @@ -207,8 +234,12 @@ export class MapGridLandsatComponent implements OnInit { this.addMarker(projectedCoordinate[1], projectedCoordinate[0], mapInstance.map); } } + public updateLandsatMaps(): void { this.mapsInstances = this.mapsInstances.filter(mapInstance => !mapInstance.id.startsWith('landsat-map')); this.createMaps('landsat', this.selectedLandsatPeriod, this.selectedLandsatVisParam); } + public getObjectKeys(object: any): string[] { + return Object.keys(object); + } } diff --git a/tiles-client/src/app/grid-map/map-grid.module.ts b/tiles-client/src/app/grid-map/map-grid.module.ts index 305d285..f8fe535 100644 --- a/tiles-client/src/app/grid-map/map-grid.module.ts +++ b/tiles-client/src/app/grid-map/map-grid.module.ts @@ -14,6 +14,8 @@ import {FormsModule} from "@angular/forms"; import {SelectButtonModule} from "primeng/selectbutton"; import {MapGridLandsatComponent} from "./map-grid-landsat/map-grid-landsat.component"; import {DropdownModule} from "primeng/dropdown"; +import {TableModule} from "primeng/table"; +import {PanelModule} from "primeng/panel"; PlotlyModule.plotlyjs = PlotlyJS; @NgModule({ @@ -28,7 +30,9 @@ PlotlyModule.plotlyjs = PlotlyJS; TabViewModule, FormsModule, SelectButtonModule, - DropdownModule + DropdownModule, + TableModule, + PanelModule ], declarations: [ HomeComponent, diff --git a/tiles-client/src/app/grid-map/services/point.service.ts b/tiles-client/src/app/grid-map/services/point.service.ts index e495d53..d0bfe86 100644 --- a/tiles-client/src/app/grid-map/services/point.service.ts +++ b/tiles-client/src/app/grid-map/services/point.service.ts @@ -12,6 +12,12 @@ export interface Point { export class PointService { private point = new BehaviorSubject({ lat: undefined, lon: undefined }); point$ = this.point.asObservable(); + private pointInfo = new BehaviorSubject(null); + pointInfo$ = this.pointInfo.asObservable(); + + setPointInfo(info: any): void { + this.pointInfo.next(info); + } setPoint(point: Point): void { this.point.next(point); diff --git a/tiles-client/src/app/layout/app.topbar.component.html b/tiles-client/src/app/layout/app.topbar.component.html index ea0d24d..2544b40 100644 --- a/tiles-client/src/app/layout/app.topbar.component.html +++ b/tiles-client/src/app/layout/app.topbar.component.html @@ -7,19 +7,25 @@

-
    - -
  • + + + + + + +
  • - + - + - - -
    • + + +
diff --git a/tiles-client/src/app/layout/app.topbar.component.ts b/tiles-client/src/app/layout/app.topbar.component.ts index 5af549b..16fb692 100644 --- a/tiles-client/src/app/layout/app.topbar.component.ts +++ b/tiles-client/src/app/layout/app.topbar.component.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { LayoutService } from 'src/app/layout/service/app.layout.service'; import {PointService} from "../grid-map/services/point.service"; +import {Observable} from "rxjs"; @Component({ selector: 'app-topbar', @@ -9,6 +10,7 @@ import {PointService} from "../grid-map/services/point.service"; export class AppTopbarComponent { latitude!:number; longitude!:number; + public pointInfo$: Observable = this.pointService.pointInfo$; @ViewChild('menubutton') menuButton!: ElementRef;