3D Area Explorer: guide de personnalisation

Autres personnalisations

La section précédente a exploré les ajustements accessibles via l'interface utilisateur ou le fichier de configuration. Toutefois, vous pouvez également modifier plusieurs autres paramètres intégrés pour personnaliser davantage l'application.

Pour effectuer ces personnalisations avancées, vous devez examiner le code dans le fichier src/utils/cesium.js situé dans le répertoire src. Vous pouvez modifier les variables suivantes pour modifier l'apparence de l'application.

Hauteur de la caméra

Contrôlez la hauteur à laquelle la caméra se positionne lorsqu'elle se déplace vers un point en ajustant la valeur CAMERA_HEIGHT. Des valeurs plus élevées offrent une vue panoramique plus éloignée, tandis que des valeurs plus faibles vous rapprochent des détails de la zone.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;

• Paramètre : CAMERA_HEIGHT
• Valeur par défaut : 100
• Description : définit la hauteur de la caméra au-dessus de l'emplacement cible lorsqu'elle se déplace vers un point.
• Exemples de valeurs :
  • 50 : vue plus rapprochée, mettant l'accent sur les détails.
  • 200 : perspective plus panoramique.

Inclinaison de la caméra

L'inclinaison initiale de la caméra est définie par BASE_PITCH. Utilisez des valeurs négatives pour une inclinaison vers le bas et des valeurs positives pour une vue vers le haut. Pour ajouter un mouvement dynamique subtil à votre exploration, modifiez AUTO_ORBIT_PITCH_AMPLITUDE.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;

• Paramètre : BASE_PITCH et AUTO_ORBIT_PITCH_AMPLITUDE
• Valeurs par défaut :
  • BASE_PITCH : -30 (inclinaison de 30 degrés vers le bas)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (inclinaison de 10 degrés au fil du temps)

Description : l'inclinaison de la caméra est l'inclinaison visuelle d'une carte, mesurée en degrés. Elle est également appelée "inclinaison". Ces paramètres définissent l'inclinaison initiale de la caméra et l'ajustement dynamique de l'inclinaison lors des rotations automatiques.

Exemples de valeurs :

• BASE_PITCH : 0 (caméra au niveau)
• AUTO_ORBIT_PITCH_AMPLITUDE : 0 (aucune variation d'inclinaison)

Plage et zoom de la caméra

Ces paramètres définissent le niveau de zoom appliqué lors de la mise au point sur des points spécifiques. Plus les valeurs sont petites, plus le zoom est rapproché.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Paramètre : RANGE_AMPLITUDE_RELATIVE et ZOOM_FACTOR

Valeurs par défaut :

• RANGE_AMPLITUDE_RELATIVE : 0,55 (variation de distance relative)
• ZOOM_FACTOR : 20 (facteur de zoom de la caméra)

Description : ces paramètres définissent la variation de la plage lors du mouvement de la caméra et le niveau de zoom pour un examen plus approfondi.

Exemples de valeurs :

• RANGE_AMPLITUDE_RELATIVE : 1 (variation de plage complète)
• ZOOM_FACTOR : 10 (moins de zoom)

// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Réinitialisation de la caméra

Lorsqu'un utilisateur souhaite réinitialiser la caméra à sa position d'origine, les valeurs CAMERA_OFFSET sont utilisées. Ce paramètre inclut la direction (rotation), l'inclinaison et la plage (distance entre la caméra et le centre).

• Paramètre : CAMERA_OFFSET
• Valeurs par défaut :
  • heading : 0 (aucun décalage de rotation)
  • pitch : Cesium.Math.toRadians(-30) (inclinaison de 30 degrés vers le bas)
  • range : 800 (800 mètres du centre)
• Description : définit la direction, l'inclinaison et la plage de la caméra pour réinitialiser la vue.
• Exemples de valeurs :
  • heading : 45 (degrés, vue nord-ouest)
  • range : 1 500 mètres (plus loin du centre)

Coordonnées de départ :

Les START_COORDINATES définissent la longitude, la latitude et la hauteur initiales de la caméra. C'est là que l'exploration commencera. Définissez-la donc sur la zone que vous souhaitez que les utilisateurs voient en premier.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};

• Paramètre : START_COORDINATES

• Valeurs par défaut :

  • longitude: 0
  • latitude: 60
  • height : 15000000 (15 000 km au-dessus de la surface)

• Exemples de valeurs :

  • longitude: -122.4934, latitude: 37.7951 (Golden Gate Bridge)
  • height : 2000 (position de départ plus proche)

Charger un lieu prédéfini

L'objet location dans config.json définit le centre de la zone. Il s'agit du point de vue initial de la caméra dans le visualiseur Cesium.coordinates : définit la latitude (lat) et la longitude (lng) du lieu vers lequel vous souhaitez que la caméra effectue un panoramique en premier. Ajustez ces valeurs pour définir la caméra sur n'importe quel lieu spécifique du globe.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Cette configuration vous permet de démarrer votre application 3D Place Navigator en effectuant un zoom avant sur un lieu spécifique de votre choix. Vous pouvez utiliser l'outil Geocoding de Google pour obtenir les coordonnées de latitude et de longitude d'une adresse ou d'un nom de lieu en le spécifiant dans l'objet de lieu :

