WIP feat(myposition): my position gets data around position

src/js/immersive-position.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Institut national de l'information géographique et forestière
+ *
+ * This program and the accompanying materials are made available under the terms of the GPL License, Version 3.0.
+ */
+
+import proj4 from "proj4";
+
+/**
+ * Gestion de la "position immersive" avec des requêtes faites aux données autour d'une position
+ * @fires cityLoaded
+ * @fires deptLoaded
+ * @fires parcLoaded
+ * @fires forestLoaded
+ * @fires agriLoaded
+ * @fires zaiLoaded
+ * @fires waterLoaded
+ */
+class ImmersivePosion extends EventTarget {
+  /**
+   * constructeur
+   * @param {*} options -
+   * @param {*} options.lat - latitude
+   * @param {*} options.lng - longitude
+   */
+  constructor(options) {
+    super();
+    this.options = options || {
+      lat : 0,
+      lng : 0,
+    };
+    this.lat = this.options.lat;
+    this.lng = this.options.lng;
+  }
+
+  /**
+   * Computes all data queries
+   */
+  computeAll() {
+    this.#computeCity()
+  }
+
+  async #computeCity() {
+    const result = await this.#computeGenericGPFWFS(
+      "LIMITES_ADMINISTRATIVES_EXPRESS.LATEST:commune",
+      ["nom", "population"],
+    );
+
+    /**
+     * Evenement "cityLoaded"
+     * @event cityLoaded
+     * @type {*}
+     * @property {Array} result - [nom, population]
+     */
+    this.dispatchEvent(
+      new CustomEvent("cityLoaded", {
+        bubbles: true,
+        detail: result
+      })
+    );
+  }
+
+  /**
+   * Computes data for a given layer of Geoplateforme's WFS
+   * @param {string} layer name of the WFS layer
+   * @param {Array} attributes list of strings of the relevant attributes to return
+   * @param {number} around distance around the point in km for the query, default 0
+   * @param {string} geom_name name of the geometry column, default "geom"
+   * @param {string} additional_cql cql filter needed other than geometry, e.g. "AND nature_de_l_objet='Bois'", default ""
+   * @param {number} epsg epsg number of the layer's CRS, default 4326
+   */
+  async #computeGenericGPFWFS(layer, attributes, around=0, geom_name="geom", additional_cql="", epsg=4326) {
+    let coord1 = this.lat;
+    let coord2 = this.lng;
+    if (epsg !== 4326) {
+      [coord1, coord2] = proj4(proj4.defs("EPSG:4326"), proj4.defs(`EPSG:${epsg}`), [this.lng, this.lat])
+    }
+    let cql_filter = `INTERSECTS(${geom_name},Point(${coord1}%20${coord2}))`;
+    if (around > 0) {
+      cql_filter = `DWITHIN(geometrie,Point(${coord1}%20${coord2}),${around},kilometers)`;
+    }
+    if (additional_cql) {
+      cql_filter += ` ${additional_cql}`;
+    }
+
+    const results = await fetch(
+      `https://data.geopf.fr/wfs/ows?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&typename=${layer}&outputFormat=json&count=10&CQL_FILTER=${cql_filter}`
+    );
+    const json = await results.json();
+
+    const results_attributes = [];
+    json.features.forEach((feature) => {
+      const feature_attributes = [];
+      attributes.forEach((attribute) => {
+        feature_attributes.push(feature.properties[attribute]);
+      });
+      results_attributes.push(feature_attributes);
+    });
+
+    return results_attributes;
+  }
+}
+
+export default ImmersivePosion;

src/js/layer-manager/layer-manager.js

@@ -44,24 +44,24 @@ import LayersConfig from "./layer-config";
  */
 class LayerManager extends EventTarget {
   /**
-     * constructeur
-     * @param {*} options -
-     * @param {*} options.target - ...
-     * @param {*} options.layers - ...
-     * @example
-     * new LayerManger({
-     *   layers : [
-     *     layers : "couche1, couche2, ...",
-     *     type : "base" // data ou thematic
-     *   ]
-     * });
-     */
+   * constructeur
+   * @param {*} options -
+   * @param {*} options.target - ...
+   * @param {*} options.layers - ...
+   * @example
+   * new LayerManger({
+   *   layers : [
+   *     layers : "couche1, couche2, ...",
+   *     type : "base" // data ou thematic
+   *   ]
+   * });
+   */
   constructor(options) {
     super();
     this.options = options || {
       /**
-             * ["layerid", "layer2id"]
-             */
+       * ["layerid", "layer2id"]
+       */
       layers : [],
       target : null
     };

src/js/my-account/my-account.js

@@ -91,7 +91,6 @@ class MyAccount {
     Preferences.get( { key: "savedRoutes"} ).then( (resp) => {
       if (resp.value) {
         var localRoutes = JSON.parse(resp.value);
-        console.log(localRoutes);
         this.routes = this.routes.concat(localRoutes.filter( route => !route.type));
         this.#updateSources();
       }

src/js/position.js

@@ -18,6 +18,7 @@ import ActionSheet from "./action-sheet";
 import PopupUtils from "./utils/popup-utils";
 
 import LoadingDark from "../css/assets/loading-darkgrey.svg";
+import ImmersivePosion from "./immersive-position";
 
 /**
  * Permet d'afficher ma position sur la carte
@@ -83,6 +84,8 @@ class Position {
       popup: null
     };
 
+    this.immersivePosition = null;
+
     return this;
   }
 
@@ -485,6 +488,14 @@ class Position {
       this.#setShareContent(this.coordinates.lat, this.coordinates.lon, this.elevation);
       document.getElementById("positionAltitudeSpan").innerText = this.elevation;
     });
+
+    if (type === "myposition") {
+      this.immersivePosition = new ImmersivePosion({lat: this.coordinates.lat, lng: this.coordinates.lon});
+      this.immersivePosition.addEventListener("cityLoaded", (e) => {
+        console.log(e.detail);
+      });
+      this.immersivePosition.computeAll();
+    }
   }
 
   #setShareContent(latitude, longitude, altitude = "") {
@@ -575,6 +586,8 @@ https://cartes-ign.ign.fr?lng=${longitude}&lat=${latitude}&z=${zoom}`;
     this.elevation = null;
     this.opened = false;
     this.shareContent = null;
+    this.immersivePosition = null;
+
     // nettoyage du DOM
     if (this.container) {
       this.container.remove();