fieldcalc-frontend/src/app/app.service.ts

import {Injectable} from '@angular/core';

import proj4 from 'proj4';
import {GeoJSON} from 'ol/format';
import {OSM, TileWMS, Vector as VectorSource} from 'ol/source';
import {Tile, Vector as VectorLayer} from 'ol/layer';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import {get as getProjection, transform} from 'ol/proj';
import {register} from 'ol/proj/proj4';
import {transformExtent} from 'ol/proj';

import {
  HsConfig,
  HsEventBusService,
  HsLanguageService,
  HsLayerManagerService,
  HsLayoutService,
  HsMapService,
  HsPanelContainerService,
  HsQueryVectorService,
  HsSidebarService,
  getTitle,
} from 'hslayers-ng';

import {FcCalculatorService} from './calculator/calculator.service';
import {imageWmsTLayer} from './calculator/image-wms-t-layer';

proj4.defs(
  'EPSG:3045',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
);
proj4.defs(
  'EPSG:5514',
  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
);
register(proj4);

@Injectable({providedIn: 'root'})
export class AppService {
  sjtskProjection = getProjection('EPSG:5514');
  constructor(
    public calcService: FcCalculatorService,
    public hsConfig: HsConfig,
    public hsEventBus: HsEventBusService,
    public hsLanguageService: HsLanguageService,
    public hsLayerManagerService: HsLayerManagerService,
    public hsLayoutService: HsLayoutService,
    public hsPanelContainerService: HsPanelContainerService,
    public hsSidebarService: HsSidebarService,
    private hsMapService: HsMapService,
    private hsQueryVectorService: HsQueryVectorService
  ) {}

