✅ Fix: Globe "Vague Planétaire" - Version finale fonctionnelle
- Correction variable currentRadius manquante (grille, continents, marqueurs) - Inversion projection X pour orientation correcte des continents - Inversion sens de rotation pour mouvement naturel - Chargement GeoJSON externe avec fallback local - Globe maintenant pleinement opérationnel avec carte, villes et animations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
sucupira
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import anime from '../lib/anime.js';
|
||||
import { onMount } from 'svelte';
|
||||
import anime from '../lib/anime.js';
|
||||
|
||||
let canvas;
|
||||
let visible = false;
|
||||
@@ -58,6 +58,7 @@
|
||||
duration: 1000
|
||||
}, '-=600');
|
||||
|
||||
|
||||
// Charger les données GeoJSON des continents
|
||||
let worldData = null;
|
||||
try {
|
||||
@@ -66,7 +67,6 @@
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement GeoJSON:', error);
|
||||
}
|
||||
|
||||
// Données des lieux avec animation de vague
|
||||
const locations = [
|
||||
{ name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', color: '#FF6B35', day: 178 },
|
||||
@@ -151,18 +151,18 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Projection 3D
|
||||
// Projection 3D (lon/lat to screen coordinates)
|
||||
function project(lon, lat, r) {
|
||||
const phi = (90 - lat) * Math.PI / 180;
|
||||
const theta = (lon + rotation) * Math.PI / 180;
|
||||
const theta = lon * Math.PI / 180 - rotation;
|
||||
|
||||
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 * zoom,
|
||||
y: centerY - y * zoom,
|
||||
x: centerX - x,
|
||||
y: centerY - y,
|
||||
z: z,
|
||||
visible: z > 0
|
||||
};
|
||||
@@ -172,8 +172,11 @@
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Calculer le rayon actuel avec zoom
|
||||
const currentRadius = radius * zoom;
|
||||
|
||||
// Fond avec dégradé
|
||||
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * zoom);
|
||||
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, currentRadius);
|
||||
gradient.addColorStop(0, 'rgba(10, 22, 40, 0.2)');
|
||||
gradient.addColorStop(1, 'rgba(10, 22, 40, 0.8)');
|
||||
ctx.fillStyle = gradient;
|
||||
@@ -181,18 +184,18 @@
|
||||
|
||||
// Ombre du globe
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX + 10, centerY + 10, radius * zoom, 0, Math.PI * 2);
|
||||
ctx.arc(centerX + 10, centerY + 10, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
||||
ctx.fill();
|
||||
|
||||
// Globe principal
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius * zoom, 0, Math.PI * 2);
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
const globeGradient = ctx.createRadialGradient(
|
||||
centerX - radius * 0.3 * zoom,
|
||||
centerY - radius * 0.3 * zoom,
|
||||
0,
|
||||
centerX, centerY, radius * zoom
|
||||
centerX, centerY, currentRadius
|
||||
);
|
||||
globeGradient.addColorStop(0, '#1a3a5a');
|
||||
globeGradient.addColorStop(0.5, '#0f2847');
|
||||
@@ -200,21 +203,18 @@
|
||||
ctx.fillStyle = globeGradient;
|
||||
ctx.fill();
|
||||
|
||||
// Grille de latitude/longitude avec animation
|
||||
ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
|
||||
ctx.lineWidth = 1;
|
||||
// Grille de latitude/longitude
|
||||
ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// Lignes de latitude
|
||||
for (let lat = -80; lat <= 80; lat += 20) {
|
||||
ctx.beginPath();
|
||||
for (let lon = -180; lon <= 180; lon += 5) {
|
||||
const p = project(lon, lat, radius);
|
||||
const p = project(lon, lat, currentRadius);
|
||||
if (p.visible) {
|
||||
if (lon === -180) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
if (lon === -180) ctx.moveTo(p.x, p.y);
|
||||
else ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
@@ -224,13 +224,10 @@
|
||||
for (let lon = -180; lon <= 180; lon += 30) {
|
||||
ctx.beginPath();
|
||||
for (let lat = -90; lat <= 90; lat += 5) {
|
||||
const p = project(lon, lat, radius);
|
||||
const p = project(lon, lat, currentRadius);
|
||||
if (p.visible) {
|
||||
if (lat === -90) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
if (lat === -90) ctx.moveTo(p.x, p.y);
|
||||
else ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
@@ -238,6 +235,7 @@
|
||||
|
||||
// Dessiner les continents
|
||||
if (worldData) {
|
||||
ctx.save();
|
||||
ctx.strokeStyle = '#4CAF50';
|
||||
ctx.fillStyle = 'rgba(76, 175, 80, 0.3)';
|
||||
ctx.lineWidth = 2;
|
||||
@@ -251,6 +249,7 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Dessiner les particules de la vague
|
||||
@@ -258,7 +257,7 @@
|
||||
const p = project(
|
||||
particle.angle * 180 / Math.PI - 180,
|
||||
Math.sin(Date.now() * 0.001 * particle.speed) * 30,
|
||||
particle.radius
|
||||
currentRadius + (particle.radius - radius)
|
||||
);
|
||||
|
||||
if (p.visible && particle.opacity > 0) {
|
||||
@@ -271,7 +270,7 @@
|
||||
|
||||
// Dessiner les marqueurs avec effet de pulsation
|
||||
locations.forEach((location, index) => {
|
||||
const p = project(location.lon, location.lat, radius);
|
||||
const p = project(location.lon, location.lat, currentRadius);
|
||||
|
||||
if (p.visible) {
|
||||
// Vérifier si la vague est passée
|
||||
@@ -327,7 +326,7 @@
|
||||
|
||||
// Rotation automatique
|
||||
if (!isDragging) {
|
||||
rotation -= 0.002;
|
||||
rotation += 0.002;
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(draw);
|
||||
@@ -336,9 +335,10 @@
|
||||
function drawPolygon(coordinates) {
|
||||
ctx.beginPath();
|
||||
let firstPoint = true;
|
||||
const currentRadius = radius * zoom;
|
||||
|
||||
coordinates.forEach(coord => {
|
||||
const p = project(coord[0], coord[1], radius);
|
||||
const p = project(coord[0], coord[1], currentRadius);
|
||||
if (p.visible) {
|
||||
if (firstPoint) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
|
||||
@@ -338,7 +338,6 @@
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.results-container h3 {
|
||||
@@ -360,7 +359,6 @@
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.result-item.highlight {
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "Africa" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[-17.625, 35.96], [-11.25, 37.35], [-8.67, 36.48], [-2.17, 35.16], [11.05, 37.09], [15.28, 36.75], [22.49, 36.48], [31.17, 31.4], [34.92, 29.5], [39.2, 23.89], [41.66, 16.35], [50.2, 11.28], [51.28, 4.28], [51.25, -3.73], [49.54, -12.47], [43.68, -20.93], [38.41, -24.98], [31.92, -29.46], [24.36, -33.87], [16.34, -34.84], [8.32, -26.89], [2.49, -16.14], [-9.23, -8.8], [-12.88, 4.61], [-16.71, 12.13], [-17.625, 35.96]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "Europe" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[-25.36, 71.03], [-13.69, 69.29], [-3.31, 69.85], [17.13, 68.87], [31.29, 70.45], [40.05, 64.78], [47.99, 58.36], [46.63, 55.39], [45.74, 52.64], [42.45, 50.61], [37.4, 49.8], [35.04, 48.1], [33.75, 45.14], [36.53, 41.62], [40.93, 36.54], [26.06, 35.3], [23.7, 38.25], [20.22, 39.34], [19.37, 42.69], [16.56, 46.05], [10.49, 46.89], [6.84, 49.9], [3.31, 51.35], [-2.57, 54.21], [-3.31, 56.01], [-5.67, 58.63], [-11.03, 58.13], [-25.36, 71.03]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "Asia" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[40.08, 64.78], [46.46, 67.69], [63.55, 68.44], [77.11, 68.9], [104.35, 70.11], [121.64, 71.28], [139.9, 71.52], [159.31, 70.9], [169.9, 66.48], [179.99, 64.97], [179.99, 50.25], [170.59, 50.15], [159.31, 52.58], [146.89, 48.54], [133.17, 45.14], [127.41, 50.74], [120.26, 53.33], [109.45, 49.67], [103.31, 41.91], [95.16, 40.08], [88.59, 35.64], [81.21, 30.22], [77.84, 35.49], [73.65, 39.43], [68.93, 38.9], [66.52, 37.36], [61.21, 35.65], [56.32, 33.75], [53.92, 32.72], [46.57, 38.9], [40.08, 36.58], [40.08, 64.78]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "North America" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[-168.13, 65.65], [-166.45, 68.79], [-163.69, 69.61], [-160.78, 69.52], [-156.58, 71.36], [-152.27, 70.83], [-140.99, 69.71], [-140.99, 60.31], [-139.04, 60.0], [-135.48, 59.79], [-131.97, 56.55], [-128.06, 54.89], [-125.64, 50.42], [-124.91, 49.98], [-95.15, 49.38], [-83.14, 62.0], [-74.87, 45.0], [-67.13, 45.14], [-67.79, 47.07], [-87.44, 47.94], [-109.04, 31.34], [-114.72, 32.72], [-117.13, 32.54], [-125.24, 40.39], [-124.4, 43.38], [-140.99, 60.31], [-168.13, 65.65]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "South America" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[-81.33, 12.44], [-84.05, 9.55], [-84.23, 5.24], [-82.89, -3.94], [-70.04, -9.49], [-65.32, -20.5], [-57.62, -30.22], [-53.37, -33.77], [-53.65, -33.21], [-66.95, -54.9], [-68.63, -54.87], [-74.71, -52.83], [-80.24, -50.54], [-81.77, -45.55], [-81.11, -38.68], [-75.52, -37.71], [-70.36, -18.35], [-70.049, -9.42], [-74.31, -7.44], [-79.0, -4.3], [-79.21, 2.69], [-72.42, 11.25], [-81.33, 12.44]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "Australia" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[112.91, -21.93], [153.14, -10.58], [153.57, -27.87], [159.1, -31.49], [158.37, -37.81], [147.71, -42.96], [131.33, -39.19], [113.16, -33.76], [112.91, -21.93]
|
||||
]]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { "name": "Greenland" },
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [[
|
||||
[-46.76, 82.63], [-37.34, 83.03], [-20.45, 82.73], [-22.11, 70.17], [-28.42, 70.37], [-33.75, 66.96], [-39.15, 65.93], [-44.47, 59.99], [-59.57, 75.52], [-68.5, 76.06], [-71.18, 78.05], [-68.31, 83.11], [-46.76, 82.63]
|
||||
]]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user