通过读取表格数据转化成json数据，实现openlayer多段轨迹同时播放暂停

上效果图

东拼西凑 终于搞定了想要的效果

// 使用XLSX对xlsx数据进行解析
// xlsx容易报type的错
getExcelData() {
      const _this = this;
      axios
        .get("./../../static/data/json.xlsx", {
          responseType: "arraybuffer",
        })
        .then((res) => {
          let data = new Uint8Array(res.data);
          let wb = XLSX.read(data, { type: "array" });
          let sheets = wb.Sheets; // 获取文档数据
          _this.content = _this.transformSheets(sheets);
        })
        .catch((err) => {});
    },

    transformSheets(sheets) {
      let content1 = [];
      let tmplist = [];
      const _this = this;
      this.routeLayerList = [];
      for (let key in sheets) {
        //读出来的xlsx数据很难读,转换为json格式,参考https://github.com/SheetJS/js-xlsx#utility-functions
        tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length);
        content1.push(XLSX.utils.sheet_to_json(sheets[key]));
      }
      const pointList1 = this.alpha_sort(content1[0]);
      pointList1.forEach((item, i) => {
        let arr = this.objArrayduplicateRemoval(item.coords, "TIME");
        let obj = {
          GPSID: item.GPSID,
          coords: arr,
          visible: false,
          width: item.width,
        };
        this.doublePolylines.push(obj);// 轨迹线
        var coordList = arr.map((cood) => {
          return [parseFloat(cood.X), parseFloat(cood.Y)];
        });// 轨迹点
        this.route = new LineString(coordList);
        this.routeList.push(new LineString(coordList));
        var routeFeature = new Feature({
          type: "route",
          geometry: this.route,
        });
        routeFeature.setStyle(
          new Style({
            stroke: new Stroke({
              color: _this.colorList[i % 6],
              width: 6,
              strokeOpacity: 0.2,
            }),
            // zIndex: 99,
          })
        );
        // 添加轨迹
        this.routeLayerList.push(routeFeature);
      });
      this.addmarker();
    },
    objArrayduplicateRemoval(arr, key) {
      var obj = {};
      var results = [];
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i][key]]) {
          if (arr[i][key].length >= 11) {
            results.push(arr[i]);
            obj[arr[i][key]] = true;
          }
        }
      }
      results.sort(function (a, b) {
        return new Date(a.TIME) > new Date(b.TIME) ? 1 : -1;
      });
      return results;
    },
    alpha_sort(labels) {
      let alpha_dict = new Object();
      let factories = new Array();
      for (var i = 0; i < labels.length; i++) {
        let factory = labels[i];
        let GPSID = factory.GPSID;
        if (alpha_dict[GPSID] == undefined) {
          factories.push({
            GPSID: GPSID,
            coords: [factory],
          });
          alpha_dict[GPSID] = factories.length - 1;
        } else {
          factories[alpha_dict[GPSID]].coords.push(factory);
        }
      }
      return factories;
    },
    // 添加起终点的markers
    addmarker(param) {
      this.geoMarkerList = [];
      this.positionList = [];
      for (let i = 0; i < this.doublePolylines.length; i++) {
        const curLineCoords = this.doublePolylines[i].coords;
        const startPoint = [curLineCoords[0].X, curLineCoords[0].Y];
        const endPoint = [
          curLineCoords[curLineCoords.length - 1].X,
          curLineCoords[curLineCoords.length - 1].Y,
        ];
        console.log(startPoint);
        var startimg = this.newMarker(
          require("../assets/image/track_start.png"),
          startPoint
        );
        var endimg = this.newMarker(
          require("../assets/image/track_end.png"),
          endPoint
        );
        this.positionList.push(startimg.getGeometry().clone());
        if (param == 1) {
          this.addGeoMarker(i);
        } else {
          const _this = this;
          this.addmarkerLayer([_this.routeLayerList[i], startimg, endimg]);
        }
      }
    },
    // 添加第二个运动轨迹的小球marker
    addGeoMarker(i) {
      const geoMarker = new Feature({
        type: "geoMarker",
        geometry: this.positionList[i],
      });
      geoMarker.setStyle(this.styles.geoMarker);
      this.geoMarkerList.push(geoMarker);
      let vectorSource = new VectorSource({
        features: [this.geoMarkerList[i]],
      });
      const vectorLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 99,
        name: "geoMarker",
        geoMarkerIndex: i,
      });
      this.vectorLayerList.push(vectorLayer);
      this.lastTimeList[i] = Date.now();
      this.vectorLayerList[i].on("postrender", this.moveFeature);
      this.map.addLayer(vectorLayer);
    },
    // 将起点终点marker 添加到地图上
    addmarkerLayer(feature) {
      let vectorSource = new VectorSource({
        features: feature,
      });
      const vectorLayer = new VectorLayer({
        source: vectorSource,
      });
      this.routeAndPointLayer.push(vectorLayer);
      this.map.addLayer(vectorLayer);
    },
    // 添加marker
    newMarker(url, point) {
      var markerIcon = new Feature({
        type: "icon",
        geometry: new Point(point),
      });
      markerIcon.setStyle(
        new Style({
          image: new Icon({
            size: [32, 32],
            src: url,
            offset: [0, 0],
          }),
        })
      );
      return markerIcon;
    },
    moveFeature(event) {
      const index = event.target.values_.geoMarkerIndex;
      const speed = 90;
      const time = event.frameState.time;
      const elapsedTime = time - this.lastTimeList[index];
      this.distanceList[index] =
        (this.distanceList[index] + (speed * elapsedTime) / 1e6) % 2;
      this.lastTimeList[index] = time;
      const currentCoordinate = this.routeList[index].getCoordinateAt(
        // 循环 来回播放
        // this.distance > 1 ? 2 - this.distance : this.distance
        // 单次
        this.distanceList[index] > 1 ? 1 : this.distanceList[index]
      );
      const _this = this;
      if (this.distanceList[index] > 1) {
        _this.geoMarkerList[index].setGeometry(_this.positionList[index]);
        this.vectorLayerList[index].un("postrender", this.moveFeature);
        this.btnText = "播放";
        this.isRePlay = true;
        this.distanceList[index] = 0;
        return;
      }
      this.positionList[index].setCoordinates(currentCoordinate);
      const vectorContext = getVectorContext(event);
      vectorContext.setStyle(this.styles.geoMarker);
      vectorContext.drawGeometry(this.positionList[index]);
      this.map.render();
    },
    // 删除轨迹
    deleteTrace(index) {
      console.log(this.routeAndPointLayer, index);
      this.map.removeLayer(this.routeAndPointLayer[index]);
      this.routeAndPointLayer.splice(index, 1);
      this.doublePolylines.splice(index, 1);
      if (this.doublePolylines.length == 0) {
        this.isShowReAdd = true;
      }
    },
    confirm() {},
    cancel() {},
    // 当数据清除完之后重新添加轨迹数据
    ReAdd() {
      this.addmarker();
    },
    handleVisibleChange(trace, index) {},
    // 播放/暂停轨迹
    btnClick() {
      if (this.btnText == "播放" || this.btnText == "继续") {
        this.btnText = "暂停";
        if (this.isRePlay) {
          this.isRePlay = false;
          this.vectorLayerList.forEach((layer) => {
            this.map.removeLayer(layer);
          });
          this.vectorLayerList = [];
          this.addmarker(1);
        } else {
          for (let i = 0; i < this.doublePolylines.length; i++) {
            this.addGeoMarker(i);
          }
        }
      } else if (this.btnText == "暂停") {
        this.btnText = "继续";
        for (let i = 0; i < this.doublePolylines.length; i++) {
          this.geoMarkerList[i].setGeometry(this.positionList[i]);
          this.vectorLayerList[i].un("postrender", this.moveFeature);
        }
      } else if (this.btnText == "继续") {
        this.btnText = "暂停";
        for (let i = 0; i < this.doublePolylines.length; i++) {
          this.geoMarkerList[i].setGeometry(this.positionList[i]);
          this.vectorLayerList[i].on("postrender", this.moveFeature);
        }
      }
   }

有不足之处还望各位大佬多多指点！！