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

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

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

扩展包 VJMAPEXT

在地图上绘制和编辑 CAD 实体,命令、捕捉、标注与特效。

打开示例站 ↗ GitHub 源码 更多源码请加客服微信客服微信二维码微信扫码添加客服
动画
基础旋转动画

用 animationManager.add() 添加手写回调实现旋转,演示最基础的动画驱动方式

动画运行 ↗
动画
多实体动画

使用 createTween 驱动多个实体同时执行不同动画:旋转、平移(yoyo)、缩放

动画运行 ↗
动画
路径跟随动画

小车沿弯曲道路匀速行驶,朝向对齐切线方向,返程时自动调头

动画运行 ↗
动画
缓动函数展示

多个圆球使用不同 easing 函数同时从左到右运动,可视化对比各缓动曲线效果

动画运行 ↗
动画
颜色渐变动画

使用 lerpColor 实现多个实体在不同颜色之间平滑循环渐变

动画运行 ↗
动画
雷达扫描效果(CAD叠加)

在CAD图上叠加多个渐变扇形雷达扫描,封装为 createRadar() 可复用函数

动画运行 ↗
动画
运动轨迹拖尾

多粒子沿不同参数曲线飞舞,双层发光轨迹 + 呼吸光球,支持多种曲线预设

动画运行 ↗
动画
箭头流动与指向动画

箭头线型流动网络 + 多线型对比 + 箭头实体追逐脉冲 + 旋转方向仪

动画运行 ↗
动画
脉冲扩散环

从中心向外扩散的圆环 + 淡出,多层叠加产生波纹效果

动画运行 ↗
动画
打字机效果

TextEnt 文字逐字显现,含光标闪烁,支持多行和不同速度

动画运行 ↗
动画
动画性能压测

大量实体同时执行动画,支持 100~10000 级别压测,实时 FPS 监控与多档对比

动画运行 ↗
动画
闪烁报警/呼吸灯

使用 BlinkEffect 模拟 SCADA 场景:正常/告警/故障三种设备状态指示灯

动画运行 ↗
动画
线条渐进绘制

复杂路径像被"画出来"一样逐步展开,支持不同缓动效果

动画运行 ↗
动画
弹簧物理动画

基于阻尼弹簧方程的物理动画,对比不同参数下的运动行为

动画运行 ↗
动画
关键帧序列动画

KeyframeAnimator 多维属性插值:轨道穿梭 · 缓动对比 · 呼吸脉冲

动画运行 ↗
动画
字符滚动动画

电子屏效果:横向跑马灯 + 纵向多行滚动,封装为 createHorizontalMarquee / createVerticalScroll 可复用函数

动画运行 ↗
标注
线性标注

演示使用 LinearDimEnt 标注水平和垂直距离,支持自定义精度和文字覆盖

标注运行 ↗
标注
对齐标注

演示使用 AlignedDimEnt 沿斜线方向标注实际长度,标注线平行于被标注线段

标注运行 ↗
标注
角度标注

演示使用 AngleDimEnt 标注两条相交线的夹角

标注运行 ↗
标注
半径标注

演示使用 RadialDimEnt 标注圆的半径,支持不同方向和引线长度

标注运行 ↗
标注
多重引线

演示使用 MLeaderEnt 创建多个引线标注,支持中间折点和不同方向

标注运行 ↗
标注
标注样式

展示 10 种内置箭头样式,每行一个箭头 + 名称标签

标注运行 ↗
标注
关联标注

演示所有标注类型与实体的关联关系:拖拽实体端点后,标注自动跟随更新

标注运行 ↗
基础
空白地图初始化

在空白地图上展示多种基础实体:线、圆、多段线、弧、填充、文字,快速了解绘图能力

基础运行 ↗
基础
打开CAD图

在 CAD 底图上叠加多种实体:标记区域、路径、标注,展示与底图坐标动态对齐

基础运行 ↗
基础
浏览模式

演示绘制实体后切换到浏览模式,设置 selectableInReadonly 属性

基础运行 ↗
基础
多语言与主题切换

演示 vjmapext.setLocale 切换中英文界面语言,以及浅色/深色主题切换

