唯杰地图 logo唯杰地图
VJMAP
EN
Examples

1453 个在线示例,打开就能跑

覆盖 2D 图纸、CAD 绘图扩展、三维、WebCAD 与 AI 可视化。每个示例都附完整源码,可在示例站在线修改运行,源码也已开源在 GitHub · vjmap-playground,更多源码请加客服微信。

WebCAD

浏览器 CAD 编辑器:实体、命令、图层、插件与参数化成图。

打开示例站 ↗ GitHub 源码 更多源码请加客服微信客服微信二维码微信扫码添加客服
基础示例
初始化引擎

MainView初始化与配置选项

基础示例运行 ↗
基础示例
等待加载完成

onLoad异步等待示例

基础示例运行 ↗
基础示例
Viewer查看模式

只显示绘图区域,隐藏菜单工具栏命令行

基础示例运行 ↗
基础示例
Viewer查看远程图纸

只读模式打开后端图纸

基础示例运行 ↗
基础示例
地图叠加模式

将 WebCAD 叠加到 vjmap 地图上

基础示例运行 ↗
基础示例
多语言/国际化(i18n)

强制指定界面语言或自动检测

基础示例运行 ↗
基础示例
销毁与重建视图

对话框反复打开 CAD 时如何销毁与重建

基础示例运行 ↗
命令开发
简单命令

命令基本结构示例

命令开发运行 ↗
命令开发
注册命令

CommandRegistry用法

命令开发运行 ↗
命令开发
带预览命令

预览绘制示例

命令开发运行 ↗
命令开发
状态机命令

多步骤命令示例

命令开发运行 ↗
命令开发
执行脚本

EXECUTESTR执行CAD命令脚本示例

命令开发运行 ↗
命令开发
执行JS代码

EXECUTEJS执行JavaScript代码示例

命令开发运行 ↗
综合示例
工程剖面图

根据钻孔数据自动生成CAD工程剖面图

综合示例运行 ↗
综合示例
数据自动生成CAD工程剖面图

用数据基于模板图克隆实体生成剖面图,导出DWG时字体/线型/填充与模板一致

综合示例运行 ↗
综合示例
数据自动生成CAD工程剖面图(DbDocument)

用 DbDocument + DbDocumentRenderer 前端转换绘制,效果同官网 vjmap DbDocument 示例

综合示例运行 ↗
编辑操作
移动实体

move方法示例

编辑操作运行 ↗
编辑操作
复制实体

clone方法示例

编辑操作运行 ↗
编辑操作
旋转实体

rotate方法示例

编辑操作运行 ↗
编辑操作
缩放实体

scale方法示例

编辑操作运行 ↗
编辑操作
镜像实体

mirror方法示例

编辑操作运行 ↗
编辑操作
删除实体

Engine.eraseEntities用法

编辑操作运行 ↗
编辑操作
显示顺序

DrawOrder调整绘制顺序示例

编辑操作运行 ↗
编辑操作
组操作

GROUP/UNGROUP创建组和取消组示例

编辑操作运行 ↗
编辑操作
高亮实体

highLightEntities和clearHighLight用法

编辑操作运行 ↗
创建实体
创建所有实体

表格展示所有实体类型

创建实体运行 ↗
创建实体
创建圆弧

ArcEnt基本创建示例

创建实体运行 ↗
创建实体
三点圆弧

initBy3Pt方法创建圆弧

创建实体运行 ↗
创建实体
圆弧属性

展示圆弧的各种属性和计算值

创建实体运行 ↗
创建实体
圆弧变换

移动、旋转、缩放、镜像操作

创建实体运行 ↗
创建实体
创建块定义

BlockDefinition示例

创建实体运行 ↗
创建实体
插入块

InsertEnt块引用示例

创建实体运行 ↗
创建实体
块炸开

将块引用炸开为独立实体

创建实体运行 ↗
创建实体
块属性文字

InsertEnt属性定义和属性值示例

创建实体运行 ↗
创建实体
块统计

COUNTBLOCK统计块使用次数示例

创建实体运行 ↗
创建实体
块替换

