Track Santa con Ionic Angular e Cesium

Quest’anno ho deciso di creare un’app interattiva per tracciare il viaggio di Babbo Natale in tempo reale! Per farlo, ho utilizzato Ionic Angular per l’interfaccia multipiattaforma e CesiumJS per il globo 3D. Ecco come ho fatto.

Introduzione

L’idea era di combinare il potenziale di CesiumJS, una libreria potente per la visualizzazione 3D e di mappe, con la flessibilità di Ionic Angular, un framework che permette di creare app mobile e web con una singola codebase.

In questo tutorial ti spiegherò i passaggi principali per creare un’app simile, utilizzando la mia esperienza come base.

Creazione del Progetto

1. Configurazione di Ionic Angular

Per iniziare, ho creato un nuovo progetto Ionic Angular:

1
2
npm install -g @ionic/cli
ionic start track-santa blank --type=angular

Questo comando crea una base minimale per il progetto. Dopo essere entrato nella directory del progetto, ho avviato il server di sviluppo:

1
2
cd track-santa
ionic serve

Il browser ha caricato un’app vuota che rappresenta il punto di partenza del progetto.

2. Integrazione di CesiumJS

Ho installato CesiumJS nel progetto tramite npm:

1
npm install cesium

Poi ho configurato Cesium per caricare correttamente i suoi asset modificando il file angular.json:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/cesium/Build/Cesium",
    "output": "assets/cesium"
  }
],
"scripts": [
  "node_modules/cesium/Build/Cesium/Cesium.js"
]

Infine, ho aggiunto la variabile globale CESIUM_BASE_URL per indicare a Cesium dove trovare i suoi asset:

1
(window as any).CESIUM_BASE_URL = '/assets/cesium';

Questa configurazione è stata aggiunta nel file main.ts.

Creazione del Globo 3D

1. Layout HTML

Nel file cesium-map.page.html, ho creato un contenitore per il globo Cesium e un footer con pulsanti interattivi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<ion-content id="cesiumContainer"></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons>
      <ion-button (click)="showSantaStatus()">
        <ion-icon name="eye-outline"></ion-icon>
        Status
      </ion-button>
      <ion-button (click)="trackSantaJourney()">
        <ion-icon name="rocket-outline"></ion-icon>
        Journey
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

2. Inizializzazione di Cesium

Nel file cesium-map.page.ts, ho inizializzato il globo Cesium e configurato i pulsanti:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit } from '@angular/core';
import * as Cesium from 'cesium';

@Component({
  selector: 'app-cesium-map',
  templateUrl: './cesium-map.page.html',
  styleUrls: ['./cesium-map.page.scss'],
})
export class CesiumMapPage implements OnInit {
  viewer: Cesium.Viewer;

  ngOnInit() {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
    });
  }

  showSantaStatus() {
    this.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 50000),
    });
  }

  trackSantaJourney() {
    console.log('Tracking Santa...');
  }
}

Codice Sorgente

Il Codice sorgete è disponibile su GitHub. Codice Sorgente

Conclusione

Con Ionic Angular e CesiumJS, sono riuscito a creare un’app interattiva e divertente per seguire Babbo Natale durante il suo viaggio. Il progetto unisce il meglio della visualizzazione 3D e della flessibilità multipiattaforma, offrendo un’esperienza coinvolgente.

Se vuoi creare qualcosa di simile, segui questa guida e aggiungi il tuo tocco personale.