Feature: 3D buildings and terrain

package.json

@@ -64,7 +64,7 @@
     "chart.js": "^4.4.1",
     "install": "^0.13.0",
     "lodash": "^4.17.21",
-    "maplibre-gl": "^4.3.2",
+    "maplibre-gl": "^4.5.0",
     "npm": "^10.5.0",
     "proj4": "^2.10.0"
   },

src/js/controls.js

@@ -22,6 +22,7 @@ import SignalementOSM from "./signalement-osm";
 import Landmark from "./landmark";
 import MapboxAccessibility from "./poi-accessibility";
 import DOM from "./dom";
+import ThreeD from "./three-d";
 
 import LocationLayers from "./services/location-styles";
 import compareLandmark from "./compare-landmark";
@@ -133,6 +134,10 @@ const addControls = () => {
     });
     Globals.compareLandmark = new compareLandmark(Globals.mapRLT1, Globals.mapRLT2, {});
 
+    // 3d
+    Globals.threeD = new ThreeD(map, {});
+    Globals.manager.layerCatalogue.add3DThematicLayers();
+
     // contrôle filtres POI
     Globals.poi = new POI(map, {});
     Globals.poi.load() // promise !

src/js/dom.js

@@ -21,6 +21,7 @@ const $selectOnMap = document.getElementById("selectOnMap");
 const $geolocateBtn = document.getElementById("geolocateBtn");
 const $backTopLeftBtn = document.getElementById("backTopLeftBtn");
 const $compassBtn = document.getElementById("compassBtn");
+const $threeDBtn = document.getElementById("threeDBtn");
 const $layerManagerBtn = document.getElementById("layerManagerBtn");
 const $sideBySideBtn = document.getElementById("sideBySideBtn");
 const $compareMode = document.getElementById("compareMode");
@@ -136,4 +137,5 @@ export default {
   $map,
   $createCompareLandmarkBtn,
   $compareLandmarkWindow,
+  $threeDBtn,
 };

src/js/globals.js

@@ -99,6 +99,9 @@ let signalementOSM = null;
 let landmark = null;
 let compareLandmark = null;
 
+// Global control 3d
+let threeD = null;
+
 // Global flag: is the device connected to the internet?
 let online = (await Network.getStatus()).connected;
 
@@ -156,4 +159,5 @@ export default {
   osmPoiAccessibility,
   landmark,
   compareLandmark,
+  threeD,
 };

src/js/index.js

@@ -194,7 +194,7 @@ function app() {
     attributionControl: false,
     maxZoom: 21,
     locale: "fr",
-    maxPitch: 45,
+    maxPitch: 60,
     crossSourceCollisions: false,
   });
 

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

@@ -9,6 +9,8 @@ import LayersConfig from "./layer-config";
 import LayersAdditional from "./layer-additional";
 
 import ImageNotFound from "../../html/img/image-not-found.png";
+import ReliefBuildingsImage from "../../html/img/layers/3D.BUILDINGS.jpg";
+import ReliefTerrainImage from "../../html/img/layers/3D.TERRAIN.jpg";
 import DomUtils from "../utils/dom-utils";
 
 import { Toast } from "@capacitor/toast";
@@ -153,6 +155,105 @@ class LayerCatalogue extends EventTarget {
     target.appendChild(container);
   }
 
