Viewer 查看模式

大约 6 分钟

Viewer 查看模式

viewMode: "viewer" 是一种轻量级的嵌入模式，只显示绘图区域，隐藏菜单、工具栏、命令行等 UI 元素。适用于将 CAD 图纸嵌入到第三方系统中进行查看。

特性

纯净界面：只显示绘图区域，无菜单、工具栏、侧边栏
只读查看：适合图纸浏览场景，不需要编辑功能
交互支持：支持缩放、平移、实体选择等基本交互
事件监听：可监听选择变化等事件，获取实体信息
轻量嵌入：适合嵌入 iframe 或第三方系统

基本使用

创建 Viewer 视图

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
    appname: "唯杰CAD",
    version: "v1.0.0",
    serviceUrl: "http://127.0.0.1:27660/api/v1",
    accessToken: "your-token",
    
    // 设置 viewer 模式
    viewMode: "viewer",
    
    // 可选：隐藏坐标轴
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("cad-container", cadView);
await cadView.onLoad();

界面配置选项

视图模式

选项	类型	默认值	说明
`viewMode`	`"full" \| "viewer"`	`"full"`	视图模式。`viewer` 模式隐藏所有 UI 组件

细粒度 UI 控制

可以通过以下选项单独控制各个 UI 组件的显示/隐藏：

选项	类型	默认值	说明
`showMenuBar`	`boolean`	`true`	是否显示顶部菜单栏
`showToolBar`	`boolean`	`true`	是否显示工具栏/Ribbon
`showDocBar`	`boolean`	`true`	是否显示文档标签栏
`showCoordsBar`	`boolean`	`true`	是否显示坐标栏（绘图区底部）
`showCommandLine`	`boolean`	`true`	是否显示命令行输入区域
`showBottomBar`	`boolean`	`true`	是否显示底部状态栏
`sidebarStyle`	`"both" \| "left" \| "right" \| "none"`	`"right"`	侧边栏样式

交互控制

选项	类型	默认值	说明
`enableContextMenu`	`boolean`	`true`	是否启用右键菜单。viewer 模式下默认 `false`
`showGrips`	`boolean`	`true`	是否显示选择夹点。viewer 模式下默认 `false`（防止拖动修改实体）

坐标轴显示

选项	类型	默认值	说明
`showUcsIcon`	`boolean`	`true`	是否显示左下角的 UCS 坐标轴图标
`showAxis`	`boolean`	`true`	是否显示图中绘制的坐标轴线

图层叠加相关

用于将 WebCAD 作为图层叠加到其他地图（如 vjmap/Mapbox）时的配置：

选项	类型	默认值	说明
`backgroundAlpha`	`number`	`1`	背景透明度 (0-1)。设为 0 可实现透明背景
`showCrosshair`	`boolean`	`true`	是否显示十字光标和拾取框
`disablePointerEvents`	`boolean`	`false`	是否禁用鼠标事件（允许事件穿透）
`themeMode`	`number`	`0`	主题模式。0=深色（默认），1=浅色

配置示例

viewer 模式（最简配置）

const cadView = new MainView({
    viewMode: "viewer",  // 自动隐藏所有 UI
});

自定义 UI 组合

// 只显示绘图区和命令行，隐藏其他 UI
const cadView = new MainView({
    showMenuBar: false,
    showToolBar: false,
    showDocBar: false,
    showCoordsBar: false,
    showBottomBar: false,
    sidebarStyle: "none",
    // 保留命令行
    showCommandLine: true,
});

精简编辑模式

// 保留工具栏，隐藏侧边栏和命令行
const cadView = new MainView({
    showMenuBar: false,
    showToolBar: true,
    showDocBar: false,
    showCommandLine: false,
    showBottomBar: false,
    sidebarStyle: "none",
});

嵌入预览模式

// 纯净的图纸查看，无任何 UI 干扰
const cadView = new MainView({
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
    enableContextMenu: false,
    showGrips: false,
});

图层叠加模式

// 作为透明图层叠加到地图上（如 vjmap/Mapbox）
const cadView = new MainView({
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
    backgroundAlpha: 0,           // 透明背景
    showCrosshair: false,         // 隐藏十字光标
    disablePointerEvents: true,   // 允许事件穿透到下层地图
    themeMode: 0,                 // 深色主题
});

提示

如果需要将 WebCAD 叠加到 vjmap/Mapbox 地图上，推荐使用封装好的 CadMapOverlay 组件，它已经处理了视图同步、坐标转换、实体选择等功能。

示例：查看本地实体

创建实体并在 viewer 模式下显示：

import { MainView, initCadContainer, Engine, LineEnt, CircleEnt, ArcEnt } from 'vjcad';

