Skip to content
Snippets Groups Projects
homemap.component.ts 4.83 KiB
Newer Older
  • Learn to ignore specific revisions
  • ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import OSM from 'ol/source/OSM';
    import { fromLonLat } from 'ol/proj';
    import VectorSource from 'ol/source/Vector';
    import GeoJSON from 'ol/format/GeoJSON';
    import VectorLayer from 'ol/layer/Vector';
    import { DragRotateAndZoom, defaults as defaultInteractions } from 'ol/interaction';
    import { environment } from 'src/environments/environment';
    import { Fill, Stroke, Style } from 'ol/style';
    import { OpenWindowService } from 'src/app/services/open-window.service';
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    import { AuthService } from 'src/app/services/auth.service';
    import { ActivatedRoute } from '@angular/router';
    import { User } from 'src/app/models/user';
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    import { ToastService } from 'src/app/services/toast.service';
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    
    @Component({
      selector: 'frt-homemap',
      templateUrl: './homemap.component.html',
      styleUrls: ['./homemap.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class HomemapComponent implements OnInit {
    
      map!: Map;
      rightPanelVisibility = false;
      leftPanelVisibility = false;
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
      currentUser!: User;
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
      constructor(private openWindowService: OpenWindowService, public authService: AuthService, private actRoute: ActivatedRoute, private toastService: ToastService,  private changeDetectorRef: ChangeDetectorRef) {}
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    
      ngOnInit(): void {
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
    
        let id = Number(this.actRoute.snapshot.paramMap.get('id'));
        this.authService.getUserProfile(id).subscribe((res) => {
          this.currentUser = res as User;
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
          this.changeDetectorRef.detectChanges();
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
        },
        error => {
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
          this.toastService.show(error);
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
        },);
    
    
    ["Younes MHARRECH"]'s avatar
    ["Younes MHARRECH"] committed
        this.openWindowService.openTocEvents.subscribe(status => {
          this.rightPanelVisibility = status;
        });
    
        this.openWindowService.openLeftPanelEvents.subscribe(status => {
          this.leftPanelVisibility = status;
        });
    
        const vectorSource = new VectorSource({
          format: new GeoJSON(),
          url: environment.communesURL
        });
    
        const vectorCommunes = new VectorLayer({
          source: vectorSource
        });
    
        vectorCommunes.setProperties({ name: 'Communes' });
    
        var defaultStyle = new Style({
          fill: new Fill({
            color: [250,250,250,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
        const style1 =  new Style({
          fill: new Fill({
            color: [103,103,103,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
        const style2 =  new Style({
          fill: new Fill({
            color: [255, 123, 57,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
        const style3 =  new Style({
          fill: new Fill({
            color: [231, 197, 109,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
        const style4 =  new Style({
          fill: new Fill({
            color: [187, 226, 144,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
        const style5 =  new Style({
          fill: new Fill({
            color: [124, 186, 42,1]
          }),
          stroke: new Stroke({
            color: [220,220,220,1],
            width: 1
          })
        });
    
    
        function styleFunction(feature: any, resolution :any) {
          var level = feature.getProperties()['indice_min'];
          if (!level) {
            return [defaultStyle];
          }
        
          if(-2.5299999999999998<level && level<-0.80230642504118599){
              return [style1];
          }
          else if(-0.80230642504118599<=level && level<-0.49917627677100501){
              return [style2];
          }
          else if(-0.49917627677100501<=level && level<0.00164744645799){
              return [style3];
          }
          else if(0.00164744645799<=level && level<0.495881383855025){
              return [style4];
          }
          else if(0.495881383855025<=level && level<1){
              return [style5];
          }
          else{
            return [defaultStyle];
          }
    
        }
    
        const vectorCalque = new VectorLayer({
          source: new VectorSource({
            format: new GeoJSON(),
            url: './assets/json/calque.geojson'
          }),
          style: styleFunction
        });
    
        vectorCalque.setProperties({ name: 'Calque Plantabilité' });
    
        const raster = new TileLayer({
          source: new OSM()
        });
    
        raster.setProperties({ name: 'Open Street Map' });
    
        this.map = new Map({
          interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
          view: new View({
            center: fromLonLat([environment.centerLongitude, environment.centerLatitude]),
            zoom: 11
          }),
          layers: [raster, vectorCommunes, vectorCalque]
        });
      }
    
      IsRightPanelVisible(): boolean {
        return this.rightPanelVisibility;
      }
    
      IsLeftPanelVisible(): boolean {
        return this.leftPanelVisibility;
      }
    
    }