La base de toute application Cesium est l'objet Viewer, qui permet d'afficher un globe terrestre interactif en 3D. Voici comment instancier un tel visualisateur :

/**
 * Initialise un visualisateur Cesium dans l'élément HTML spécifié.
 * L'ID "cesiumContainer" indique l'emplacement de rendu.
 */
const globeViewer = new Cesium.Viewer("cesiumContainer");

L'élément HTML correspondant doit être présent dans votre page :

<div id="cesiumContainer"></div>

Lors de la première exécution, vous pourriez rencontrer une erreur concernant un jeton d'accès (token). Pour accéder aux services de tuiles par défaut de Cesium Ion, il est nécessaire d'obtenir un jeton gratuit depuis leur site web et de le configurer comme suit :

Cesium.Ion.defaultAccessToken = "VOTRE_JETON_D_ACCES_CESIUM_ION";

Le constructeur de Cesium.Viewer accepte un deuxième argument, un objet de configuration, pour personnaliser l'interface et le comportement par défaut. Voici un aperçu des options courantes :

const viewerOptions = {
    animation: false, // Désactive le widget d'animation (curseur temporel et contrôles de lecture)
    baseLayerPicker: false, // Désactive le sélecteur de couches de base (images et terrain)
    fullscreenButton: false, // Désactive le bouton de bascule en plein écran
    vrButton: false, // Désactive le bouton du mode VR
    geocoder: false, // Désactive le widget de géocodage (barre de recherche)
    homeButton: false, // Désactive le bouton de retour à la vue initiale
    infoBox: false, // Désactive la boîte d'information contextuelle lors de la sélection d'entités
    sceneModePicker: false, // Désactive le sélecteur de mode de scène (2D, 3D, Columbus View)
    selectionIndicator: false, // Désactive l'indicateur visuel de sélection d'entités
    timeline: false, // Désactive la barre de temps
    navigationHelpButton: false, // Désactive le bouton d'aide à la navigation
    navigationInstructionsInitiallyVisible: false, // Cache les instructions de navigation au démarrage
    // Autres options...
};
const customViewer = new Cesium.Viewer("cesiumContainer", viewerOptions);

// Une astuce courante pour masquer le logo Cesium par défaut
customViewer._cesiumWidget._creditContainer.style.display = "none";

Gestion des couches d'imagerie et de terrain

Plusieurs propriétés permettent de contrôler les fonds de carte et les terrains :

• imageryProviderViewModels : Un tableau de modèles de vue pour les fournisseurs d'imagerie, utilisés par le baseLayerPicker.
• selectedImageryProviderViewModel : Le modèle de vue d'imagerie sélectionné par défaut.
• terrainProviderViewModels : Similaire à imageryProviderViewModels, mais pour les fournisseurs de terrain.
• imageryProvider et terrainProvider : Permettent de définir directement le fournisseur d'imagerie et de terrain lors de l'initialisation, si baseLayerPicker est défini sur false.

Voici quelques opérations courantes sur le visualisateur :

const monVisualisateur = new Cesium.Viewer("cesiumContainer", {
    baseLayerPicker: false, // S'assure que le sélecteur de couche n'est pas actif pour gérer manuellement
    terrainProvider: new Cesium.EllipsoidTerrainProvider({}), // Commence sans terrain spécifique
});

// Supprimer la couche d'imagerie par défaut si elle a été ajoutée
// if (monVisualisateur.imageryLayers.length > 0) {
//     monVisualisateur.imageryLayers.remove(monVisualisateur.imageryLayers.get(0));
// }

// Activer l'affichage du nombre d'images par seconde (FPS)
monVisualisateur.scene.debugShowFramesPerSecond = true;

// Définir une vue initiale de la caméra
monVisualisateur.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0), // Longitude, latitude, altitude
    orientation: {
        heading: Cesium.Math.toRadians(90.0), // Cap (rotation autour de l'axe Z)
        pitch: Cesium.Math.toRadians(-45.0), // Inclinaison (vers le bas)
        roll: Cesium.Math.toRadians(0.0), // Roulis (rotation autour de l'axe de la caméra)
    },
});

Gestion des Couleurs

Cesium fournit de nombreuses couleurs prédéfinies via l'objet Cesium.Color (ex: Cesium.Color.RED, Cesium.Color.BLUE). Vous pouvez également définir des couleurs personnalisées de plusieurs manières :

// Méthode 1 : En spécifiant les composants Rouge, Vert, Bleu, Alpha (RGBA)
// Les valeurs doivent être comprises entre 0 et 1.
const couleurVerteTransparente = new Cesium.Color(0.2, 0.8, 0.2, 0.7);