基础运行 ↗
命令系统
执行内置命令

演示执行内置绘图命令,并通过事件监听获取命令执行期间创建的实体

命令系统运行 ↗
命令系统
注册自定义命令

演示使用 commandRegistry.register(name, cmdClass) 注册并执行自定义命令

命令系统运行 ↗
命令系统
带预览命令

演示自定义命令中使用 previewManager 实时预览(橡皮筋线 + 实体预览)

命令系统运行 ↗
命令系统
内置命令列表

列出所有已注册的命令,支持点击执行

命令系统运行 ↗
综合示例
人员定位与数据集成

在 CAD 底图上用 SVG 块定义绘制人员和传感器标记,实现人员走动、电子围栏、轨迹回放

综合示例运行 ↗
综合示例
工程剖面图

根据模拟钻孔数据自动生成工程地质剖面图,含柱状图、地层连线、图例、标题栏

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

演示创建房屋形状并移动到新位置,用虚线残影和箭头展示移动过程

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

演示创建星形并用 clone 复制到网格位置,每个副本不同颜色

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

演示创建箭头形状并按不同角度旋转,用彩虹色展示旋转效果

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

演示创建菱形并以同一中心点按不同比例缩放,形成同心效果

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

在 CAD 底图上创建不对称 F 形,沿竖直轴镜像,展示原图与镜像对比

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

创建 4x3 彩色圆阵列,删除部分圆形成笑脸图案,删除前显示虚线幽灵轮廓

编辑操作运行 ↗
编辑操作
撤销重做

分步演示添加实体后用 undoManager 撤销和重做,每步延时可视化

编辑操作运行 ↗
编辑操作
夹点编辑

创建锯齿形多段线,获取夹点并用 gripEdit 移动部分夹点,展示编辑前后对比

编辑操作运行 ↗
实体绘制
点

演示 PointEnt 的创建方式:网格点阵、圆周排列,以及 clone + move 变换

实体绘制运行 ↗
实体绘制
直线

演示 LineEnt 的创建与属性设置:颜色、线宽、线型(DASHED/DASHDOT/DOT)

实体绘制运行 ↗
实体绘制
多段线

演示 PolylineEnt:开放/闭合折线、bulge 弧段、填充样式

实体绘制运行 ↗
实体绘制
圆弧

演示 ArcEnt 的创建:不同扫掠角度,以及顺时针/逆时针方向对比

实体绘制运行 ↗
实体绘制
圆

演示 CircleEnt 的创建与属性:不同半径、填充色/透明度、边框样式

实体绘制运行 ↗
实体绘制
填充

演示 HatchEnt:纯色填充、内外环(挖洞)、边框属性

实体绘制运行 ↗
实体绘制
填充图案

演示内置填充图案网格展示 + HatchEnt.registerPattern 注册自定义 PAT 图案

实体绘制运行 ↗
实体绘制
单行文字

演示 TextEnt:不同字号、9 种对齐方式、旋转与多色彩

实体绘制运行 ↗
实体绘制
多行文字

演示 MTextEnt:多行换行、9 种附着点、maxWidth 自动换行与行间距

实体绘制运行 ↗
实体绘制
样条曲线

演示 SplineEnt:拟合点模式(波浪/S形/闭合)与控制点模式

实体绘制运行 ↗
实体绘制
椭圆

演示 EllipseEnt:标准椭圆、旋转椭圆、扁椭圆,以及椭圆弧

实体绘制运行 ↗
实体绘制
块定义与引用

演示 BlockDef 创建块、BlockRefEnt 多位置插入(缩放/旋转)、addAttribute 属性标签

实体绘制运行 ↗
实体绘制
块管理

演示块炸开(getNestEntities)与块表 API(add/remove/itemByName/getAllItems)

实体绘制运行 ↗
实体绘制
实体变换

演示 clone/move/rotate/scale/mirror 变换,使用直线、圆、多段线三种实体统一展示

实体绘制运行 ↗
实体绘制
自定义正多边形实体

完整演示:class 继承 EntityBase、属性面板、注册到 EntityRegistry、绘制命令

