xtd 二维文件查看器

安装相关依赖

网络请求 axios

https://www.npmjs.com/package/axios

npm i axios

UI element-plus

https://www.npmjs.com/package/element-plus

npm i element-plus

事件总线 mitt

https://www.npmjs.com/package/mitt

npm i mitt

状态管理 pinia

https://www.npmjs.com/package/pinia

npm i pinia@3

3D three

https://www.npmjs.com/package/three

npm i three

安装依赖

// 安装依赖
npm i @xtctwins/tctwins-dxf-next-viewer
// 引入样式
import "@xtctwins/tctwins-dxf-next-viewer/dist/tctwins-dxf-next-viewer.css";

拷贝资源

拷贝文件夹@xtctwins/tctwins-dxf-next-viewer/dist/tctwins-dxf-viewer到项目public目录下，确保资源访问路径为：http://{访问域名}/tctwins-dxf-viewer/*

Example

<template>
	<TctwinsDxf
		is-pc
		reset
		measure
		comment
		hidden
		layer
		anno
		screenshot
                fullscreen
		gray
		measureScale
		riserLabel
		:dxf-file-url="fileUrl"
		:fonts="fonts"
		:panel-right-keys="['anno']"
		:panel-right-width="300"
		@event-handle="eventHandle">
		<template #leftpanel>
			<!-- 左侧面板内容示例 -->
			<!-- <transition name="dxf-panel-transition">
				<PLayerTool v-if="props.isPc && toolbar.isToolActiveByKey('layer')" />
			</transition> -->
		</template>
		<template #rightpanel>
			<!-- 右侧面板内容示例 -->
			<!-- <transition name="dxf-panel-transition">
				<PCommentTool v-if="props.isPc && toolbar.isToolActiveByKey('comment')" />
			</transition>
			<transition name="dxf-panel-transition">
				<PAnnoTool v-if="props.isPc && toolbar.isToolActiveByKey('anno')" />
			</transition> -->
		</template>
		<template #toolpanel>
			<!-- 工具面板内容示例 -->
			<!-- <PToolbar
				v-if="props.isPc"
				:toolbars="toolbar.visibleTools" /> -->
		</template>
	</TctwinsDxf>
</template>
<script setup>
import { ref } from "vue";
// 引入样式
import "@xtctwins/tctwins-dxf-next-viewer/dist/tctwins-dxf-next-viewer.css";
import { TctwinsDxf } from "@xtctwins/tctwins-dxf-next-viewer";
const fileUrl = ref("https://xxxxxx/demo.xtd");
// 字体链接列表，默认字体可取tctwins-dxf-viewer/fonts下的文字路径
const fonts = ref([]);
const eventHandle = (event) => {
	console.log("通知事件", event);
};
</script>

Components

组件 TctwinsDxf

查看器组件

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------ | -------------------------------- | --------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------- | | isPc | 是否为 PC 端, 移动端传 false | boolean | - | true | | fonts | 字体链接列表 | string[] | - | - | | dxfFileUrl | xtd 文件 url | string | - | - | | dxfBuffer | xtd 文件 buffer | ArrayBuffer | - | - | | reset | 开启重置功能 | boolean | - | false | | measure | 开启测量功能 | boolean | - | false | | comment | 开启批注功能 | boolean | - | false | | anno | 开启标注功能 | boolean | - | false | | layer | 开启图层功能 | boolean | - | false | | hidden | 隐藏批注、测量、标注等信息 | boolean | - | false | | screenshot | 开启截图功能 | boolean | - | false | | fullscreen | 是否全屏 | boolean | - | false | | gray | 是否开启底图显灰 | boolean | - | false | | measureScale | 是否开启标注比例设置 | boolean | - | false | | riserLabel | 是否开启立管标注 | boolean | - | false | | close | 是否开启关闭功能 | boolean | - | false | | leftExtraTools | 左侧额外工具栏 | IToolbar[] | - | [] | | rightExtraTools | 右侧额外工具栏 | IToolbar[] | - | [] | | bottomExtraTools | 底部额外工具栏 | IToolbar[] | - | [] | | panelLeftWidth | 右侧面板宽度 | number | - | 240 | | panelRightWidth | 右侧面板宽度 | number | - | 240 | | toolTopHeight | 工具栏顶部距离 | number | - | 0 | | toolLeftWidth | 工具栏左侧距离 | number | - | 0 | | toolRightWidth | 工具栏右侧距离 | number | - | 0 | | toolBottomHeight | 工具栏底部距离 | number | - | 0 | | panelLeftKeys | 左侧面板显示内容 | string[] | - | [] | | panelRightKeys | 右侧面板显示内容 | string[] | - | [] | | panelExtraKeys | 操作其他功能时，不需要关闭的面板 | number | - | [] | | annoFileAcceptType | 标注允许上传文件类型 | { image?: string; record?: string; video?: string; file?: string; } | - | { image: 'image/*', record: 'audio/*', video: 'video/*', file: '*/*' } |

Events

| 事件名 | 说明 | 回调参数 | | ----------- | -------- | ---------------------------------------------------------------------------------------------- | | eventHandle | 通知事件 | (event: { isTool: booolean; event_target: string; event_name: string; content: object;}) => {} |

Slots

