AccueilConso

Carte interactive RTE des enjeux territoriaux de raccordement des grands consommateurs.

Stack

• React 19 + TypeScript + Vite 8
• OpenLayers 10, sans wrapper React
• Canvas OpenLayers pour les couches vectorielles standard
• WebGL custom pour le rendu edge-fade des zones favorables / défavorables
• Design System RTE (@rte-ds/react) pour certains contrôles UI
• motion/react pour les transitions du panneau

Prérequis

• Node 18+
• npm

Installation

npm install

Données GeoJSON

Les GeoJSON sont exportés depuis QGIS. La source de vérité reste le projet QGIS, pas les fichiers copiés dans public/data/.

cp /Users/aminetabou/Work/accueilconso/geojson_export/*.geojson public/data/

Fichiers attendus :

public/data/
├── WORLD_MAP.geojson
├── CONTOUR_FRANCE.geojson
├── DEPARTEMENTS.geojson
├── REGIONS.geojson
├── INVESTISSEMENT_MUTUALISE.geojson
├── PROXIMITE_RESEAU.geojson
├── RESEAU_SYMBOLIQUE.geojson
├── VILLES.geojson
├── ZONES_FAVORABLES.geojson
├── ZONES_DEFAVORABLES.geojson
└── ZONES_CONCENTRATION_DEMANDES.geojson

Les fichiers sont lus en EPSG:4326 puis reprojetés en EPSG:3857 au parse OpenLayers.

Commandes

npm run dev        # serveur Vite sur http://localhost:5173
npm run build      # build de production dans dist/
npm run preview    # servir le build localement
npm run typecheck  # tsc --noEmit
npm run lint       # ESLint sur src/
npm run format     # Prettier write sur src/

Scripts Design System :

npm run sync-ds       # build rte-ds/react puis copie dans node_modules
npm run sync-ds-both  # build rte-ds/core + rte-ds/react puis copie

Structure

src/
├── App.tsx                       # état global : couches, panneau, filtres métier
├── layerConfig.ts                # registre déclaratif des couches
├── main.tsx
├── index.css                     # tokens CSS + Nunito + ol/ol.css
├── components/
│   ├── MapView.tsx               # carte + couches + popup
│   ├── GeoJSONLayer.tsx          # ol/layer/Vector standard
│   ├── WebGLShapeburstLayer.tsx  # couche custom WebGL edge-fade
│   ├── Popup.tsx                 # popup OL Overlay + React portal
│   ├── LayerPanel.tsx            # panneau latéral desktop/mobile
│   ├── LayerRow.tsx              # ligne de couche + switch + info
│   ├── InfoModal.tsx             # modale d'information
│   ├── SegmentedControl.tsx      # filtres distance/tension/SDDR
│   ├── LayerIcons.tsx
│   └── LoadingOverlay.tsx
├── hooks/
│   ├── useGeoData.ts             # fetch séquentiel GeoJSON + progression
│   └── useOpenLayersMap.ts       # cycle de vie ol/Map
├── lib/
│   ├── styles/vector.ts          # styles Canvas : lignes, hachures, pentagones, villes
│   └── webgl/shapeburst.ts       # pipeline WebGL + Jump Flood Algorithm
├── styles/shared.ts
└── types/
    ├── layers.ts                 # LayerConfig + types de config
    └── features.ts               # interfaces de propriétés GeoJSON

Fonctionnalités

• Panneau latéral responsive avec couches actionnables.
• Toggles de visibilité sans recréation des couches OpenLayers.
• Filtres PROXIMITE_RESEAU : distance 10 km / 25 km, tension HTB1 / HTB2 / HTB3.
• Filtres zones favorables / défavorables : Sans, Horizon 2030, Horizon 2035.
• Rendu WebGL edge-fade 10 px en mode multiply pour les zones favorables / défavorables.
• Pentagones ORM avec masque interne synchronisé.
• Hachures pour les zones de concentration de demandes.
• Labels villes affichés selon le zoom.
• Popups au singleclick sur les features.
• Modales d'information par couche.
• Thème clair avec police Nunito.

Architecture des couches

src/layerConfig.ts est le registre unique des couches. Une entrée décrit :

• le fichier GeoJSON ;
• le type de géométrie ;
• le style ;
• l'état initial ;
• le z-index OpenLayers (order) ;
• l'ordre dans le panneau (panelOrder) ;
• les métadonnées UI (infoText, modalTitle, subPanel) ;
• les variantes de rendu (iconVariant, edgeWidthPx, minZoom, maxZoom).

Ajouter une couche revient à ajouter une entrée dans LAYER_CONFIG et à fournir le GeoJSON correspondant dans public/data/.

Vérifications avant merge

npm run typecheck
npm run lint
npm run build

Points d'attention

• Ne pas éditer les GeoJSON à la main : ré-exporter depuis QGIS.
• Ne pas oublier featureProjection: "EPSG:3857" dans readFeatures.
• Ne pas recréer une couche OpenLayers au toggle : utiliser setVisible.
• Ne pas réintroduire l'ancien shapeburst radial Canvas.
• Ne pas remplacer le rendu WebGL edge-fade par une opacité globale.
• Ne pas supprimer INVESTISSEMENT_MUTUALISE_MASK.
• Ne pas installer @types/ol : OpenLayers fournit ses types.
• Importer OpenLayers par sous-module, par exemple ol/Map, pas depuis ol.