@vuemap/vue-amap-extra/lib/packages/ThreeGltf/ThreeGltf.vue2.js

@vuemap/vue-amap扩展库，包含threejs相关图层

'use strict';

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

var vue = require('vue');
var vueAmap = require('@vuemap/vue-amap');
var CSS2DRenderer = require('../ThreeLayer/CSS2DRenderer.js');
var CSS3DRenderer = require('../ThreeLayer/CSS3DRenderer.js');
var CustomThreeGltf = require('./CustomThreeGltf.js');

const _hoisted_1 = { style: { "display": "none" } };
const _hoisted_2 = {
  class: "content-container",
  style: { "transform": "translate(-50%, -100%)", "position": "absolute" }
};
var script = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "ElAmapThreeGltf",
    inheritAttrs: false
  },
  __name: "ThreeGltf",
  props: vueAmap.buildProps({
    url: {
      type: String
    },
    position: {
      type: Array
    },
    height: {
      type: Number,
      default: 0
    },
    rotation: {
      type: Object
    },
    scale: {
      type: [Number, Array],
      default: 1
    },
    angle: {
      type: Number,
      default: 0
    },
    moveAnimation: {
      type: Object
    },
    //位置移动是否开启动画
    configLoader: {
      type: Function
    },
    useModelCache: {
      type: Boolean,
      default: false
    },
    showPopup: {
      type: Boolean,
      default: false
    },
    popupHeight: {
      //弹窗距离模型中心点的高度
      type: Number,
      default: 0
    },
    popupScale: {
      //三维弹窗的缩放比例(只有在popupType为3D时生效)
      type: [Number, Array],
      default: 1
    },
    popupType: {
      //信息弹窗类型
      type: String,
      default: "2D"
    }
  }),
  emits: [
    "init",
    "click",
    "mousemove",
    "mouseover",
    "mouseout"
  ],
  setup(__props, { expose: __expose, emit: __emit }) {
    const popupRef = vue.ref();
    const props = __props;
    const emits = __emit;
    let $amapComponent;
    let popup;
    const currentInstance = vue.getCurrentInstance();
    const { $$getInstance, parentInstance } = vueAmap.useRegister(
      (options, parentComponent) => {
        return new Promise((resolve) => {
          $amapComponent = new CustomThreeGltf.default(
            parentComponent,
            options,
            {
              $emit: emits,
              ...(currentInstance == null ? void 0 : currentInstance.exposed) || {}
            },
            () => {
              addPopup($amapComponent);
              resolve($amapComponent);
            }
          );
        });
      },
      {
        emits,
        destroyComponent() {
          var _a, _b, _c;
          if ($amapComponent && (parentInstance == null ? void 0 : parentInstance.$amapComponent)) {
            if (!parentInstance.isDestroy) {
              $amapComponent.remove();
            }
            (_c = (_b = (_a = $amapComponent.layer) == null ? void 0 : _a.cssRenderer) == null ? void 0 : _b.domElement) == null ? void 0 : _c.remove();
            $amapComponent.destroy();
            $amapComponent = null;
          }
        }
      }
    );
    const addPopup = (instance) => {
      var _a, _b, _c;
      const element = popupRef.value;
      const contentEle = element.querySelector(".content-container");
      if (((_a = contentEle == null ? void 0 : contentEle.children) == null ? void 0 : _a.length) == 0)
        return;
      if (props.popupType === "2D") {
        if (!((_b = instance == null ? void 0 : instance.layer) == null ? void 0 : _b.css2DRenderer)) {
          return;
        }
        const css2dObject = new CSS2DRenderer.CSS2DObject(element);
        css2dObject.center.set(0.5, 1);
        css2dObject.translateY(props.popupHeight || 0);
        popup = css2dObject;
        popup.visible = props.showPopup;
        instance.object.add(popup);
      } else if (props.popupType === "3D") {
        if (!((_c = instance == null ? void 0 : instance.layer) == null ? void 0 : _c.css3DRenderer)) {
          return;
        }
        const scales = typeof props.popupScale === "number" ? [props.popupScale, props.popupScale, props.popupScale] : props.popupScale;
        const css3DObject = new CSS3DRenderer.CSS3DObject(element);
        css3DObject.translateY(props.popupHeight || 0);
        css3DObject.scale.set(scales[0], scales[1], scales[2]);
        popup = css3DObject;
        popup.visible = props.showPopup;
        instance.object.add(popup);
      }
      instance == null ? void 0 : instance.refresh();
    };
    const $$startAnimations = () => {
      $amapComponent.startAnimations();
    };
    const $$stopAnimations = () => {
      $amapComponent.stopAnimations();
    };
    __expose({
      $$getInstance,
      $$startAnimations,
      $$stopAnimations
    });
    vue.watch(
      () => props.showPopup,
      (val) => {
        if (val && !popup) {
          addPopup($amapComponent);
          return;
        }
        if (popup) {
          popup.visible = val;
          $amapComponent.refresh();
        }
      }
    );
    vue.watch(
      () => props.popupHeight,
      (val, old) => {
        if (popup) {
          const changeVal = (val || 0) - (old || 0);
          popup.translateY(changeVal || 0);
          $amapComponent.refresh();
        }
      }
    );
    vue.watch(
      () => props.popupScale,
      (val) => {
        if (popup && val) {
          const scales = typeof val === "number" ? [val, val, val] : val;
          popup.scale.set(scales[0], scales[1], scales[2]);
          $amapComponent.refresh();
        }
      }
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode(
          "div",
          {
            ref_key: "popupRef",
            ref: popupRef,
            style: { "width": "0", "height": "0", "position": "relative" }
          },
          [
            vue.createElementVNode("div", _hoisted_2, [
              vue.renderSlot(_ctx.$slots, "default")
            ])
          ],
          512
          /* NEED_PATCH */
        )
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=ThreeGltf.vue2.js.map