实体绘制运行 ↗
实体绘制
自定义字体文字

演示 loadFont 加载远程 TTF 字体,用 TextEnt / MTextEnt 的 font 属性指定字体绘制文字

实体绘制运行 ↗
实体绘制
双线 DLINE

演示 DLineCommand(双线绘制)命令,与 createDoubleLineSegment / 各种端封口 SDK

实体绘制运行 ↗
实体绘制
云线 REVCLOUD

演示 RevcloudCommand(修订云线)命令和 generateRevcloudBulgePoints SDK 调用

实体绘制运行 ↗
事件系统
实体生命周期事件

演示 entity:added / entity:deleted / entity:modified 事件的监听、once 一次性监听、off 取消监听

事件系统运行 ↗
事件系统
鼠标交互事件

演示 entity:click / entity:dblclick / entity:mouseenter / entity:mouseleave,含悬停高亮、Popup 弹窗、取消监听

事件系统运行 ↗
事件系统
选择与框选事件

演示 selection:changed / boxselect:started / boxselect:ended 事件,含实时选中统计面板

事件系统运行 ↗
事件系统
命令与模式事件

演示 command:started / command:ended / input:started / input:ended / mode:changed 事件,含事件流时间线

事件系统运行 ↗
事件系统
拓扑联动事件

用事件系统实现节点-弧段拓扑关系:移动节点时弧段自动跟随,删除节点时级联删除关联弧段

事件系统运行 ↗
高性能特效图层
十一大点预设墙

fire / pulseRing / halo / radarSweep / smoke / lightning / meteor /

高性能特效图层运行 ↗
高性能特效图层
五大线预设 × 四套配色(共 20 条)丰富展示

flowLine / meteor / lightning / arrowFlow / dashFlow 五种动效,每种用 4 条

高性能特效图层运行 ↗
高性能特效图层
CAD 实体绑定 (bindToEntity) + Mode 感知双向显隐

FX 跟着 CAD 实体走:拖动实体 FX 自动跟随;删除实体 FX 自动消失;支持自定义 anchor

高性能特效图层运行 ↗
高性能特效图层
渲染分桶 z-order (below / above / topmost)

同一位置叠 3 个不同色 halo,分别落到 3 个 bucket,演示与底图、CAD 实体的层级关系

高性能特效图层运行 ↗
高性能特效图层
质量档位切换 lite / standard / cinematic

fire + shadertoy 同时受 setQuality 影响;按钮上挂耗时统计观察程序缓存复用

高性能特效图层运行 ↗
高性能特效图层
尺寸单位对比:map vs pixels

同一组预设(halo / pulseRing / radarSweep)分别用 sizeUnits='map' 与 'pixels' 各画一行

高性能特效图层运行 ↗
高性能特效图层
自定义 Shadertoy 片元着色器

5 个内置 mainImage 片段切换 + 分辨率调节 + addShadertoy 错误捕获演示

高性能特效图层运行 ↗
高性能特效图层
事件 + 实时仪表盘

fx.on('render'|'empty'|'overflow'|'compact') + fx.getMetrics()

高性能特效图层运行 ↗
高性能特效图层
万级点压测

1k / 5k / 10k / 20k / 50k 点 × 6 种预设;FPS / 帧均 / 帧峰 / addPoints 批次 / setPointData 单条

高性能特效图层运行 ↗
高性能特效图层
综合工业场景 (增强版 14 种 FX 组合)

6 基础组合: 管道流光 + 阀门 halo + 故障 lightning + 烟囱 smoke + 雷达 sweep + 告警 meteor 飞轨

高性能特效图层运行 ↗
高性能特效图层
互联网底图 (天地图夜视风) + FX 全国放射飞线

通过 raster-inverse + raster-monochrome 把天地图栅格瓦片染成深蓝夜视底图,

高性能特效图层运行 ↗
高性能特效图层
粘贴 Shadertoy 代码自定义点 / 线

一段 textarea 同时驱动「添加点」与「添加线」两条命令;

高性能特效图层运行 ↗
高性能特效图层
Shadertoy 综合示例(colorKey / luma boost)

