@vuemap/vue-amap/lib/packages/layer/data/Video/VideoLayer.js

高德地图vue3版本封装

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  return value;
};
class VideoLayer {
  constructor(options, video) {
    __publicField(this, "canvas");
    __publicField(this, "context");
    __publicField(this, "video");
    __publicField(this, "layer");
    __publicField(this, "canPlay", false);
    __publicField(this, "frame", -1);
    const canvas = document.createElement("canvas");
    this.video = video;
    video.src = options.url;
    video.autoplay = true;
    video.muted = true;
    video.crossOrigin = "anonymous";
    video.loop = options.loop;
    const layerOptions = {
      ...options,
      canvas
    };
    this.canvas = canvas;
    this.context = canvas.getContext("2d");
    this.layer = new AMap.CanvasLayer(layerOptions);
    this.initVideoEvents();
    this.load();
  }
  getLayer() {
    return this.layer;
  }
  initVideoEvents() {
    var _a;
    (_a = this.video) == null ? void 0 : _a.addEventListener("canplaythrough", () => {
      var _a2, _b;
      if (this.canvas) {
        this.canvas.width = (_a2 = this.video) == null ? void 0 : _a2.videoWidth;
        this.canvas.height = (_b = this.video) == null ? void 0 : _b.videoHeight;
      }
      this.canPlay = true;
      this.play();
    });
  }
  load() {
    var _a;
    (_a = this.video) == null ? void 0 : _a.load();
  }
  play() {
    var _a;
    if (this.canPlay) {
      (_a = this.video) == null ? void 0 : _a.play();
      this.stopRender();
      this.render();
    }
  }
  pause() {
    var _a;
    this.stopRender();
    (_a = this.video) == null ? void 0 : _a.pause();
  }
  stopRender() {
    if (this.frame) {
      cancelAnimationFrame(this.frame);
    }
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    this.frame = window.requestAnimationFrame(() => {
      this.render();
    });
    if ((_a = this.video) == null ? void 0 : _a.paused) {
      (_b = this.video) == null ? void 0 : _b.play();
    } else {
      (_e = this.context) == null ? void 0 : _e.clearRect(0, 0, (_c = this.canvas) == null ? void 0 : _c.width, (_d = this.canvas) == null ? void 0 : _d.height);
      (_h = this.context) == null ? void 0 : _h.drawImage(this.video, 0, 0, (_f = this.canvas) == null ? void 0 : _f.width, (_g = this.canvas) == null ? void 0 : _g.height);
      this.layer.reFresh();
    }
  }
  destroy() {
    this.stopRender();
    if (this.video) {
      this.video.pause();
    }
    this.video = null;
  }
  setUrl(url) {
    this.stopRender();
    this.canPlay = false;
    if (this.video) {
      this.video.src = url;
      this.load();
    }
  }
  setZooms(zooms) {
    this.getLayer().setZoom(zooms);
  }
  setOpacity(opacity) {
    this.getLayer().setOpacity(opacity);
  }
  setBounds(bounds) {
    this.getLayer().setBounds(bounds);
  }
  setzIndex(zIndex) {
    this.getLayer().setzIndex(zIndex);
  }
  show() {
    this.getLayer().show();
  }
  hide() {
    this.getLayer().hide();
  }
}

exports.default = VideoLayer;
//# sourceMappingURL=VideoLayer.js.map