Bonjour,

J'essaie toujours de faire une version 'composant React' des exemples Giro3D ici
Je voudrais modifier l'affichage des données à partir de contrôles (switch, ...) placés à côté de la partie affichage, comme dans l'exemple ici

Voici mon code :

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
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
117
118
119
120
121
122
123
124
125
126
127
128
function G3D_AxisGrid() {
 
  const [instance, setInstance] = React.useState(null);
  const [axisGrid, setAxisGrid] = React.useState(null);
  const [showAxisGrid, setShowAxisGrid] = React.useState(true);
 
  useEffect(() => {
 
    const x = -13602000;
    const y = 5812000;
    const halfWidth = 2500;
 
    const extent = new Extent(
      "EPSG:3857",
      x - halfWidth,
      x + halfWidth,
      y - halfWidth,
      y + halfWidth,
    );
 
    const instance = new Instance({
      target: "giro3d-view",
      crs: extent.crs,
      backgroundColor: 0x0a3b59,
    });
 
    const map = new Map({
      extent,
      hillshading: true,
      discardNoData: true,
      side: DoubleSide,
      backgroundColor: "white",
    });
 
    instance.add(map);
 
    const source = new TiledImageSource({
      source: new XYZ({
        minZoom: 10,
        maxZoom: 16,
        url: "https://3d.oslandia.com/dem/MtStHelens-tiles/{z}/{x}/{y}.tif",
      }),
      format: new GeoTIFFFormat(),
    });
 
    const floor = 1100;
    const ceiling = 2500;
 
    const values = colormap({ colormap: "viridis", nshades: 256 });
    const colors = values.map((v) => new Color(v));
 
    const dem = new ElevationLayer({
      name: "dem",
      extent,
      interpretation: Interpretation.Raw,
      source,
      colorMap: new ColorMap(colors, floor, ceiling, ColorMapMode.Elevation),
    });
 
    map.addLayer(dem);
 
    // Create an axis grid that encompasses the Map.
    const axisGrid = new AxisGrid({
      volume: {
        extent: extent.withRelativeMargin(0.1),
        floor,
        ceiling,
      },
      ticks: {
        x: 1000,
        y: 1000,
        z: 200,
      },
    });
 
    instance.add(axisGrid);
 
    instance.view.camera.position.set(-13594700, 5819700, 7300);
 
    const controls = new MapControls(instance.view.camera, instance.domElement);
    controls.target.set(-13603000, 5811000, 0);
    instance.view.setControls(controls);
 
    setInstance(instance);
    setAxisGrid(axisGrid);
 
 
  }, []);
 
  useEffect(() => {
    // action on update of showAxisGrid
    if (axisGrid !== null && instance !== null) {
      let ax = axisGrid
      ax.visible = showAxisGrid;
      let inst = instance
      inst.notifyChange(ax);
      setAxisGrid(ax)
      setInstance(inst)
    }
  }, [showAxisGrid]);
 
  return (
    <div className={styles.sample}>
      <div id="giro3d-view" className={styles.view}></div>
 
      <div class="side-pane-with-status-bar" className={styles.sidepan}>
        {/* Parameters */}
        <Card>
          <div>
            <Typography level="title-lg">Paramètres</Typography>
          </div>
          <CardContent orientation="horizontal">
            <Switch 
              checked={showAxisGrid}
              onChange={(event) => setShowAxisGrid(event.target.checked)}
              id="entity"/>
 
          </CardContent>
        </Card>
      </div>
 
 
    </div>
  );
 
}
 
export default G3D_AxisGrid;
J'ai bien les données qui s'affiche, quand je clique sur le switch, j'ai bien la valeur de showAxisGrid qui change, mais sur l'affichage, rien ne change.
Pourquoi?

Merci,

Nico