@vtx/ol-map 1.0.144 → 1.0.146

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

@@ -0,0 +1,677 @@
+"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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 _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(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 _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 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 = /*#__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;
+  }
+  _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;
+    }
+  }]);
+  return PathPlayBack;
+}();
+exports["default"] = PathPlayBack;
+//# sourceMappingURL=PathPlayBack.js.map