3D Area Explorer est une solution qui vous permet d'explorer des communautés en 3D captivant. La solution exploite les tuiles 3D photoréalistes de Google, Places Search, Place Details et les API Autocomplete.
Premiers pas :
Activer
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 personnaliser le message à l'aide du panneau de configuration de l'interface utilisateur ou du fichier config.json
.
Prêt à personnaliser ? 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 parcours en sélectionnant le type d'orbite de la caméra: un tracé 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 en explorant les bureaux de Google à Sydney.
Orbite dynamique:
La caméra se déplace en douceur selon 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 action 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
dansconfig.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ées à proximité ou vous concentrer sur des zones spécifiques. - Définissez la vitesse de mouvement de votre caméra à l'aide du paramètre
speed (in revolutions per minute)
.
Précharger votre exploration: aller plus loin avec la personnalisation des URL
L'explorateur de zones 3D vous permet de prédéfinir votre exploration grâce à la personnalisation des URL. Cela élimine le besoin de configuration manuelle, ce qui simplifie l'expérience utilisateur.
Créer l'URL parfaite:
Il vous suffit d'ajouter des paramètres spécifiques à l'URL de l'explorateur de zone 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 et vous transporte instantanément vers l'emplacement 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 en orbite de la caméra.camera.orbitType
: type d'orbite de la caméra ("orbite fixe" ou "orbite dynamique").
Avantages de la personnalisation des URL:
- Simplifiez l'expérience utilisateur en prédéfinissant les paramètres que vous avez choisis.
- Partagez des trajets ciblés avec des lieux préchargés et des POI spécifiques.
- Intégrez de manière transparente des expériences Area Explorer préconfigurées dans les sites Web.
La personnalisation des URL vous permet de créer des expériences sur mesure et d'inviter d'autres personnes à vous lancer dans des aventures personnalisées.
Autres personnalisations
Dans la section précédente, nous avons abordé les ajustements accessibles via l'interface utilisateur ou le fichier de configuration. Cependant, il existe également plusieurs autres paramètres intégrés que vous pouvez modifier pour personnaliser davantage l'application.
Pour effectuer ces personnalisations avancées, vous devez examiner le code du 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 position de la caméra lorsqu'elle vole vers un point en ajustant la valeur CAMERA_HEIGHT
. Des valeurs plus élevées vous permettent d'obtenir une vue panoramique avec davantage de zoom arrière, tandis qu'une valeur faible vous permet 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 la caméra au-dessus de la position cible lorsque vous passez à un point spécifique.
- Exemples de valeurs :
- 50: Vue plus rapprochée, mettant l'accent sur les détails
- 200: une perspective plus panoramique
Pas de la caméra
L'inclinaison initiale de l'appareil photo est définie par BASE_PITCH. Utilisez des valeurs négatives pour une inclinaison vers le bas et des valeurs positives pour une vue ascendante. Pour ajouter un mouvement dynamique subtil à votre exploration, modifiez la valeur 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
etAUTO_ORBIT_PITCH_AMPLITUDE
- Valeurs par défaut :
BASE_PITCH
: -30 (inclinaison de 30 degrés vers le bas)AUTO_ORBIT_PITCH_AMPLITUDE
: 10 (modification de la hauteur 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 la hauteur initiale de la caméra et l'ajustement dynamique de l'inclinaison lors des rotations automatiques.
Exemples de valeurs:
BASE_PITCH
: 0 (niveau de caméra de niveau)AUTO_ORBIT_PITCH_AMPLITUDE
: 0 (pas de variation du ton)
Portée et zoom de la caméra
Ces paramètres définissent le niveau de zoom appliqué lorsque vous effectuez la mise au point sur des points spécifiques. Plus la valeur est faible, 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 portée lorsque la caméra est en mouvement, ainsi que le niveau de zoom pour permettre un examen plus approfondi.
Exemples de valeurs:
RANGE_AMPLITUDE_RELATIVE
: 1 (variante complète)ZOOM_FACTOR
: 10 (zoom moins)
// 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 comprend l'orientation (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) (inclinaison de 30 degrés vers le bas)range
: 800 (800 mètres du centre)
- Description: définit l'orientation, l'inclinaison et la portée 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)
Démarrer des coordonnées:
Les valeurs 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
: 0latitude
: 60height
: 15 000 000 (15 000 km au-dessus du sol)
Exemples de valeurs:
longitude
: -122.4934,latitude
: 37.7951 (pont Golden Gate)height
: 2000 (position de départ plus proche)
Charger un emplacement prédéfini
L'objet location
dans config.json
définit le centre de la zone. C'est le point de vue initial de la caméra dans la visionneuse Cesium.coordinates
: Définit la latitude (lat
) et la longitude (lng
) du lieu vers lequel vous souhaitez effectuer un panoramique en premier. Ajustez ces valeurs pour définir l'appareil photo sur un emplacement spécifique du globe.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Cette configuration vous permet de lancer votre application 3D Place Navigator avec un zoom avant sur le lieu spécifique de votre choix. Vous pouvez utiliser l'outil Geocoding de Google pour obtenir la latitude et la longitude d'une adresse ou d'un nom de lieu en les spécifiant dans l'objet de localisation:
- Accédez à l'outil de geocoding.
- Créer une requête de geocoding : cliquez sur la section "Essayer vous-même", puis saisissez l'emplacement 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.
- 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'établissement, y compris ses coordonnées de latitude et de longitude affichées dans la section
geometry.location
. - Utiliser des geocodings : copiez les valeurs de latitude et de longitude extraites de la réponse, et 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. En d'autres termes, 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 de Google à Mountain View, en Californie, et lancer votre application 3D Place Navigator avec la caméra centrée sur ce lieu.
Personnalisations avancées
Vous pouvez effectuer des personnalisations supplémentaires en examinant le code plus en détail. La section suivante vous présente quelques options
Ajouter une trajectoire de caméra
La solution implémente directement deux chemins de caméra différents:
fixed-orbit" | "dynamic-orbit"
Toutefois, si vous le souhaitez, vous pouvez créer un tracé de caméra. Pour ce faire, vous pouvez l'implémenter à l'aide de la méthode
/src/utils/cesium.js dans la fonction calculateAutoOrbitFrame
.
Pour utiliser ce nouveau calcul du 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 types de lieux disponibles dans la démonstration se trouvent à la ligne 4.
Si vous souhaitez utiliser des types de lieux spécifiques sans modifier la source de démonstration, il vous suffit de les ajouter au fichier config.json
sous poi.types
.
Personnaliser le style (CSS)
Pour les styles, nous avons travaillé avec des variables CSS. Elles sont compatibles avec tous les principaux navigateurs et permettent de modifier une ligne de façon centralisée 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, ainsi que 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 découvrir comment ajouter des données GeoJSON ou d'autres données géographiques ré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, 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 commentez-la ou supprimez-la:
const poiConfig = { ...config.poi, ...customConfig.poi };
- Section Appareil photo
Pour supprimer la section camera
, recherchez la ligne suivante dans votre code, puis commentez-la ou supprimez-la:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Mettre à jour des 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 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 de l'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, comme la vitesse de la caméra, vous devez mettre à jour le code js et le code HTML.
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 mettez-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 Area Explorer pour adapter votre expérience d'exploration 3D. En modifiant le comportement de la caméra, l'inclinaison visuelle et les niveaux de zoom, vous pouvez créer des expériences uniques et engageantes qui mettent en valeur 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'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 concrétisent votre vision.