@vuemap/vue-amap-extra
Version:
@vuemap/vue-amap扩展库,包含threejs相关图层
155 lines (150 loc) • 3.68 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var vueAmap = require('@vuemap/vue-amap');
var ThreeVideo = require('./ThreeVideo.js');
const _hoisted_1 = ["src"];
var script = /* @__PURE__ */ vue.defineComponent({
...{
name: "ElAmapThreeVideo",
inheritAttrs: false
},
__name: "ThreeVideo",
props: vueAmap.buildProps({
video: {
type: [String, Array, HTMLVideoElement],
required: true
},
videoTranslate: {
type: Object,
default() {
return {
x: 0,
y: 0,
z: 0
};
}
},
videoWidth: {
type: Number
},
// 视频宽度
videoHeight: {
type: Number
},
// 视频高度
canvas: {
type: Object
},
position: {
type: Array,
required: true
},
altitude: {
type: Number,
default: 0
},
rotation: {
type: Object
},
scale: {
type: [Number, Array],
default: 1
},
angle: {
type: Number,
default: 0
},
opacity: {
type: Number,
default: 1
},
// 透明度,默认 1
alwaysFront: {
type: Boolean,
default: false
}
//是否一直面朝屏幕
}),
emits: ["init", "click", "mousemove", "mouseover", "mouseout"],
setup(__props, { expose: __expose, emit: __emit }) {
const emits = __emit;
let $amapComponent;
const videoUrlList = vue.ref([]);
const videoRef = vue.ref();
const { $$getInstance, parentInstance } = vueAmap.useRegister((options, parentComponent) => {
const urlType = Object.prototype.toString.call(options.video);
if (urlType === "[object String]") {
videoUrlList.value = [options.video];
} else if (urlType === "[object Array]") {
videoUrlList.value = options.video;
}
if (videoUrlList.value.length > 0) {
options.video = videoRef.value;
}
$amapComponent = new ThreeVideo.default(parentComponent);
return new Promise((resolve) => {
vue.nextTick(() => {
$amapComponent.init(options, this).then(() => {
resolve($amapComponent);
});
});
});
}, {
emits,
destroyComponent() {
if ($amapComponent && (parentInstance == null ? void 0 : parentInstance.$amapComponent)) {
if (!parentInstance.isDestroy) {
$amapComponent.remove();
}
$amapComponent.destroy();
$amapComponent = null;
}
}
});
const $$start = () => {
$amapComponent.start();
};
const $$pause = () => {
$amapComponent.pause();
};
__expose({
$$getInstance,
$$start,
$$pause
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"video",
{
ref_key: "videoRef",
ref: videoRef,
style: { "display": "none" },
muted: "",
loop: "",
autoplay: "",
crossOrigin: "anonymous"
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(videoUrlList.value, (item) => {
return vue.openBlock(), vue.createElementBlock("source", {
key: item,
src: item,
type: "video/mp4"
}, null, 8, _hoisted_1);
}),
128
/* KEYED_FRAGMENT */
))
],
512
/* NEED_PATCH */
);
};
}
});
exports.default = script;
//# sourceMappingURL=ThreeVideo.vue2.js.map