@vtx/ol-map 1.0.66 → 1.0.67

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

@@ -13,17 +13,29 @@ 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var PathPlayBack = /*#__PURE__*/function () {
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 PathPlayBack = exports["default"] = /*#__PURE__*/function () {
   function PathPlayBack(options) {
     _classCallCheck(this, PathPlayBack);
     var data = options.data,
@@ -32,23 +44,66 @@ var PathPlayBack = /*#__PURE__*/function () {
       play = options.play,
       speed = options.speed,
       map = options.map,
-      style = options.style;
+      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;
     this._init = false;
     this.speed = speed || 10;
-    this.style = style || {
-      route: {},
-      start: {},
-      end: {},
-      geoMarker: {}
-    };
+    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.lastCoordinate = null;
+    this.distanceRatioArr = [];
+    this.isPlayEnd = false;
+    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;
   }
   _createClass(PathPlayBack, [{
@@ -71,99 +126,422 @@ var PathPlayBack = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "loadData",
-    value: function loadData(data) {
+    key: "showStartPoint",
+    set: function set(val) {
       if (this.vectorLayer) {
-        this.destroy();
+        var source = this.vectorLayer.getSource();
+        if (val) {
+          !source.hasFeature(this.startMarker) && source.addFeature(this.startMarker);
+        } else {
+          source.removeFeature(this.startMarker);
+        }
       }
-      var styles = {
-        'route': new _style.Style({
-          stroke: new _style.Stroke(_objectSpread({
-            width: 6,
-            color: [237, 212, 0, 0.8]
-          }, this.style.route))
-        }),
-        'start': new _style.Style({
-          image: new _style.Icon(_objectSpread({
-            anchor: [0.5, 1],
-            src: _qd["default"]
-          }, this.style.start))
-        }),
-        'end': new _style.Style({
-          image: new _style.Icon(_objectSpread({
-            anchor: [0.5, 1],
-            src: _zd["default"]
-          }, this.style.end))
-        }),
-        'geoMarker': new _style.Style({
-          image: new _style.Icon(_objectSpread({
-            anchor: [0.5, 1],
-            src: _people["default"]
-          }, this.style.geoMarker))
-        })
+    }
+  }, {
+    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 routeFeature = data.map(function (item) {
+        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);
+        return new _Feature["default"](_objectSpread({
+          type: 'route',
+          geometry: route
+        }, item));
+      });
+      this.distanceArr = distanceArr;
+      var totalDistance = _lodash["default"].sum(distanceArr);
+      distanceArr = distanceArr.map(function (distance) {
+        return distance / totalDistance;
+      });
+      this.distanceRatioArr = distanceArr.map(function (distance, index) {
+        if (index === 0) {
+          return distance;
+        } else if (index === distanceArr.length - 1) {
+          return 1;
+        }
+        return _lodash["default"].sum(distanceArr.slice(0, index + 1));
+      });
+      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 routeFeature = new _Feature["default"]({
+      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: new _geom.Point(route.getFirstCoordinate())
+        geometry: firstGeometry
       });
+      startMarker.setStyle(this.startStyle);
       var endMarker = new _Feature["default"]({
         type: 'end',
-        geometry: new _geom.Point(route.getLastCoordinate())
+        geometry: lastGeometry
       });
+      endMarker.setStyle(this.endStyle);
       var position = startMarker.getGeometry().clone();
       var geoMarker = new _Feature["default"]({
         type: 'geoMarker',
         geometry: position
       });
+      geoMarker.setStyle(this.geoMarkerStyle);
+      this.setRouteStyle(routeFeature);
       var vectorLayer = new _layer.Vector({
         source: new _Vector["default"]({
-          features: [routeFeature, geoMarker, startMarker, endMarker]
-        }),
-        style: function style(feature) {
-          return styles[feature.get('type')];
-        }
+          features: [].concat(_toConsumableArray(routeFeature), [geoMarker])
+        })
       });
       this.map.addLayer(vectorLayer);
-      this.route = route;
+      this.routeFeatures = routeFeature;
       this.position = position;
       this.vectorLayer = vectorLayer;
       this.geoMarker = geoMarker;
-      this.styles = styles;
+      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: "moveTo",
+    value: function moveTo(process) {
+      var _this2 = this;
+      this.currentIndex = this.distanceRatioArr.findIndex(function (distance) {
+        return distance >= process;
+      });
+      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);
+      }
+      if (distance >= 1 && this.currentIndex >= this.routeFeatures.length - 1) {
+        this.isPlayEnd = true;
+      }
+      this.position.setCoordinates(currentCoordinate);
+      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
+            });
+          });
+        });
+      }
+      this.onPlaying && this.onPlaying(this._distance, this.currentIndex);
+    }
+  }, {
+    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) {
+        var x = coordinate[0] - lastCoordinate[0];
+        var y = coordinate[1] - lastCoordinate[1];
+        var rotation = Math.atan2(y, x);
+        this.geoMarkerStyle.getImage().setRotation(Math.atan2(1, 0) - rotation);
+      }
+    }
+
+    // 计算当前路段跑的距离，计算公式：（当前跑的总距离 - 已跑路段的总距离） / 当前路段的百分比
+  }, {
+    key: "calculateDistance",
+    value: function calculateDistance() {
+      var currentRouteRatio = this.currentIndex > 0 ? this.distanceRatioArr[this.currentIndex] - this.distanceRatioArr[this.currentIndex - 1] : this.distanceRatioArr[this.currentIndex];
+      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;
-      var currentCoordinate = this.route.getCoordinateAt(this._distance > 1 ? 2 - this._distance : this._distance);
+      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;
+        }
+      }
+      var route = this.routeFeatures[this.currentIndex].getGeometry();
+      var currentCoordinate = route.getCoordinateAt(distance > 1 ? 2 - distance : distance);
       this.position.setCoordinates(currentCoordinate);
-      var vectorContext = (0, _render.getVectorContext)(event);
-      vectorContext.setStyle(this.styles.geoMarker);
+      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);
+      if (this.showTrace) {
+        this.setPaintLinePath({
+          coordinate: currentCoordinate,
+          index: this.currentIndex
+        });
+      }
+      this.onPlaying && this.onPlaying(this._distance, this.currentIndex);
       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);
-      this.vectorLayer.un('postrender', this._on_event.listener);
+      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);
     }
   }, {
     key: "destroy",
@@ -172,7 +550,7 @@ var PathPlayBack = /*#__PURE__*/function () {
         this.stopAnimation();
       }
       this.map.removeLayer(this.vectorLayer);
-      this.route = null;
+      this.routeFeatures = null;
       this.position = null;
       this.vectorLayer = null;
       this.geoMarker = null;
@@ -180,5 +558,4 @@ var PathPlayBack = /*#__PURE__*/function () {
   }]);
   return PathPlayBack;
 }();
-exports["default"] = PathPlayBack;
 //# sourceMappingURL=PathPlayBack.js.map