@vtx/ol-map 1.0.144 → 1.0.145

package/lib/path-play-back/PathPlayBack.js

@@ -0,0 +1,674 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _Feature = _interopRequireDefault(require("ol/Feature"));
+var _geom = require("ol/geom");
+var _Vector = _interopRequireDefault(require("ol/source/Vector"));
+var _style = require("ol/style");
+var _layer = require("ol/layer");
+var _render = require("ol/render");
+var _people = _interopRequireDefault(require("../assets/people.png"));
+var _qd = _interopRequireDefault(require("../assets/qd.png"));
+var _zd = _interopRequireDefault(require("../assets/zd.png"));
+var _lodash = _interopRequireWildcard(require("lodash"));
+var _createFeatureCollection = require("../feature-layer/createFeatureCollection");
+var _getPathLineStyles = _interopRequireDefault(require("../path-line-layer/getPathLineStyles"));
+var _turf = require("@turf/turf");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var getAngle = function getAngle(point1, point2) {
+  var arc = 0;
+  if (point2 && point2.length && point1 && point1.length) {
+    if (point2[0] - point1[0] >= 0 && point2[1] - point1[1] >= 0 || point2[0] - point1[0] < 0 && point2[1] - point1[1] > 0) {
+      arc = Math.atan((point2[0] - point1[0]) / (point2[1] - point1[1]));
+    } else if (point2[0] - point1[0] > 0 && point2[1] - point1[1] < 0 || point2[0] - point1[0] < 0 && point2[1] - point1[1] < 0) {
+      arc = Math.PI + Math.atan((point2[0] - point1[0]) / (point2[1] - point1[1]));
+    }
+  }
+  return arc;
+};
+var PathPlayBack = exports["default"] = /*#__PURE__*/function () {
+  function PathPlayBack(options) {
+    _classCallCheck(this, PathPlayBack);
+    var data = options.data,
+      _options$show = options.show,
+      show = _options$show === void 0 ? true : _options$show,
+      play = options.play,
+      speed = options.speed,
+      map = options.map,
+      style = options.style,
+      onPlaying = options.onPlaying,
+      onPlayEnd = options.onPlayEnd,
+      _options$repeatPlay = options.repeatPlay,
+      repeatPlay = _options$repeatPlay === void 0 ? true : _options$repeatPlay,
+      _options$autoView = options.autoView,
+      autoView = _options$autoView === void 0 ? false : _options$autoView,
+      _options$enableRotati = options.enableRotation,
+      enableRotation = _options$enableRotati === void 0 ? false : _options$enableRotati,
+      arrowStyle = options.arrowStyle,
+      showTrace = options.showTrace,
+      _options$traceStyle = options.traceStyle,
+      traceStyle = _options$traceStyle === void 0 ? {} : _options$traceStyle,
+      _options$showStartPoi = options.showStartPoint,
+      showStartPoint = _options$showStartPoi === void 0 ? true : _options$showStartPoi,
+      _options$showEndPoint = options.showEndPoint,
+      showEndPoint = _options$showEndPoint === void 0 ? true : _options$showEndPoint,
+      _options$zIndex = options.zIndex,
+      zIndex = _options$zIndex === void 0 ? 10 : _options$zIndex,
+      isHighlight = options.isHighlight;
+    this._init = false;
+    this.speed = speed || 10;
+    this.onPlaying = onPlaying;
+    this.onPlayEnd = onPlayEnd;
+    this.style = style;
+    this.repeatPlay = repeatPlay;
+    this.enableRotation = enableRotation;
+    this.arrowStyle = arrowStyle;
+    this.showTrace = showTrace;
+    this.traceStyle = traceStyle;
+    this.currentIndex = 0;
+    this._distance = 0;
+    this._lastTime = Date.now();
+    this.autoView = autoView;
+    this.zIndex = zIndex;
+    this.lastCoordinate = null;
+    this.distanceRatioArr = [];
+    this.dataDistanceRatioArr = [];
+    this.isPlayEnd = false;
+    this.initRotation = 0;
+    this.isHighlight = isHighlight;
+    this.startStyle = new _style.Style({
+      image: new _style.Icon(_objectSpread({
+        anchor: [0.5, 1],
+        src: _qd["default"]
+      }, (style === null || style === void 0 ? void 0 : style.start) || {}))
+    });
+    this.endStyle = new _style.Style({
+      image: new _style.Icon(_objectSpread({
+        anchor: [0.5, 1],
+        src: _zd["default"]
+      }, (style === null || style === void 0 ? void 0 : style.end) || {}))
+    });
+    this.geoMarkerStyle = new _style.Style({
+      image: new _style.Icon(_objectSpread({
+        anchor: [0.5, 1],
+        src: _people["default"]
+      }, (style === null || style === void 0 ? void 0 : style.geoMarker) || {}))
+    });
+    this.map = map;
+    if (data !== null && data !== void 0 && data.length) {
+      this.loadData(data);
+    }
+    this.play = play || false;
+    this.show = show;
+    this.showStartPoint = showStartPoint;
+    this.showEndPoint = showEndPoint;
+    this._init = true;
+  }
+  return _createClass(PathPlayBack, [{
+    key: "play",
+    set: function set(val) {
+      if (this._init) {
+        if (val) {
+          this.startAnimation();
+        } else {
+          this.stopAnimation();
+        }
+      }
+    }
+  }, {
+    key: "show",
+    set: function set(val) {
+      this.vectorLayer.setVisible(val);
+      if (this._animating) {
+        this.stopAnimation();
+      }
+    }
+  }, {
+    key: "showStartPoint",
+    set: function set(val) {
+      if (this.vectorLayer) {
+        var source = this.vectorLayer.getSource();
+        if (val) {
+          !source.hasFeature(this.startMarker) && source.addFeature(this.startMarker);
+        } else {
+          source.removeFeature(this.startMarker);
+        }
+      }
+    }
+  }, {
+    key: "showEndPoint",
+    set: function set(val) {
+      if (this.vectorLayer) {
+        var source = this.vectorLayer.getSource();
+        if (val) {
+          !source.hasFeature(this.endMarker) && source.addFeature(this.endMarker);
+        } else {
+          source.removeFeature(this.endMarker);
+        }
+      }
+    }
+  }, {
+    key: "loadObjectData",
+    value: function loadObjectData(data) {
+      var coordinates = [];
+      var distanceArr = [];
+      var dataDistanceArr = [];
+      var routeFeature = data.map(function (item, index) {
+        var geometryInfo = item.geometryInfo;
+        var type = geometryInfo.type,
+          lngLats = geometryInfo.lngLats,
+          coordType = geometryInfo.coordType;
+        var lineData = (0, _createFeatureCollection.transformGeometryInfoToWGS84)(lngLats, type, coordType)[0];
+        coordinates.push.apply(coordinates, _toConsumableArray(lineData));
+        var line = (0, _turf.lineString)(lineData);
+        distanceArr.push((0, _turf.length)(line));
+        var route = new _geom.LineString(lineData);
+        // 计算两个点的之间距离
+        lineData.forEach(function (v, i) {
+          if (i === 0) {
+            dataDistanceArr[index] = [0];
+          } else {
+            var from = (0, _turf.point)(lineData[i - 1]);
+            var to = (0, _turf.point)(v);
+            dataDistanceArr[index].push((0, _turf.distance)(from, to));
+          }
+        });
+        return new _Feature["default"](_objectSpread({
+          type: 'route',
+          geometry: route
+        }, item));
+      });
+      var dataDistanceRatioArr = dataDistanceArr.map(function (arr) {
+        var totalDistance = _lodash["default"].sum(arr);
+        var list = arr.map(function (distance) {
+          return distance / (totalDistance || 1);
+        });
+        // 计算两个点之间距离的占比
+        return list.map(function (distance, index) {
+          if (index === 0) {
+            return distance;
+          } else if (index === arr.length - 1) {
+            return 1;
+          }
+          return _lodash["default"].sum(list.slice(0, index + 1));
+        });
+      });
+      this.distanceArr = distanceArr;
+      var totalDistance = _lodash["default"].sum(distanceArr);
+      distanceArr = distanceArr.map(function (distance) {
+        return distance / (totalDistance || 1);
+      });
+      this.distanceRatioArr = distanceArr.map(function (distance, index) {
+        if (index === 0) {
+          return distance;
+        } else if (index === distanceArr.length - 1) {
+          return 1;
+        }
+        var total = _lodash["default"].sum(distanceArr.slice(0, index + 1));
+        return total > 1 ? 1 : total;
+      });
+      this.dataDistanceRatioArr = dataDistanceRatioArr;
+      this.route = new _geom.LineString(coordinates);
+      var firstFeature = routeFeature[0];
+      var lastFeature = _lodash["default"].last(routeFeature);
+      var firstGeometry = new _geom.Point(firstFeature.getGeometry().getFirstCoordinate());
+      var lastGeometry = new _geom.Point(lastFeature.getGeometry().getLastCoordinate());
+      return {
+        routeFeature: routeFeature,
+        firstGeometry: firstGeometry,
+        lastGeometry: lastGeometry
+      };
+    }
+  }, {
+    key: "loadArrayData",
+    value: function loadArrayData(data) {
+      var route = new _geom.LineString(data);
+      var distance = (0, _turf.length)((0, _turf.lineString)(data));
+      this.route = route;
+      var routeFeature = [new _Feature["default"]({
+        type: 'route',
+        geometry: route
+      })];
+      this.distanceArr = [distance];
+      this.distanceRatioArr = [1];
+      var firstGeometry = new _geom.Point(route.getFirstCoordinate());
+      var lastGeometry = new _geom.Point(route.getLastCoordinate());
+      return {
+        routeFeature: routeFeature,
+        firstGeometry: firstGeometry,
+        lastGeometry: lastGeometry
+      };
+    }
+  }, {
+    key: "getDefaultRouteStyle",
+    value: function getDefaultRouteStyle(feature) {
+      var _this$style, _this$style2;
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var style = (0, _lodash.isFunction)((_this$style = this.style) === null || _this$style === void 0 ? void 0 : _this$style.route) ? this.style.route(feature) : ((_this$style2 = this.style) === null || _this$style2 === void 0 ? void 0 : _this$style2.route) || {};
+      return new _style.Style({
+        stroke: new _style.Stroke(_objectSpread(_objectSpread({
+          width: 6,
+          color: [237, 212, 0, 0.8]
+        }, style), options))
+      });
+    }
+  }, {
+    key: "setRouteStyle",
+    value: function setRouteStyle(features) {
+      var _this = this;
+      features.forEach(function (feature) {
+        feature.setStyle(function (feature, resolution) {
+          var styles = [_this.getDefaultRouteStyle(feature)];
+          if (!(0, _lodash.isEmpty)(_this.arrowStyle)) {
+            styles.push.apply(styles, _toConsumableArray((0, _getPathLineStyles["default"])({
+              feature: feature,
+              resolution: resolution,
+              arrowStyle: _this.arrowStyle
+            })));
+          }
+          return styles;
+        });
+      });
+    }
+  }, {
+    key: "loadData",
+    value: function loadData(data) {
+      if (this.vectorLayer) {
+        this.destroy();
+      }
+      var routeFeature = null;
+      var firstGeometry = null;
+      var lastGeometry = null;
+      if ((0, _lodash.isArray)(data[0])) {
+        var _this$loadArrayData = this.loadArrayData(data);
+        routeFeature = _this$loadArrayData.routeFeature;
+        firstGeometry = _this$loadArrayData.firstGeometry;
+        lastGeometry = _this$loadArrayData.lastGeometry;
+      } else {
+        var _this$loadObjectData = this.loadObjectData(data);
+        routeFeature = _this$loadObjectData.routeFeature;
+        firstGeometry = _this$loadObjectData.firstGeometry;
+        lastGeometry = _this$loadObjectData.lastGeometry;
+      }
+      var startMarker = new _Feature["default"]({
+        type: 'start',
+        geometry: firstGeometry
+      });
+      startMarker.setStyle(this.startStyle);
+      var endMarker = new _Feature["default"]({
+        type: 'end',
+        geometry: lastGeometry
+      });
+      endMarker.setStyle(this.endStyle);
+      var position = startMarker.getGeometry().clone();
+      var geoMarker = new _Feature["default"]({
+        type: 'geoMarker',
+        geometry: position,
+        id: 'geoMarker'
+      });
+      if (this.isHighlight) {
+        this.map.setHighlightFeature(geoMarker, {
+          autoView: false
+        });
+      }
+      geoMarker.setStyle(this.geoMarkerStyle);
+      this.setRouteStyle(routeFeature);
+      var vectorLayer = new _layer.Vector({
+        source: new _Vector["default"]({
+          features: [].concat(_toConsumableArray(routeFeature), [geoMarker])
+        }),
+        zIndex: this.zIndex
+      });
+      this.map.addLayer(vectorLayer);
+      this.routeFeatures = routeFeature;
+      this.position = position;
+      this.vectorLayer = vectorLayer;
+      this.geoMarker = geoMarker;
+      this.startMarker = startMarker;
+      this.endMarker = endMarker;
+      if (!vectorLayer.getSource().hasFeature(startMarker)) {
+        vectorLayer.getSource().addFeature(startMarker);
+      }
+      if (!vectorLayer.getSource().hasFeature(endMarker)) {
+        vectorLayer.getSource().addFeature(endMarker);
+      }
+      if (this.showTrace) {
+        this.addTrace();
+      }
+    }
+  }, {
+    key: "changeProcess",
+    value: function changeProcess(process) {
+      var _this2 = this;
+      this._distance = process;
+      var distance = this.calculateDistance();
+      var route = this.routeFeatures[this.currentIndex].getGeometry();
+      var currentCoordinate = route.getCoordinateAt(distance > 1 ? 2 - distance : distance);
+      if (distance > 0) {
+        var lastCoordinate = route.getCoordinateAt(distance - 0.0001);
+        this.setRotation(lastCoordinate, currentCoordinate);
+      } else {
+        var nextCoordinate = route.getCoordinateAt(0.0000001);
+        if ((0, _lodash.isEqual)(currentCoordinate, nextCoordinate)) {
+          if (this.currentIndex === this.routeFeatures.length - 1) {
+            var lastRoute = this.routeFeatures[this.currentIndex - 1].getGeometry();
+            var _lastCoordinate = lastRoute.getCoordinateAt(1 - 0.0001);
+            this.setRotation(_lastCoordinate, currentCoordinate);
+          } else {
+            var nextRoute = this.routeFeatures[this.currentIndex + 1].getGeometry();
+            var _nextCoordinate = nextRoute.getCoordinateAt(0.0001);
+            this.setRotation(currentCoordinate, _nextCoordinate);
+          }
+        } else {
+          this.setRotation(currentCoordinate, nextCoordinate);
+        }
+      }
+      this.position.setCoordinates(currentCoordinate);
+      if (distance >= 1 && this.currentIndex >= this.routeFeatures.length - 1) {
+        this.isPlayEnd = true;
+        this.playEnd();
+        return distance;
+      }
+      if (this.showTrace) {
+        var list = [];
+        var getCoordinates = function getCoordinates(_ref) {
+          var startCoordinates = _ref.startCoordinates,
+            endCoordinates = _ref.endCoordinates,
+            lineCoordinates = _ref.lineCoordinates;
+          var start = (0, _turf.point)(startCoordinates);
+          var end = (0, _turf.point)(endCoordinates);
+          var line = (0, _turf.lineString)(lineCoordinates);
+          var sliced = (0, _turf.lineSlice)(start, end, line);
+          return sliced.geometry.coordinates;
+        };
+        if (this.currentIndex === 0) {
+          list.push(getCoordinates({
+            startCoordinates: this.startMarker.getGeometry().getCoordinates(),
+            endCoordinates: currentCoordinate,
+            lineCoordinates: route.getCoordinates()
+          }));
+        } else {
+          var features = this.routeFeatures.slice(0, this.currentIndex + 1);
+          features.forEach(function (feature, index) {
+            var geometry = feature.getGeometry();
+            var endCoordinates = currentCoordinate;
+            if (index !== _this2.currentIndex) {
+              endCoordinates = geometry.getLastCoordinate();
+            }
+            list.push(getCoordinates({
+              startCoordinates: geometry.getFirstCoordinate(),
+              endCoordinates: endCoordinates,
+              lineCoordinates: geometry.getCoordinates()
+            }));
+          });
+        }
+        list.forEach(function (coordinates, index) {
+          coordinates.forEach(function (coordinate, i) {
+            _this2.setPaintLinePath({
+              coordinate: coordinate,
+              init: i === 0,
+              index: index
+            });
+          });
+        });
+      }
+      return distance;
+    }
+  }, {
+    key: "moveToIndex",
+    value: function moveToIndex(index, dataIndex) {
+      var process = 0;
+      if (this.dataDistanceRatioArr[index][dataIndex] === 1) {
+        process = this.distanceRatioArr[index];
+      } else {
+        process = index === 0 ? this.dataDistanceRatioArr[index][dataIndex] : (this.distanceRatioArr[index] - this.distanceRatioArr[index - 1]) * this.dataDistanceRatioArr[index][dataIndex] + this.distanceRatioArr[index - 1];
+      }
+      this.currentIndex = index;
+      this.changeProcess(process);
+      this.onPlaying && this.onPlaying(process, index, dataIndex);
+    }
+  }, {
+    key: "moveTo",
+    value: function moveTo(process) {
+      this.currentIndex = this.distanceRatioArr.findIndex(function (distance) {
+        return distance >= process;
+      });
+      var distance = this.changeProcess(process);
+      var dataIndex = 0;
+      if (distance === 1) {
+        dataIndex = (this.dataDistanceRatioArr[this.currentIndex] || []).length - 1;
+      } else {
+        dataIndex = (this.dataDistanceRatioArr[this.currentIndex] || []).findIndex(function (v, index, arr) {
+          if (index === arr.length - 1) {
+            return true;
+          }
+          return v <= distance <= arr[index + 1];
+        });
+      }
+      // 计算当前进度的对应index
+
+      console.log('moveTo', this.distanceRatioArr, distance, dataIndex, this.currentIndex);
+      this.onPlaying && this.onPlaying(this._distance, this.currentIndex, dataIndex);
+    }
+  }, {
+    key: "playEnd",
+    value: function playEnd() {
+      var _this3 = this;
+      if (!this.repeatPlay) {
+        this.stopAnimation();
+      }
+      this.isPlayEnd = true;
+      if (this.showTrace) {
+        this.lineDashFeatures.forEach(function (feature) {
+          _this3.vectorLayer.getSource().removeFeature(feature);
+        });
+        this.paintLineFeatures.forEach(function (feature) {
+          _this3.vectorLayer.getSource().removeFeature(feature);
+          feature.setGeometry(null);
+        });
+        this.setRouteStyle(this.routeFeatures);
+      }
+    }
+  }, {
+    key: "setRotation",
+    value: function setRotation(lastCoordinate, coordinate) {
+      if (lastCoordinate && coordinate && this.enableRotation) {
+        this.geoMarkerStyle.getImage().setRotation(getAngle(lastCoordinate, coordinate));
+      }
+    }
+
+    // 计算当前路段跑的距离，计算公式：（当前跑的总距离 - 已跑路段的总距离） / 当前路段的百分比
+  }, {
+    key: "calculateDistance",
+    value: function calculateDistance() {
+      var currentRouteRatio = this.currentIndex > 0 ? this.distanceRatioArr[this.currentIndex] - this.distanceRatioArr[this.currentIndex - 1] : this.distanceRatioArr[this.currentIndex];
+      if (currentRouteRatio === 0) {
+        return 1.001;
+      }
+      var distance = (this._distance - (this.currentIndex > 0 ? this.distanceRatioArr[this.currentIndex - 1] : 0)) / currentRouteRatio;
+      return distance;
+    }
+  }, {
+    key: "moveFeature",
+    value: function moveFeature(event) {
+      var vectorContext = (0, _render.getVectorContext)(event);
+      var speed = Number(this.speed);
+      var time = event.frameState.time;
+      var elapsedTime = time - this._lastTime;
+      this._distance = (this._distance + speed * elapsedTime / 1e6) % 2;
+      var distance = this.calculateDistance();
+      this._lastTime = time;
+      if (distance > 1) {
+        this.currentIndex = this.currentIndex + 1;
+        distance = 0;
+      }
+      if (this.currentIndex > this.routeFeatures.length - 1) {
+        this.playEnd();
+        if (this.repeatPlay) {
+          this.currentIndex = this.routeFeatures.length - 1;
+        } else {
+          var _currentCoordinate = this.endMarker.getGeometry().getCoordinates();
+          this.position.setCoordinates(_currentCoordinate);
+          vectorContext.setStyle(this.geoMarkerStyle);
+          vectorContext.drawGeometry(this.position);
+          this.onPlayEnd && this.onPlayEnd();
+          return;
+        }
+      }
+      // 计算当前进度的对应index
+      var dataIndex = (this.dataDistanceRatioArr[this.currentIndex] || []).findIndex(function (v, index, arr) {
+        if (index === arr.length - 1) {
+          return true;
+        }
+        return v <= distance <= arr[index + 1];
+      });
+      var route = this.routeFeatures[this.currentIndex].getGeometry();
+      var currentCoordinate = route.getCoordinateAt(distance > 1 ? 2 - distance : distance);
+      this.position.setCoordinates(currentCoordinate);
+      this.setRotation(this.lastCoordinate, currentCoordinate);
+      this.lastCoordinate = currentCoordinate;
+      if (this.autoView) {
+        this.map.getView().fit(this.position, {
+          padding: [100, 400, 100, 400],
+          maxZoom: this.map.getView().getZoom(),
+          duration: 0
+        });
+      }
+      vectorContext.setStyle(this.geoMarkerStyle);
+      vectorContext.drawGeometry(this.position);
+      var overlay = this.map.getOverlayById('geoMarker');
+      if (overlay) {
+        overlay.setPosition(this.position.getFlatCoordinates());
+      }
+      if (this.showTrace) {
+        this.setPaintLinePath({
+          coordinate: currentCoordinate,
+          index: this.currentIndex
+        });
+      }
+      this.onPlaying && this.onPlaying(this._distance > 1 ? 1 : this._distance, this.currentIndex, dataIndex);
+      this.map.render();
+    }
+  }, {
+    key: "setPaintLinePath",
+    value: function setPaintLinePath(_ref2) {
+      var coordinate = _ref2.coordinate,
+        init = _ref2.init,
+        index = _ref2.index;
+      var paintLineFeature = this.paintLineFeatures[index];
+      if (init) {
+        paintLineFeature.setGeometry(null);
+      }
+      var geometry = paintLineFeature.getGeometry();
+      if (geometry) {
+        geometry.setCoordinates([[].concat(_toConsumableArray(geometry.getCoordinates()[0]), [coordinate])]);
+      } else {
+        var lineData = [[coordinate]];
+        var route = new _geom.MultiLineString(lineData);
+        paintLineFeature.setGeometry(route);
+      }
+      if (!this.vectorLayer.getSource().hasFeature(paintLineFeature)) {
+        this.vectorLayer.getSource().addFeature(paintLineFeature);
+      }
+    }
+  }, {
+    key: "addTrace",
+    value: function addTrace() {
+      var _this4 = this;
+      if (this._distance === 0) {
+        var lineDashFeatures = [];
+        var paintLineFeatures = [];
+        this.routeFeatures.forEach(function (feature) {
+          var lineDashFeature = feature.clone();
+          var paintLineFeature = feature.clone();
+          paintLineFeature.setGeometry(null);
+          lineDashFeature.setStyle(_this4.getDefaultRouteStyle(feature, {
+            lineDash: [15]
+          }));
+          lineDashFeatures.push(lineDashFeature);
+          paintLineFeatures.push(paintLineFeature);
+        });
+        this.lineDashFeatures = lineDashFeatures;
+        this.paintLineFeatures = paintLineFeatures;
+      }
+    }
+  }, {
+    key: "startAnimation",
+    value: function startAnimation() {
+      var _this5 = this;
+      if (!this.repeatPlay && this.isPlayEnd) {
+        // 当不重复播放，且当前在终点时，从起点开始播放
+        this.cancel();
+        this.geoMarkerStyle.getImage().setRotation(0);
+      }
+      this.isPlayEnd = false;
+      this._animating = true;
+      this._lastTime = Date.now();
+      this._on_event = this.vectorLayer.on('postrender', this.moveFeature.bind(this));
+      this.geoMarker.setGeometry(null);
+      if (this.showTrace) {
+        this.lineDashFeatures.forEach(function (feature) {
+          if (!_this5.vectorLayer.getSource().hasFeature(feature)) {
+            _this5.vectorLayer.getSource().addFeature(feature);
+          }
+        });
+        this.routeFeatures.forEach(function (feature) {
+          feature.setStyle(new _style.Style({}));
+        });
+      }
+    }
+  }, {
+    key: "stopAnimation",
+    value: function stopAnimation() {
+      this._animating = false;
+      this.geoMarker.setGeometry(this.position);
+      if (this._on_event) {
+        this.vectorLayer.un('postrender', this._on_event.listener);
+      }
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      this.geoMarkerStyle.getImage().setRotation(0);
+      this._distance = 0;
+      this.currentIndex = 0;
+      var currentCoordinate = this.route.getCoordinateAt(0);
+      this.position.setCoordinates(currentCoordinate);
+      this.playEnd();
+      this.onPlaying && this.onPlaying(this._distance, this.currentIndex, 0);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this._animating) {
+        this.stopAnimation();
+      }
+      this.map.removeLayer(this.vectorLayer);
+      this.map.clearHighlightFeature();
+      this.routeFeatures = null;
+      this.position = null;
+      this.vectorLayer = null;
+      this.geoMarker = null;
+    }
+  }]);
+}();
+//# sourceMappingURL=PathPlayBack.js.map