Fiches rando - Ajouter la vue 3D

[camillemonchicourt]

• Exemple : https://randonature.parc-haut-jura.fr/randonnee/des-bas-monts-au-chalet-du-gralet/
• Code intégré : https://github.com/GeotrekCE/Geotrek-rando/tree/master/src/app/3d
• Explication : https://makina-corpus.com/blog/metier/2014/visualiser-des-chemins-de-randonnee-en-3d-grace-a-babylonjs
• Code source : https://github.com/makinacorpus/rando3D
• Ajouter URL du fichier DEM.json à la route /trek
• Ajouter un bouton 3D sur les fiches des randos
• Ajouter un paramètre pour proposer ou non l'affichage 3D des randos
• Ouvrir la vue 3D dans une modale depuis les fiches des randos
• Drapper la couche "Photo aérienne" fournie en paramètre sur le MNT
• Optimiser l'affichage pour ne charger ce contenu que si on clique sur le bouton 3D et optimiser l'usage de la RAM car ce chargement est lourd
• Afficher l'itinéraire et les POI
• Détail d'un POI au clic sur son picto sur la carte

[camillemonchicourt]

Un bouton 3D était prévu dans les maquettes initiales : https://www.figma.com/file/YovGQrxOR8f5Xg6lSu6nMm/Geotrek-(Copy)?node-id=740%3A0

Depuis ces maquettes on a choisi de ne plus mettre les boutons sous l'image de l'objet, mais bien de les regrouper dans la barre de navigation de la fiche détail, en hait à droite avec les boutons IMPRIMER, TELECHARGER, SIGNALER (et RESERVER à venir pour les itinérances réservables)

[camillemonchicourt]

Autre sujet à traiter éventuellement dans un ticket dédié.
Il nous semble pertinent et utile d'intégrer aussi le module 3D dans les fiches des sites outdoor.

Donc même si on ne le fait pas de suite, à prendre en compte dans les développements que le module 3D pourra être utilisé dans d'autres modules.

Si on veut le mettre dans les fiches des sites outdoor :

• Il faut ajouter aussi le DEM dans la route des sites outdoor sur l'API v2 (/outdoor_site)
• Le module 3D sur les sites outdoor doit avoir un fonctionnement similaire, mais un site outdoor peut être un point, une ligne ou un polygone
• Un site outdoor peut avoir des POI donc on les afficherait aussi comme sur les randos

Exemple de fiche d'un site Outdoor : https://gtr3demo.ecrins-parcnational.fr/outdoor-site/12-CEUSE

[dtrucs]

Développement en cours, petit aperçu du dev :

(il convient de cliquer sur l'image pour voir son animation)

Il reste à faire :

• Gérer les locales fr/en
• Configuration SETTINGS
• Les styles des POI
• Couleur du thème (le fond bleu à changer par les couleurs du thème ?)
• Fournir une url POI via l'API

Concernant la configuration :
Soit partir sur un nouveau fichier rando3D.json soit ajouter la config dans un autre global.json / map.json dans la clé rando3D ?
Les settings sont minimales, ça se résume à

{
  "tilesUrl": "<tile_url>",
  "maxlengthTrekAllowed": "<0 à un chiffre indéfini>" 
}

Si l'url des tuiles n'est pas renseigné et/ou la longueur maximale autorisée de rando est égal à 0 la fonctionnalité est désactivée.

Concernant les locales, je propose la structure suivante :

  "rando3D": {
    "poi": {
      "no-description": "Pas de description liée à ce point d'intérêt."
    },
    "views": {
      "examine": {
        "title": "Mode examine",
        "description": "On peut examiner le terrain en le tournant dans tous les sens.",
        "cameraTitle": "Exam"
      },
      "bird": {
        "title": "Mode oiseau",
        "description": "On peut survoler le terrain tel un oiseau, tourner la tête, monter, descendre et se déplacer !",
        "cameraTitle": "Oiseau"
      },
      "hiker": {
        "title": "Mode randonneur",
        "description": "Ici on est dans la peau d'un randonneur, on suit sans effort l'avancement de l'itinéraire, en profitant de la vue.",
        "cameraTitle": "Rando"
      }
    },
    "instructions": {
      "zoom": "Zoom :",
      "rotate": "Inclinaison/Rotation :",
      "translate": "Se déplacer :",
      "lookAround": "Tourner regard :",
      "playPause": "Lecture/Pause :",
      "stop": "Stop :"
    },
    "actions": {
      "scrollMouse": "Molette souris",
      "leftClick": "Clic gauche",
      "space": "Espace",
      "enter": "Entrée"
    }
  }

La structure comme le contenu peut être soumis à correction

[camillemonchicourt]

OK merci pour ces éléments.
J'ajouterai les paramètres dans global.json.
A garder en tête que cela sera aussi utiliser à terme pour les sites et parcours Outdoor, donc prévoir un nom de paramètre plus global et générique, ou alors on aura d'autres paramètres pour Outdoor (sachant que cela sera des points, lignes ou polygones) ?

Pour tester avec des vraies données, mais des randos à la journée pas trop longues (Rando Ecrins production) :

  "portalIds": [1],
  "apiUrl": "https://geotrek-admin.ecrins-parcnational.fr/api/v2",

Et des randos itinérantes longues (Grands tour des Ecrins) :

  "portalIds": [2],
  "apiUrl": "https://geotrek-admin.ecrins-parcnational.fr/api/v2",

[camillemonchicourt]

Fait dans la version 3.7.0.

Le module 3D n'est proposé sur une rando que si :

• Le webGL est supporté par le navigateur
• La rando a une longueur inférieure au paramètre maxLengthTrekAllowedFor3DRando permettant de finir une longueur maximum de rando pour laquelle le module est proposée (25km par défaut). Car si les randos sont trop grandes alors la zone à afficher en 3D peut être volumineuse et faire planter le navigateur

A noter :

• Le module n'est pas proposé en version mobile car son interface n'est pas adaptée aux petits écrans
• Les tuiles photos aériennes (définies avec mapSatelliteLayerUrl) sont drapées sur le MNT renvoyé par l'API de Geotrek-admin
• Pour désactiver le module il suffit de passer le paramètre maxLengthTrekAllowedFor3DRando à 0
• Les librairies javascript et les infos de l'API ne sont chargées qu'une fois qu'on a cliqué sur le bouton 3D pour ne pas charger le chargement initial et les performances de la page détail d'une rando
• Cela rend le chargement du module et du contenu 3D plus long à s'afficher quand on l'ouvre mais ne pénalise la page détail
• Au niveau de l'API de Geotrek-admin, le MNT de chaque rando est généré dans l'API. La première fois cela peut être un peu long car Geotrek-admin génère le MNT de la rando. Les fois suivantes cela sera plus rapide car Geotrek-admin l'aura mis en cache

Évolutions envisagées :

• Intégrer le module 3D sur les fiches outdoor (nécessite d'ajouter le MNT dans l'API de Geotrek-admin pour les sites et parcours Outdoor)
• Refondre le module Rando3D pour en moderniser les technologies et en optimiser le chargement, car pour cette première version a gardé le module initial qui commence à dater et s'appuie sur jQuery
• Pouvoir configurer les modes d'affichage proposés
• Ajouter des informations comme la photo des POI