ArcGIS for JavaScript的vue2巡线轨迹西安80坐标点后端传过来的数组怎么在地图上画线

在ArcGIS for JavaScript中，可以使用 `Polyline` 类来绘制线条，而要绘制一条连接给定坐标点的线条，可以通过 `Polyline` 的构造函数以及 `addPath` 方法来实现。假设你已经从后端获取到了一组坐标点的数组，可以按照以下步骤在地图上绘制线条：

1. 在Vue组件的 `mounted` 钩子函数中创建Map对象，获取到地图的视图和图层对象：

mounted() {
  const map = new Map({
    basemap: "topo-vector",
    container: "mapDiv",
  });

  const view = new MapView({
    map: map,
    container: "mapDiv",
    center: [108.9402, 34.3416], // 地图中心点
    zoom: 12 // 初始缩放级别
  });

  const graphicsLayer = new GraphicsLayer(); // 创建绘图图层对象
  map.add(graphicsLayer); // 将图层添加到地图中
}

2. 在获取到坐标点数组后，遍历数组，将每个坐标点添加到 `Polyline` 对象的路径中：

const path = []; // 创建 Polyline 对象的路径数组
for (let i = 0; i < coords.length; i++) {
  path.push([coords[i].x, coords[i].y]); // 将每个坐标点转换为 [x, y] 数组并添加到路径中
}
const polyline = new Polyline({
  paths: [path], // 将路径数组作为参数传递给 Polyline 构造函数
  spatialReference: { wkid: 4326 } // 设置空间参考系为 WGS84
});

3. 创建 `PolylineSymbol3D` 对象和 `Graphic` 对象，并将 `Graphic` 对象添加到图层中：

const lineSymbol = new LineSymbol3D({
  symbolLayers: [{
    type: "line",
    size: "5px",
    material: { color: "red" }
  }]
}); // 创建 PolylineSymbol3D 对象，设置线条颜色和宽度

const polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: lineSymbol
}); // 创建 Graphic 对象

graphicsLayer.add(polylineGraphic); // 将 Graphic 对象添加到绘图图层中

完整代码示例：

<template>
  <div id="mapDiv" style="height: 600px;"></div>
</template>

<script>
import { loadModules } from "esri-loader";

export default {
  mounted() {
    loadModules([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/symbols/LineSymbol3D",
      "esri/geometry/Polyline"
    ]).then(([Map, MapView, GraphicsLayer, Graphic, LineSymbol3D, Polyline]) => {
      const map = new Map({
        basemap: "topo-vector",
        container: "mapDiv",
      });

      const view = new MapView({
        map: map,
        container: "mapDiv",
        center: [108.9402, 34.3416],
        zoom: 12
      });

      const graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      // 假设已经从后端获取到了坐标点数组 coords
      const path = [];
      for (let i = 0; i < coords.length; i++) {
        path.push([coords[i].x, coords[i].y]);
      }
      const polyline = new Polyline({
        paths: [path],
        spatialReference: { wkid: 4326 }
      });

      const lineSymbol = new LineSymbol3D({
        symbolLayers: [{
          type: "line",
          size: "5px",
          material: { color: "red" }
        }]
      });

      const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
      });

      graphicsLayer.add(polylineGraphic);
    });
  }
}
</script>