Sortir l'interface de la carte en vrais fichiers web/map.{html,css,js}
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Antoine Jacquin
160
lidar_pipeline/web/map.html
Normal file
160
lidar_pipeline/web/map.html
Normal file
@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
||||
<title>Carte LiDAR</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Crect width=%2716%27 height=%2716%27 rx=%273%27 fill=%27%230b0e13%27/%3E%3Cpath d=%27M2 11l4-5 3 4 2-2 3 3z%27 fill=%27%235aa9e6%27/%3E%3C/svg%3E">
|
||||
<link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css"/>
|
||||
<link rel="stylesheet" href="assets/app.css?v=__ASSETS_V__"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="layercard" class="card">
|
||||
<div class="card-head">
|
||||
<button id="cardToggle" class="icon-btn" title="Replier / déplier">▾</button>
|
||||
<span class="card-title">Couches</span>
|
||||
<span id="stat" class="card-stat"></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="layer-row" id="baseRow">
|
||||
<span class="grip"></span>
|
||||
<button class="eye on" id="baseToggle" title="Afficher / masquer le fond de carte"></button>
|
||||
<span class="layer-name" id="baseName" title="Cliquer : fond clair / assombri">Fond OpenStreetMap</span>
|
||||
<span class="pct" id="basePct"></span>
|
||||
<div class="layer-ctl">
|
||||
<input type="range" id="baseOpacity" min="0" max="100" step="1" title="Opacité du fond">
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-row">
|
||||
<span class="view-label">Affichage</span>
|
||||
<span class="layer-name" id="mainName"></span>
|
||||
<select id="mainSel" class="view-sel" title="Couche d'affichage principal" hidden></select>
|
||||
</div>
|
||||
<div id="precBlock" hidden>
|
||||
<div class="mode-seg" id="modeSeg" role="group" aria-label="Relief, précision ou les deux (touche P)">
|
||||
<button type="button" data-mode="relief" title="Relief seul (touche P : mode suivant)">Relief</button>
|
||||
<button type="button" data-mode="precision" title="Précision géométrique seule : densité de points sol">Précision</button>
|
||||
<button type="button" data-mode="both" title="Précision en produit sur le relief : les zones peu fiables s'assombrissent">Les deux</button>
|
||||
</div>
|
||||
<div class="prec-ctl" id="precCtl" hidden>
|
||||
<span>Opacité de la précision</span>
|
||||
<input type="range" id="precOpacity" min="0" max="100" step="1" title="Opacité de la précision sur le relief">
|
||||
<span class="pct" id="precPct"></span>
|
||||
</div>
|
||||
<div class="prec-legend" id="precLegend" hidden>
|
||||
<div class="prec-bar" id="precBar"></div>
|
||||
<div class="prec-ticks"><span>≤ 0,35</span><span>4</span><span>≥ 45 pts/m²</span></div>
|
||||
<div class="prec-cap">Points sol par m² : sombre = relief interpolé, noir = aucun point</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<button id="btnShare" class="link-btn" title="Copier un lien vers cette vue">⎘ Partager la vue</button>
|
||||
<button id="btnUse" class="link-btn" title="Utiliser ces rendus comme fond d'imagerie (JOSM, QGIS, iD…)">⤓ Utiliser dans JOSM / QGIS</button>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<button id="btnDefault" class="link-btn" title="Figer l'affichage courant (couche principale, mode, opacité de la précision, fond) comme configuration par défaut de tous les navigateurs">★ Définir par défaut</button>
|
||||
<button id="btnReset" class="link-btn" title="Revenir à la configuration par défaut">↺ Réinitialiser</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tilecard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title" id="tileTitle">Dalle</span>
|
||||
<button id="tileClose" class="icon-btn" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body" id="tileBody"></div>
|
||||
</div>
|
||||
|
||||
<div id="rose" class="card" hidden title="Relief orienté : la teinte donne l'orientation de la pente, la clarté le relief local">
|
||||
<canvas id="roseCanvas" width="132" height="132"></canvas>
|
||||
<div class="rose-cap">Pente orientée vers…<br><span>clair = bosse · sombre = creux</span></div>
|
||||
</div>
|
||||
|
||||
<div id="usecard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Fond d'imagerie XYZ</span>
|
||||
<button id="useClose" class="icon-btn" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body" id="useBody"></div>
|
||||
</div>
|
||||
|
||||
<div id="printcard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Export PDF</span>
|
||||
<span id="printInfo" class="card-stat"></span>
|
||||
<button id="printClose" class="icon-btn" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="use-row"><select id="printPaper" title="Format papier">
|
||||
<option value="A4" selected>A4</option><option value="A3">A3</option></select>
|
||||
<select id="printOrient" title="Orientation">
|
||||
<option value="paysage" selected>Paysage</option><option value="portrait">Portrait</option></select>
|
||||
<select id="printScale" title="Échelle d'impression">
|
||||
<option value="1000">1:1 000</option><option value="2000" selected>1:2 000</option>
|
||||
<option value="5000">1:5 000</option><option value="10000">1:10 000</option></select></div>
|
||||
<div class="use-row"><input id="printTitle" type="text" maxlength="120"
|
||||
placeholder="Titre (optionnel)" title="Titre imprimé dans le cartouche"></div>
|
||||
<p class="print-hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
|
||||
<div class="use-row"><button id="printHere" class="link-btn"
|
||||
title="Placer le cadre au centre de la vue">⌖ Centrer ici</button>
|
||||
<button id="printFit" class="link-btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
|
||||
<div class="card-foot"><button id="printGo">Exporter le PDF</button>
|
||||
<span id="printMsg" class="print-msg"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gencard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Génération</span>
|
||||
<span id="genBadge" class="card-stat"></span>
|
||||
<button id="genClose" class="icon-btn" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="genMsg" class="meta">Dessinez une zone (＋) ou complétez les dalles existantes (⤒).</div>
|
||||
<div id="genOpts">
|
||||
<div class="gen-row"><span class="gen-lbl">Couches</span>
|
||||
<select id="genViz" multiple size="4" title="Laisser vide pour les couches du panneau"></select></div>
|
||||
<label class="chk"><input type="checkbox" id="genRegen"> Régénérer les tuiles existantes</label>
|
||||
<div class="meta">Sol : classification IGN · bords raccordés aux dalles voisines (bande 100 m)</div>
|
||||
</div>
|
||||
<div id="genClassInfo" class="meta"></div>
|
||||
<div class="card-foot" id="genActions">
|
||||
<button id="genGo" class="primary" title="Télécharge (géoplateforme IGN) puis traite les dalles sélectionnées">Générer</button>
|
||||
<button id="genClear" title="Vider la sélection de dalles">Effacer la sélection</button>
|
||||
</div>
|
||||
<div id="genRun" hidden>
|
||||
<div class="meta" id="genProgress"></div>
|
||||
<pre id="genLog" class="gen-log"></pre>
|
||||
<div class="card-foot">
|
||||
<button id="genStop" title="SIGTERM au pipeline (nettoyage propre), SIGKILL en repli">Arrêter</button>
|
||||
<button id="genQueueClear" title="Retirer les demandes en attente (le run en cours continue)">Vider la file</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav id="gentools">
|
||||
<button id="btnZone" title="Générer une nouvelle zone : dessiner un rectangle, téléchargement IGN + traitement" hidden>＋ Zone</button>
|
||||
<button id="btnComplete" title="Compléter : traiter toutes les dalles déjà téléchargées qui manquent des couches choisies" hidden>⤒ Compléter</button>
|
||||
</nav>
|
||||
<nav id="tools">
|
||||
<button id="zoomIn" title="Zoomer">+</button>
|
||||
<button id="zoomOut" title="Dézoomer">−</button>
|
||||
<button id="zoomFit" title="Recadrer sur les données">⤢</button>
|
||||
<button id="gps" title="Centrer sur ma position">⌖</button>
|
||||
<button id="btnPrint" title="Exporter la zone en PDF (impression terrain)">⎙</button>
|
||||
</nav>
|
||||
<div id="toast" class="toast" hidden></div>
|
||||
<div id="tileload" class="tileload" hidden aria-live="polite">
|
||||
<span class="tl-spin"></span>
|
||||
<span id="tileloadText"></span>
|
||||
<span class="tl-bar"><span id="tileloadBar"></span></span>
|
||||
</div>
|
||||
|
||||
<script src="assets/vendor/leaflet/leaflet.js"></script>
|
||||
<script src="assets/app.js?v=__ASSETS_V__"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user