Public
Edited
Sep 2, 2024
{
const width = 1000;
const height = 600;
// Utilisation de la projection d'identité
const projection = d3.geoIdentity()
.reflectY(true)
.fitSize([width, height], zone2_dp_500); // Ajuster la taille en fonction du GeoJSON "Zone 2 DP 500m"
const context = DOM.context2d(width, height);
const canvas = context.canvas;
// Créer la légende avec positionnement
const legend = html`<div style="
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
font-size: 12px;
line-height: 1.5;
max-width: 200px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
word-wrap: break-word;">
<strong>Les quatre algorithmes de simplification appliqués<br>en comparaison avec les polygones initiaux</strong>
<ul style="list-style: none; padding: 0; margin: 10px 0 0 0;">
${["beige", "skyblue", "#9370DB", "lightcoral", "darkgoldenrod"].map((color, index) => html`
<li style="margin-bottom: 5px;">
<span style="display: inline-block; width: 20px; height: 20px; background-color: ${color}; margin-right: 10px;"></span>
${["polygones initiaux", "Zone 2 DP 500m", "Zone 2 VW 500m", "Zone 2 ZJ 500m", "Zone 2 WM 500m"][index]}
</li>
`)}
</ul>
</div>`;
const container = html`<div style="position: relative;">
${canvas}
${legend}
<div style="position: absolute; top: 10px; left: 10px;">
<strong style="font-size: 14px; color: black;">Sélectionnez les couches à afficher :</strong><br>
${["polygones initiaux", "Zone 2 DP 500m", "Zone 2 VW 500m", "Zone 2 ZJ 500m", "Zone 2 WM 500m"].map((label, index) => {
const checkbox = html`<input type="checkbox" value="${index}" ${index === 0 ? 'checked' : ''} />`;
checkbox.onchange = updateDisplay;
return html`<label style="display: block; margin-top: 5px; color: black; font-size: 12px;">${checkbox} ${label}</label>`;
})}
</div>
</div>`;
yield container;
const path = d3.geoPath().projection(projection).context(context);
const geojsonFiles = [
zone2_poly,
zone2_dp_500,
zone2_vw_500,
zone2_zj_500,
zone2_wm_500
];
// La transparence de 0.3
const colors = [
"rgba(245, 245, 220, 0.5)", // Beige crème avec 30% d'opacité
"rgba(135, 206, 235, 0.5)", // Bleu ciel
"rgba(147, 112, 219, 0.5)", // Mauve foncé
"rgba(240, 128, 128, 0.5)", // Rouge clair
"rgba(184, 134, 11, 0.5)" // Jaune foncé
];
function redraw(selectedIndices = [0]) { // Affiche la première couche par défaut
context.clearRect(0, 0, width, height);
selectedIndices.forEach(index => {
context.beginPath();
path(geojsonFiles[index]);
context.fillStyle = colors[index];
context.fill();
context.strokeStyle = colors[index];
context.lineWidth = 0.1; // Ajuster l'épaisseur des lignes à 0.1
context.stroke();
});
}
function updateDisplay() {
const selectedIndices = Array.from(container.querySelectorAll("input:checked")).map(d => +d.value);
redraw(selectedIndices);
}
d3.select(canvas)
.call(d3.zoom()
.scaleExtent([0.5, 50]) // Augmenter la limite de zoom maximum
.on("zoom", (event) => {
const transform = event.transform;
context.save();
context.clearRect(0, 0, width, height);
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
redraw(Array.from(container.querySelectorAll("input:checked")).map(d => +d.value));
context.restore();
})
);
redraw([0]); // Dessine initialement la carte avec la première couche sélectionnée
}
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
👉 Très important de mettre ce lien, sinon le fond de carte Leaflet s'affichera en mosaïque.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
