Graphics added to GraphicLayer do not render until you zoom

[patryks]

I have found similar bug from 2021 https://github.com/Esri/feedback-js-api-next/issues/122 but my case is different (don't use Zone.js) and according to post in forum https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/graphics-in-a-graphics-layer-only... the issue should be fixed.

In my case I generate grid (1km x 1km) drawing polyline every 5 meters. When the vectors are straight everything works just fine and the grid renders instantly. I have an options to rotate the lines with configurable angle. To calculate the grid I rotate every vector with following code:

geometryEngine.rotate(geometry, angle, point)

The problem is that the graphics are not rendered until I change the zoom level of the map. I tried to use the workaround from the post i mentioned with cloning symbols and then reapplying it to graphics after timeout and it works partialy as the other way around the old symbols stays on map until zoom level is changed.

Is there an option to refresh graphic or to reaply/rerender graphic symbols somehow?

[SamEngel · Accepted solution]

Hey @patryks ! I'm having some trouble reproducing this problem. I may be misunderstanding your question, but something like this works for me: 

// Add graphics to map
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
graphicsLayer.addMany([ ...rows, ...cols ]);

// Rotate graphics
for (const graphic of graphicsLayer.graphics) {
  graphic.geometry = geometryEngine.rotate(graphic.geometry, angle, point);
}

Would you be willing to share your code, or a simplified example of the problem in a codepen?

[patryks]

Thank you for your time @SamEngel. Your example helped me find the solution to my problem. My code that generates the grid.

Graphic generation:

for (let x = xmin; x <= xmax; x = x + precision) {
    x = Number(x.toFixed(6));

    let line = new Polyline({
        spatialReference: geometry.spatialReference
    });
    line.addPath([[x, ymin], [x, ymax]]);
    line = <Polyline>GeometryService.clip(GeometryService.rotate(line, angle, new Point({x: extent.xmin, y: extent.ymin, spatialReference: geometry.spatialReference})), extent.extent);

    const graphic = new Graphic({
        geometry: line,
        symbol: StyleService.createPolylineDefaultStyle()
    });

    graphics.push(graphic);
}

for (let y = ymin; y <= ymax; y = y + precision) {
    let line = new Polyline({
        spatialReference: geometry.spatialReference
    });
    line.addPath([[xmin, y], [xmax, y]]);
    line = <Polyline>GeometryService.clip(GeometryService.rotate(line, angle, new Point({x: extent.xmin, y: extent.ymin, spatialReference: geometry.spatialReference})), extent.extent);

    const graphic = new Graphic({
        geometry: line
    });
    graphics.push(graphic);
}

Adding generated graphics to layer:

this.gridLayer.removeAll();
this.gridLayer.addMany(graphics);

It renders correctly when I generate less than 600 lines, with more there is a problem. In my case, I am adding already rotated lines.

The way you did it works. You first added graphics, then modified the geometry of the graphic. With modification to my code:

const graphics = this.calculateGridWithoutAngle(geometry, precision);
this.gridLayer.removeAll();
this.gridLayer.addMany(graphics);
this.rotateGraphics(geometry, graphics, angle);

everything works as expected.