Pour visualiser la carte de la province du Hunan, nous utilisons la bibliothèque ECharts qui permet de créer des cartes interactives. Ce guide détaille le processus complet, de la configuration initiale à l'optimisation des performances.

Configuration de l'environnement ECharts

La première étape consiste à préparer les dépendances nécessaires. Nous importons ECharts ainsi que les données géographiques spécifiques à la province du Hunan.

// Installation via npm
const echarts = require('echarts');

// Importation des données géographiques du Hunan
const hunanGeoData = require('./hunan-geo.json');

// Enregistrement de la carte dans ECharts
echarts.registerMap('Hunan', hunanGeoData);

Après l'installation, nous préparons le conteneur HTML qui recevra notre carte interactive.

<div id="carte-hunan" style="width: 800px; height: 600px;"></div>

Création de l'instance de carte

Nous initialisons une instance ECharts et appliquons une configuration de base pour afficher la carte du Hunan.

// Création de l'instance ECharts
const instanceCarte = echarts.init(document.getElementById('carte-hunan'));

// Configuration de base de la carte
const configBase = {
    series: [{
        type: 'map',
        map: 'Hunan',
        label: {
            show: true
        }
    }]
};

// Application de la configuration
instanceCarte.setOption(configBase);

Personnalisation de l'apparence

ECharts offre de nombreuses options pour personnaliser le style de la carte. Nous pouvons modifier les couleurs, ajouter des étiquetes et configurer les interactions utilisateur.

// Configuration avancée du style
const configStyle = {
    visualMap: {
        min: 0,
        max: 1000,
        text: ['Élevé', 'Faible'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        }
    },
    series: [{
        name: 'Données régionales',
        type: 'map',
        map: 'Hunan',
        roam: true,
        emphasis: {
            label: {
                show: true
            }
        },
        data: [
            {name: 'Changsha', value: 800},
            {name: 'Zhuzhou', value: 500},
            {name: 'Xiangtan', value: 450}
        ]
    }]
};

Ajout d'interactions utilisateur

La carte peut réagir aux actions des utilisateurs grâce aux événements intégrés. Nous pouvons configurer des tooltips et des actions au clic.

// Configuration des tooltips et événements
const configInteraction = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>Valeur: {c}'
    },
    series: [{
        type: 'map',
        map: 'Hunan',
        selectedMode: 'single',
        click: function(params) {
            console.log('Région sélectionnée:', params.name);
        }
    }]
};

// Application des interactions
instanceCarte.setOption(configInteraction);

Optimisation des performances

Pour garantir des performances optimales, plusieurs techniques d'optimisation peuvent être appliquées, notamment la gestion du chargement asynchrone des données et la simplification des rendus graphiques.

// Chargement asynchrone des données
async function chargerDonnees() {
    try {
        const reponse = await fetch('/api/donnees-hunan');
        const donnees = await reponse.json();
        
        instanceCarte.setOption({
            series: [{
                data: donnees
            }]
        });
    } catch (erreur) {
        console.error('Erreur de chargement:', erreur);
    }
}

// Lancement du chargement
chargerDonnees();

Intégration de données dynamiques

Nous pouvons lier des données qui évoluent dans le temps à notre carte. Cette approche permet de visualiser des changements temporels sur différentes régions.

// Mise à jour dynamique des données
function mettreAJourDonnees(nouvellesDonnees) {
    const optionMiseAJour = {
        series: [{
            data: nouvellesDonnees.map(item => ({
                name: item.region,
                value: item.valeur
            }))
        }]
    };
    
    instanceCarte.setOption(optionMiseAJour);
}

// Simulation de mise à jour périodique
setInterval(() => {
    const donneesSimulees = genererDonneesAleatoires();
    mettreAJourDonnees(donneesSimulees);
}, 5000);