I wana put an arc graphic on the ground (3D map) and let it rotate slowly, how can I do it?
I'm using argis js 4.19,I want a smooth aninams ,so I cannot delete layer and add layer. this would let screen blink! could u help me?
that's work for me,thank u!
It's not really built for animation in that sense but you can effectively create what your after by creating a graphic and then creating your own animation frameHandler by using something like a setInterval() that regular updates the geometry of that graphic.A really quick rough example that I modified from the code sample looks like:
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Add Graphics to a SceneView | Sample | ArcGIS Maps SDK for JavaScript 4.26 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.26/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/geometry/geometryEngine" ], (Map, SceneView, GraphicsLayer, Graphic, geometryEngine) => { const map = new Map({ basemap: "hybrid" }); const view = new SceneView({ container: "viewDiv", map: map, camera: { // autocasts as new Camera() position: { // autocasts as new Point() x: -0.17746710975334712, y: 51.44543992422466, z: 1266.7049653716385 }, heading: 0.34445102566290225, tilt: 82.95536300536367 } }); /********************* * Add graphics layer *********************/ const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); /************************* * Add a 3D point graphic *************************/ // London const point = { type: "point", // autocasts as new Point() x: -0.178, y: 51.48791, z: 1010 }; const markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } }; const pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol }); graphicsLayer.add(pointGraphic); /**************************** * Add a 3D polyline graphic ****************************/ const polyline = { type: "polyline", // autocasts as new Polyline() paths: [ [-0.178, 51.48791, 0], [-0.178, 51.48791, 1000] ] }; const lineSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [226, 119, 40], width: 4 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol }); graphicsLayer.add(polylineGraphic); /*************************** * Add a 3D polygon graphic ***************************/ const polygon = { type: "polygon", // autocasts as new Polygon() rings: [ [-0.184, 51.48391, 400], [-0.184, 51.49091, 500], [-0.172, 51.49091, 500], [-0.172, 51.48391, 400], [-0.184, 51.48391, 400] ] }; const fillSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [227, 139, 79, 0.8], outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } }; const polygonGraphic = new Graphic({ attributes: { title: "square" }, geometry: polygon, symbol: fillSymbol }); graphicsLayer.add(polygonGraphic); view.when(() => { let timerControl = setInterval(() => { const toRotate = graphicsLayer.graphics.items.find(graphic => graphic.attributes?.title === 'square') const rotatedGeometry = geometryEngine.rotate(toRotate.geometry, 2) toRotate.geometry = rotatedGeometry; }, 100); }) }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
The key part being this:
let timerControl = setInterval(() => { const toRotate = graphicsLayer.graphics.items.find(graphic => graphic.attributes?.title === 'square') const rotatedGeometry = geometryEngine.rotate(toRotate.geometry, 2) toRotate.geometry = rotatedGeometry; }, 100);
Where I'm running a function every 100ms that calls geometryEngine to rotate a geometry by 2 degrees.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