// 创建 viewer 视图
const cadView = new MainView({
    appname: "唯杰CAD",
    version: "v1.0.0",
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("map", cadView);
await cadView.onLoad();

// 创建示例实体
const line1 = new LineEnt([0, 0], [100, 0]);
line1.setDefaults();
line1.color = 1;  // 红色

const line2 = new LineEnt([100, 0], [100, 80]);
line2.setDefaults();
line2.color = 2;  // 黄色

const circle = new CircleEnt([50, 40], 30);
circle.setDefaults();
circle.color = 3;  // 绿色

const arc = new ArcEnt([50, 40], 50, 0, Math.PI / 2);
arc.setDefaults();
arc.color = 4;  // 青色

// 添加到画布
Engine.addEntities([line1, line2, circle, arc]);
Engine.zoomExtents();

示例：查看远程图纸

从服务端加载图纸并在 viewer 模式下显示：

import { MainView, initCadContainer, Engine, DrawingManagerService } from 'vjcad';

// 创建 viewer 视图
const cadView = new MainView({
    appname: "唯杰CAD",
    version: "v1.0.0",
    serviceUrl: "http://127.0.0.1:27660/api/v1",
    accessToken: "your-token",
    viewMode: "viewer",
    showUcsIcon: false,
    showAxis: false,
});

initCadContainer("map", cadView);
await cadView.onLoad();

// 从服务端打开图纸
const drawingManager = new DrawingManagerService();

const openResult = await drawingManager.openDrawing({
    type: 'imports',           // 类型：'imports' | 'designs'
    mapid: 'your-map-id',      // 图纸ID
    version: 'v1',             // 版本号
    branch: 'main',            // 分支名称
    patchId: 'base',           // Patch ID
    readOnly: true             // viewer 模式使用只读
});

if (!openResult.success) {
    throw new Error(`打开图纸失败: ${openResult.error}`);
}

// 加载到编辑器
const webcadData = openResult.webcadData;
const jsonString = openResult.webcadJson;
const docName = `${mapid}_v1_main`;
const virtualFile = new File([jsonString], docName, { type: 'application/json' });
await Engine.view.openDbDoc(virtualFile, webcadData);

// 全图显示
Engine.zoomExtents();

监听选择事件

在 viewer 模式下，可以监听实体选择事件获取选中实体的信息：

import { CadEventManager, CadEvents } from 'vjcad';

const events = CadEventManager.getInstance();

events.on(CadEvents.SelectionChanged, (args) => {
    const entities = args.currentSelection;
    
    if (entities.length === 0) {
        console.log("选择已清空");
        return;
    }
    
    console.log(`选中 ${entities.length} 个实体:`);
    entities.forEach((ent, index) => {
        console.log(`[${index + 1}] 类型: ${ent.type}, objectId: ${ent.objectId}`);
    });
});

添加坐标显示

在 viewer 模式下添加自定义的坐标显示：

// 创建坐标显示元素
const coordsDiv = document.createElement('div');
coordsDiv.style.cssText = `
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    background-color: rgba(30, 42, 54, 0.9);
    border: 1px solid #3d4a5c;
    border-radius: 4px;
    color: #e8eaed;
    font-family: sans-serif, Arial;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
`;
coordsDiv.innerHTML = 'X: 0.00, Y: 0.00';
document.getElementById('map').appendChild(coordsDiv);

// 监听鼠标移动，更新 WCS 坐标
const canvas = Engine.pcanvas;
canvas.div.addEventListener('mousemove', (e) => {
    const canvasPt = { x: e.offsetX, y: e.offsetY };
    const wcsPt = canvas.trans.CanvasToWcs(canvasPt);
    coordsDiv.innerHTML = `X: ${wcsPt.x.toFixed(2)}, Y: ${wcsPt.y.toFixed(2)}`;
});

交互操作

操作	效果
滚轮上下	缩放视图
左键拖动	平移视图
左键点击	选中实体
左键框选	多选实体
ESC	取消选择

与 full 模式对比

UI 组件	full 模式（默认）	viewer 模式
菜单栏 (showMenuBar)	显示	隐藏
工具栏 (showToolBar)	显示	隐藏
文档栏 (showDocBar)	显示	隐藏
坐标栏 (showCoordsBar)	显示	隐藏
命令行 (showCommandLine)	显示	隐藏
底部栏 (showBottomBar)	显示	隐藏
侧边栏 (sidebarStyle)	可配置	隐藏
右键菜单 (enableContextMenu)	启用	禁用
夹点编辑 (showGrips)	启用	禁用

功能	full 模式	viewer 模式
实体选择	支持	支持
缩放平移	支持	支持
命令执行	支持	不支持
实体编辑	支持	不支持

使用场景

图纸预览：在文件管理系统中预览 CAD 图纸
嵌入展示：将图纸嵌入到网页或应用中展示
只读查看：提供给非 CAD 专业人员查看图纸
移动端适配：在移动设备上查看图纸（精简界面）
地图叠加：将 CAD 图纸叠加到 vjmap/Mapbox 地图上

下一步

地图叠加层 - 与 vjmap/Mapbox 地图叠加
预览视图组件 - 轻量级预览组件
事件系统 - 监听更多事件
从服务端打开 - 文件操作详解