vue-dft-vision

Appearance

On this page

dft-model-view ​

核心模型渲染组件, 以下示例默认父节点已正确设置宽高。

代码示例 ​

加载离线模型： ​

vue
<template>
  <dft-model-view
    :scene-constructor="DFTCore.Scene"
    :scene-options="sceneOptions"
  />
</template>

<script setup>
import { reactive, ref } from "vue";
import DFTCore from "dft-vision-core-es6.min.js";

const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DataType.OFFLINE,
  // 文件路径
  url: "/pdv/model-example",
});
</script>
vue
<template>
  <dft-model-view
    :scene-constructor="DFTCore.Scene"
    :scene-options="sceneOptions"
  />
</template>
<script>
import DFTCore from "dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.OFFLINE,
        // 文件路径
        url: "/pdv/1004",
      },
      DFTCore,
    };
  },
};
</script>

加载在线模型： ​

vue
<template>
  <dft-model-view :scene-constructor="Scene" :scene-options="sceneOptions" />
</template>

<script setup>
import { reactive, ref } from "vue";
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";

const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DataType.ONLINE,
  // api路径
  url: "https://my.com/openapi",
  // 场景id
  id: "123456",
});
</script>
vue
<template>
  <dft-model-view
    :scene-constructor="DFTCore.Scene"
    :scene-options="sceneOptions"
  />
</template>
<script>
import DFTCore from "dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.ONLINE,
        // api路径
        url: "https://my.com/openapi",
        // 场景id
        id: "123456",
      },
      DFTCore,
    };
  },
};
</script>

Props ​

Invalid code snippet option
参数名参数说明类型默认值
symbol分组标识, 同组内组件产生联动交互, 默认所有组件在同一个组string|symbolnull
sceneConstructor场景类 vision-core 中获取DFTCore.Scene必传
sceneOptions场景配置，参考初始化参数Objectnull
getContextMenus获取右键菜单列表，传递参数为默认菜单列表，接受处理后的列表(node: Node) => ContextMenu[];null
getDialogPosition设置浮层中窗口(爆炸, 测量等)的初始化位置() => { x: number; y: number }() => ({ x: 40, y: 40 })
showToolbar是否显示工具栏booleantrue
toolbarOptions控制 toolbar 中某一项是否展示object{}
showLoadingTime是否显示属性面板booleantrue
showLoadingProgress是否显示加载进度条booleantrue
showLoadingTime是否显示加载时长booleanfalse
comments(v-model)审阅列表Note[][]
=======
参数名参数说明类型默认值
:---------------------------:--------------------------------------------------------:--------------------------------:------------------------
symbol分组标识, 同组内组件产生联动交互, 默认所有组件在同一个组string|symbolnull
sceneConstructor场景类 vision-core 中获取DFTCore.Scene必传
sceneOptions场景配置，参考初始化参数Objectnull
getContextMenus获取右键菜单列表，传递参数为默认菜单列表，接受处理后的列表(node: Node) => ContextMenu[];null
getDialogPosition设置浮层中窗口(爆炸, 测量等)的初始化位置() => { x: number; y: number }() => ({ x: 40, y: 40 })
showToolbar是否显示工具栏booleantrue
toolbarOptions控制 toolbar 中某一项是否展示object{}
showPropertyPanel是否显示属性面板booleantrue
showLoadingProgress是否显示加载进度条booleantrue
showLoadingTime是否显示加载时长booleanfalse
notes(v-model)审阅列表Note[][]
beforeAddNotedeprecated添加审阅之前调用(note: Note) => Notenull
beforeDeleteNotedeprecated删除审阅之前调用(noteIds: string[], { selectedNotes: Note[]}) => voidnull
showCaeSectionExpand是否显示云图截面展开按钮booleanfalse

Stashed changes

初始化参数 sceneOption ​

参数名参数说明
dataType数据源，默认 DFTCore.OFFLINE
url文件路径
id场景 id，当 dataType 设置为 DFTCore.ONLINE 时生效
selColor选中颜色，默认 0xff0000
backgroundColor背景颜色，默认 0xc0dcf8
backgroundAlpha背景透明度，默认 1
selectType选择类型，默认 DFTCore.BODY
operateMode左键操作模式，默认 DFTCore.SELECT
projectionMode投影模式，默认 DFTCore.PERSPECTIVE

Emits ​

事件名称事件说明事件参数
loaded模型加载完成(data) => void
tree-loaded模型树加载完成(payload: { modelNodesTree, tileNodesMap }) => void
<<<<<<< Updated upstream
click鼠标左键点击事件({ node }) => void
selected-change模型选中变化时触发(keys: string[]) => void
after-create-scene场景创建完成(scene: Scene) => void
destroy-scene场景销毁-
camera-changed摄像机视角变化(event) => void
context-menu-selected右键菜单选中({ type, node }) => void
add-comment添加审阅(comment: Comment, { comments }) => void
update-comment更新审阅(comment: Comment, { comments }) => void
delete-comment删除审阅(keys: string[], { targetComments }) => void
comment-click点击审阅(comment: Comment) => void
=======
click鼠标左键点击事件({ node }) => void
selected-change模型选中变化时触发(keys: string[]) => void
after-create-scene场景创建完成(scene: Scene) => void
destroy-scene场景销毁-
camera-changed摄像机视角变化(event) => void
context-menu-selected右键菜单选中({ type, node }) => void
add-note添加审阅(note: Note, { notes }) => void
delete-note删除审阅(keys: string[], { targetNotes }) => void
note-click点击审阅(note: Note) => void
cloud-map-section-loaded云图截面补面状态(status:Boolean)=>void

Stashed changes

Exposed ​

名称说明方法参数方法返回
getScene获取 scene 对象Scene
getSceneState获取 sceneStateSceneState
setSceneState设置 sceneStatePartial<SceneState>
resetSceneState重置 sceneState
getScreenshot获取当前模型区 canvas 截图type, quality参数参考 canvas.toDataURL 参数
getAllTileNodesMap获取所有模型节点Map<string, TileNode>
setSelectedKeys设置选中节点 keysstring[]
setCheckedKeys设置要显示的节点 keysstring[]