  init(): void {
    /* Define the polygon's style using SLD */
    const fieldSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
      <StyledLayerDescriptor version="1.0.0" 
          xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
          xmlns="http://www.opengis.net/sld" 
          xmlns:ogc="http://www.opengis.net/ogc" 
          xmlns:xlink="http://www.w3.org/1999/xlink" 
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <NamedLayer>
          <Name>Simple point with stroke</Name>
          <UserStyle>
            <Title>Default</Title>
            <FeatureTypeStyle>
              <Rule>
              <PolygonSymbolizer>
              <Fill>
                <CssParameter name="fill">#ffffff</CssParameter>
                <CssParameter name="fill-opacity">0.7</CssParameter>
              </Fill>
              <Stroke>
                <CssParameter name="stroke">#33cccc</CssParameter>
                <CssParameter name="stroke-opacity">1</CssParameter>
                <CssParameter name="stroke-width">2.0</CssParameter>
              </Stroke>
              </PolygonSymbolizer>
              </Rule>
            </FeatureTypeStyle>
          </UserStyle>
        </NamedLayer>
      </StyledLayerDescriptor>
    `;
    const lpisSource = new VectorSource({
      format: new GeoJSON({
        dataProjection: 'EPSG:5514',
        featureProjection: this.hsMapService.getCurrentProj('default'),
      }),
      url: (extent) => {
        if (extent == undefined) {
          extent = this.hsMapService.getMapExtent('default');
        }
        const cur_proj = this.hsMapService.getCurrentProj('default');
        extent = transformExtent(extent, cur_proj, 'EPSG:5514');
        const kulturaKod = 1; // Doesn't seem to work
        const proxyPath = window.location.hostname.includes('localhost')
          ? 'http://localhost:8085/'
          : '/proxy/';
        return (
          proxyPath +
          'https://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/foodie/lpis.map' +
          '&service=WFS' +
          '&VERSION=1.1.0' +
          '&REQUEST=GetFeature' +
          '&TYPENAME=lpis_borders' +
          '&COUNT=100' +
          '&outputformat=geojson' +
          '&SRSNAME=EPSG:5514' +
          `&BBOX=${extent ? extent.join(',') : ''}`
          // + `FILTER=&<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>kultura</ogc:PropertyName><ogc:Literal>${kulturaKod}</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>`
        );
        //%3Cgml:Box%3E%3Cgml:coordinates%3E${
        //extent.join(',')
        //}%3C/gml:coordinates%3E%3C/gml:Box%3E%3C/ogc:Filter%3E`;
      },
      strategy: bboxStrategy,
    });
    lpisSource.on(
      'featuresloadstart',
      () => (this.calcService.lpisLoading = true)
    );
    lpisSource.on(
      'featuresloadend',
      () => (this.calcService.lpisLoading = false)
    );
    lpisSource.on('featuresloaderror', (evt) => {
      this.calcService.lpisLoading = false;
      console.warn('error when loading LPIS layer');
      console.log(evt);
    });
    /*const waterThematicLayers = [
      new Tile({
        properties: {
          title:
            'Vodní útvary povrchových vod karegorie "řeka" včetně silně ovlivněných vodních útvarů a umělých vodních útvarů: 2. plánovací cyklus',
          //queryCapabilities: false,
        },
        source: new TileWMS({
          url: 'https://heis.vuv.cz/data/webmap/wms.dll?SERVICE=WMS&VERSION=1.3.0&MU=CS&',
          params: {
            LAYERS: 'isvs_upovr',
            INFO_FORMAT: 'text/html',
            STYLES: 'inspire_common:DEFAULT',
            FORMAT: 'image/png',
          },
          crossOrigin: 'anonymous',
        }),
      }),
      new Tile({
        properties: {
          title:
            'Vodní útvary povrchových vod karegorie "jezero" včetně silně ovlivněných vodních útvarů a umělých vodních útvarů: 2. plánovací cyklus',
          //queryCapabilities: false,
        },
        source: new TileWMS({
          url: 'https://heis.vuv.cz/data/webmap/wms.dll?SERVICE=WMS&VERSION=1.3.0&MU=CS&',
          params: {
            LAYERS: 'isvs_upovj',
            INFO_FORMAT: 'text/html',
            STYLES: 'inspire_common:DEFAULT',
            FORMAT: 'image/png',
          },
          crossOrigin: 'anonymous',
        }),
      }),
      new Tile({
        properties: {
          title: 'OPVZ - vodárenské nádrže',
          //queryCapabilities: false,
        },
        source: new TileWMS({
          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
          params: {
            LAYERS: 'OPVZ_OPVN',
            STYLES: 'default',
            FORMAT: 'image/png; mode=8bit',
            VERSION: '1.3.0',
          },
          crossOrigin: 'anonymous',
        }),
      }),
      new Tile({
        properties: {
          title: 'OPVZ - podzemní nebo povrchové',
          //queryCapabilities: false,
        },
        source: new TileWMS({
          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
          params: {
            LAYERS: 'VODSTVO_BUFF_25M',
            STYLES: 'default',
            FORMAT: 'image/png; mode=8bit',
            VERSION: '1.3.0',
          },
          crossOrigin: 'anonymous',
        }),
      }),
      new Tile({
        properties: {
          title: 'OPVZ - podzemní nebo povrchové',
          //queryCapabilities: false,
        },
        source: new TileWMS({
          url: 'https://eagri.cz/public/app/wms/public_zp.fcgi?language=eng&',
          params: {
            LAYERS: 'OPVZ_PODZ_POVRCH',
            STYLES: 'default',
            FORMAT: 'image/png; mode=8bit',
            VERSION: '1.3.0',
          },
          crossOrigin: 'anonymous',
        }),
      }),
    ];*/
    /* Define and update the HsConfig configuration object */
    const translationOverrides = this.hsConfig.get().translationOverrides ?? {};
    const mergedTranslationOverrides = {
      ...translationOverrides,
      ...{
        'cs': {
          'CALCULATOR': {
            'blurNone': 'žádné',
            'getDates': 'VYBRAT DATUM',
            'getZones': 'ZÍSKAT ZÓNY',
            'errorLoading': 'Chyba při načítání dat',
            'errorLoadingDates':
              'Nebylo možné načíst seznam možných dat ze serveru. Zkuste to prosím později.',
            'errorLoadingZones':
              'Nebylo možné načíst zóny pole ze serveru. Pravděpodobně z důvodu přílišné oblačnosti snímku. Zkuste jiný datum.',
            'loading': 'Načítám',
            'panelHeader': 'Výpočet indexů pole',
            'selectBlur': 'Vyhlazení hran zón',
            'selectDate': 'Chci datum',
            'selectField':
              'Vyberte pole kliknutím do mapy. Více polí můžete vybrat podržením klávesy SHIFT.',
            'selectMore': 'Více polí můžete vybrat podržením klávesy SHIFT',
            'selectedField': 'Vybráno pole',
            'selectedFields': 'Vybrána pole',
            'selectFieldAndIndex': 'Nejprve vyberte index a pole v mapě',
            'selectIndex': 'Vypočítat index',
            'selectIndexHint': 'Vyberte z dostupných indexů',
            'selectQuantiles': 'Počet kvantilů',
            'zoomIn': 'Pro výběr pole je potřeba mapu přiblížit.',
          },
        },
        'en': {
          'CALCULATOR': {
            'blurNone': 'none',
            'getDates': 'GET DATES',
            'getZones': 'GET ZONES',
            'errorLoading': 'Error loading data',
            'errorLoadingDates':
              'It was not possible to load available dates from the server. Please, try again later.',
            'errorLoadingZones':
              'It was not possible to load field zones from the server. This is probably due to the high cloudiness of the source image. Try another date.',
            'loading': 'Loading',
            'panelHeader': 'Field calculation',
            'selectBlur': 'Smoothing zone edges',
            'selectDate': 'I want a date',
            'selectField':
              'Select a field by clicking in the map. You can select more fields by press and holding the SHIFT key.',
            'selectMore':
              'You can select more fields by press and holding the SHIFT key',
            'selectedField': 'Selected field',
            'selectedFields': 'Selected fields',
            'selectFieldAndIndex':
              'Select an index and a field in the map to continue',
            'selectIndex': 'Calculate index',
            'selectIndexHint': 'Select one of the available indices',
            'selectQuantiles': 'Quantiles count',
            'zoomIn': 'In order to select the field, you must zoom in the map.',
          },
          'PANEL_HEADER': {'CALCULATOR': 'Field calculation'},
        },
      },
    };
    this.hsConfig.update(
      {
        datasources: [
          /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
          /*{
            title: 'Layman',
            url: 'http://localhost:8087',
            user: 'anonymous',
            type: 'layman',
            liferayProtocol: 'https',
          },*/
          {
            title: 'Micka',
            url: 'https://www.agrihub.cz/micka/csw',
            language: 'eng',
            type: 'micka',
          },
        ],
        /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
        proxyPrefix: window.location.hostname.includes('localhost')
          ? `${window.location.protocol}//${window.location.hostname}:8085/`
          : '/proxy/',
        useProxy: true,
        panelsEnabled: {
          composition_browser: true,
          info: false,
          saveMap: false,
          legend: false,
          tripPlanner: false,
        },
        componentsEnabled: {
          basemapGallery: true,
        },
        //assetsPath: 'assets',
        symbolizerIcons: [
          {name: 'beach', url: '/assets/icons/beach17.svg'},
          {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
          {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
          {name: 'mountain', url: '/assets/icons/mountain42.svg'},
          {name: 'warning', url: '/assets/icons/warning.svg'},
        ],
        popUpDisplay: 'hover',
        translationOverrides: mergedTranslationOverrides,
      },
      'default'
    );
    this.hsLanguageService.setLanguage('en');
    this.hsLayoutService.setDefaultPanel('calculator');
    for (const layer of [
      new Tile({
        properties: {
          title: 'Ortofoto ČÚZK',
          base: true,
          removable: false,
          thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
        },
        source: new TileWMS({
          url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
          params: {
            LAYERS: 'GR_ORTFOTORGB',
          },
          attributions: [
            '© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>',
          ],
        }),
        visible: false,
      }),
      /* Thematic layers */
      imageWmsTLayer,
      new VectorLayer({
        properties: {
          title: 'LPIS (WFS)',
          synchronize: false,
          cluster: false,
          queryable: true,
          inlineLegend: true,
          editor: {
            editable: false,
          },
          sld: fieldSld,
          popUp: {
            attributes: [
              'id_dpb',
              'id_uz',
              'nkod_dpb',
              'kultura',
              'svazitost',
              'vymeram',
            ],
          },
          //path: 'User generated',
        },
        minZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
        opacity: 0.7,
        source: lpisSource,
      }),
      new Tile({
        properties: {
          title: 'LPIS (WMS)',
          queryCapabilities: false,
        },
        maxZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
        source: new TileWMS({
          url: 'https://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/foodie/lpis.map',
          params: {
            LAYERS: 'lpis_borders', //'lpis_cultures'
            INFO_FORMAT: undefined,
            FORMAT: 'image/png; mode=8bit',
          },
          crossOrigin: 'anonymous',
        }),
      }),
    ]) {
      this.hsMapService
        .getLayersArray()
        .filter((l) => getTitle(l) == getTitle(layer))
        .map((l) => this.hsMapService.getMap().removeLayer(l));
      this.hsMapService.addLayer(layer, 'default');
    }
  }
}