1. Accédez à l'outil Geocoding.
2. Créer une requête de géocodage Cliquez sur la section "Essayez-le vous-même" et saisissez le lieu de votre choix dans le champ "Adresse". Vous pouvez spécifier une adresse, un nom de lieu ou même des points de repère.
3. Générer des coordonnées Cliquez sur le bouton "Exécuter" pour envoyer votre requête. L'outil renvoie une réponse contenant diverses informations sur le lieu, y compris ses coordonnées de latitude et de longitude affichées dans la section geometry.location.
4. Utiliser des géocodes Copiez les valeurs de latitude et de longitude récupérées à partir de la réponse, puis collez-les dans l'objet coordinates de votre configuration.

Remarque : Les géocodes utilisés de cette manière doivent respecter les conditions décrites dans la section 3.4 des conditions d'utilisation de Google Maps Platform Terms of Services section 3.4, c'est-à-dire qu'ils ne doivent pas être mis en cache pendant plus de 30 jours et doivent être actualisés après cette période.

Cette configuration utilise l'outil Geocoding pour déterminer automatiquement les coordonnées du siège de Google à Mountain View, en Californie, et lance votre application 3D Place Navigator avec la caméra centrée sur cet emplacement.

Personnalisations avancées

Vous pouvez effectuer des personnalisations supplémentaires en approfondissant le code. La section suivante vous présente quelques options.

Ajouter un nouveau chemin de caméra

La solution implémente deux chemins de caméra différents :

fixed-orbit" | "dynamic-orbit"

Toutefois, si vous le souhaitez, vous pouvez créer un chemin de caméra que vous pouvez implémenter à l'aide de

/src/utils/cesium.js dans la fonction calculateAutoOrbitFrame.

Pour utiliser ce nouveau calcul de chemin dans le panneau de configuration,reportez-vous à l'implémentation dans demo/src/camera-settings.js..

Ajouter d'autres types de lieux

La liste des types de lieux pour la configuration peut être ajustée dans le fichier demo/src/place-settings.js. À partir de la ligne 4, vous trouverez les types de lieux disponibles dans la démo.

Si vous souhaitez utiliser des types de lieux spécifiques sans modifier la source de la démo, vous pouvez simplement les ajouter au fichier config.json sous poi.types.

Personnaliser le style (CSS)

Pour les styles, nous avons utilisé des variables CSS. Elles sont compatibles avec tous les principaux navigateurs et permettent de modifier une ligne dans un emplacement central et de mettre à jour des propriétés CSS spécifiques. Nos variables CSS sont définies dans src/main.css. Vous pouvez y ajuster les couleurs, les paramètres de police, les marges intérieures ou extérieures pour l'ensemble de l'application.

Superposer des données supplémentaires

Pour superposer des données supplémentaires, vous devez mettre à jour le fichier src/utils/cesium.js et consulter la documentation Cesium pour savoir comment ajouter des données GeoJSON ou d'autres données géoréférencées au globe.

Supprimer des sections de configuration

Notre application JavaScript comporte trois sections principales dans le fichier de configuration : demo/src/[config-panel.js](config-panel.js): location, poi et camera. Chacune de ces sections fournit des options de configuration pour différents aspects de l'application. Les développeurs peuvent personnaliser ces sections en fonction de leurs besoins spécifiques.

1.Supprimer une section particulière de la configuration

• Section "Location"

Pour supprimer la section location, recherchez la ligne suivante dans votre code et commentez-la ou supprimez-la :

const locationConfig = { ...config.location, ...customConfig.location };

• Section "POI"

Pour supprimer la section poi, recherchez la ligne suivante dans votre code et commentez-la ou supprimez-la :

const poiConfig = { ...config.poi, ...customConfig.poi };

• Section "Camera"

Pour supprimer la section camera, recherchez la ligne suivante dans votre code et commentez-la ou supprimez-la :

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Mettre à jour les configurations combinées

Après avoir supprimé une section, il est essentiel de mettre à jour l'objet de configuration combiné. Cet objet fusionne la configuration par défaut avec toutes les personnalisations. Supprimez la propriété correspondante de l'objet combinedConfig :

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. Ajuster les éléments d'interface utilisateur

Si la suppression d'une section implique également la suppression d'éléments d'interface utilisateur associés, mettez à jour le code en conséquence dans le code HTML. Par exemple, si vous souhaitez supprimer une section spécifique du panneau d'administration, comme la vitesse de la caméra, vous devez mettre à jour le code JS et le code HTML.

4. Supprimer la section "Paramètres de la caméra"

Pour supprimer la section "Paramètres de la caméra" de l'interface utilisateur, recherchez la ligne suivante et commentez-la ou supprimez-la :

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Résumé de la suppression de la section "Location"

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusion

Dans ce document, nous avons exploré les différentes options de personnalisation disponibles dans Area Explorer pour adapter votre expérience d'exploration 3D. En modifiant le comportement de la caméra, en ajustant l'inclinaison visuelle et en modifiant les niveaux de zoom, vous pouvez créer des expériences uniques et attrayantes qui mettent en avant les paramètres et les points d'intérêt que vous avez sélectionnés.

N'oubliez pas de tester différentes configurations et d'affiner les paramètres en fonction de vos besoins spécifiques. En tirant parti de la puissance de la personnalisation, vous pouvez créer des parcours immersifs et personnalisés qui captivent votre audience et donnent vie à votre vision.