homemap.component.ts

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import ImageWMS from 'ol/source/ImageWMS';
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 {bbox as bboxStrategy} from 'ol/loadingstrategy';

import { environment } from 'src/environments/environment';
import { OpenWindowService } from 'src/app/services/open-window.service';
import { AuthService } from 'src/app/services/auth.service';
import { ActivatedRoute } from '@angular/router';
import { User } from 'src/app/models/user';
import { StyleCalque } from 'src/app/utlis/style';
import ImageLayer from 'ol/layer/Image';

@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;
  currentUser!: User;

  constructor(private openWindowService: OpenWindowService, private authService: AuthService, private actRoute: ActivatedRoute, private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit(): void {

    let id = Number(this.actRoute.snapshot.paramMap.get('id'));
    this.authService.getUserProfile(id).subscribe((res) => {
      if (res.status === 401) {
        this.authService.doLogout();
      }
      else{
        this.currentUser = res as User;
        this.changeDetectorRef.detectChanges();
      }
    });

    this.openWindowService.openTocEvents.subscribe(status => {
      this.rightPanelVisibility = status;
    });

    this.openWindowService.openLeftPanelEvents.subscribe(status => {
      this.leftPanelVisibility = status;
    });

    const vectorSourceCommunes = new VectorSource({
      format: new GeoJSON(),
      url: environment.communesURL
    });

    const vectorCommunes = new VectorLayer({
      source: vectorSourceCommunes
    });

    vectorCommunes.setProperties({ name: 'Communes', id:'communes' });

    const vectorSourceCalques = new VectorSource({
      format: new GeoJSON(),
      url: function (extent) {
        return (
          environment.calqueURL +
          '&bbox=' +
          extent.join(',')+
          ',EPSG:3857'
        );
      },
      strategy: bboxStrategy
    });

    const vectorCalque = new VectorLayer({
      minZoom: 15,
      source: vectorSourceCalques,
      style: StyleCalque.styleFunction
    });

    vectorCalque.setProperties({ name: 'Plantabilité', id:'calque' });

    const rasterOSM = new TileLayer({
      source: new OSM()
    });

    rasterOSM.setProperties({ name: 'Open Street Map', id:'osm' });

    
    const rasterCalque =  new ImageLayer({
      maxZoom: 15,
      source: new ImageWMS({
        projection: 'EPSG:404000',
        url: environment.calqueRaster,
        params: {'LAYERS': 'Métropole_ERASME:tiles_temp'},
      }),
    });

    rasterCalque.setProperties({ name: 'Plantabilité Raster', id:'calqueRaster' });

    this.map = new Map({
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      view: new View({
        center: fromLonLat([environment.centerLongitude, environment.centerLatitude]),
        zoom: 11
      }),
      layers: [rasterOSM, rasterCalque, vectorCalque, vectorCommunes]
    });
  }

  IsRightPanelVisible(): boolean {
    return this.rightPanelVisibility;
  }

  IsLeftPanelVisible(): boolean {
    return this.leftPanelVisibility;
  }

}