+  /**
+   * Ajout de 2 faux "Layers" 3D qui n'apparaissent pas dans le Layer Switcher et du bouton 3D pour les filtrer
+   * - Bâtiments 3D
+   * - Relief
+   */
+  add3DThematicLayers() {
+    var target = this.options.target || document.getElementById("layer-thematics");
+    if (!target) {
+      console.warn();
+      return;
+    }
+    var container = target.querySelector("#thematicLayers");
+
+    var buildings3DLayerHtml = `
+      <div class="layer thematicLayer" id="3D.BUILDINGS">
+        <div class="layerImg">
+          <img src="${ReliefBuildingsImage}" alt="Bâtiments 3D" onerror="this.onerror=null;this.src='${ImageNotFound}'" />
+          <div class="layer-badge"></div>
+          <div class="layer-interactive-badge-false"></div>
+        </div>
+        <div class="layer-title-thematic">3D</div>
+        <div id="3d-buildings" class="layer-title">Bâtiments 3D</div>
+      </div>
+      `;
+    var buildings3DLayerElement = DomUtils.stringToHTML(buildings3DLayerHtml.trim());
+    buildings3DLayerElement.addEventListener("click", () => {
+      if (buildings3DLayerElement.classList.contains("selectedLayer")) {
+        Globals.threeD.remove3dBuildings();
+        buildings3DLayerElement.classList.remove("selectedLayer");
+      } else {
+        Globals.threeD.add3dBuildings();
+        buildings3DLayerElement.classList.add("selectedLayer");
+      }
+    });
+    container.appendChild(buildings3DLayerElement);
+
+    var terrainLayerHtml = `
+      <div class="layer thematicLayer" id="3D.TERRAIN">
+        <div class="layerImg">
+          <img src="${ReliefTerrainImage}" alt="Relief 3D" onerror="this.onerror=null;this.src='${ImageNotFound}'" />
+          <div class="layer-badge"></div>
+          <div class="layer-interactive-badge-false"></div>
+        </div>
+        <div class="layer-title-thematic">3D</div>
+        <div id="3d-terrain" class="layer-title">Relief 3D</div>
+      </div>
+      `;
+    var terrainLayerElement = DomUtils.stringToHTML(terrainLayerHtml.trim());
+    terrainLayerElement.addEventListener("click", () => {
+      if (terrainLayerElement.classList.contains("selectedLayer")) {
+        Globals.threeD.remove3dTerrain();
+        terrainLayerElement.classList.remove("selectedLayer");
+      } else {
+        Globals.threeD.add3dTerrain();
+        terrainLayerElement.classList.add("selectedLayer");
+      }
+    });
+    container.appendChild(terrainLayerElement);
+
+    // Ajout de la pastille de filtre "3D"
+    var buttonsContainer = target.querySelector("#thematicButtons");
+    var buttonElement = DomUtils.stringToHTML(`
+      <button class="thematicButton" data-name="3D">
+        3D
+      </button>
+      `.trim());
+
+    buttonElement.addEventListener("click", (e) => {
+      var buttons = document.querySelectorAll(".thematicButton");
+      for (let h = 0; h < buttons.length; h++) {
+        const element = buttons[h];
+        element.classList.remove("thematic-button-active");
+      }
+      var layers = document.querySelectorAll(".thematicLayer");
+      for (let i = 0; i < layers.length; i++) {
+        const element = layers[i];
+        element.classList.add("layer-hidden");
+      }
+      var layersId = ["3D.BUILDINGS", "3D.TERRAIN"];
+      for (let j = 0; j < layersId.length; j++) {
+        const id = layersId[j];
+        var element = document.getElementById(id);
+        element.classList.remove("layer-hidden");
+      }
+      e.target.classList.add("thematic-button-active");
+    });
+    buttonsContainer.firstElementChild.after(buttonElement);
+
+    // Ajoute le réaffichage des boutons 3D au click sur la pastille "Tous"
+    buttonsContainer.querySelector("[data-name=Tous]").addEventListener("click", () => {
+      var layersId = ["3D.BUILDINGS", "3D.TERRAIN"];
+      for (let j = 0; j < layersId.length; j++) {
+        const id = layersId[j];
+        var element = document.getElementById(id);
+        element.classList.remove("layer-hidden");
+      }
+    });
+  }
+
   /**
    * Ecouteurs
    */

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

@@ -625,7 +625,7 @@ class LayerSwitcher extends EventTarget {
           this.layers[id].style = data_2.layers; // sauvegarde !
         } catch (e) {
           if (fallback) {
-            fetchStyle(fallback, null);
+            await fetchStyle(fallback, null);
           } else {
             this.layers[id].error = true;
             throw new Error(e);
@@ -683,6 +683,10 @@ class LayerSwitcher extends EventTarget {
         this.#setColor(id, !layerOptions.gray);
       }
       this.#setVisibility(id, layerOptions.visible);
+      // Cas particulier : ajout de l'ombrage à plan IGN si la 3D est activée
+      if (id === "PLAN.IGN.INTERACTIF$GEOPORTAIL:GPP:TMS" && Globals.threeD && Globals.threeD.terrainOn) {
+        Globals.threeD.addHillShadeToPlanIgn();
+      }
       /**
        * Evenement "addlayer"
        * @event addlayer

src/js/map-buttons-listeners.js

@@ -88,6 +88,7 @@ const addListeners = () => {
       Globals.compareLandmark.location = [Globals.mapRLT1.getCenter().lng, Globals.mapRLT1.getCenter().lat];
     }
   });
+
 };
 
 export default {