real3d-portalsite/src/components/3DAnalysis/Projection/index.vue

<template>
  <div class="sm-function-module-content">
    <video
      id="trailer"
      WE
      style="
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
        z-index: 100;
      "
      autoplay
      loop
      crossorigin
      controls
    >
      <source src="@/assets/video.mp4" type="video/mp4" />
    </video>
    <el-form :model="proform" ref="ruleForm" label-width="100px">
      <el-form-item label="宽度：" prop="horizontal">
        <el-slider
          class="inputwidth"
          :min="1"
          :max="50"
          :step="1"
          v-model="proform.horizontal"
          @input="chageHor"
        ></el-slider>
      </el-form-item>
      <el-form-item label="高度：" prop="vertical">
        <el-slider
          class="inputwidth"
          :min="1"
          :max="50"
          :step="1"
          v-model="proform.vertical"
          @input="chageVert"
        ></el-slider>
      </el-form-item>
      <el-form-item label="距离：" prop="distance">
        <el-slider
          class="distance"
          :min="100"
          :max="1000"
          :step="1"
          v-model="proform.distance"
          @input="chageDist"
        ></el-slider>
      </el-form-item>
    </el-form>
    <el-checkbox v-model="proform.visibleLine" @change="chageLineVisible">
      显示视频投放线
    </el-checkbox>
    <div class="boxchild">
      <el-button type="primary" size="mini" @click="active">
        视频投放
      </el-button>
      <!-- <button type="button" id="cilpRegion" class="button black">
      绘制裁剪面
    </button> -->
      <el-button type="primary" size="mini" @click="clear">清除</el-button>
    </div>

    <div id="toolbar" class="param-container tool-bar">
      <!-- <div class="param-item">
      <b>宽度：</b>
      <input
        type="range"
        id="horizontal"
        min="1"
        max="50"
        step="1"
        value="20"
      />
    </div>
    <div class="param-item">
      <b>高度：</b>
      <input type="range" id="vertical" min="1" max="50" step="1" value="10" />
    </div>
    <div class="param-item">
      <b>距离：</b>
      <input
        type="range"
        id="distance"
        min="100"
        max="1000"
        step="1"
        value="200"
      />
    </div>
    <div class="param-item">
      <b>裁剪模式：</b>
      <select id="clip-mode" class="supermap3d-button">
        <option value="clip-outside">保留区域外</option>
        <option value="clip-inside">保留区域内</option>
      </select>
    </div>
    <div>
      <label>
        <input
          type="checkbox"
          id="visibleLine"
          style="display: inline-block; vertical-align: middle"
          checked
        />
        <span style="display: inline-block; vertical-align: middle"
          >显示视频投放线</span
        >
      </label>
    </div> -->
    </div>
  </div>
</template>

<script>
import {
  proInit,
  clearAndActive,
  handler,
  chageHor,
  chageVert,
  chageDist,
  chageLineVisible,
  centerPoint,
} from "./projectionImage.js";
export default {
  data() {
    return {
      videoElement: "",
      proform: {
        horizontal: 2,
        vertical: 1,
        distance: 200,
        visibleLine: true,
      },
      center: null,
    };
  },
  mounted() {
    // if (this.analysisShow && this.skylineComb) {
    // }
    this.$nextTick(() => {
      proInit();
      this.videoElement = document.getElementById("trailer");
      this.center = document.createElement("div");
      this.center.setAttribute("class", "addCenter");
      document.body.appendChild(this.center);
    });
  },
  methods: {
    active() {
      clearAndActive(this.videoElement, 20, 10);
      handler.activate();
    },
    clear() {
      clearAndActive(this.videoElement, 20, 10);
      handler.clear();
      viewer.entities.remove(centerPoint);
    },
    chageHor(v) {
      chageHor(v);
    },
    chageVert(v) {
      chageVert(v);
    },
    chageDist(v) {
      chageDist(v);
    },
    chageLineVisible(v) {
      chageLineVisible(v);
    },
  },
};
</script>

<style>
.addCenter {
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 3px);
  background: yellow;
  border: 2px solid BLACK;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
</style>