172 lines
7.9 KiB
HTML
172 lines
7.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>API getRealZ</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; display: flex; flex-direction: column; align-items: center; }
|
||
|
|
h1 { color: #333; }
|
||
|
|
.container { max-width: 500px; width: 100%; }
|
||
|
|
form { background: rgb(255, 255, 255); padding: 2em; border-radius: 0 8px 8px 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
|
||
|
|
.form-group { margin-bottom: 1em; }
|
||
|
|
.form-row { display: flex; gap: 1em; }
|
||
|
|
.form-row .form-group { flex: 1; }
|
||
|
|
label { display: block; margin-bottom: 0.5em; font-weight: bold; }
|
||
|
|
input, select { width: 100%; padding: 0.8em; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: white; font-size: 1em; }
|
||
|
|
button { padding: 0.7em 1.5em; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; font-size: 1em; }
|
||
|
|
button:hover { background-color: #0056b3; }
|
||
|
|
button:disabled { background-color: #aaa; cursor: not-allowed; }
|
||
|
|
#result { margin-top: 1em; padding: 1em; background: #e9ecef; border-radius: 4px; text-align: center; word-wrap: break-word; }
|
||
|
|
.tabs { display: flex; }
|
||
|
|
.tabs button {
|
||
|
|
flex: 1; padding: 1em; border: 1px solid #ccc; border-bottom: none;
|
||
|
|
background-color: #f4f4f9; cursor: pointer; border-radius: 8px 8px 0 0;
|
||
|
|
color: black;
|
||
|
|
margin-bottom: -1px; font-size: 1em;
|
||
|
|
}
|
||
|
|
.tabs button.active {
|
||
|
|
background-color: white; border-bottom: 1px solid white; font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<h1>Test de l'API Altitude</h1>
|
||
|
|
|
||
|
|
<div class="tabs">
|
||
|
|
<button id="tab-getCorrection" class="active">Obtenir la Correction Orthométrique (N)</button>
|
||
|
|
<button id="tab-getCorrectedZ">Calculer l'Altitude Corrigée (H)</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form id="coordForm">
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="lat">Latitude :</label>
|
||
|
|
<input type="number" id="lat" name="lat" step="any" required value="47.2184">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="lon">Longitude :</label>
|
||
|
|
<input type="number" id="lon" name="lon" step="any" required value="-1.5536">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" id="z-group" style="display: none;">
|
||
|
|
<label for="z">Altitude mesurée (ellipsoïdale h) :</label>
|
||
|
|
<input type="number" id="z" name="z" step="any" value="250.0" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="srcProj">Projection Source (SRID) :</label>
|
||
|
|
<select id="srcProj" name="srcProj" required>
|
||
|
|
<option value="4326" selected>WGS 84 (GPS)</option>
|
||
|
|
<option value="2154">RGF93 / Lambert-93 (France)</option>
|
||
|
|
<option value="3857">WGS 84 / Pseudo-Mercator (Web)</option>
|
||
|
|
<option value="4258">ETRS89 (Europe)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="dstProj">Projection Destination (SRID) :</label>
|
||
|
|
<select id="dstProj" name="dstProj" required>
|
||
|
|
<option value="2154" selected>RGF93 / Lambert-93 (France)</option>
|
||
|
|
<option value="4326">WGS 84 (GPS)</option>
|
||
|
|
<option value="3857">WGS 84 / Pseudo-Mercator (Web)</option>
|
||
|
|
<option value="4258">ETRS89 (Europe)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button type="submit" id="submit-btn">Obtenir la correction</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="result">
|
||
|
|
Entrez des coordonnées et cliquez sur le bouton.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const form = document.getElementById('coordForm');
|
||
|
|
const resultDiv = document.getElementById('result');
|
||
|
|
const zGroup = document.getElementById('z-group');
|
||
|
|
const zInput = document.getElementById('z');
|
||
|
|
const submitBtn = document.getElementById('submit-btn');
|
||
|
|
const tabGetCorrection = document.getElementById('tab-getCorrection');
|
||
|
|
const tabGetCorrectedZ = document.getElementById('tab-getCorrectedZ');
|
||
|
|
|
||
|
|
let mode = 'getCorrection'; // 'getCorrection' ou 'getCorrectedZ'
|
||
|
|
|
||
|
|
function setMode(newMode) {
|
||
|
|
mode = newMode;
|
||
|
|
if (mode === 'getCorrection') {
|
||
|
|
zGroup.style.display = 'none';
|
||
|
|
zInput.required = false;
|
||
|
|
submitBtn.textContent = "Obtenir la correction (N)";
|
||
|
|
tabGetCorrection.classList.add('active');
|
||
|
|
tabGetCorrectedZ.classList.remove('active');
|
||
|
|
} else { // 'getCorrectedZ'
|
||
|
|
zGroup.style.display = 'block';
|
||
|
|
zInput.required = true;
|
||
|
|
submitBtn.textContent = "Calculer l'altitude corrigée (H)";
|
||
|
|
tabGetCorrection.classList.remove('active');
|
||
|
|
tabGetCorrectedZ.classList.add('active');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
tabGetCorrection.addEventListener('click', () => setMode('getCorrection'));
|
||
|
|
tabGetCorrectedZ.addEventListener('click', () => setMode('getCorrectedZ'));
|
||
|
|
|
||
|
|
form.addEventListener('submit', async function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
submitBtn.disabled = true;
|
||
|
|
resultDiv.textContent = 'Chargement...';
|
||
|
|
|
||
|
|
const body = {
|
||
|
|
lat: parseFloat(document.getElementById('lat').value),
|
||
|
|
lon: parseFloat(document.getElementById('lon').value),
|
||
|
|
srcProj: parseInt(document.getElementById('srcProj').value, 10),
|
||
|
|
dstProj: parseInt(document.getElementById('dstProj').value, 10)
|
||
|
|
};
|
||
|
|
|
||
|
|
let endpoint = '/getorthocorrec';
|
||
|
|
|
||
|
|
if (mode === 'getCorrectedZ') {
|
||
|
|
endpoint = '/getcorrectedaltitude';
|
||
|
|
body.z = parseFloat(zInput.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(endpoint, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(body),
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
if (mode === 'getCorrection') {
|
||
|
|
resultDiv.textContent = `Correction orthométrique (N) : - ${data.z.toFixed(8)} mètres`;
|
||
|
|
} else {
|
||
|
|
resultDiv.textContent = `Altitude corrigée (H) : ${data.corrected_z.toFixed(8)} mètres`;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
resultDiv.textContent = `Erreur : ${data.error}`;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
resultDiv.textContent = `Erreur de communication avec l'API : ${error.message}`;
|
||
|
|
} finally {
|
||
|
|
submitBtn.disabled = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialiser le mode au chargement
|
||
|
|
setMode('getCorrection');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|