REPLACEBLOCK替换块引用示例

创建实体运行 ↗
创建实体
创建圆角矩形

Box圆角矩形示例

创建实体运行 ↗
创建实体
创建圆

CircleEnt基本创建示例

创建实体运行 ↗
创建实体
圆属性

获取圆半径、面积、周长

创建实体运行 ↗
创建实体
圆变换

移动、缩放、镜像操作

创建实体运行 ↗
创建实体
线性标注

LinearDimensionEnt基本创建示例

创建实体运行 ↗
创建实体
半径标注

RadialDimensionEnt创建示例

创建实体运行 ↗
创建实体
标注样式

设置标注文字、箭头等样式

创建实体运行 ↗
创建实体
对齐标注

AlignedDimensionEnt测量倾斜距离

创建实体运行 ↗
创建实体
角度标注

AngleDimensionEnt角度标注示例

创建实体运行 ↗
创建实体
直径标注

DiametricDimensionEnt直径标注示例

创建实体运行 ↗
创建实体
弧长标注

ArcDimensionEnt弧长标注示例

创建实体运行 ↗
创建实体
坐标标注

OrdinateDimensionEnt坐标标注示例

创建实体运行 ↗
创建实体
相联标注

Associative Dimension关联标注示例

创建实体运行 ↗
创建实体
创建双线

DLine双线绘制示例

创建实体运行 ↗
创建实体
创建圆环

Donut圆环实体示例

创建实体运行 ↗
创建实体
创建点实体

DotEnt基本创建示例

创建实体运行 ↗
创建实体
点阵图案

使用点实体创建图案

创建实体运行 ↗
创建实体
点实体变换

移动、旋转、缩放操作

创建实体运行 ↗
创建实体
创建椭圆

EllipseEnt基本创建示例

创建实体运行 ↗
创建实体
椭圆弧

创建部分椭圆(椭圆弧)

创建实体运行 ↗
创建实体
椭圆变换

移动、旋转、缩放、镜像操作

创建实体运行 ↗
创建实体
创建填充

HatchEnt基本用法

创建实体运行 ↗
创建实体
填充图案表

展示所有内置填充图案

创建实体运行 ↗
创建实体
填充边界

不同类型的填充边界创建方法

创建实体运行 ↗
创建实体
自定义填充图案

注册自定义图案并自动计算比例

创建实体运行 ↗
创建实体
图像插入

IMAGE插入图像示例(含base64)

创建实体运行 ↗
创建实体
创建直线

LineEnt基本创建示例

创建实体运行 ↗
创建实体
直线属性

获取直线长度、角度、起终点

创建实体运行 ↗
创建实体
直线变换

移动、旋转、缩放、镜像、拉伸操作

创建实体运行 ↗
创建实体
颜色设置

使用索引颜色和RGB真彩色创建直线

创建实体运行 ↗
创建实体
默认线型

显示系统内置的所有线型样式

创建实体运行 ↗
创建实体
创建线型

使用LinetypeDefinition创建自定义线型

创建实体运行 ↗
创建实体
加载LIN文件

从AutoCAD .lin格式字符串加载线型

创建实体运行 ↗
创建实体
线型管理器

LinetypeManager的完整API用法

创建实体运行 ↗
创建实体
线型比例

lineTypeScale参数对线型显示的影响

创建实体运行 ↗
创建实体
复杂线型

创建带文字和形状符号的复杂线型

创建实体运行 ↗
创建实体
创建三维网格

MeshEnt基本创建示例(立方体、金字塔、地形网格)

创建实体运行 ↗
创建实体
多重引线

MLeaderEnt多重引线标注示例

创建实体运行 ↗
创建实体
网络图

拓扑网络图完整示例(节点+分支+拓扑关系+交互绘制)

创建实体运行 ↗
创建实体
创建平行四边形

Parallelogram平行四边形示例

创建实体运行 ↗
创建实体
创建像素点

PixelPointEnt像素点示例

创建实体运行 ↗
创建实体
创建正多边形

Polygon正多边形示例

