3D Area Explorer est une solution qui vous permet d'explorer des communautés en 3D captivante. La solution s'appuie sur les éléments suivants: les tuiles 3D photoréalistes de Google, Places Search, Place Details, et les API Autocomplete.
Mise en route :
Activer
Personnaliser l'expérience
Hautement personnalisable, la solution d'explorateur de zones en 3D vous permet d'adapter
l'expérience à vos parcours client. Vous pouvez effectuer la personnalisation à l'aide du panneau de configuration de l'UI ou du fichier config.json
.
Prêt pour la personnalisation ? Voici comment procéder :
Lieu
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 classique une trajectoire circulaire ou une onde sinusoïdale intrigante.
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 Google Sydney. bureau.
Orbite dynamique:
La caméra se déplace de façon fluide dans une trajectoire d'onde sinusoïdale autour d'une ligne point d'intérêt. Ce mouvement unique permet aux spectateurs d'observer le mouvement d'intérêt sous différents angles et hauteurs, offrant une expérience dynamique et une expérience visuelle immersive.
Découvrez une orbite dynamique en explorant la tour Eiffel d'une tour de défense.
Points d'intérêt (POI) :
- Personnalisez votre exploration en déterminant les types de lieux que vous souhaitez visiter
découvrir. Faites votre choix parmi des musées, parcs, écoles et plus encore avec
types
dansconfig.json
. - Définissez le nombre maximal de points d'intérêt affichés en ajustant les
Paramètre
density
. - Modifiez
searchRadius (in meters)
pour inclure les gemmes cachés ou le focus à proximité dans des domaines 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échargez votre exploration : approfondissez vos recherches grâce à la personnalisation des URL
L'explorateur de zones 3D vous permet de prédéfinir votre exploration à l'aide d'une URL la personnalisation. Ainsi, aucune configuration manuelle n'est nécessaire, 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 zones pour prédéfinir la de localisation 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 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 ("fixed-orbit" ou "dynamic-orbit").
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.
Grâce à la personnalisation des URL, vous pouvez créer des expériences sur mesure et Invitez d'autres personnes à participer à des aventures sélectionnées spécialement pour eux.
Autres personnalisations
Dans la section précédente, nous avons exploré les ajustements accessibles via l'interface utilisateur ou la 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 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ôler la hauteur à laquelle la caméra se positionne lorsqu'elle vole vers un point
ajuster la valeur de CAMERA_HEIGHT
. Plus la valeur est élevée, plus
avec un zoom arrière ou une vue panoramique. À l'inverse, si vous utilisez une valeur faible,
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 lorsque se dirige vers un point précis.
- Exemples de valeurs:
- 50: Vue plus rapprochée, mettant en avant les détails.
- 200: Une perspective plus panoramique.
Hauteur de la caméra
La première inclinaison 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
etAUTO_ORBIT_PITCH_AMPLITUDE
- Valeurs par défaut:
BASE_PITCH
: -30 (argumentaire à 30 degrés vers le bas)AUTO_ORBIT_PITCH_AMPLITUDE
: 10 (changement de 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 les paramètres et l'ajustement dynamique du ton 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 éléments points. 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 les variations de plage lors de la prise de vue. le mouvement et le niveau de zoom.
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 sa position d'origine, Les valeurs CAMERA_OFFSET sont utilisées. Ce paramètre inclut l’en-tête (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 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:
START_COORDINATES définit la longitude, la latitude et la hauteur initiales de la caméra. C'est ici que l'exploration commencera. Vous devez donc la définir sur la zone souhaitée. 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
: 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 plus proche)
Charger un emplacement prédéfini
L'objet location
dans config.json
définit le centre de la zone. Il s'agit
point de vue initial de la caméra dans la visionneuse Cesium.coordinates
: Définit le
latitude (lat
) et longitude (lng
) du lieu souhaité pour la caméra
faire un panoramique sur la première position. Ajustez ces valeurs pour placer l'appareil photo à un emplacement spécifique sur
dans le monde entier.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Cette configuration vous permet de lancer l'application 3D Place Navigator. zoom avant sur un lieu spécifique de votre choix. Vous pouvez utiliser l'outil de géocodage de Google pour obtenir la latitude et la longitude. les coordonnées d'une adresse ou d'un lieu en les spécifiant dans le lieu ; objet:
- Accédez au champ Geocoding Outil.
- Créer une requête de geocoding : cliquez sur le bouton "Essayer vous-même". et entrez le lieu choisi dans le champ « Adresse » . Vous pouvez spécifier une adresse, le nom d’un 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'emplacement, y compris ses coordonnées de latitude et de longitude affichées dans la section
geometry.location
. - Utiliser les géocodes : copiez les valeurs de latitude et de longitude récupérées à partir du
et collez-les dans l'objet
coordinates
de votre configuration.
Remarque: Les géocodes utilisés de cette façon doivent respecter les conditions décrites dans Google Maps. Conditions d'utilisation de la plate-forme Services la section 3.4, à savoir qu'ils ne doivent pas être mis en cache pendant plus de 30 jours être actualisés par la suite.
Dans cette configuration, l'outil Geocoding détermine automatiquement du siège de Google à Mountain View, en Californie, et lancer l'application 3D Place Navigator avec l'appareil photo centré sur ce lieu ;
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 chemin d'accès à la 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 et l'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 à la
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 d'établissements disponibles dans la démonstration.
Si vous souhaitez utiliser des types de lieux spécifiques sans modifier la source de démonstration,
pourriez simplement 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 prises en charge dans toutes les
navigateur Web, et permettent de centraliser la modification d'une ligne
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 consultez la documentation sur cesiums pour savoir comment ajouter du GeoJSON ou d'autres données géographiques sur le globe terrestre.
Supprimer des sections de configuration
Notre application JavaScript comporte trois sections principales
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 et
le commenter ou le supprimer:
const locationConfig = { ...config.location, ...customConfig.location };
- Section sur les POI
Pour supprimer la section poi
, recherchez la ligne suivante dans votre code et votre 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 et votre 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 la 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 de supprimer les éléments d'interface utilisateur associés, mettez à jour le code en conséquence dans le code HTML. Par exemple, si vous souhaitez supprimer du panneau d'administration, comme la vitesse de la caméra, vous devez mettre à jour js et 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 et le commenter ou le supprimer:
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, l'ajustement de l'inclinaison visuelle et les niveaux de zoom, vous pouvez créer Des expériences uniques et attrayantes qui mettent en valeur les paramètres et les points que vous avez sélectionnés qui vous intéressent.
N'oubliez pas de tester différentes configurations et d'affiner en fonction de vos besoins spécifiques. En exploitant la puissance de vous pouvez créer des parcours immersifs et personnalisés qui vous captiveront votre public et de donner vie à votre vision.