Prérequis du Projet
Pour débuter avec CesiumJS, assurez-vous de disposer d'un environnement de développement moderne. Cet article suppose que vous avez déjà initialisé un projet Vue 3 à l'aide de Vite. Si ce n'est pas le cas, vous pouvez rapidement en créer un en suivant la documentation officielle de Vite.
Installation des Dépendances
La première étape consiste à ajouter les bibliothèques nécessaires à votre projet. Utilisez npm ou Yarn pour installer CesiumJS et le plugin Vite dédié :
npm install cesium vite-plugin-cesium -D
# ou
yarn add cesium vite-plugin-cesium -D
Une fois les paquets installés, il est crucial de configurer Vite pour qu'il gère correctement les ressources de CesiumJS. Modifiez votre fichier vite.config.js pour inclure le plugin vite-plugin-cesium :
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import cesium from 'vite-plugin-cesium'; // Importation du plugin Cesium
export default defineConfig({
plugins: [
vue(),
cesium() // Activation du plugin Cesium
],
});
Configuration Initiale du Visualiseur Cesium
Avec les dépendances en place, nous pouvons maintenant configurer le composant Vue pour afficher la carte 3D. Modifiez votre fichier App.vue comme suit :
<template>
<div id="carteGlobale"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
onMounted(() => {
// Crée une instance du visualiseur Cesium et l'attache à l'élément DIV avec l'ID "carteGlobale"
const visu3D = new Cesium.Viewer("carteGlobale");
});
</script>
<style>
/* Styles pour que la carte occupe toute la fenêtre */
html, body, #app, #carteGlobale {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
Lorsque vous lancez votre projet, vous devriez voir la carte 3D. Cependant, une erreur fréquente peut apparaître dans la console, indiquant une restriction de script dans un iframe en mode sandbox (par exemple, Blocked script execution in 'about:blank'...). Cette erreur est généralement liée à la boîte d'information par défaut de Cesium. Pour y remédier, désactivez-la lors de l'initialisation du visualiseur :
const visu3D = new Cesium.Viewer("carteGlobale", {
infoBox: false, // Désactive la boîte d'information pour résoudre les erreurs de sandboxing
});
Cette modification devrait éliminer l'erreur et vous présenter une carte CesiumJS fonctionnelle.
Personnalisation de l'Interface : Suppression des Contrôles
Le visualiseur CesiumJS inclut de nombreux widgets d'interface utilisateur par défaut, tels que des boutons de navigation, une chronologie ou un sélecteur de mode de scène. Pour une expérience utilisateur plus épurée, vous pouvez désactiver ces éléments lors de la création de l'instance Viewer :
<template>
<div id="carteGlobale"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
const initialiserVisualiseur = () => {
const visu3D = new Cesium.Viewer("carteGlobale", {
infoBox: false, // Boîte d'information contextuelle
geocoder: false, // Widget de recherche géographique
homeButton: false, // Bouton pour revenir à la vue par défaut
sceneModePicker: false, // Sélecteur entre les modes 2D, 3D et 2.5D (Colombus View)
baseLayerPicker: false, // Sélecteur de couches de base
navigationHelpButton: false, // Bouton d'aide à la navigation
animation: false, // Widget d'animation (horloge)
timeline: false, // Widget de chronologie
fullscreenButton: false, // Bouton pour activer le mode plein écran
vrButton: false, // Bouton pour le mode VR
});
// Masque le conteneur des crédits (par exemple, "Cesium", "Bing Maps")
visu3D._cesiumWidget._creditContainer.style.display = "none";
};
onMounted(() => {
initialiserVisualiseur();
});
</script>
<style>
html, body, #app, #carteGlobale {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
Après ces modifications, l'application affichera un globe 3D sans aucune interface utilisateur superflue.
Modification de la Couche de Fond : Intégration de Tianditu
Par défaut, CesiumJS utilise des couches d'imagerie telles que Bing Maps. Si vous souhaitez utiliser une autre source de données, comme les services cartographiques Tianditu, vous pouvez facilement le faire. Tianditu propose des services WMTS (Web Map Tile Service) que CesiumJS peut intégrer. Notez que vous aurez besoin d'une clé API Tianditu, à obtenir sur leur site officiel.
<template>
<div id="carteGlobale"></div>
</template>
<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
const initialiserVisualiseur = () => {
const visu3D = new Cesium.Viewer("carteGlobale", {
infoBox: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
});
visu3D._cesiumWidget._creditContainer.style.display = "none";
const gestionnaireCouches = visu3D.scene.imageryLayers;
gestionnaireCouches.remove(gestionnaireCouches.get(0)); // Supprime la couche d'imagerie par défaut
const cleAPI_Tianditu = "VOTRE_CLE_API_TIANDITU"; // REMPLACEZ PAR VOTRE CLÉ API TIANDITU
// Ajout de la couche d'imagerie Tianditu (images satellites)
const coucheSatelliteTdt = new Cesium.WebMapTileServiceImageryProvider({
url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${cleAPI_Tianditu}`,
layer: "img",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "w",
maximumLevel: 18,
});
visu3D.imageryLayers.addImageryProvider(coucheSatelliteTdt);
// Ajout de la couche d'annotation Tianditu (étiquettes, routes, noms de lieux)
const coucheAnnotationsTdt = new Cesium.WebMapTileServiceImageryProvider({
url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${cleAPI_Tianditu}`,
layer: "cia",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "w",
maximumLevel: 18,
});
visu3D.imageryLayers.addImageryProvider(coucheAnnotationsTdt);
};
onMounted(() => {
initialiserVisualiseur();
});
</script>
<style>
html, body, #app, #carteGlobale {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
N'oubliez pas de remplacer "VOTRE_CLE_API_TIANDITU" par la clé que vous avez obtenue. Une fois configurée, votre application affichera les couches d'imagerie et d'annotations de Tianditu, offrant une carte en français.