创建实体运行 ↗
创建实体
创建多段线

简化接口用法

创建实体运行 ↗
创建实体
绘制矩形

使用简化接口创建闭合多段线

创建实体运行 ↗
创建实体
带圆弧多段线

使用简化接口设置凸度参数

创建实体运行 ↗
创建实体
多段线属性

展示多段线的各种属性和计算值

创建实体运行 ↗
创建实体
创建射线

RayEnt基本创建示例

创建实体运行 ↗
创建实体
射线变换

移动、旋转、缩放、镜像操作

创建实体运行 ↗
创建实体
创建实体填充

SolidEnt基本创建示例

创建实体运行 ↗
创建实体
实体填充箭头

使用SolidEnt创建各种箭头形状

创建实体运行 ↗
创建实体
实体填充变换

移动、旋转、缩放、镜像操作

创建实体运行 ↗
创建实体
创建样条曲线

SplineEnt基本创建示例

创建实体运行 ↗
创建实体
闭合样条曲线

创建首尾相连的样条曲线

创建实体运行 ↗
创建实体
带权重样条曲线

控制点权重影响曲线形状

创建实体运行 ↗
创建实体
样条曲线变换

移动、旋转、缩放、镜像操作

创建实体运行 ↗
创建实体
拟合点样条曲线

使用setFitPoints创建经过所有指定点的样条曲线

创建实体运行 ↗
创建实体
克隆模板实体

TemplateHandle.cloneEntity 按 handle 克隆,只覆盖显式列出的属性

创建实体运行 ↗
创建实体
克隆模板文字

从模板克隆 TEXT/MTEXT,导出 DWG 时字体与模板一致

创建实体运行 ↗
创建实体
克隆模板填充

从模板克隆 HATCH,只换边界,图案与比例保持模板原样

创建实体运行 ↗
创建实体
测量文字宽高

measureTexts 取排版后的真实宽高,对比本地 WASM 与服务端 ODA 两种结果

创建实体运行 ↗
创建实体
模板成图

基于模板图克隆实体自动生成图纸,导出DWG时保留模板的字体/线型/填充

创建实体运行 ↗
创建实体
单行文字

TextEnt 基础与属性示例

创建实体运行 ↗
创建实体
多行文字

MTextEnt 基础与格式示例

创建实体运行 ↗
创建实体
文字样式

设置文字的各种样式属性

创建实体运行 ↗
创建实体
字体设置

TrueType字体(woff/ttf)与SHX字体示例

创建实体运行 ↗
创建实体
创建构造线

XLineEnt基本创建示例

创建实体运行 ↗
创建实体
构造线网格

使用构造线创建参考网格

创建实体运行 ↗
事件处理
实体添加事件

EntityAdded事件监听

事件处理运行 ↗
事件处理
实体修改事件

EntityModified事件监听

事件处理运行 ↗
事件处理
选择变化事件

SelectionChanged事件监听

事件处理运行 ↗
事件处理
命令事件

CommandStarted和CommandEnded事件

事件处理运行 ↗
事件处理
文档事件

DocumentOpened和DocumentSaved事件

事件处理运行 ↗
事件处理
多段线点位与事件时序

PLINE绘制中EntityAdded/EntityModified/CommandEnded的区别

事件处理运行 ↗
文件操作
从服务端打开

OPENFROMSERVER命令与API调用

文件操作运行 ↗
文件操作
从本地缓存打开

OPENFROMLOCAL命令与IndexedDB存储

文件操作运行 ↗
文件操作
保存到服务端

SAVESERVER命令与增量保存

文件操作运行 ↗
文件操作
保存到本地缓存

SAVELOCAL命令与离线存储

文件操作运行 ↗
文件操作
快速保存下载

QSAVE命令下载webcad文件

文件操作运行 ↗
文件操作
另存为

SAVEAS命令自定义文件名下载

文件操作运行 ↗
文件操作
从本地DWG导入

IMPORTDWG命令上传并转换DWG文件

文件操作运行 ↗
文件操作
导出为DWG

EXPORTDWG命令导出DWG格式