| 方法名 | 说明 | | ---------- | ------------ | | leftpanel | 左侧面板内容 | | toolpanel | 工具面板内容 | | rightpanel | 右侧面板内容 |

组件 TctwinsDxfPanel (适用 PC)

自定义左侧或右侧面板组件时使用，可添加到 TctwinsDxf 组件的 leftpanel 或 rightpanel 插槽中使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | ---- | ------ | ------ | ------ | | title | 标题 | string | - | - |

Events

| 事件名 | 说明 | 回调参数 | | ---------- | -------- | -------- | | closePanel | 关闭面板 | - |

Slots

| 方法名 | 说明 | | ------- | ---- | | default | - |

组件 TctwinsDxfDialog (适用 PC)

自定义左侧或右侧可拖动面板组件时使用，可添加到 TctwinsDxf 组件的 toolpanel 插槽中使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------- | ---- | ------ | ------ | | title | 标题名称 | - | - | 标题 | | width | 宽度 | - | - | 240 |

Events

| 事件名 | 说明 | 回调参数 | | ---------- | -------- | -------- | | closePanel | 关闭面板 | - |

Slots

| 方法名 | 说明 | | ------- | ---- | | default | - |

组件 TctwinsDxfFile (适用 PC)

上传文件插件，结合组件 TctwinsDxfTool 使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | -------- | ---- | ------ | -------------- | | acceptType | 上传类型 | - | - | 示例：image/* |

Events

| 事件名 | 说明 | 回调参数 | | ------ | -------- | ------------ | | upload | 选择文件 | (file) => {} | | cancel | 取消上传 | () => {} |

组件 TctwinsMobileDxfPanel (适用 移动端)

自定义左侧或右侧面板组件时使用，可添加到 TctwinsDxf 组件的 toolpanel 插槽中使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | ---- | ------ | ------ | ------ | | title | 标题 | string | - | - |

Events

| 事件名 | 说明 | 回调参数 | | ---------- | -------- | -------- | | closePanel | 关闭面板 | - |

Slots

| 方法名 | 说明 | | ------- | ---- | | default | - |

组件 TctwinsMobileDxfFile (适用 移动端)

上传文件插件，结合组件 TctwinsDxfTool 使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | -------- | ---- | ------ | -------------- | | acceptType | 上传类型 | - | - | 示例：image/* |

Events

| 事件名 | 说明 | 回调参数 | | ------ | -------- | ------------ | | upload | 选择文件 | (file) => {} | | cancel | 取消上传 | () => {} |

组件 TctwinsDxfTool (适用 PC & 移动端)

自定义工具面板组件时使用，可添加到 TctwinsDxf 组件的 toolpanel 插槽中使用

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | -------------------------------- | ------- | ------ | ------ | | hideAllTool | 工具显示时，是否隐藏其他全部按钮 | boolean | - | false |

Slots

| 方法名 | 说明 | | ------- | ---- | | default | - |

工具方法

方法： setToolStatusByKey(key: string, isOpen?: boolean)

激活或关闭工具

参数

| 参数 | 说明 | | ------ | -------- | | key | 工具 key | | isOpen | 是否激活 |

示例

// 激活重置工具
setToolStatusByKey("reset", true);

方法： isToolStatusByKey(key: string)

判断工具是否激活

参数

| 参数 | 说明 | | ---- | -------- | | key | 工具 key |

示例

if (isToolStatusByKey("reset")) {
	console.log("重置工具已激活");
}

方法： closeAllTool()

关闭所有工具

示例

closeAllTool();

方法： toggleAllTool(showState: boolean)

显示或隐藏所有工具

参数

| 参数 | 说明 | | --------- | -------------- | | showState | 显示或隐藏工具 |

示例

// 显示所有工具
toggleAllTool(true);

交互操作

数据存储格式

interface Data {
	id: string || number;
	content: {
		[key: string]: any; // 数据
	}; // 创建方法返回的数据
	[key: string]: any; // 用户自定义的其他数据
}

测量相关

1. 测量列表 window.dxfViewer.measureTool.showMeasureList([] as Data[]);
2. 删除测量 window.dxfViewer.measureTool.deleteTargetObjectById(event.content.id);
3. 聚焦测量 window.dxfViewer.measureTool.zoomInMeasureById(id);

批注相关

1. 批注列表 window.dxfViewer.commentTool.showCommentList([] as Data[]);
2. 删除批注 window.dxfViewer.commentTool.deleteTargetObjectById(event.content.id);

标注相关

1. 标注列表 window.dxfViewer.annotationTool.showAnnotationList([] as Data[]);
2. 删除标注 删除记录后重新绘制即可

图层数据源

// 定义 LayerData 接口，用于描述图层的数据结构
interface LayerData {
	color: number; // 图层的颜色，使用数字表示
	displayName: string; // 图层的显示名称
	lineType: string; // 图层的线条类型
	name: string; // 图层的名称
	objects: any[]; // 图层包含的对象数组
	visible: boolean; // 图层是否可见
}
// 使用 Map 类型来存储图层数据，键为字符串，值为 LayerData 对象
const layerMap: Map<string, LayerData> = new Map(window.dxfViewer.layers);
// 遍历图层数据，获取每个图层的信息
for (const [key, value] of layerMap) {
	console.log(`图层名称：${value.name}`);
}