3D Area Explorer: guide de personnalisation

L'explorateur de zones en 3D est une solution qui vous permet d'explorer des communautés en 3D captivante. La solution exploite les tuiles 3D photoréalistes de Google, Places Search, Place Details et Autocomplete.

Premiers pas :

Utiliser l'application 3D Area Explorer Admin hébergée

Ou

Obtenez une clé API et téléchargez le code sur GitHub.

Activer

• API de tuiles 3D photoréalistes
• API Places

Personnaliser l'expérience

La solution 3D Area Explorer est hautement personnalisable, ce qui vous permet d'adapter l'expérience à vos parcours client. Vous pouvez la personnaliser à l'aide du panneau de configuration de l'interface utilisateur ou du fichier config.json.

Prêt pour la personnalisation ? Voici comment procéder :

Emplacement

Définissez le point de départ de votre expérience en ajustant la latitude et la longitude dans le fichier config.json.

Contrôler la caméra

Prenez le contrôle de votre voyage en sélectionnant le type d'orbite de la caméra: un trajet circulaire classique ou une onde sinusoïdale fascinante.

• Orbite fixe:

  Il s'agit d'une orbite circulaire à une hauteur fixe et autour d'un point d'intérêt spécifique.

  Découvrez une orbite fixe en action dans le bureau de Google à Sydney.

• Orbite dynamique:

  La caméra se déplace de manière fluide dans une trajectoire d'onde sinusoïdale autour d'un point d'intérêt désigné. Ce mouvement unique permet aux spectateurs d'observer le point d'intérêt sous différents angles et hauteurs, offrant ainsi une expérience visuelle dynamique et immersive.

  Découvrez une orbite dynamique en explorant la tour Eiffel.

Points d'intérêt (POI):

• Personnalisez votre exploration en déterminant les types de lieux que vous souhaitez découvrir. Faites votre choix parmi des musées, des parcs, des écoles et plus encore à l'aide du tableau types dans config.json.
• Définissez le nombre maximal de points d'intérêt affichés en ajustant le paramètre density.
• Modifiez searchRadius (in meters) pour inclure les gemmes cachés à proximité ou vous concentrer sur des zones spécifiques.
• Définissez la vitesse choisie pour le mouvement de la caméra à l'aide du paramètre speed (in revolutions per minute).

Précharger votre exploration: aller plus loin grâce à la personnalisation d'URL

L'explorateur de zones 3D vous permet de prédéfinir votre exploration grâce à la personnalisation d'URL. Cela élimine le besoin d'une configuration manuelle, ce qui simplifie l'expérience utilisateur.

Créer l'URL parfaite:

Ajoutez simplement des paramètres spécifiques à l'URL de l'explorateur de zones pour prédéfinir l'emplacement et d'autres paramètres. Exemple :

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Cette URL définit le point de départ sur la latitude et la longitude spécifiées, vous redirigeant instantanément vers le lieu choisi. Paramètres disponibles:

• location.coordinates.lat: latitude du lieu choisi.
• location.coordinates.lng: longitude du lieu choisi.
• poi.types: liste des types de POI à afficher, séparés par une virgule.
• poi.density: nombre maximal de POI choisi.
• poi.searchRadius: rayon de recherche des POI à proximité.
• camera.speed: vitesse d'orbite de la caméra.
• camera.orbitType: type d'orbite de la caméra ("Fixe orbite" ou "Orbite dynamique").

Avantages de la personnalisation des URL:

• Simplifiez l'expérience utilisateur en prédéfinissant les paramètres de votre choix.
• Partagez des trajets ciblés avec des lieux préchargés et des POI spécifiques.
• Intégrez facilement des expériences Area Explorer préconfigurées dans vos sites Web.

En utilisant la personnalisation des URL, vous pouvez créer des expériences sur mesure et inviter d'autres personnes à participer à des aventures sélectionnées.

Remarque :Essayez une URL personnalisée entièrement chargée : https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

Autres personnalisations

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

Pour effectuer ces personnalisations avancées, vous devez consulter le code du fichier src/utils/cesium.js situé dans le répertoire src. Les variables suivantes peuvent être modifiées pour changer l'apparence de l'application

Hauteur de la caméra

Contrôlez la hauteur à laquelle la caméra se positionne lorsqu'elle vole vers un point en ajustant la valeur CAMERA_HEIGHT. Une valeur élevée permet d'obtenir une vue panoramique plus détaillée, tandis que des valeurs faibles vous permettent de vous rapprocher 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 l'appareil photo au-dessus de l'emplacement cible lors d'un vol.
• Exemples de valeurs :
  • 50: Vue plus rapprochée, mettant en avant les détails.
  • 200: Une perspective plus panoramique.

