Skip to content

Commit

Permalink
update map view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tharlestsa
tharlestsa committed Oct 19, 2024
1 parent 66b2056 commit 7963bcd
Show file tree
Hide file tree
Showing 8 changed files with 183 additions and 74 deletions.
21 changes: 19 additions & 2 deletions tiles-client/src/app/geojson-upload/geojson-upload.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="flex align-content-center justify-content-center">
<div class="flex align-content-center justify-content-center align-items-center">
<p-fileUpload
class="mt-2"
mode="basic"
Expand All @@ -9,7 +9,24 @@
(onSelect)="onFileSelect($event)"
chooseLabel="GeoJSON">
</p-fileUpload>

<div *ngIf="features && features.length" class="p-inputgroup ml-3 mr-3 w-3 h-3">
<p-inputNumber
[(ngModel)]="inputPage"
[min]="1"
[max]="totalPages"
mode="decimal"
[showButtons]="true"
[step]="1"
placeholder="Digite a página">
</p-inputNumber>
<span class="p-inputgroup-addon">
<p-button
icon="pi pi-search"
class="p-button-info"
(onClick)="goToPage()">
</p-button>
</span>
</div>
<div *ngIf="features && features.length">
<p-paginator
(onPageChange)="onPageChange($event)"
Expand Down
13 changes: 13 additions & 0 deletions tiles-client/src/app/geojson-upload/geojson-upload.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Component} from '@angular/core';
import {FeatureCollection, Feature, Point} from 'geojson';
import {PointService} from "../grid-map/services/point.service";
import {log} from "ol/console";

@Component({
selector: 'app-geojson-upload',
Expand All @@ -12,6 +13,8 @@ export class GeojsonUploadComponent {
paginatedFeatures: Feature<Point>[] = [];
first = 0;
rows = 1;
totalPages: number = 0;
inputPage: number = 1;

constructor(public pointService: PointService) {
}
Expand All @@ -23,8 +26,10 @@ export class GeojsonUploadComponent {
try {
const geojson: FeatureCollection<Point> = 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});
Expand All @@ -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;
Expand Down
34 changes: 32 additions & 2 deletions tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@
<h4 *ngIf="lat && lon" class="text-center card">Latitude: {{ lat | number }}, Longitude: {{ lon | number }}</h4>
<h5 *ngIf="lat && lon" class="text-center m-5">Latitude: {{ lat | number }}, Longitude: {{ lon | number }}</h5>
<ng-container class="w-5" *ngIf="pointInfo$ | async as pointInfo">
<p-panel header="Point Info" [toggleable]="true" [collapsed]="true">
<div class="card ">
<p-table [value]="getObjectKeys(pointInfo)">
<ng-template pTemplate="header">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-key>
<tr>
<td>{{ key }}</td>
<td>{{ pointInfo[key] }}</td>
</tr>
</ng-template>
</p-table>
</div>
</p-panel>
</ng-container>
<div class="flex justify-content-evenly">
<span class="flex flex-column align-items-center">
<label for="period-type-land">Period Type</label>
Expand All @@ -10,7 +30,17 @@ <h4 *ngIf="lat && lon" class="text-center card">Latitude: {{ lat | number }}, Lo
(onChange)="updateLandsatMaps()"
></p-selectButton>
</span>
<span class="flex flex-column align-items-center">
<span class="flex flex-column align-items-center">
<label for="year-type">Year Type</label>
<p-selectButton
id="year-type"
[options]="yearTypes"
[(ngModel)]="selectedYearType"
class="w-full"
(onChange)="updateLandsatMaps()"
></p-selectButton>
</span>
<span class="flex flex-column align-items-center">
<label for="year-select-sant">Year</label>
<p-dropdown
class="w-full"
Expand Down
153 changes: 92 additions & 61 deletions tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Component, OnInit } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {fromLonLat, toLonLat, transform} from 'ol/proj';
import { defaults as defaultInteractions } from 'ol/interaction';
import {defaults as defaultInteractions} from 'ol/interaction';
import Pointer from 'ol/interaction/Pointer';
import {MonthMapItem, PeriodMapItem} from "../../interfaces/map.interface";
import {LayerService} from "../services/layer.service";
Expand All @@ -15,23 +15,18 @@ import {Icon, Style} from "ol/style";
import {marker} from "../../../assets/layout/images/marker";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import {Observable} from "rxjs";

const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;

const CAPABILITIES = {
"collections": [
{
"name": "s2_harmonized",
"visparam": ["tvi-green", "tvi-red", "tvi-rgb"],
"period": ["WET", "DRY", "MONTH"],
"year": Array.from({ length: currentYear - 2019 + 1 }, (_, i) => 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"]
}
]
Expand All @@ -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 }[] = [];
Expand All @@ -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<any> = 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) {
Expand All @@ -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])),
Expand All @@ -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: [
Expand All @@ -172,7 +199,7 @@ export class MapGridLandsatComponent implements OnInit {
attributions: `${periodOrMonth === 'MONTH' ? `Month ${month}` : periodOrMonth} - ${year}`,
attributionsCollapsible: false,
}),
})
}),
],
view: new View({
center: this.centerCoordinates,
Expand All @@ -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);
}

Expand All @@ -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);
}
}
Loading

0 comments on commit 7963bcd

Please sign in to comment.