11 个 Shadertoy 预设(4 个原创 + 7 个移植自 vjmap3d shaderToyTexture):

高性能特效图层运行 ↗
高性能特效图层
Shadertoy 全屏特效(fx.addShadertoyFullscreen)+ CAD 底图

全屏 NDC quad 渲染,不跟随地图变换;底层叠加 CAD 图与文字标注:

高性能特效图层运行 ↗
高性能特效图层
Symbol Shader 图标(mapcadLayer.fx.symbolImage)

把任意 GLSL / Shadertoy 代码渲染成 Symbol 图标,

高性能特效图层运行 ↗
高性能特效图层
Symbol Shader 烟雾 + 聚合 (mushroom-cloud raymarch)

演示用 *单段* Shadertoy 烟雾着色器驱动 *大量* Symbol 图标 +

高性能特效图层运行 ↗
高性能特效图层
新增 8 大特效综合展示

4 个点预设:vortex / shield / firework / crosshair

高性能特效图层运行 ↗
高性能特效图层
互联网底图 (天地图夜视风) + FX 北京局部 5-POI 全特效

这是 11webFx 的"局部紧凑版"。把镜头拉到北京二环里, 5 个真实地标各自配

高性能特效图层运行 ↗
几何计算
距离与中点计算

用 Point2D 的 distanceTo / add / subtract 计算距离,用线段和文字标注

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

演示 Point2D 的 rotateAround / scaleFrom / mirrorAcross 变换

几何计算运行 ↗
几何计算
空间查询

创建多个随机实体,用 store.spatialIndex.search(bbox) 查询范围内实体并高亮

几何计算运行 ↗
几何计算
坐标映射

演示 vjmap 的 map.toLngLat / map.fromLngLat 坐标互转,以及 prj 的墨卡托和米制换算

几何计算运行 ↗
几何计算
几何构造

用 Point2D 的 rotateAround / scaleFrom / add / subtract 构造正多边形、星形、螺旋线、齿轮

几何计算运行 ↗
输入交互
获取点

演示用 inputManager.getPoint() 获取用户点击的点,在该位置画圆并标注坐标

输入交互运行 ↗
输入交互
获取选择集

演示用 inputManager.getEntity() 和 getSelections() 获取用户选择的实体

输入交互运行 ↗
输入交互
获取数值

演示用 inputManager.getReal()/getInteger()/getString() 获取用户输入的数值和文字

输入交互运行 ↗
输入交互
获取关键字

演示用 inputManager.getKeyword() 让用户从选项中选择,根据选择绘制不同图形

输入交互运行 ↗
图层
图层管理与可见性

演示 layerId 分层、按图层切换可见性、图层实体统计,配合 renderPipeline 隐藏图层

图层运行 ↗
图层
图层样式与默认图层

演示按图层批量修改颜色/线宽、切换默认绘图图层、图层实体高亮定位

图层运行 ↗
线型
内置线型展示

展示 14 种内置线型,每条水平线使用不同线型并标注名称

线型运行 ↗
线型
自定义线型

使用 loadFromLin 解析 .lin 格式字符串注册自定义线型

线型运行 ↗
线型
线型比例

同一线型 DASHED 设置不同 ltScale 展示比例效果

线型运行 ↗
线型
复杂线型

展示带形状的复杂线型(箭头、十字、栅栏等),设置不同 ltScale

线型运行 ↗
CAD图纸联动
条件查询文字并动画

通过 conditionQueryFeature 在后端查出 CAD 图中的文字实体(AcDbText / AcDbMText),

CAD图纸联动运行 ↗
CAD图纸联动
按图层批量查线并加特效

通过 queryMapEntitiesByLayer 按图层名(默认 "道路")一次拉回所有线实体,

CAD图纸联动运行 ↗
CAD图纸联动
导出 DWG 时删除原图隐藏实体 + onBeforeUpdate 水印

场景:通过 MapEntityHider 隐藏了原图里的若干实体(例如让 SDK 用新样式重绘),

