+ Graticule update

lapig-ufg · Feb 7, 2025 · 4880b60 · 4880b60
1 parent db4b648
commit 4880b60
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/client/src/app/@core/services/map.service.ts b/client/src/app/@core/services/map.service.ts
@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
 
 import OlMap from 'ol/Map';
-import { MapEvent, View } from 'ol';
+import { Graticule, MapEvent, View } from 'ol';
 import * as Proj from 'ol/proj';
 import { defaults as defaultInteractions, Interaction } from 'ol/interaction';
 import { Control, defaults as defaultControls } from 'ol/control';
@@ -15,13 +14,21 @@ const ZOOM_DEFAULT: number = 4.6;
 const DEFAULT_LAT = -16.6958288;
 const DEFAULT_LON = -49.4443537;
 
+const GRATICULE = new Graticule({
+  visible: false,
+  zIndex: 100,
+  wrapX: false,
+  showLabels: true
+});
+
 export { MapService, ZOOM_LIMIT }
 
 @Injectable({
   providedIn: 'root',
 })
 class MapService {
   private _map: OlMap = new OlMap({
+    layers: [ GRATICULE ],
     view: new View({
       center: Proj.fromLonLat([DEFAULT_LON, DEFAULT_LAT]),
       zoom: ZOOM_DEFAULT,
@@ -33,10 +40,6 @@ class MapService {
     controls: defaultControls({ attribution: false, zoom: false }).extend([]),
   });
 
-  private _activeLayers: Array<BaseLayer> = [];
-
-  private $activeLayers = new BehaviorSubject<Array<BaseLayer>>(this._activeLayers);
-
   constructor() {
     this.setEvents();
   }
@@ -45,19 +48,19 @@ class MapService {
 
   get layers() { return this._map.getLayers().getArray(); }
 
-  public getActiveLayers(): Observable<BaseLayer[]> {
-    return this.$activeLayers;
+  public updateGraticule(visible: boolean) {
+    this.layers[0].setVisible(visible);
   }
 
   public addLayer(layer: BaseLayer): void {
-    if (!this._map.getLayers().getArray().every(element => element.get('key') != layer.get('key'))) return;
+    if (!this.layers.every(element => element.get('key') != layer.get('key'))) return;
 
     this._map.addLayer(layer);
   }
 
   public addLayers(layers: Array<BaseLayer>): void {
-    layers.forEach((layer) => {
-      this._map.addLayer(layer);
+    layers.forEach((layer: BaseLayer) => {
+      this.addLayer(layer);
     })
   }
 

diff --git a/client/src/app/map-platform/components/options-sidebar/options-sidebar.component.ts b/client/src/app/map-platform/components/options-sidebar/options-sidebar.component.ts
@@ -22,6 +22,7 @@ import { Subscription } from 'rxjs';
 
 import { InputSwitchOnChangeEvent } from 'primeng/inputswitch';
 import {AccordionTabCloseEvent, AccordionTabOpenEvent} from 'primeng/accordion';
+import { MapService } from '@core/services/map.service';
 
 const bmapKeys: string[] = ['mapbox', 'mapbox-dark', 'google', 'google-hybrid'];
 
@@ -41,10 +42,12 @@ class OptionsSidebarComponent {
     {
       key: 'graticule',
       checked: false,
+      onChange: (checked: boolean) => this.onChangeGraticule(checked)
     },
   ];
 
   constructor(
+    private mapService: MapService,
     private descriptorService: DescriptorService,
     public localizationService: LocalizationService
   ) {
@@ -158,10 +161,20 @@ class OptionsSidebarComponent {
    */
   public onChangeOption(key: string, event: InputSwitchOnChangeEvent): void {
     this.options.forEach((option: any) => {
-      if (option.key === key) return;
+      if (option.key === key) {
+        option.onChange(event.checked);
+      }
 
       option.checked = false;
     });
+
+    console.log(event);
+
+    //this.mapService.updateGraticule(this.options.checked)
+  }
+
+  public onChangeGraticule(checked: boolean) {
+    this.mapService.updateGraticule(checked);
   }
 }