React et Giro3D

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:

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:

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:

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

1 pièce(s) jointe(s)

En mettant le code de création de la carte dans une instruction useEffect, ça fonctionne.
Le code de mon composant :

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { useState, useEffect, useRef } from 'react';
 
import colormap from "colormap";
 
import { Color } from "three";
import { MapControls } from "three/examples/jsm/controls/MapControls.js";
 
import Instance from '@giro3d/giro3d/core/Instance.js';
import Extent from "@giro3d/giro3d/core/geographic/Extent.js";
import GeoTIFFSource from "@giro3d/giro3d/sources/GeoTIFFSource.js";
import ColorLayer from "@giro3d/giro3d/core/layer/ColorLayer.js";
import ElevationLayer from "@giro3d/giro3d/core/layer/ElevationLayer.js";
import Interpretation from "@giro3d/giro3d/core/layer/Interpretation.js";
import Map from "@giro3d/giro3d/entities/Map.js";
import Inspector from "@giro3d/giro3d/gui/Inspector.js";
import ColorMap, { ColorMapMode } from "@giro3d/giro3d/core/layer/ColorMap.js";
 
import styles from './Giro3D.module.css'
 
// https://giro3d.org/latest/examples/cog_elevation.html?view=-13656319%2C5735451%2C88934%2C-13545408%2C5837154%2C0
function Giro3D() {
 
  function makeColorRamp(
    preset,
    discrete = false,
    invert = false,
    mirror = false,
  ) {
    let nshades = discrete ? 10 : 256;
 
    const values = colormap({ colormap: preset, nshades });
 
    const colors = values.map((v) => new Color(v));
 
    if (invert) {
      colors.reverse();
    }
 
    if (mirror) {
      const mirrored = [...colors, ...colors.reverse()];
      return mirrored;
    }
 
    return colors;
  }
 
  useEffect(() => {
 
  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);
 
  const controls = new MapControls(instance.view.camera, instance.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.2;
  controls.target.set(-13545408, 5837154, 0);
  instance.view.setControls(controls);
 
  const map = new Map({
    extent,
    backgroundColor: "gray",
    hillshading: true,
  });
  instance.add(map);
 
  // Use an elevation COG with nodata values
  const source = new GeoTIFFSource({
    url: "https://3d.oslandia.com/cog_data/COG_EPSG3857_USGS_13_n47w122_20220919.tif",
    crs: extent.crs,
  });
 
  const min = 263;
  const max = 4347;
 
  // Display it as elevation and color
  const viridis = new ColorMap(
    makeColorRamp("viridis"),
    min,
    max,
    ColorMapMode.Elevation,
  );
 
  // Attach the inspector
  Inspector.attach("inspector", instance);
 
  map.addLayer(
    new ElevationLayer({
      name: "elevation-colormap",
      extent,
      source,
      colorMap: viridis,
      minmax: { min, max },
    }),
  );
  }, []);
 
  return (
    <>
    <div id="giro3d-view" className={styles.view}></div>
    <div id="inspector" className={styles.inspect}></div>
    </>
  );
}
 
export default Giro3D;

Le css :

Code:

1
2
3
4
5
6
7
8
9
.view {
  width: 800px;
  height: 600px;
}
 
.inspect {
  width: 800px;
  height: 30px;
}

Il reste un problème : à l'affichage, la carte s'affiche 2 fois, pourquoi ??

Pièce jointe 663628

Nico

en mettant dans un css :

Code:

overflow: hidden;

ça fonctionne