Hauteur 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ètres: BASE_PITCH et AUTO_ORBIT_PITCH_AMPLITUDE
• Valeurs par défaut :
  • BASE_PITCH: -30 (argumentaire à 30 degrés vers le bas)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (modification de l'inclinaison de 10 degrés au fil du temps)

Description:l'inclinaison de la caméra correspond à l'inclinaison visuelle d'une carte, mesurée en degrés. On parle également d'inclinaison. Ces paramètres définissent le ton initial de la caméra et l'ajustement dynamique de l'inclinaison lors des rotations automatiques.

Exemples de valeurs:

• BASE_PITCH: 0 (niveau de la caméra)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (pas de variation de la hauteur de voix)

Portée et zoom de la caméra

Ces paramètres définissent le niveau de zoom appliqué lorsque vous sélectionnez des points spécifiques. Plus la valeur est faible, plus le niveau de zoom est faible.

// 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ètres: 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 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 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établir la position d'origine de la caméra, les valeurs CAMERA_OFFSET sont utilisées. Ce paramètre inclut le cap (rotation), l'inclinaison (inclinaison) et la portée (la 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) (argumentaire à 30 degrés vers le bas)
  • range: 800 (800 mètres du centre)
• Description: définit le cap, l'inclinaison et la portée de la caméra pour la réinitialisation de la vue.
• Exemples de valeurs :
  • heading: 45 (degrés, vue nord-ouest)
  • range: 1 500 mètres (plus loin du centre)

Début des coordonnées:

Les champs 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: 1 500 000 (15 000 km au-dessus de la surface)

• Exemples de valeurs:

  • longitude: -122.4934, latitude: 37.7951 (pont du Golden Gate)
  • height: 2 000 (position de départ la plus proche)

Charger un emplacement 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 la visionneuse Cesium.coordinates: Définit la latitude (lat) et la longitude (lng) du lieu sur lequel vous souhaitez que la caméra effectue un panoramique en premier. Ajustez ces valeurs pour définir l'appareil photo sur n'importe quel emplacement spécifique du globe.

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

Cette configuration vous permet de faire un zoom avant sur le lieu spécifique de votre choix à l'application 3D Place Browser. 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 les spécifiant dans l'objet de localisation:

1. Accédez à l'outil de geocoding.
2. Créer une requête de geocoding : cliquez sur la section "Essayer" 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 demande. L'outil renvoie une réponse contenant diverses informations sur l'emplacement, y compris ses coordonnées de latitude et de longitude affichées dans la section geometry.location.
4. Utiliser des geocodes : 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, à savoir qu'ils ne doivent pas être mis en cache pendant plus de 30 jours et doivent être actualisés par la suite.

Cette configuration utilise l'outil Geocoding pour déterminer automatiquement les coordonnées du siège social de Google à Mountain View, en Californie, et lancer votre application 3D Place Navigator avec l'appareil photo centré sur ce lieu.

Remarque :Cette méthode simplifie le processus de recherche de coordonnées et réduit la nécessité d'une identification manuelle. Il vous permet d'explorer facilement n'importe quel lieu à l'aide de son adresse ou de son nom dans votre configuration.

Personnalisations avancées

Vous pouvez effectuer des personnalisations supplémentaires en examinant plus en détail le code. La section suivante présente quelques options

Ajouter un trajet de caméra

La solution implémente automatiquement deux chemins d'accès différents pour la caméra:

fixed-orbit" | "dynamic-orbit"

Toutefois, si vous le souhaitez, vous pouvez créer une nouvelle trajectoire de caméra, vous pouvez l'implémenter à l'aide de la méthode

/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. Les lieux disponibles dans la démonstration commencent à la ligne 4.

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

Personnaliser le style (CSS)

Pour les styles, nous avons travaillé avec des variables CSS. Ils sont compatibles avec tous les principaux navigateurs et permettent de modifier une ligne à un endroit 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 les marges 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 du 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 spécifique de la configuration

• Section "Location" (Lieu)

Pour supprimer la section location, recherchez la ligne suivante dans votre code, puis mettez-la en commentaire ou supprimez-la:

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

• Section POI

Pour supprimer la section poi, recherchez la ligne suivante dans votre code, puis ajoutez-la à un commentaire ou supprimez-la:

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

• Section Caméra

Pour supprimer la section camera, recherchez la ligne suivante dans votre code, puis ajoutez-la à un commentaire 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ée. 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 des é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, telle que la vitesse de la caméra, vous devez mettre à jour le code JavaScript et le code HTML correspondants.

4. Supprimer la section des paramètres de la caméra

Pour supprimer la section des paramètres de la caméra de l'interface utilisateur, recherchez la ligne suivante, puis ajoutez-la en commentaire ou supprimez-la:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Suppression du résumé de la section "Lieu"

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusion

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

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