中地数码

mapgis-3d-projector-setting

# 属性

# vueKey

  • 类型: String
  • 可选
  • 非侦听属性
  • 默认值: default
  • 描述: mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。

# vueIndex

  • 类型: Number
  • 可选
  • 非侦听属性
  • 默认值: (Math.random() * 100000000).toFixed(0)随机计算值
  • 描述: 当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。

# modelUrl

  • 类型: String
  • 必选
  • 侦听属性
  • 描述: 相机模型路径
  • 默认值:

# modelOffset

  • 类型: Object
  • 可选
  • 侦听属性
  • 描述: 相机模型朝向偏移量
  • 默认值: { headingOffset: -90, pitchOffset: 0, rollOffset: 0 }

# modelScale

  • 类型: Number
  • 可选
  • 侦听属性
  • 描述: 相机模型尺寸比例
  • 默认值: 1

# hideVPInvisible

  • 类型: Boolean
  • 可选
  • 侦听属性
  • 描述: 当摄像头不在当前视图范围内，隐藏投影；参数设置后，对新投放或者重新投放的对象有效，对于已经投放的对象无效
  • 默认值: false

# settings

  • 类型: Object
  • 可选
  • 侦听属性
  • 描述: 投放视频参数对象
  • 默认值:
{
    id: "987-765-543-124",
    name: "testProjector3",
    description: "",
    isProjected: false,
    params: {
      projectorType: "video",
      imgUrl: "",
      videoSource: {
        protocol: "m3u8",
        videoUrl: "http://192.168.91.123:10008/record/video3/20211221/out.m3u8",
      },
      cameraPosition: {
        x: 114.4006886798949,
        y: 30.467287432107295,
        z: 85.46751512564336,
      },
      orientation: {
        heading: 271.628505216584,
        pitch: -78.4,
        roll: 359.3,
      },
      hFOV: 32.5,
      vFOV: 19,
      hintLineVisible: true,
    }
}

# 方法

# putProjector

  • Description: 投放视频
  • Param: projector 投放视频参数对象

# cancelPutProjector

  • Description: 取消投放
  • Param: id 要取消投放视频的 id

onChangeSetting(val, tag)

# onChangeSetting

  • Description: 实时修改视频投放参数(朝向，视角和视锥线显示)
  • Param: val 要修改的值
  • Param: tag 要修改的值对应的 key 值

# 事件

# @load

  • Description: 在 ProjectorSetting 组件 加载完毕后发送该事件
  • Payload ProjectorSetting 组件对象

# @unload

  • Description: 在 ProjectorSetting 组件 销毁前发送该事件
  • Payload ProjectorSetting 组件对象

# @update-settings

  • Description: 在 修改配置点击确定按钮 时发送该事件
  • Payload 更新后的 settings

# @cancel

  • Description: 在 点击取消按钮 时发送该事件

# 插槽

# imgUpload

  • Description: 图片上传按钮插槽
  • Param: click {Function} 主要用来回传上传后图片路径。
<template slot="imgUpload" slot-scope="{ click }">
  <mp-upload-image
    :uploadUrl="`${baseUrl}/api/local-storage/pictures`"
    :click="click"
  ></mp-upload-image>
</template>

# 示例

<template>
  <mapgis-web-scene style="height: 95vh" v-on:load="handleLoad">
    <mapgis-3d-scene-layer
      :autoReset="autoReset"
      :maximumScreenSpaceError="maximumScreenSpaceError"
      :url="m3dUrl"
    ></mapgis-3d-scene-layer>
    <mapgis-ui-card
      v-if="isM3DLoaded"
      class="storybook-ui-card"
      style="max-height:500px;overflow-y:auto"
    >
      <mapgis-3d-projector-setting
        :settings="settings"
        :modelUrl="modelUrl"
        :modelOffset="modelOffset"
        :hideVPInvisible="hideVPInvisible"
      ></mapgis-3d-projector-setting>
    </mapgis-ui-card>
  </mapgis-web-scene>
</template>

<script>
export default {
  data() {
    return {
      m3dUrl: `${window.domain}/igs/rest/g3d/ZondyModels`,
      autoReset: true,
      maximumScreenSpaceError: 8,
      isM3DLoaded: false,
      modelUrl: "./CesiumModels/Cesium_Camera.glb",
      modelOffset: { headingOffset: -90, pitchOffset: 0, rollOffset: 0 },
      hideVPInvisible: false,
      settings: {
        id: "987-765-543-124",
        name: "testProjector3",
        description: "",
        isProjected: false,
        params: {
          projectorType: "video",
          imgUrl: "",
          videoSource: {
            protocol: "m3u8",
            videoUrl:
              "http://192.168.91.123:10008/record/video3/20211221/out.m3u8"
          },
          cameraPosition: {
            x: 114.4006886798949,
            y: 30.467287432107295,
            z: 85.46751512564336
          },
          orientation: {
            heading: 271.628505216584,
            pitch: -78.4,
            roll: 359.3
          },
          hFOV: 32.5,
          vFOV: 19,
          hintLineVisible: true
        }
      }
    };
  },
  methods: {
    handleLoad(e) {
      setTimeout(() => {
        //增加延时，确保模型已加载
        this.isM3DLoaded = true;
      }, 5000);
    }
  }
};
</script>

← 缓冲分析 →