文件操作运行 ↗
文件操作
导出为PNG图片

EXPORTPNG命令将图纸导出为PNG图片

文件操作运行 ↗
文件操作
文档变更对比

使用 DiffUtils 对比两个文档状态并在 DiffPanel 中展示变更

文件操作运行 ↗
文件操作
从模板新建图纸

TemplateService.openFromTemplate 建图并导出 DWG(保留模板字体/线型/填充)

文件操作运行 ↗
几何计算
距离计算

distance函数用法

几何计算运行 ↗
几何计算
角度计算

getAngleBetweenPoints用法

几何计算运行 ↗
几何计算
中点计算

getMidPoint用法

几何计算运行 ↗
几何计算
交点计算

GeometryCalculator用法

几何计算运行 ↗
几何计算
边界框

boundingBox方法用法

几何计算运行 ↗
几何计算
点与直线位置关系

GeometryCalculator.witchSidePointToLine用法

几何计算运行 ↗
几何计算
面积计算

calculatePolygonArea用法

几何计算运行 ↗
几何计算
点在多边形内判断

射线法用法

几何计算运行 ↗
几何计算
空间索引

SpatialIndex 用法

几何计算运行 ↗
几何计算
偏移算法

直线、圆弧、圆、多段线偏移

几何计算运行 ↗
几何计算
裁剪算法

基于交点的实体裁剪

几何计算运行 ↗
几何计算
延长算法

实体延长到边界

几何计算运行 ↗
几何计算
高级交点计算

多种实体类型的交点

几何计算运行 ↗
几何计算
垂足计算

点到直线的垂足

几何计算运行 ↗
几何计算
边界框合并

多个边界框的合并

几何计算运行 ↗
几何计算
线段打断

在指定点打断实体

几何计算运行 ↗
几何计算
几何变换

平移、旋转、缩放、镜像

几何计算运行 ↗
几何计算
中心线提取

从双线(平行线)中提取中心线

几何计算运行 ↗
几何计算
云线生成

generateRevcloudBulgePoints 用法

几何计算运行 ↗
几何计算
智能识别为块

选择实体组,自动识别图纸中相同的重复图案,可转为块或属性文字块

几何计算运行 ↗
几何计算
文字宽高计算

measureTextLocal / measureTexts 取排版后的真实宽高,可本地算也可让服务端按图纸实体的样式算

几何计算运行 ↗
用户输入
获取点

Engine.getPoint用法

用户输入运行 ↗
用户输入
带基点获取点

橡皮筋线示例

用户输入运行 ↗
用户输入
获取选择集

Engine.getSelections用法

用户输入运行 ↗
用户输入
获取实数

Engine.getReal用法

用户输入运行 ↗
用户输入
获取整数

Engine.getInteger用法

用户输入运行 ↗
用户输入
关键字输入

keywords选项用法,绘制不同图形

用户输入运行 ↗
插入图形
基础SVG导入

通过IMPORTSVG命令导入SVG文件

插入图形运行 ↗
插入图形
SVG导入API

通过API解析SVG内容并插入到当前图

插入图形运行 ↗
插入图形
基础图片转矢量

通过INSERTIMAGE命令将图片转换为矢量并导入

插入图形运行 ↗
插入图形
创建本地符号

通过API创建符号并保存到本地存储

插入图形运行 ↗
插入图形
创建服务端符号

通过API创建符号并保存到服务端

插入图形运行 ↗
插入图形
基础插入符号

通过API获取符号并插入到当前图(指定参数)

插入图形运行 ↗
插入图形
交互式插入符号

通过getPoint交互式指定插入点、缩放、旋转

插入图形运行 ↗
插入图形
分类管理

通过API管理符号分类(创建、查询、更新、删除)

插入图形运行 ↗
插入图形
符号管理

通过API管理符号(查询、获取详情、删除)

插入图形运行 ↗
插入图形
修改后插入符号

解析符号文档后修改实体属性,设置固定缩放和旋转再插入

插入图形运行 ↗
插入图形
基础图片转矢量

通过INSERTIMAGE命令将图片转换为矢量并导入

