diff --git a/src/js/immersive-position.js b/src/js/immersive-position.js new file mode 100644 index 00000000..0a7188b6 --- /dev/null +++ b/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; diff --git a/src/js/layer-manager/layer-manager.js b/src/js/layer-manager/layer-manager.js index 9ba2ce47..a21fe98a 100644 --- a/src/js/layer-manager/layer-manager.js +++ b/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 }; diff --git a/src/js/my-account/my-account.js b/src/js/my-account/my-account.js index 186fc2a2..3b500311 100644 --- a/src/js/my-account/my-account.js +++ b/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(); } diff --git a/src/js/position.js b/src/js/position.js index 97c690ad..197f8416 100644 --- a/src/js/position.js +++ b/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();