map-service.js

import TileWMS from 'ol/source/TileWMS';
import { View, Map } from 'ol';
import { ScaleLine, Zoom, Attribution } from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import { transform, transformExtent } from 'ol/proj.js';
import { defaults } from 'ol/interaction';
import XYZ from 'ol/source/XYZ';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import { MVT, GeoJSON } from 'ol/format';
import { boundingExtent } from 'ol/extent';
import Overlay from 'ol/Overlay';
import {
  Fill, Stroke, Style, Circle //RegularShape, Circle as CircleStyle, Text,Icon
} from 'ol/style';
import { asArray } from 'ol/color';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { fromLonLat } from 'ol/proj.js';
import OverlayPositioning from 'ol/OverlayPositioning';

import axios from '@/axios-client.js';
import router from '@/router';
import { statusChoices } from '@/utils';

let dictLayersToLeaflet = {};

const mapService = {
  layers: [],

  mvtLayer: undefined,

  content: {},

  overlay: {},

  map: undefined,


  getMap() {
    return this.map;
  },

  destroyMap() {
    this.map = undefined;
  },

  createMap(el, options) {
    const {
      lat,
      lng,
      mapDefaultViewCenter,
      mapDefaultViewZoom,
      zoom,
      zoomControl = true,
      interactions = { doubleClickZoom: false, mouseWheelZoom: false, dragPan: true },
    } = options;

    if (el.innerHTML) {
      el.innerHTML = '';
    }

    this.map = new Map({
      layers: [],
      target: el,
      controls: [
        new Attribution(),
        new ScaleLine({
          units: 'metric',
        })],
      interactions: defaults(interactions),
      view: new View({
        center: transform([
          !lng ? mapDefaultViewCenter[1] : lng,
          !lat ? mapDefaultViewCenter[0] : lat,

        ], 'EPSG:4326', 'EPSG:3857'),
        zoom: !zoom ? mapDefaultViewZoom : zoom
      }),
    });

    if (zoomControl) {
      this.map.addControl(new Zoom({ zoomInTipLabel: 'Zoomer', zoomOutTipLabel: 'Dézoomer' }));
    }
    this.map.once('rendercomplete', () => {
      this.map.updateSize();
    });
    const container = document.getElementById('popup');
    this.content = document.getElementById('popup-content');
    const closer = document.getElementById('popup-closer');

    this.overlay = new Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 500,
      },
    });
    let overlay = this.overlay;
    if (closer) {
      closer.onclick = function () {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      }; 
    }
    this.map.addOverlay(this.overlay);

    this.map.on('click', this.onMapClick.bind(this));
    return this.map;
  },

  
  addRouterToPopup(featureTypeSlug, featureId) {
    function goToFeatureDetail() {
      console.log(featureTypeSlug, featureId);
      router.push({
        name: 'details-signalement',
        params: {
          slug_type_signal: featureTypeSlug,
          slug_signal: featureId,
        },
      });
    }
  
    function goToFeatureTypeDetail() {
      router.push({
        name: 'details-type-signalement',
        params: {
          feature_type_slug: featureTypeSlug,
        },
      });
    }
    document.getElementById('goToFeatureTypeDetail').onclick = goToFeatureTypeDetail;
    document.getElementById('goToFeatureDetail').onclick = goToFeatureDetail;
  },

  onMapClick(event) {
    //* retrieve features under pointer
    const features = this.map.getFeaturesAtPixel(event.pixel, {
      layerFilter: (l) => l ===  this.mvtLayer || this.olLayer
    });
    //* prepare popup content
    if (features && features.length > 0) {
      const popupContent = this._createContentPopup(features[0], this.featureTypes);
      this.content.innerHTML = popupContent.html;
      this.overlay.setPosition(event.coordinate);
      this.addRouterToPopup(popupContent.feature_type.slug, popupContent.featureId);
    }
    //const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
    if (this.layers) {
      const queryLayer = this.layers.find(x => x.query);
      // pour compatibilité avec le proxy django
      const proxyparams = [
        'request',
        'service',
        'srs',
        'version',
        'bbox',
        'height',
        'width',
        'layers',
        'query_layers',
        'info_format', 'x', 'y', 'i', 'j',
      ];
      if (queryLayer) {
        const url = this.getFeatureInfoUrl(event, queryLayer);
        const urlInfos = url.split('?');
        const urlParams = new URLSearchParams(urlInfos[1]);
        const params = {};
        Array.from(urlParams.keys()).forEach(param => {
          if (proxyparams.indexOf(param.toLowerCase()) >= 0) {
            params[param.toLowerCase()] = urlParams.get(param);
          }
        });
        params.url = urlInfos[0];
        axios.get(
          window.proxy_url,
          { params }
        ).then(response => {
          const data = response.data;
          const err = typeof data === 'object' ? null : data;
          if (data.features || err) this.showGetFeatureInfo(err, event, data, queryLayer);
        }).catch(error => {
          throw error;
        });
      }
    }

  },

  showGetFeatureInfo: function (err, event, data, layer) {
    let content;
    if (err) {
      content = `
          <h4>${layer.options.title}</h4>
          <p>Données de la couche inaccessibles</p>
      `;
      this.content.innerHTML = content;
      this.overlay.setPosition(event.coordinate);
    } else { // Otherwise show the content in a popup
      const contentLines = [];
      let contentTitle;
      if (data.features.length > 0) {
        Object.entries(data.features[0].properties).forEach(entry => {
          const [key, value] = entry;
          if (key !== 'bbox') {
            contentLines.push(`<div>${key}: ${value}</div>`);
          }
        });
        contentTitle = `<h4>${layer.options.title}</h4>`;
        content = contentTitle.concat(contentLines.join(''));

        this.content.innerHTML = content;
        this.overlay.setPosition(event.coordinate);
      }
    }
  },

  getFeatureInfoUrl(event, layer) {
    const olLayer = dictLayersToLeaflet[layer.id];
    const source = olLayer.getSource();
    const viewResolution = this.map.getView().getResolution();
    let url;
    const wmsOptions = { info_format: 'application/json', query_layers: layer.options.layers };
    if (source && source.getFeatureInfoUrl) {
      url = source.getFeatureInfoUrl(event.coordinate, viewResolution, 'EPSG:3857', wmsOptions);
    }
    return url;
  },

  fitBounds(bounds) {
    let ext = boundingExtent([[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]]);
    ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
    this.map.getView().fit(ext, { padding: [25, 25, 25, 25] });

  },

  fitExtent(ext) {
    //ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
    this.map.getView().fit(ext, { padding: [25, 25, 25, 25] });

  },

  addLayers: function (layers, serviceMap, optionsMap, schemaType) {
    this.layers = layers;
    if (layers) { //* if admin has defined basemaps for this project
      let count = 0;
      layers.forEach((layer) => {
        if (layer) {
          count +=1;
          const options = layer.options;
          if (options) {
            options.noWrap = true;
            options.opacity = layer.opacity;
            if (layer.schema_type === 'wms') {
              if (layer.queryable) {
                options.title = layer.title;
                dictLayersToLeaflet[layer.id] = this.addWMSLayer(layer.service, options);
              } else {
                dictLayersToLeaflet[layer.id] = this.addWMSLayer(layer.service, options);
              }
            } else if (layer.schema_type === 'tms') {
              const layerTms = new TileLayer({
                source: new XYZ({
                  attributions: options.attribution,
                  url: layer.service.replace('{s}', '{a-c}')
                })
              });
              this.map.addLayer(layerTms);
              dictLayersToLeaflet[layer.id] = layerTms;
            }
          }
          dictLayersToLeaflet[layer.id].setZIndex(count);
        }
      });
    } else { //* else when no basemaps defined
      optionsMap.noWrap = true;
      if (schemaType === 'wms') {
        this.addWMSLayer(serviceMap, optionsMap);
      } else {
        const layer = new TileLayer({
          source: new XYZ({
            attributions: optionsMap.attribution,
            url: serviceMap.replace('{s}', '{a-c}')
          })
        });
        this.map.addLayer(layer);
      }
    }
  },

  addWMSLayer: function (url, options) {
    options.VERSION = '1.1.1'; // pour compatibilité avec le proxy django
    const source = new TileWMS({
      attributions: options.attribution,
      url: url,
      crossOrigin: 'anonymous',
      params: options
    });

    const layer = new TileLayer({
      source: source
    });
    this.map.addLayer(layer);
    return layer;
  },

  // Remove the base layers (not the features)
  removeLayers: function () {
    Object.values(dictLayersToLeaflet).forEach(element => {
      this.map.removeLayer(element);
    });
    dictLayersToLeaflet = {};
  },

  updateOpacity(layerId, opacity) {
    const layer = dictLayersToLeaflet[layerId];
    layer.setOpacity(parseFloat(opacity));
  },

  updateOrder(layers) {
    // First remove existing layers undefined
    layers = layers.filter(function (x) {
      return x !== undefined;
    });
    this.removeLayers();
    // Redraw the layers
    this.addLayers(layers);
  },

  retrieveFeatureColor: function (featureType, properties) {
    const colorsStyle = featureType.colors_style;
    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
      const currentValue = properties[colorsStyle.custom_field_name];
      const colorStyle = colorsStyle.colors[currentValue];
      return colorStyle ? colorStyle : featureType.color;
    } else {
      return featureType.color;
    }
  },

  retrieveFeatureOpacity: function (featureType, properties) {
    const colorsStyle = featureType.colors_style;
    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
      const currentValue = properties[colorsStyle.custom_field_name];
      if (currentValue) {
        const colorStyle = colorsStyle.opacities[currentValue];
        return parseFloat(colorStyle ? colorStyle : featureType.opacity);
      }
    }
    //* parseFloat is not necessary but used for precaution
    return parseFloat(featureType.opacity);
  },

  addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
    const format_cfg = {/*featureClass: Feature*/ };
    const mvt = new MVT(format_cfg);
    const options = {
      urls: [],
      matrixSet: 'EPSG:3857'
    };
    options.format = mvt;
    const layerSource = new VectorTileSource(options);
    layerSource.setTileUrlFunction((p0) => {
      return `${url}/?tile=${p0[0]}/${p0[1]}/${p0[2]}&project_id=${projectId}`;
    });
    const styleFunction = (feature) => this.getStyle(feature, featureTypes, formFilters);
    this.mvtLayer = new VectorTileLayer({
      style: styleFunction,
      source: layerSource
    });
    this.featureTypes = featureTypes; // store featureTypes for popups
    this.mvtLayer.setZIndex(30);
    this.map.addLayer(this.mvtLayer);
    window.layerMVT = this.mvtLayer;
  },

  getStyle: function (feature, featureTypes, formFilters) {
    const properties = feature.getProperties();
    let featureType;
    // GeoJSON
    if(properties.feature_type){
      featureType = featureTypes
        .find((ft) => ft.slug === (properties.feature_type.slug || properties.feature_type));
    } else { //MVT
      featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
    }
    const color = this.retrieveFeatureColor(featureType, properties);
    const colorValue =
      color.value && color.value.length ?
        color.value : typeof color === 'string' && color.length ?
          color : '#000000';

    const rgbaColor = asArray(colorValue);
    console.log({ featureType, properties });
    //* set opacity from feature-type colors_style
    rgbaColor[3] = this.retrieveFeatureOpacity(featureType, properties) || 0.5;//opacity
    const hiddenStyle = new Style();

    const defaultStyle = new Style(
      {
        image: new Circle({
          fill: new Fill(
            {
              color: rgbaColor,
            },
          ),
          stroke: new Stroke(
            {
              color: colorValue,
              width: 2,
            },
          ),
          radius: 5,
        }),
        stroke: new Stroke(
          {
            color: colorValue,
            width: 2,
          },
        ),
        fill: new Fill(
          {
            color: rgbaColor,
          },
        ),
      },
    );

    // Filtre sur le feature type
    if(formFilters){
      if (formFilters.type && formFilters.type.selected) {
        if (featureType.title !== formFilters.type.selected) {
          return hiddenStyle;
        }
      }
      // Filtre sur le statut
      if (formFilters.status && formFilters.status.selected.value) {
        if (properties.status !== formFilters.status.selected.value) {
          return hiddenStyle;
        }
      }
      // Filtre sur le titre
      if (formFilters.title) {
        if (!properties.title.toLowerCase().includes(formFilters.title.toLowerCase())) {
          return hiddenStyle;
        }
      }
    }

    return defaultStyle;
  },

  addFeatures: function (features, filter, featureTypes, addToMap = true) {
    console.log(addToMap);
    const drawSource = new VectorSource();
    let retour;
    // TODO verifier utilité de cette boucle et remplacer par readFeatures plutot
    features.forEach((feature) => {
      retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }, featureTypes);
      drawSource.addFeature(retour);
      // const featureProperties = feature.properties ? feature.properties : feature;
      // const featureType = featureTypes
      //   .find((ft) => ft.slug === (featureProperties.feature_type.slug || featureProperties.feature_type));
      // let filters = [];
      // if (filter) {
      //   const typeCheck = filter.featureType && featureProperties.feature_type.slug === filter.featureType;
      //   const statusCheck = filter.featureStatus && featureProperties.status.value === filter.featureStatus;
      //   const titleCheck = filter.featureTitle && featureProperties.title.includes(filter.featureTitle);
      //   filters = [typeCheck, statusCheck, titleCheck];
      // }
      // console.log(featureType, filters);

    });
    const styleFunction = (feature) => this.getStyle(feature, featureTypes, filter);
    const olLayer = new VectorLayer({
      source: drawSource,
      style: styleFunction,
    });
    olLayer.setZIndex(29);
    this.map.addLayer(olLayer);
    this.olLayer = olLayer;
    this.featureTypes = featureTypes; // store featureTypes for popups
    return drawSource;
  },

  addMapEventListener: function (eventName, callback) {
    this.map.on(eventName, callback);
  },

  _createContentPopup: function (feature, featureTypes) {
    const formatDate = (current_datetime) => {
      let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + '&nbsp;' +
        ('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
      return formatted_date;
    };
    let feature_type;
    let status;
    let date_maj;
    let creator;
    
    if (feature.getProperties) {
      status = feature.getProperties().status;
      date_maj = feature.getProperties().updated_on;
      creator = feature.getProperties().creator;
      if (featureTypes) {
        feature_type = feature.getProperties().feature_type ||
        featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
      }
    } else { //? TPD: I couldn't find when this code is used, is this still in use ?
      status = feature.status;
      if (status) status = status.name;
      date_maj = feature.updated_on;
      creator = feature.creator;
      if (featureTypes) {
        feature_type = featureTypes.find((x) => x.slug === feature.feature_type.slug);
      }
    }
    if(date_maj && !isNaN(new Date(date_maj))) { //* check if it is already formatted
      date_maj = formatDate(new Date(date_maj));
    }
    if (status) {
      if (status.label) { //* when the label is already in the feature
        status = status.label;
      } else if (featureTypes) { //* if not, retrieve the name/label from the list
        status = statusChoices.find((x) => x.value === status).name;
      }
    }

    let author = '';
    if (creator) {
      author = creator.full_name
        ? `<div>
              Auteur : ${creator.first_name} ${creator.last_name}
          </div>`
        : creator.username ? `<div>Auteur: ${creator.username}</div>` : '';
    }

    const title = feature.getProperties ? feature.getProperties().title : feature.title;
    const html = `
                  <h4>
                    <a id="goToFeatureDetail" class="pointer">${title}</a>
                  </h4>
                  <div>
                    Statut : ${status}
                  </div>
                  <div>
                    Type : <a id="goToFeatureTypeDetail" class="pointer"> ${feature_type.title} </a>
                  </div>
                  <div>
                    Dernière&nbsp;mise&nbsp;à&nbsp;jour&nbsp;:&nbsp;${date_maj}
                  </div>
                  ${author}
                  `;
    const featureId = feature.getProperties ? feature.getProperties().feature_id : feature.id;
    return { html, feature_type, featureId };
  },

  zoomTo(location, zoomlevel, lon, lat) {
    if (lon && lat) {
      location = [+lon, +lat];
    }
    this.map.getView().setCenter(transform(location, 'EPSG:4326', 'EPSG:3857'));
    this.map.getView().setZoom(zoomlevel);
  },

  addOverlay(loc) {
    const pos = fromLonLat(loc);
    const marker = new Overlay({
      position: pos, 
      positioning: OverlayPositioning.CENTER_CENTER,
      element: document.getElementById('marker'),
      stopEvent: false
    });
    this.map.addOverlay(marker);
  }
};

export default mapService;