@supermapgis/vue-iclient-leaflet 11.2.0

package/lib/time-slider/index.js

@@ -0,0 +1,1169 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "lib/leaflet/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 454);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/interopRequireDefault");
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent(
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */,
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) {
+    // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ }),
+
+/***/ 11:
+/***/ (function(module, exports) {
+
+module.exports = require("vue-property-decorator");
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@supermapgis/vue-iclient-leaflet/lib/_mixin/Theme.js");
+
+/***/ }),
+
+/***/ 201:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(202);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_node_modules_ts_loader_index_js_ref_0_1_node_modules_vue_loader_lib_index_js_vue_loader_options_TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0___default.a); 
+
+/***/ }),
+
+/***/ 202:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(0);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _createClass2 = _interopRequireDefault(__webpack_require__(14));
+
+var _inheritsLoose2 = _interopRequireDefault(__webpack_require__(6));
+
+var _Theme = _interopRequireDefault(__webpack_require__(2));
+
+var _interactjs = _interopRequireDefault(__webpack_require__(456));
+
+var _moment = _interopRequireDefault(__webpack_require__(244));
+
+var _lodash = _interopRequireDefault(__webpack_require__(21));
+
+var _vuePropertyDecorator = __webpack_require__(11);
+
+var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var SmTimeSlider = /*#__PURE__*/function (_Mixins) {
+  (0, _inheritsLoose2.default)(SmTimeSlider, _Mixins);
+
+  function SmTimeSlider() {
+    var _this;
+
+    _this = _Mixins.apply(this, arguments) || this;
+    _this.mouseTime = 0;
+    _this.mouseLeft = 0;
+    _this.currentTime = 0;
+    _this.playState = false;
+    _this.sliderBarWidth = '0%';
+    _this.status = false;
+    _this.draggable = false;
+    _this.uniqueId = (0, _lodash.default)(_this.$options.name.toLowerCase() + "-");
+    return _this;
+  }
+
+  var _proto = SmTimeSlider.prototype;
+
+  _proto.draggableWatcher = function draggableWatcher() {
+    this.bindMouseMove('mousemove', this.handleMouseMove);
+    this.bindMouseMove('click', this.handleMouseClick);
+  };
+
+  _proto.sliderBarWidthWatcher = function sliderBarWidthWatcher() {
+    var left = this.sliderBarWidth === '100.00%' ? "calc(100% - " + this.sliderBarSize + "px)" : this.sliderBarWidth;
+    this.modifySliderBarStyle("left:" + left + " !important");
+  };
+
+  _proto.lineStyleWatcher = function lineStyleWatcher() {
+    this.modifySliderBarStyle("width:" + this.sliderBarSize + "px !important;height:" + this.sliderBarSize + "px !important");
+  };
+
+  _proto.checkpointStyleWatcher = function checkpointStyleWatcher() {
+    this.modifySliderBarStyle(this.checkPointStyle);
+  };
+
+  _proto.currentTimeWatcher = function currentTimeWatcher() {
+    if (this.isDataDuration && this.currentTime >= this.dataDuration * 1000 || !this.isDataDuration && this.currentTime >= this.duration) {
+      if (!this.loop) {
+        this.updateDom();
+        this.emitEnd();
+      } else if (this.loop && this.playState) {
+        this.currentTime = 0;
+      }
+    }
+
+    this.timePlayerChange();
+  };
+
+  _proto.autoPlayWatcher = function autoPlayWatcher() {
+    this.autoPlay ? this.emitPlaying() : this.emitPause();
+  };
+
+  _proto.playStateWatcher = function playStateWatcher() {
+    this.emitTimePlayerPlay();
+  };
+
+  _proto.mounted = function mounted() {
+    var _this2 = this;
+
+    this.$nextTick(function () {
+      return _this2.bindDrag(_this2.uniqueId);
+    });
+    this.$on('playing', this.enableInterval_);
+    this.$on('pause', this.disableInterval_);
+    this.$on('end', this.disableInterval_);
+    this.bindMouseMove('mousemove', this.handleMouseMove);
+    this.bindMouseMove('click', this.handleMouseClick);
+    this.$on('theme-style-changed', function () {
+      var left = _this2.sliderBarWidth === '100.00%' ? "calc(100% - " + _this2.sliderBarSize + ")" : _this2.sliderBarWidth;
+
+      _this2.modifySliderBarStyle(_this2.checkPointStyle + "left:" + left + " !important");
+    });
+    this.init();
+  };
+
+  _proto.beforeDestroy = function beforeDestroy() {
+    this.$off('playing', this.enableInterval_);
+    this.$off('pause', this.disableInterval_);
+    this.$off('end', this.disableInterval_);
+  };
+
+  _proto.init = function init() {
+    this.autoPlay ? this.emitPlaying() : this.emitPause();
+  };
+
+  _proto.bindMouseMove = function bindMouseMove(eventName, fn, className) {
+    if (className === void 0) {
+      className = this.uniqueId;
+    }
+
+    var el = document.getElementsByClassName(className)[0];
+
+    if (this.draggable) {
+      el.removeEventListener(eventName, fn);
+    } else {
+      el.addEventListener(eventName, fn);
+    }
+  };
+
+  _proto.bindDrag = function bindDrag(className) {
+    var _this3 = this;
+
+    (0, _interactjs.default)("." + className).draggable({
+      startAxis: 'x',
+      lockAxis: 'x',
+      enabled: true,
+      inertia: true,
+      modifiers: [_interactjs.default.modifiers.restrict({
+        restriction: 'self'
+      })],
+      cursorChecker: function cursorChecker() {
+        return 'pointer';
+      },
+      listeners: {
+        start: function start() {
+          _this3.draggable = true;
+        },
+        move: function move(event) {
+          if (_this3.draggable) {
+            _this3.handleDragMove(event);
+          }
+        },
+        end: function end() {
+          _this3.draggable = false;
+        }
+      }
+    });
+  };
+
+  _proto.changePlayState = function changePlayState() {
+    this.playState = !this.playState;
+    this.playState ? this.emitPlaying() : this.emitPause();
+  };
+
+  _proto.updateDom = function updateDom() {
+    var _this4 = this;
+
+    if (!this.$el) {
+      return '';
+    }
+
+    var progress = this.getProgress();
+
+    if (!this.draggable) {
+      this.requestNamedAnimationFrame('Slider#update', function () {
+        _this4.sliderBarWidth = (progress * 100).toFixed(2) + '%';
+      });
+    }
+
+    this.sliderBarWidth = (progress * 100).toFixed(2) + '%';
+    return progress;
+  };
+
+  _proto.handleMouseClick = function handleMouseClick(event, offsetX) {
+    var newTime = this.getCurrentTime_(event, offsetX);
+    this.setcurrentTime(newTime);
+    this.handleMouseMove(event, offsetX);
+
+    if (this.playState) {
+      setTimeout(this.updateDom, 1000);
+    } else {
+      this.updateDom();
+    }
+  };
+
+  _proto.handleMouseMove = function handleMouseMove(event, offsetX) {
+    var newTime = this.getCurrentTime_(event, offsetX);
+    this.mouseTime = newTime;
+    this.mouseLeft = event.offsetX || offsetX * this.getTotalDistance();
+  };
+
+  _proto.handleDragMove = function handleDragMove(event) {
+    var totalDistance = this.getTotalDistance();
+    var distance = event.dx / totalDistance + this.getProgress();
+    this.handleMouseClick(event, distance);
+    this.handleMouseMove(event, distance);
+  };
+
+  _proto.setcurrentTime = function setcurrentTime(time) {
+    if (typeof time !== 'undefined') {
+      if (time < 0) {
+        time = 0;
+      }
+
+      this.currentTime = this.isDataDuration ? time * 1000 : time;
+    }
+  };
+
+  _proto.getTotalDistance = function getTotalDistance(className) {
+    if (className === void 0) {
+      className = this.uniqueId;
+    }
+
+    return document.getElementsByClassName(className)[0].offsetWidth;
+  };
+
+  _proto.getProgress = function getProgress() {
+    return Number(this.clamp(this.getPercent(), 0, 1).toFixed(4));
+  };
+
+  _proto.getPercent = function getPercent() {
+    if (this.isDataDuration) {
+      var currentTime = this.currentTime / 1000;
+      var percent = currentTime / this.dataDuration;
+      return percent;
+    }
+
+    return this.currentTime / this.duration;
+  };
+
+  _proto.getCurrentTime_ = function getCurrentTime_(event, percent) {
+    var distance = event.offsetX;
+    var totalDistance = this.getTotalDistance();
+    percent = percent || distance / totalDistance;
+    percent = Math.min(1, Math.max(0, percent));
+    var newTime = percent * (this.isDataDuration ? this.dataDuration : this.duration);
+
+    if (newTime === Infinity) {
+      return '';
+    }
+
+    return newTime;
+  };
+
+  _proto.clamp = function clamp(number, min, max) {
+    number = Number(number);
+    return Math.min(max, Math.max(min, isNaN(number) ? min : number));
+  };
+
+  _proto.enableInterval_ = function enableInterval_() {
+    var _this5 = this;
+
+    this.playState = true;
+
+    if (this.updateInterval) {
+      return;
+    }
+
+    this.updateInterval = setInterval(function () {
+      _this5.currentTime += _this5.playbackRate;
+
+      if (_this5.isDataDuration) {
+        _this5.currentTime = _this5.currentTime / 1000 >= _this5.dataDuration ? _this5.dataDuration * 1000 : _this5.currentTime;
+      } else {
+        _this5.currentTime = _this5.currentTime >= _this5.duration ? _this5.duration : _this5.currentTime;
+      }
+
+      _this5.updateDom();
+    }, this.UPDATE_REFRESH_INTERVAL);
+  };
+
+  _proto.disableInterval_ = function disableInterval_() {
+    if (!this.updateInterval) {
+      return;
+    }
+
+    clearInterval(this.updateInterval);
+    this.updateInterval = null;
+    this.playState = false;
+  };
+
+  _proto.requestAnimationFrame = function requestAnimationFrame(fn) {
+    var _this6 = this;
+
+    if (!this.supportsRaf_) {
+      return setTimeout(fn, 1000 / 60);
+    }
+
+    var id;
+    fn = fn.bind(this);
+    id = window.requestAnimationFrame(function () {
+      if (_this6.rafIds_.has(id)) {
+        _this6.rafIds_.delete(id);
+      }
+
+      fn();
+    });
+    this.rafIds_.add(id);
+    return id;
+  };
+
+  _proto.requestNamedAnimationFrame = function requestNamedAnimationFrame(name, fn) {
+    var _this7 = this;
+
+    if (!this.namedRafs_) {
+      this.namedRafs_ = {};
+    }
+
+    fn = fn.bind(this);
+    var id = this.requestAnimationFrame(function () {
+      fn();
+
+      if (Object.prototype.hasOwnProperty.call(_this7.namedRafs_, name)) {
+        delete _this7.namedRafs_.name;
+      }
+    });
+    this.namedRafs_[name] = id;
+    return name;
+  };
+
+  _proto.cancelNamedAnimationFrame = function cancelNamedAnimationFrame(name) {
+    if (!this.namedRafs_.has(name)) {
+      return;
+    }
+
+    this.cancelAnimationFrame(this.namedRafs_.get(name));
+    this.namedRafs_.delete(name);
+  };
+
+  _proto.cancelAnimationFrame = function cancelAnimationFrame(id) {
+    if (!this.rafIds_) {
+      this.rafIds_ = {};
+    }
+
+    if (Object.prototype.hasOwnProperty.call(this.rafIds_, id)) {
+      delete this.rafIds_[id];
+      window.cancelAnimationFrame(id);
+    }
+
+    return id;
+  };
+
+  _proto.formatTime = function formatTime(timestamp) {
+    if (this.formatter) {
+      return this.formatter(timestamp);
+    }
+
+    var defaultFormat = this.isDataDuration ? 'YYYY-MM--DD HH:mm:ss' : 'HH:mm:ss';
+    var date = this.isDataDuration ? this.timestamp2Date(timestamp) : this.duration2Date(timestamp);
+
+    if (!(0, _moment.default)(date, defaultFormat).isValid()) {
+      return timestamp;
+    }
+
+    return date;
+  };
+
+  _proto.timestamp2Date = function timestamp2Date(timestamp) {
+    return timestamp ? (0, _moment.default)(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss') : '';
+  };
+
+  _proto.duration2Date = function duration2Date(duration) {
+    if (duration === void 0) {
+      duration = this.duration;
+    }
+
+    var $moment = _moment.default.duration(duration, 'milliseconds');
+
+    var hours = this.getZeroPlaceholder($moment.hours());
+    var minutes = this.getZeroPlaceholder($moment.minutes());
+    var seconds = this.getZeroPlaceholder($moment.seconds());
+    return [hours, minutes, seconds].join(':');
+  };
+
+  _proto.getZeroPlaceholder = function getZeroPlaceholder(val) {
+    if (val === 0) {
+      return '00';
+    } else if (parseInt(val / 10) <= 0) {
+      return "0" + val;
+    } else {
+      return val;
+    }
+  };
+
+  _proto.modifySliderBarStyle = function modifySliderBarStyle(style, ruleName) {
+    if (ruleName === void 0) {
+      ruleName = "." + this.uniqueId + "::before";
+    }
+
+    document.styleSheets[0].addRule(ruleName, style);
+  };
+
+  _proto.timePlayerChange = function timePlayerChange() {
+    var _this8 = this;
+
+    var currentTimeStamp = this.currentTime + this.startValue * 1000;
+
+    if (this.isDataDuration) {
+      var lastIndex = this.data.findIndex(function (val, index) {
+        if (index < _this8.data.length - 1) {
+          var nextData = _this8.data[index + 1];
+          var timestamp = val * 1000;
+          var nextTimestamp = nextData * 1000;
+
+          if (timestamp <= currentTimeStamp && nextTimestamp > currentTimeStamp) {
+            return true;
+          }
+        }
+
+        return false;
+      });
+      var nextIndex = lastIndex === -1 ? -1 : lastIndex + 1 <= this.data.length ? lastIndex + 1 : lastIndex;
+      return {
+        currentTimeStamp: currentTimeStamp,
+        lastIndex: lastIndex,
+        nextIndex: nextIndex
+      };
+    } else {
+      return {
+        currentDuration: currentTimeStamp
+      };
+    }
+  };
+
+  _proto.emitPlaying = function emitPlaying() {};
+
+  _proto.emitPause = function emitPause() {};
+
+  _proto.emitEnd = function emitEnd() {};
+
+  _proto.emitTimePlayerPlay = function emitTimePlayerPlay() {
+    return this.playState;
+  };
+
+  (0, _createClass2.default)(SmTimeSlider, [{
+    key: "color",
+    get: function get() {
+      return this.getColor(0);
+    }
+  }, {
+    key: "showLabel",
+    get: function get() {
+      if (!this.label || !Object.prototype.hasOwnProperty.call(this.label, 'show')) {
+        return true;
+      }
+
+      return this.label.show;
+    }
+  }, {
+    key: "formatter",
+    get: function get() {
+      return (this.label || {}).formatter;
+    }
+  }, {
+    key: "newThemeStyle",
+    get: function get() {
+      return Object.assign(this.themeStyle || {});
+    }
+  }, {
+    key: "newLabelStyle",
+    get: function get() {
+      var labelStyle = Object.assign({
+        color: this.getTextColor
+      }, this.label);
+      delete labelStyle.formatter;
+      return Object.assign(labelStyle || {});
+    }
+  }, {
+    key: "isDataDuration",
+    get: function get() {
+      return !this.duration;
+    }
+  }, {
+    key: "startValue",
+    get: function get() {
+      return this.isDataDuration ? this.data[0] : 0;
+    }
+  }, {
+    key: "endValue",
+    get: function get() {
+      if (!this.isDataDuration) {
+        return this.duration;
+      }
+
+      var length = this.data.length;
+
+      if (length < 1) {
+        return '';
+      }
+
+      var end = this.data[length - 1];
+      return end;
+    }
+  }, {
+    key: "startFormat",
+    get: function get() {
+      if (this.startValue === void 0) {
+        return '';
+      }
+
+      return this.formatTime(this.startValue);
+    }
+  }, {
+    key: "endFormat",
+    get: function get() {
+      return this.formatTime(this.endValue);
+    }
+  }, {
+    key: "UPDATE_REFRESH_INTERVAL",
+    get: function get() {
+      return this.playInterval / 30;
+    }
+  }, {
+    key: "playbackRate",
+    get: function get() {
+      if (!this.isDataDuration) {
+        return this.UPDATE_REFRESH_INTERVAL;
+      }
+
+      if (!this.data || this.data.length < 2) {
+        return 0;
+      }
+
+      var length = this.data.length;
+      var totalInterval = this.playInterval * (length - 1);
+      var rate = this.dataDuration / (totalInterval / this.UPDATE_REFRESH_INTERVAL);
+      return rate * 1000;
+    }
+  }, {
+    key: "current",
+    get: function get() {
+      var current = (this.isDataDuration ? this.currentTime / 1000 : this.currentTime) + this.startValue;
+      return this.formatTime(current);
+    }
+  }, {
+    key: "mouseCurrent",
+    get: function get() {
+      if (this.isDataDuration && (!this.data || this.data.length === 0)) {
+        return '';
+      }
+
+      var current = this.mouseTime + this.startValue;
+      return this.formatTime(current);
+    }
+  }, {
+    key: "lineStyleHeight",
+    get: function get() {
+      if (this.lineStyle && Object.prototype.hasOwnProperty.call(this.lineStyle, 'height')) {
+        return {
+          height: this.lineStyle.height
+        };
+      }
+
+      return {
+        height: '6px'
+      };
+    }
+  }, {
+    key: "sliderBarSize",
+    get: function get() {
+      var height = parseFloat(this.lineStyleHeight.height);
+      return height <= 6 ? height * 2 : height * 1.5;
+    }
+  }, {
+    key: "playProgressStyle",
+    get: function get() {
+      var checkpointStyle = Object.assign({
+        'border-color': this.color,
+        background: this.color
+      }, this.checkpointStyle || {});
+
+      if (checkpointStyle && checkpointStyle.background) {
+        return {
+          background: checkpointStyle.background
+        };
+      }
+
+      return {};
+    }
+  }, {
+    key: "checkPointStyle",
+    get: function get() {
+      var style = '';
+
+      for (var key in this.checkpointStyle) {
+        style += key + ": " + this.checkpointStyle[key] + " !important;";
+      }
+
+      return style;
+    }
+  }, {
+    key: "dataDuration",
+    get: function get() {
+      if (this.isDataDuration) {
+        var data = this.data || [];
+        var start = parseInt(data[0]) || 0;
+        var end = data.length > 1 ? parseInt(data[data.length - 1]) : start;
+        return end - start || 0;
+      }
+
+      return 0;
+    }
+  }]);
+  return SmTimeSlider;
+}((0, _vuePropertyDecorator.Mixins)(_Theme.default));
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: false
+})], SmTimeSlider.prototype, "autoPlay", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: true
+})], SmTimeSlider.prototype, "loop", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: 1000
+})], SmTimeSlider.prototype, "playInterval", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)()], SmTimeSlider.prototype, "duration", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: function _default() {
+    return [];
+  }
+})], SmTimeSlider.prototype, "data", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: function _default() {
+    return {};
+  }
+})], SmTimeSlider.prototype, "label", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: function _default() {
+    return {};
+  }
+})], SmTimeSlider.prototype, "lineStyle", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: function _default() {
+    return {};
+  }
+})], SmTimeSlider.prototype, "checkpointStyle", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Prop)({
+  default: function _default() {
+    return {};
+  }
+})], SmTimeSlider.prototype, "themeStyle", void 0);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('draggable')], SmTimeSlider.prototype, "draggableWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('sliderBarWidth')], SmTimeSlider.prototype, "sliderBarWidthWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('lineStyleHeight')], SmTimeSlider.prototype, "lineStyleWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('checkpointStyle', {
+  immediate: true
+})], SmTimeSlider.prototype, "checkpointStyleWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('currentTime', {
+  immediate: true
+})], SmTimeSlider.prototype, "currentTimeWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('autoPlay', {
+  immediate: true
+})], SmTimeSlider.prototype, "autoPlayWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Watch)('playState', {
+  immediate: true
+})], SmTimeSlider.prototype, "playStateWatcher", null);
+
+__decorate([(0, _vuePropertyDecorator.Emit)('timeplayerchanged')], SmTimeSlider.prototype, "timePlayerChange", null);
+
+__decorate([(0, _vuePropertyDecorator.Emit)('playing')], SmTimeSlider.prototype, "emitPlaying", null);
+
+__decorate([(0, _vuePropertyDecorator.Emit)('pause')], SmTimeSlider.prototype, "emitPause", null);
+
+__decorate([(0, _vuePropertyDecorator.Emit)('end')], SmTimeSlider.prototype, "emitEnd", null);
+
+__decorate([(0, _vuePropertyDecorator.Emit)('timeplayerplaychanged')], SmTimeSlider.prototype, "emitTimePlayerPlay", null);
+
+SmTimeSlider = __decorate([(0, _vuePropertyDecorator.Component)({
+  name: 'SmTimeSlider'
+})], SmTimeSlider);
+
+var _default2 = exports.default = SmTimeSlider;
+
+/***/ }),
+
+/***/ 21:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash.uniqueid");
+
+/***/ }),
+
+/***/ 244:
+/***/ (function(module, exports) {
+
+module.exports = require("moment");
+
+/***/ }),
+
+/***/ 273:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "a", function() { return /* reexport */ render; });
+__webpack_require__.d(__webpack_exports__, "b", function() { return /* reexport */ staticRenderFns; });
+
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/common/time-slider/TimeSlider.vue?vue&type=template&id=0dde0ca9&
+var render = function () {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    {
+      staticClass: "sm-component-time-slider",
+      style: [_vm.getBackgroundStyle, _vm.newThemeStyle],
+      attrs: { dir: "ltr" },
+    },
+    [
+      _c(
+        "button",
+        {
+          staticClass: "sm-play-control sm-button sm-paused",
+          style: Object.assign({}, { color: _vm.color }, _vm.newThemeStyle),
+          on: { click: _vm.changePlayState },
+        },
+        [
+          _c("i", {
+            class: [
+              "sm-icon-play",
+              _vm.playState
+                ? "sm-components-icon-zanting"
+                : "sm-components-icon-bofang3",
+            ],
+          }),
+        ]
+      ),
+      _c(
+        "div",
+        {
+          staticClass: "sm-progress-control-wrapper",
+          style: _vm.lineStyleHeight,
+        },
+        [
+          _c(
+            "div",
+            {
+              class: ["sm-progress-control", _vm.uniqueId],
+              style: Object.assign({}, _vm.lineStyle, _vm.lineStyleHeight),
+              on: { click: _vm.handleMouseClick },
+            },
+            [
+              _c("div", { staticClass: "sm-progress-holder" }, [
+                _c("div", {
+                  staticClass: "sm-load-progress",
+                  style: { width: _vm.sliderBarWidth },
+                }),
+                _c(
+                  "div",
+                  {
+                    staticClass: "sm-mouse-display",
+                    style: { left: _vm.mouseLeft + "px" },
+                  },
+                  [
+                    _c(
+                      "div",
+                      {
+                        directives: [
+                          {
+                            name: "show",
+                            rawName: "v-show",
+                            value: _vm.mouseCurrent,
+                            expression: "mouseCurrent",
+                          },
+                        ],
+                        staticClass: "sm-time-tooltip",
+                      },
+                      [
+                        _c("span", { staticClass: "sm-time-tooltip-content" }, [
+                          _vm._v(_vm._s(_vm.mouseCurrent)),
+                        ]),
+                      ]
+                    ),
+                  ]
+                ),
+                _c("div", {
+                  staticClass: "sm-play-progress sm-slider-bar",
+                  style: Object.assign({}, _vm.playProgressStyle, {
+                    width: _vm.sliderBarWidth,
+                  }),
+                }),
+                _c(
+                  "div",
+                  {
+                    directives: [
+                      {
+                        name: "show",
+                        rawName: "v-show",
+                        value: _vm.showLabel,
+                        expression: "showLabel",
+                      },
+                    ],
+                    staticClass: "sm-time-node",
+                    style: _vm.newLabelStyle,
+                  },
+                  [
+                    _c("div", { staticClass: "sm-start-node" }, [
+                      _vm._v(_vm._s(_vm.startFormat)),
+                    ]),
+                    _c("div", { staticClass: "sm-end-node" }, [
+                      _vm._v(_vm._s(_vm.endFormat)),
+                    ]),
+                  ]
+                ),
+              ]),
+            ]
+          ),
+        ]
+      ),
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+// CONCATENATED MODULE: ./src/common/time-slider/TimeSlider.vue?vue&type=template&id=0dde0ca9&
+
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("@supermapgis/vue-iclient-leaflet/lib/init.js");
+
+/***/ }),
+
+/***/ 454:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(0);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _TimeSlider = _interopRequireDefault(__webpack_require__(455));
+
+var _init = _interopRequireDefault(__webpack_require__(3));
+
+_TimeSlider.default.install = function (Vue, opts) {
+  (0, _init.default)(Vue, opts);
+  Vue.component(_TimeSlider.default.options ? _TimeSlider.default.options.name : _TimeSlider.default.name, _TimeSlider.default);
+};
+
+var _default = exports.default = _TimeSlider.default;
+
+/***/ }),
+
+/***/ 455:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _TimeSlider_vue_vue_type_template_id_0dde0ca9___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(273);
+/* harmony import */ var _TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(201);
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"])(
+  _TimeSlider_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _TimeSlider_vue_vue_type_template_id_0dde0ca9___WEBPACK_IMPORTED_MODULE_0__[/* render */ "a"],
+  _TimeSlider_vue_vue_type_template_id_0dde0ca9___WEBPACK_IMPORTED_MODULE_0__[/* staticRenderFns */ "b"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ 456:
+/***/ (function(module, exports) {
+
+module.exports = require("interactjs");
+
+/***/ }),
+
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/inheritsLoose");
+
+/***/ })
+
+/******/ });