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?
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.
that's work for me,thank u!
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
