Bonjour,

Je teste le package Giro3D avec React (https://www.npmjs.com/package/@giro3d/giro3d)

Je crée un composant React, en reprenant le code de l'exemple ici :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function Giro3D() {
 
  function makeColorRamp(
    preset,
    discrete = false,
    invert = false,
    mirror = false,
  ) {
.....  
    return colors;
  }
 
  const extent = new Extent(
    "EPSG:3857",
    -13581040.085,
    -13469591.026,
    5780261.83,
    5942165.048,
  );
 
  const instance = new Instance({
    target: 'giro3d-view', // The id of the <div> that will contain the Giro3D instance
    crs: extent.crs,
  });
 
  instance.view.camera.position.set(-13656319, 5735451, 88934);
 
......
 
  return (
    <>
    <div id="giro3d-view"></div>
    </>
  );
}
 
export default Giro3D;
Dans mon fichier App.js, j'ai :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
function App_Giro3D() {
  return (
    <Giro3D />
  );
}
export default App_Giro3D;
Mais quand je lance l'appli, j'ai un message d'erreur :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
Invalid target parameter (must be a valid <div>)
Apparement, ça vient de la définition de l'instance dans le composant Giro3D, paramètre target.

Comment remédier?


Merci,

Nico