// Méthode 2 : À partir d'une chaîne de couleur CSS (ex: hexadécimal, RGB, RGBA, nom de couleur)
const couleurBleuFonce = Cesium.Color.fromCssColorString("#1a00ff");
const couleurOrangeSemiTransparente = Cesium.Color.fromCssColorString("rgba(255, 165, 0, 0.5)");

Systèmes de Coordonnées

Cesium gère principalement quatre types de systèmes de coordonnées :

1. Coordonnées Cartésiennes 3D (Cartesian3)

Aussi appelées coordonnées mondiales ou ECEF (Earth-Centered, Earth-Fixed). Elles sont représentées par l'objet Cesium.Cartesian3 et sont utilisées pour les transformations spatiales (translation, rotation, échelle). L'origine de ce système se situe au centre de l'ellipsoïde terrestre.

// Création d'un point en coordonnées cartésiennes 3D
const pointCartesien = new Cesium.Cartesian3(1000000.0, 2000000.0, 3000000.0);

2. Coordonnées Géographiques (Cartographic - Radians)

Représentées par l'objet Cesium.Cartographic, ces coordonnées utilisent la longitude, la latitude et l'altitude, avec la longitude et la latitude exprimées en radians. L'altitude est la hauteur au-dessus de l'ellipsoïde.

// Création d'un point géographique en radians (longitude, latitude, hauteur)
const pointGeographiqueRadians = new Cesium.Cartographic(
    Cesium.Math.toRadians(10.0),  // 10 degrés de longitude convertis en radians
    Cesium.Math.toRadians(20.0),  // 20 degrés de latitude convertis en radians
    1000.0                        // Altitude de 1000 mètres
);

Pour convertir des degrés en radians et vice-versa :

// Conversion de degrés en radians
const angleEnRadians = Cesium.Math.toRadians(45.0); // Résultat : π/4

// Conversion de radians en degrés
const angleEnDegres = Cesium.Math.toDegrees(Math.PI / 2); // Résultat : 90.0

3. Coordonnées Géographiques (Degrés)

Il s'agit des coordonnées longitude/latitude classiques, généralement basées sur le système WGS84. Cesium n'a pas d'objet spécifique pour les représenter directement, mais offre des fonctions pour convretir vers et depuis les radians.

// Exemple de conversion d'un point en degrés à partir de coordonnées cartésiennes
const positionCartesienne = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 2000);
const cartographique = Cesium.Cartographic.fromCartesian(positionCartesienne);

const longitudeDegres = Cesium.Math.toDegrees(cartographique.longitude); // -75.59777
const latitudeDegres = Cesium.Math.toDegrees(cartographique.latitude);   // 40.03883
const altitude = cartographique.height;                                 // 2000

4. Coordonnées Écran (Cartesian2)

Ces coordonnées représentent un point sur l'écran en pixels. Elles sont souvent obtenues lors d'événements de souris ou de toucher. Un objet Cesium.Cartesian2 est utilisé, avec des valeurs X et Y pour les coordonnées en pixels.

// Création d'une coordonnée écran à 100 pixels de l'origine en X et 200 en Y
const coordonneeEcran = new Cesium.Cartesian2(100, 200);

Conversion entre Coordonnées Écran et Monde

Les conversions entre les coordonnées écran (2D) et les coordonnées mondiales (3D) sont essentielles pour l'interaction utilisateur.

De l'écran vers le monde :

Convertit une coordonnée écran en une position 3D sur le globe. Notez que la position écran doit correspondre à un point visible sur le globe pour que la conversion réussisse.

// Supposons 'viewer' est votre instance de Cesium.Viewer et 'clickPosition' est un Cesium.Cartesian2
const scene = viewer.scene;
const rayonDeSelection = viewer.camera.getPickRay(clickPosition);
const positionMondiale3D = scene.globe.pick(rayonDeSelection, scene);

// Si positionMondiale3D est undefined, cela signifie que la position écran n'était pas sur le globe.
if (positionMondiale3D) {
    console.log("Position 3D sélectionnée :", positionMondiale3D);
}

Du monde vers l'écran :

Convertit une position 3D en coordonnées écran 2D. Le résultat est un objet Cesium.Cartesian2.

// Supposons 'scene' est l'objet scène du visualisateur et 'pointInteret3D' est un Cesium.Cartesian3
const positionEcran2D = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, pointInteret3D);

if (positionEcran2D) {
    console.log("Coordonnées écran : X=", positionEcran2D.x, ", Y=", positionEcran2D.y);
}