CAD图纸联动运行 ↗
CAD图纸联动
查询全部实体并转 SDK 显示(用来验证 feature → entity 转换是否正确)

思路:

CAD图纸联动运行 ↗
插件
基础插件

使用正式 Plugin 接口(manifest + onLoad/onActivate/onDeactivate),通过 loadPlugin 注册

插件运行 ↗
插件
插件生命周期

演示插件完整生命周期: onLoad → onActivate → 运行中(事件监听) → onDeactivate,含状态面板

插件运行 ↗
属性
基本属性

全面展示实体的 color、lineWidth、lineType、ltScale、layerId、visible、opacity 等基本属性

属性运行 ↗
属性
自定义属性

演示 setCustomProperty / getCustomProperty / getAllCustomProperties 以及属性面板中的自定义属性编辑

属性运行 ↗
属性
显示级别

演示 minDisplayLevel / maxDisplayLevel 控制实体在不同缩放级别的可见性(浏览模式下生效)

属性运行 ↗
属性
可选与可编辑

演示 editable / visible / selectableInReadonly 属性控制实体的交互行为

属性运行 ↗
属性
发光特效

演示 effectColor/effectWidth/effectOpacity/effectBlur 对各类实体的发光效果

属性运行 ↗
序列化
导入导出与JSON预览

演示 toJSON/fromJSON 完整序列化闭环,支持导出预览、清空、导入恢复,含自定义属性验证

序列化运行 ↗
序列化
绘图默认值

演示 DrawingDefaults 的 toJSON/fromJSON/applyTo,以及通过 mapcadLayer.setDrawingDefaults 全局切换

序列化运行 ↗
序列化
导出DWG

演示 MapCadLayer.exportDwg:将当前图中各类实体转成 vjmap.DbXxx 并通过服务生成 DWG 图形。

序列化运行 ↗
对象捕捉
捕捉模式与配置

演示全部 SnapMode 位标志、getSnapModeList、启用禁用、半径调节、模式组合切换

对象捕捉运行 ↗
对象捕捉
捕捉辅助绘制

注册自定义绘线命令,配合 SnapManager 演示捕捉点反馈和临时捕捉点

对象捕捉运行 ↗
SVG导入
SVG导入与解析选项

演示 svgToEntities 解析 SVG 字符串为实体,对比 SvgParseOptions 中 flipY/enableFill/tolerance/defaultColor 效果

SVG导入运行 ↗
SVG导入
SVG转块引用

演示 createBlockDefFromSvg 创建块定义、createBlockRefFromSvg 插入多个块引用(不同位置/缩放/旋转)

SVG导入运行 ↗
UI组件
自定义工具栏

演示通过 toolbar.addGroup / toolbar.addItem 添加自定义按钮组,以及按钮的各种配置

UI组件运行 ↗
UI组件
主题切换

演示 createUI 的 theme 参数以及运行时通过 themeManager 切换暗色/亮色主题

UI组件运行 ↗
UI组件
绘图选项面板

演示绘图默认值(DrawingDefaults)的读取和修改,以及绘图选项面板的显隐控制

UI组件运行 ↗
UI组件
面板显隐

演示工具栏、属性面板、命令输入框、绘图选项面板的独立显隐控制

UI组件运行 ↗
UI组件
UI管理器

全面展示 ToolbarManager (createUI 返回值) 的所有公开方法和 toolbar 对象的操作

UI组件运行 ↗
UI组件
编辑浏览模式切换

演示 setMode / getMode / toggleMode 以及模式切换对实体交互行为的影响

UI组件运行 ↗
UI组件
工具栏配置

演示工具栏方向、行数、位置、按钮组显隐、属性面板位置与折叠/固定等配置

UI组件运行 ↗
UI组件
快捷键设置

演示快捷键的查看、修改、禁用、自定义,以及"重复上个命令"功能

UI组件运行 ↗
互联网地图
天地图(互联网地图)

在天地图栅格底图上叠加 MapCadLayer 实体。

互联网地图运行 ↗
互联网地图
高德地图(GCJ02 坐标系)

在高德路网栅格底图上叠加 MapCadLayer 实体。

互联网地图运行 ↗

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