138 lines
8.6 KiB
HTML
138 lines
8.6 KiB
HTML
<!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>
|
||
|
||
<aside id="panel" data-sheet="half" aria-label="Réglages de la carte">
|
||
<div id="sheetGrip" class="sheet-grip" title="Glisser pour agrandir ou réduire"><span></span></div>
|
||
<div class="panel-head">
|
||
<nav id="panelTabs" class="panel-tabs" role="tablist">
|
||
<button role="tab" data-tab="view" title="Affichage (1)"><span class="tab-ico">◧</span><span class="tab-lbl">Affichage</span></button>
|
||
<button role="tab" data-tab="print" title="Export PDF (2)"><span class="tab-ico">⎙</span><span class="tab-lbl">Export PDF</span></button>
|
||
<button role="tab" data-tab="gen" title="Génération (3)" hidden><span class="tab-ico">＋</span><span class="tab-lbl">Génération</span></button>
|
||
<button role="tab" data-tab="share" title="Partager (4)"><span class="tab-ico">⎘</span><span class="tab-lbl">Partager</span></button>
|
||
</nav>
|
||
<button id="panelCollapse" class="btn-icon" title="Replier le panneau">‹</button>
|
||
</div>
|
||
<div id="panelBody" class="panel-body">
|
||
<section id="tab-view" role="tabpanel" hidden>
|
||
<div class="base-row" id="baseRow">
|
||
<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="base-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="field" title="Couche d'affichage principal" hidden></select>
|
||
</div>
|
||
<div id="precBlock" hidden>
|
||
<div class="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="legend" id="legendBlock" title="Relief orienté : la teinte donne l'orientation de la pente, la clarté le relief local">
|
||
<canvas id="roseCanvas" width="96" height="96"></canvas>
|
||
<div class="rose-cap">Pente orientée vers…<br><span>clair = bosse · sombre = creux</span></div>
|
||
</div>
|
||
</section>
|
||
<section id="tab-print" role="tabpanel" hidden>
|
||
<div class="panel-stat" id="printInfo"></div>
|
||
<div class="row"><select id="printPaper" class="field" title="Format papier">
|
||
<option value="A4" selected>A4</option><option value="A3">A3</option></select>
|
||
<select id="printOrient" class="field" title="Orientation">
|
||
<option value="paysage" selected>Paysage</option><option value="portrait">Portrait</option></select>
|
||
<select id="printScale" class="field" 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="row"><input id="printTitle" class="field" type="text" maxlength="120"
|
||
placeholder="Titre (optionnel)" title="Titre imprimé dans le cartouche"></div>
|
||
<p class="hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
|
||
<div class="row"><button id="printHere" class="btn"
|
||
title="Placer le cadre au centre de la vue">⌖ Centrer ici</button>
|
||
<button id="printFit" class="btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
|
||
<div class="row"><button id="printGo" class="btn btn-primary">Exporter le PDF</button>
|
||
<span id="printMsg" class="print-msg"></span></div>
|
||
</section>
|
||
<section id="tab-gen" role="tabpanel" hidden>
|
||
<div class="row"><button id="btnZone" class="btn" title="Générer une nouvelle zone : dessiner un rectangle, téléchargement IGN + traitement">＋ Zone</button>
|
||
<button id="btnComplete" class="btn" title="Compléter : traiter toutes les dalles déjà téléchargées qui manquent des couches choisies">⤒ Compléter</button></div>
|
||
<div class="panel-stat" id="genBadge"></div>
|
||
<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" class="field" 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 class="row" id="genActions">
|
||
<button id="genGo" class="btn btn-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="row">
|
||
<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>
|
||
</section>
|
||
<section id="tab-share" role="tabpanel" hidden>
|
||
<div class="row"><button id="btnShare" class="btn btn-primary" title="Copier un lien vers cette vue">⎘ Copier le lien de la vue</button></div>
|
||
<h4 class="sec-title">Fond d'imagerie XYZ (JOSM, QGIS, iD…)</h4>
|
||
<div id="useBody"></div>
|
||
<h4 class="sec-title">Configuration par défaut</h4>
|
||
<div class="row"><button id="btnDefault" class="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="btn" title="Revenir à la configuration par défaut">↺ Réinitialiser</button></div>
|
||
</section>
|
||
<section id="tileView" hidden>
|
||
<div class="row tile-head"><button id="tileBack" class="btn btn-ghost">← Retour</button>
|
||
<span class="sec-title" id="tileTitle">Dalle</span></div>
|
||
<div id="tileBody"></div>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
|
||
<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="btnTheme" class="btn-icon" title="Thème">◐</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>
|