arcgis js for JavaScript 4.X 移动轨迹动画 案例全部代码

以下是一个基于 ArcGIS JavaScript API 4.x 实现移动轨迹动画的示例代码：

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/layers/GraphicsLayer",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/geometry/Polyline",
  "esri/geometry/support/webMercatorUtils",
  "dojo/domReady!"
], function(Map, MapView, Graphic, Point, GraphicsLayer, SimpleMarkerSymbol, SimpleLineSymbol, Polyline, webMercatorUtils) {
  // 定义起点和终点的经纬度坐标
  var startPoint = [-122.414, 37.776];
  var endPoint = [-122.426, 37.776];

  // 创建地图和地图视图
  var map = new Map({
    basemap: "streets-navigation-vector"
  });
  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: startPoint,
    zoom: 14
  });

  // 创建图形图层，并添加到地图中
  var graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  // 创建起点和终点的点图形，并添加到图形图层中
  var startSymbol = new SimpleMarkerSymbol({
    color: "green",
    size: "8px"
  });
  var endSymbol = new SimpleMarkerSymbol({
    color: "red",
    size: "8px"
  });
  var startPointGraphic = new Graphic({
    geometry: new Point({
      longitude: startPoint[0],
      latitude: startPoint[1]
    }),
    symbol: startSymbol
  });
  var endPointGraphic = new Graphic({
    geometry: new Point({
      longitude: endPoint[0],
      latitude: endPoint[1]
    }),
    symbol: endSymbol
  });
  graphicsLayer.addMany([startPointGraphic, endPointGraphic]);

  // 创建轨迹线的符号，并添加到图形图层中
  var lineSymbol = new SimpleLineSymbol({
    color: "blue",
    width: 4
  });
  var polylineGraphic = new Graphic({
    geometry: new Polyline(),
    symbol: lineSymbol
  });
  graphicsLayer.add(polylineGraphic);

  // 计算移动轨迹的点集合
  var points = [];
  for (var i = 0; i <= 100; i++) {
    var lon = startPoint[0] + (endPoint[0] - startPoint[0]) * i / 100;
    var lat = startPoint[1] + (endPoint[1] - startPoint[1]) * i / 100;
    points.push([lon, lat]);
  }

  // 定义当前移动到的点的索引
  var currentIndex = 0;

  // 定义移动函数，每隔一段时间移动到下一个点
  function move() {
    polylineGraphic.geometry.addPath(points.slice(currentIndex, currentIndex + 2));
    currentIndex += 1;
    if (currentIndex < points.length - 1) {
      setTimeout(move, 50);
    }
  }

  // 将经纬度坐标转换为 WebMercator 坐标系
  points = points.map(function(point) {
    return webMercatorUtils.geographicToWebMercator(new Point({
      longitude: point[0],
      latitude: point[1]
    }));
  });

  // 开始移动
  move();
});

在这个示例代码中，我们首先创建了一个地图和地图视图，并在地图上添加了一个图形图层。然后，我们创建了起点和终点的点图形，并将它们添加到图形图层中。接着，我们创建了轨迹线的符号，并将其添加到图形图层中。接下来，我们计算了移动轨迹的点集合，并定义了一个移动函数，每隔一段时间移动到下一个点。最后，我们将经纬度坐标转换为 WebMercator 坐标系，并开始移动。

需要注意的是，该示例代码中的移动函数仅是一个简单的实现，实际应用中可能需要更加复杂的实现，例如根据实时数据更新移动轨迹等。