插入图形运行 ↗
插入图形
图片转矢量API

通过API将图片转换为矢量并插入到当前图

插入图形运行 ↗
图层管理
创建图层

Engine.createLayer用法

图层管理运行 ↗
图层管理
切换当前图层

Engine.setCurrentLayer用法

图层管理运行 ↗
图层管理
图层可见性

layerOn属性控制图层开关

图层管理运行 ↗
图层管理
获取图层列表

Engine.getLayers用法

图层管理运行 ↗
图层管理
根据图层获取实体

按图层名称筛选实体

图层管理运行 ↗
图层管理
冻结图层

isFrozen属性控制图层冻结状态

图层管理运行 ↗
图层管理
锁定图层

isLocked属性控制图层锁定状态

图层管理运行 ↗
图层管理
图层状态综合

layerOn、isFrozen、isLocked三种状态对比

图层管理运行 ↗
插件开发
基本插件

插件结构示例

插件开发运行 ↗
插件开发
校验插件

数据校验示例

插件开发运行 ↗
插件开发
标准插件

PluginManager标准写法(参考 @webcad-plugins/tools-plugin)

插件开发运行 ↗
插件开发
建筑插件

加载建筑插件并通过SDK API创建建筑实体

插件开发运行 ↗
属性操作
颜色设置

color属性、颜色索引和RGB真彩色

属性操作运行 ↗
属性操作
图层设置

layer属性用法

属性操作运行 ↗
属性操作
线型设置

lineType和lineTypeScale用法

属性操作运行 ↗
属性操作
线宽设置

lineWeight属性、标准线宽值、图层线宽、LWDISPLAY显示开关

属性操作运行 ↗
属性操作
透明度设置

transpMgr用法

属性操作运行 ↗
属性操作
应用默认值

setDefaults方法用法

属性操作运行 ↗
属性操作
扩展数据

为实体附加自定义数据,支持导出到DWG并重新加载

属性操作运行 ↗
属性操作
可见性设置

visible属性用法(DXF 60)

属性操作运行 ↗
反应器
基础反应器

使用事件监听实现实体响应

反应器运行 ↗
反应器
关联标注反应器

标注自动跟随源实体更新

反应器运行 ↗
反应器
多类型监控反应器

同时监控多种实体类型的变化

反应器运行 ↗
反应器
约束反应器

实现几何约束关系

反应器运行 ↗
反应器
生命周期反应器

监控实体的完整生命周期

反应器运行 ↗
智能识别
表格提取

extractTables函数从图纸中自动识别并提取表格数据

智能识别运行 ↗
选择操作
设置选择集

ssSetFirst用法

选择操作运行 ↗
选择操作
获取选择集

ssGetFirst用法

选择操作运行 ↗
选择操作
按类型获取

getEntitiesByType用法

选择操作运行 ↗
选择操作
按条件过滤

getEntities过滤用法

选择操作运行 ↗
瓦片编辑
瓦片打开

大型图纸的瓦片方式打开

瓦片编辑运行 ↗
瓦片编辑
瓦片区域编辑

TILEEDITAREA选择矩形区域编辑

瓦片编辑运行 ↗
瓦片编辑
瓦片图层编辑

TILEEDITLAYER选择图层编辑

瓦片编辑运行 ↗
瓦片编辑
瓦片透明度

TILEALPHA设置瓦片图层透明度

瓦片编辑运行 ↗
瓦片编辑
遮盖层透明度

TILEMASKALPHA设置编辑区域遮盖层透明度

瓦片编辑运行 ↗
瓦片编辑
互联网地图叠加

在CAD图纸上叠加互联网地图底图

瓦片编辑运行 ↗
界面扩展
Ribbon菜单

addRibbonButton用法

界面扩展运行 ↗
界面扩展
消息输出

writeMessage用法

界面扩展运行 ↗
界面扩展
预览视图组件

PreviewView在对话框中预览实体

界面扩展运行 ↗
界面扩展
确认对话框

showConfirm、showInfo、showWarningConfirm用法

