Ajout de deux versions alternatives du globe : OpenGlobus et GeoJSON pour comparaison
This commit is contained in:
sucupira
@@ -0,0 +1,382 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let canvas;
|
||||
let visible = false;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
if (!canvas.hasAttribute('data-initialized')) {
|
||||
initGlobe();
|
||||
canvas.setAttribute('data-initialized', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('geojson-section');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
async function initGlobe() {
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width = canvas.offsetWidth;
|
||||
const height = canvas.height = canvas.offsetHeight;
|
||||
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const radius = Math.min(width, height) * 0.35;
|
||||
|
||||
let rotation = 2.5;
|
||||
let zoom = 1;
|
||||
let isDragging = false;
|
||||
let lastMouseX = 0;
|
||||
let waveAnimation = 0;
|
||||
|
||||
// Charger les données GeoJSON des continents
|
||||
let worldData = null;
|
||||
try {
|
||||
const response = await fetch('https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json');
|
||||
worldData = await response.json();
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement GeoJSON:', error);
|
||||
}
|
||||
|
||||
// Données des lieux
|
||||
const locations = [
|
||||
{ name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', day: 178 },
|
||||
{ name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', day: 197 },
|
||||
{ name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', day: 203 },
|
||||
{ name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', day: 204 },
|
||||
{ name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', day: 204 },
|
||||
{ name: 'Abidjan', lat: 5.3600, lon: -4.0083, date: '28 Juillet', day: 209 },
|
||||
{ name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', day: 215 },
|
||||
{ name: 'Paris', lat: 48.8566, lon: 2.3522, date: '12 Août', day: 224 }
|
||||
];
|
||||
|
||||
// Gérer les interactions
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
zoom += e.deltaY * -0.001;
|
||||
zoom = Math.min(Math.max(0.5, zoom), 2);
|
||||
});
|
||||
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
lastMouseX = e.clientX;
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (isDragging) {
|
||||
const deltaX = e.clientX - lastMouseX;
|
||||
rotation -= deltaX * 0.01;
|
||||
lastMouseX = e.clientX;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
// Fonction pour projeter les coordonnées
|
||||
function project(lon, lat, r) {
|
||||
const phi = (90 - lat) * Math.PI / 180;
|
||||
const theta = (-lon - rotation * 57.3) * Math.PI / 180;
|
||||
|
||||
const x = r * Math.sin(phi) * Math.cos(theta);
|
||||
const y = r * Math.cos(phi);
|
||||
const z = r * Math.sin(phi) * Math.sin(theta);
|
||||
|
||||
return { x: centerX + x, y: centerY - y, z: z };
|
||||
}
|
||||
|
||||
// Dessiner un chemin GeoJSON
|
||||
function drawPath(coordinates, ctx, radius) {
|
||||
ctx.beginPath();
|
||||
let started = false;
|
||||
|
||||
coordinates.forEach(([lon, lat], i) => {
|
||||
const p = project(lon, lat, radius);
|
||||
if (p.z > -radius * 0.3) {
|
||||
if (!started) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
started = true;
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return started;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
const currentRadius = radius * zoom;
|
||||
|
||||
// Ombre du globe
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX + 5, centerY + 5, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
||||
ctx.filter = 'blur(10px)';
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
// Océan
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#4A90E2';
|
||||
ctx.fill();
|
||||
|
||||
// Gradient pour l'effet 3D
|
||||
const gradient = ctx.createRadialGradient(
|
||||
centerX - currentRadius * 0.3,
|
||||
centerY - currentRadius * 0.3,
|
||||
0,
|
||||
centerX,
|
||||
centerY,
|
||||
currentRadius
|
||||
);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
|
||||
// Dessiner les continents depuis GeoJSON
|
||||
if (worldData && worldData.features) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = '#228B22';
|
||||
ctx.strokeStyle = '#1F5F1F';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
worldData.features.forEach(feature => {
|
||||
if (feature.geometry.type === 'Polygon') {
|
||||
feature.geometry.coordinates.forEach(ring => {
|
||||
if (drawPath(ring, ctx, currentRadius)) {
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
} else if (feature.geometry.type === 'MultiPolygon') {
|
||||
feature.geometry.coordinates.forEach(polygon => {
|
||||
polygon.forEach(ring => {
|
||||
if (drawPath(ring, ctx, currentRadius)) {
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Grille
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Méridiens
|
||||
for (let lon = -180; lon <= 180; lon += 30) {
|
||||
const coords = [];
|
||||
for (let lat = -90; lat <= 90; lat += 5) {
|
||||
coords.push([lon, lat]);
|
||||
}
|
||||
drawPath(coords, ctx, currentRadius);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Parallèles
|
||||
for (let lat = -60; lat <= 60; lat += 30) {
|
||||
const coords = [];
|
||||
for (let lon = -180; lon <= 180; lon += 5) {
|
||||
coords.push([lon, lat]);
|
||||
}
|
||||
drawPath(coords, ctx, currentRadius);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Bordure
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Animation de la vague
|
||||
waveAnimation += 0.02;
|
||||
const waveDay = ((Math.sin(waveAnimation) + 1) / 2) * 46 + 178;
|
||||
|
||||
// Dessiner les points
|
||||
locations.forEach((loc, i) => {
|
||||
const p = project(loc.lon, loc.lat, currentRadius);
|
||||
|
||||
if (p.z > -currentRadius * 0.3) {
|
||||
const isActive = waveDay >= loc.day;
|
||||
const isNear = Math.abs(waveDay - loc.day) < 5;
|
||||
|
||||
// Effet de vague
|
||||
if (isNear && p.z > 0) {
|
||||
const waveSize = 40 * (1 - Math.abs(waveDay - loc.day) / 5);
|
||||
const waveGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, waveSize);
|
||||
waveGradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
|
||||
waveGradient.addColorStop(0.5, 'rgba(255, 215, 0, 0.3)');
|
||||
waveGradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
|
||||
ctx.fillStyle = waveGradient;
|
||||
ctx.fillRect(p.x - waveSize, p.y - waveSize, waveSize * 2, waveSize * 2);
|
||||
}
|
||||
|
||||
// Point
|
||||
const opacity = p.z > 0 ? 1 : 0.3;
|
||||
ctx.globalAlpha = opacity;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, isActive ? 6 : 4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = isActive ? '#FFD700' : '#666666';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = isActive ? '#FFFFFF' : '#999999';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Label
|
||||
if (p.z > 0) {
|
||||
ctx.fillStyle = isActive ? '#FFD700' : '#999999';
|
||||
ctx.font = `${12 * zoom}px Inter`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(loc.name, p.x, p.y - 12);
|
||||
ctx.font = `${10 * zoom}px Inter`;
|
||||
ctx.fillText(loc.date, p.x, p.y + 22);
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Rotation automatique
|
||||
if (!isDragging) {
|
||||
rotation += 0.002;
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="geojson-section" class="globe-section">
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>Globe avec GeoJSON</h2>
|
||||
<p class="section-subtitle">
|
||||
Canvas 2D avec données géographiques précises
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="globe-container" class:visible>
|
||||
<canvas bind:this={canvas} class="globe-canvas"></canvas>
|
||||
|
||||
<div class="globe-controls">
|
||||
<p>🖱️ Glisser pour tourner | 🔍 Molette pour zoomer</p>
|
||||
</div>
|
||||
|
||||
<div class="globe-info">
|
||||
<div class="info-card card">
|
||||
<h3>GeoJSON + Canvas 2D</h3>
|
||||
<p><strong>Avantages :</strong></p>
|
||||
<ul>
|
||||
<li>✅ Léger et rapide</li>
|
||||
<li>✅ Contrôle total du rendu</li>
|
||||
<li>✅ Animation personnalisée de la vague</li>
|
||||
<li>✅ Pas de dépendances externes</li>
|
||||
</ul>
|
||||
<p><strong>Inconvénients :</strong></p>
|
||||
<ul>
|
||||
<li>❌ Calculs de projection manuels</li>
|
||||
<li>❌ Pas de textures satellite</li>
|
||||
<li>❌ Performance limitée avec beaucoup de détails</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.globe-section {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--gradient-dawn);
|
||||
}
|
||||
|
||||
.globe-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-lg);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.globe-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.globe-canvas {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
background: radial-gradient(circle at center, #0a192f 0%, #020c1b 100%);
|
||||
cursor: grab;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.globe-canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.globe-controls {
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.info-card li {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.globe-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.globe-canvas {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user