Skip to content

Commit

Permalink
feature: add 3d buildings and terrain as layers
Browse files Browse the repository at this point in the history
  • Loading branch information
azarz committed Feb 10, 2025
1 parent 6f2cc63 commit b88947c
Show file tree
Hide file tree
Showing 13 changed files with 469 additions and 13 deletions.
19 changes: 9 additions & 10 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Binary file added src/html/img/layers/3D.BUILDINGS.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/html/img/layers/3D.TERRAIN.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/js/controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 !
Expand Down
2 changes: 2 additions & 0 deletions src/js/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -136,4 +137,5 @@ export default {
$map,
$createCompareLandmarkBtn,
$compareLandmarkWindow,
$threeDBtn,
};
4 changes: 4 additions & 0 deletions src/js/globals.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -156,4 +159,5 @@ export default {
osmPoiAccessibility,
landmark,
compareLandmark,
threeD,
};
2 changes: 1 addition & 1 deletion src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ function app() {
attributionControl: false,
maxZoom: 21,
locale: "fr",
maxPitch: 45,
maxPitch: 60,
crossSourceCollisions: false,
});

Expand Down
101 changes: 101 additions & 0 deletions src/js/layer-manager/layer-catalogue.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
*/
Expand Down
6 changes: 5 additions & 1 deletion src/js/layer-manager/layer-switcher.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/js/map-buttons-listeners.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const addListeners = () => {
Globals.compareLandmark.location = [Globals.mapRLT1.getCenter().lng, Globals.mapRLT1.getCenter().lat];
}
});

};

export default {
Expand Down
Loading

0 comments on commit b88947c

Please sign in to comment.