界面扩展运行 ↗
界面扩展
输入对话框

showInputDialog、showSelectDialog、showPrompt用法

界面扩展运行 ↗
界面扩展
右键菜单(添加自定义项)

基础:在默认菜单中添加自定义项

界面扩展运行 ↗
界面扩展
右键菜单(命令状态定制菜单)

根据命令状态定制菜单

界面扩展运行 ↗
界面扩展
右键菜单(完全自定义菜单)

完全自定义菜单(不显示默认项)

界面扩展运行 ↗
界面扩展
右键菜单(禁止系统右键菜单)

禁止系统右键菜单

界面扩展运行 ↗
界面扩展
主题切换

THEME_MODE用法

界面扩展运行 ↗
界面扩展
状态栏

FuncButtons和CoordsBar用法

界面扩展运行 ↗
界面扩展
主视图配置

MainViewConfig用法

界面扩展运行 ↗
界面扩展
Viewer查看模式

只显示绘图区域,隐藏菜单工具栏命令行

界面扩展运行 ↗
界面扩展
对话框暂停/恢复

在对话框中选择实体、拾取点的用法

界面扩展运行 ↗
界面扩展
对话框暂停/恢复 (Vue3版本)

在对话框中选择实体、拾取点的用法

界面扩展运行 ↗
界面扩展
模态对话框基类

ModalDialogBase 用法

界面扩展运行 ↗
界面扩展
非模态面板基类

ModelessPanelBase 用法

界面扩展运行 ↗
界面扩展
侧边栏面板

registerSidebarPanel 用法

界面扩展运行 ↗
界面扩展
浮动工具栏

createFloatingToolbar 创建浮动可拖动图标工具栏

界面扩展运行 ↗
界面扩展
菜单栏和工具栏定制

MenuBarCustomConfig、RibbonCustomConfig 增量/全量定制用法

界面扩展运行 ↗
界面扩展
界面自定义主题色

通过 MainView.themeColors / setThemeColors API 设置 UI 色板

界面扩展运行 ↗
撤销重做
基本撤销

undo和redo用法

撤销重做运行 ↗
撤销重做
撤销标记

added_undoMark用法

撤销重做运行 ↗
撤销重做
撤销组

start_undoMark和end_undoMark用法

撤销重做运行 ↗
撤销重做
操作描述

UndoDescriptor和撤销历史查询

撤销重做运行 ↗
版本管理
创建分支

从指定版本创建新分支

版本管理运行 ↗
版本管理
保存版本

创建新的Patch版本

版本管理运行 ↗
版本管理
合并分支

创建两个分支,修改后合并,演示完整分支工作流

版本管理运行 ↗
版本管理
版本历史

查看和回溯版本

版本管理运行 ↗
版本管理
冲突解决

模拟两个分支修改同一实体产生冲突,演示冲突解决流程

版本管理运行 ↗
版本管理
用户权限回调

演示业务系统登录、用户身份传递和权限校验回调

版本管理运行 ↗
视图操作
缩放全图

zoomExtents用法

视图操作运行 ↗
视图操作
缩放到实体

zoomToEntities用法

视图操作运行 ↗
视图操作
刷新显示

render、redraw和regen用法

视图操作运行 ↗
视图操作
预览绘制

drawPreviewEntity用法

视图操作运行 ↗
视图操作
设置视图中心

setCenter用法

视图操作运行 ↗
视图操作
背景色设置

setBgc用法

视图操作运行 ↗
视图操作
屏幕范围

getScreenBoundsWcs和getScreenEntities用法

视图操作运行 ↗
视图操作
坐标系转换

canvasToWcs、wcsToUcs、wcsToDcs用法

视图操作运行 ↗
视图操作
缩放因子

ZOOMFACTOR和currentSpace.zoom用法

视图操作运行 ↗
视图操作
UCS用户坐标系

UCS坐标系设置示例

视图操作运行 ↗
视图操作
平面视图

旋转显示图纸60度(用UCS设置,再切换为平面视图)

视图操作运行 ↗

找不到想要的?,它会从示例代码里找出最接近的写法。