animate feature from one point to another with ArcGIS API for Javascript 4.12

YemiKudaisi — Sat, 11 Dec 2021 20:22:02 GMT

I'm trying to animate a feature from one point to another based on the example here for version3.20. Source code below. It works fine just pasting it in codepen or jsfiddle. However, my project works with version 4.12 of the API an I'm trying to achieve the same thing.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require(["esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/graphic", "dojox/gfx/fx", "dojo/_base/lang", "esri/Color", "dojo/dom", "esri/layers/GraphicsLayer",
        "dojo/on", "esri/geometry/ScreenPoint", "esri/geometry/Point", "esri/geometry/Polyline",
        "dojo/domReady!"
      ],
      function(Map, SimpleMarkerSymbol, SimpleLineSymbol,
        Graphic, fx, lang, Color, dom, GraphicsLayer,
        on, ScreenPoint, Point, Polyline) {
        var options = {
          basemap: "gray",
          center: [-29.88, 21.86133],
          zoom: 3
        };

        map = new Map("mapDiv", options);

        var linepath = [
          [-29.88231249999835, 21.861337104185896],
          [-29.706531249998385, 23.64436466438422],
          [-26.89403124999913, 29.152009189365007],
          [-25.4877812499995, 31.57838706044446],
          [-22.85106250000021, 34.08891708698886],
          [-19.862781250001014, 36.66827922896022],
          [-18.104968750001476, 37.787943753057206],
          [-14.765125000002355, 39.300164419151855],
          [-12.655750000002914, 39.97698664383719],
          [-10.370593750003529, 40.64717142579546],
          [-8.085437500004144, 41.178522893330914],
          [-4.218250000005169, 41.574231022027256],
          [0.7036249999935258, 41.836698107532534],
          [4.746593749992446, 41.836698107532534],
          [9.316906249991233, 41.836698107532534],
          [12.48096874999041, 41.836698107532534],
          [12.8325312499903, 41.836698107532534],
        ];

        var sls = new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_DASH,
          new Color([255, 0, 0]),
          3
        );
        var pl = new Polyline({"paths": [linepath], "spatialReference":{"wkid":4326}});
        var vechPath = new Graphic(pl, sls);

        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath(
          "M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z"
        );
        markerSymbol.setColor(new Color("#00FFFF"));

        var gLayerVehicle = new GraphicsLayer({
          "id": "Vehicle"
        });
        var gLayerVehiclePath = new GraphicsLayer({
          "id": "VehiclePath"
        });

        map.addLayers([gLayerVehiclePath, gLayerVehicle]);
        gLayerVehiclePath.add(vechPath);

        var myInterval = setInterval(test, 3000);
        var counter = 0;

        function test() {
          gLayerVehicle.clear();
          var p1 = new Point(linepath[counter]);
          var p2 = new Point(linepath[counter + 1]);
          var pt1Graphic = new Graphic(p1, markerSymbol);

          gLayerVehicle.add(pt1Graphic);

          var shape = pt1Graphic.getShape();
          console.info(shape.getTransform());
          var sp1 = map.toScreen(p1);
          var sp2 = map.toScreen(p2);

          var mp1 = map.toMap(new ScreenPoint(sp2.x, sp2.y));

          fx.animateTransform({
            duration: 1200,
            shape: shape,
            transform: [{
                name: "translate",
                start: [0,0],
                end: [sp2.x - sp1.x, sp2.y - sp1.y]
              },
              {name: "original"}
            ],
            onEnd: lang.hitch(this, function() {
              pt1Graphic.setGeometry(mp1);
            })
          }).play();
          counter++;
          if (counter >= linepath.length - 1) {
            clearInterval(myInterval);
          }
        }
      }
    );
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>

Working my way downward, I attempted modifying the code for version 4.12 until I got to the part that require the graphic's getShape (i.e get the dojo gfx shape) method which according to this link Functionality matrix | ArcGIS API for JavaScript 4.12, it is not a planned feature. My question is, is there another way to implement such animation in 4.12 or is it just not possible for now ?

Re: animate feature from one point to another with ArcGIS API for Javascript 4.12

mgeorge — Tue, 24 Sep 2019 19:15:37 GMT

Sorry Yemi Kudaisi‌, I don't think we really have a great way of doing this yet, but we have been prototyping some animation effects internally. We don't currently have a timeline for this though as we are focusing on some high priority items for the next couple of releases (e.g. clustering).

Re: animate feature from one point to another with ArcGIS API for Javascript 4.12

LucasLiu — Thu, 28 Nov 2019 08:47:20 GMT

Hi, Kudaisi.

I'm trying to do this, too. But I don't find any useful ways to solve this problem

Do you find some way to resolve it?

topic Re: animate feature from one point to another with ArcGIS API for Javascript 4.12 in ArcGIS JavaScript Maps SDK Questions

animate feature from one point to another with ArcGIS API for Javascript 4.12

Re: animate feature from one point to another with ArcGIS API for Javascript 4.12

Re: animate feature from one point to another with ArcGIS API for Javascript 4.12