1453 个在线示例,打开就能跑
覆盖 2D 图纸、CAD 绘图扩展、三维、WebCAD 与 AI 可视化。每个示例都附完整源码,可在示例站在线修改运行,源码也已开源在 GitHub · vjmap-playground,更多源码请加客服微信。
用 animationManager.add() 添加手写回调实现旋转,演示最基础的动画驱动方式
动画运行 ↗使用 createTween 驱动多个实体同时执行不同动画:旋转、平移(yoyo)、缩放
动画运行 ↗小车沿弯曲道路匀速行驶,朝向对齐切线方向,返程时自动调头
动画运行 ↗多个圆球使用不同 easing 函数同时从左到右运动,可视化对比各缓动曲线效果
动画运行 ↗使用 lerpColor 实现多个实体在不同颜色之间平滑循环渐变
动画运行 ↗在CAD图上叠加多个渐变扇形雷达扫描,封装为 createRadar() 可复用函数
动画运行 ↗多粒子沿不同参数曲线飞舞,双层发光轨迹 + 呼吸光球,支持多种曲线预设
动画运行 ↗箭头线型流动网络 + 多线型对比 + 箭头实体追逐脉冲 + 旋转方向仪
动画运行 ↗从中心向外扩散的圆环 + 淡出,多层叠加产生波纹效果
动画运行 ↗TextEnt 文字逐字显现,含光标闪烁,支持多行和不同速度
动画运行 ↗大量实体同时执行动画,支持 100~10000 级别压测,实时 FPS 监控与多档对比
动画运行 ↗使用 BlinkEffect 模拟 SCADA 场景:正常/告警/故障三种设备状态指示灯
动画运行 ↗复杂路径像被"画出来"一样逐步展开,支持不同缓动效果
动画运行 ↗基于阻尼弹簧方程的物理动画,对比不同参数下的运动行为
动画运行 ↗KeyframeAnimator 多维属性插值:轨道穿梭 · 缓动对比 · 呼吸脉冲
动画运行 ↗电子屏效果:横向跑马灯 + 纵向多行滚动,封装为 createHorizontalMarquee / createVerticalScroll 可复用函数
动画运行 ↗演示使用 LinearDimEnt 标注水平和垂直距离,支持自定义精度和文字覆盖
标注运行 ↗演示使用 AlignedDimEnt 沿斜线方向标注实际长度,标注线平行于被标注线段
标注运行 ↗演示使用 AngleDimEnt 标注两条相交线的夹角
标注运行 ↗演示使用 RadialDimEnt 标注圆的半径,支持不同方向和引线长度
标注运行 ↗演示使用 MLeaderEnt 创建多个引线标注,支持中间折点和不同方向
标注运行 ↗展示 10 种内置箭头样式,每行一个箭头 + 名称标签
标注运行 ↗演示所有标注类型与实体的关联关系:拖拽实体端点后,标注自动跟随更新
标注运行 ↗在空白地图上展示多种基础实体:线、圆、多段线、弧、填充、文字,快速了解绘图能力
基础运行 ↗在 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 属性指定字体绘制文字
实体绘制运行 ↗演示 DLineCommand(双线绘制)命令,与 createDoubleLineSegment / 各种端封口 SDK
实体绘制运行 ↗演示 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 /
高性能特效图层运行 ↗flowLine / meteor / lightning / arrowFlow / dashFlow 五种动效,每种用 4 条
高性能特效图层运行 ↗FX 跟着 CAD 实体走:拖动实体 FX 自动跟随;删除实体 FX 自动消失;支持自定义 anchor
高性能特效图层运行 ↗同一位置叠 3 个不同色 halo,分别落到 3 个 bucket,演示与底图、CAD 实体的层级关系
高性能特效图层运行 ↗fire + shadertoy 同时受 setQuality 影响;按钮上挂耗时统计观察程序缓存复用
高性能特效图层运行 ↗同一组预设(halo / pulseRing / radarSweep)分别用 sizeUnits='map' 与 'pixels' 各画一行
高性能特效图层运行 ↗5 个内置 mainImage 片段切换 + 分辨率调节 + addShadertoy 错误捕获演示
高性能特效图层运行 ↗fx.on('render'|'empty'|'overflow'|'compact') + fx.getMetrics()
高性能特效图层运行 ↗1k / 5k / 10k / 20k / 50k 点 × 6 种预设;FPS / 帧均 / 帧峰 / addPoints 批次 / setPointData 单条
高性能特效图层运行 ↗6 基础组合: 管道流光 + 阀门 halo + 故障 lightning + 烟囱 smoke + 雷达 sweep + 告警 meteor 飞轨
高性能特效图层运行 ↗通过 raster-inverse + raster-monochrome 把天地图栅格瓦片染成深蓝夜视底图,
高性能特效图层运行 ↗一段 textarea 同时驱动「添加点」与「添加线」两条命令;
高性能特效图层运行 ↗11 个 Shadertoy 预设(4 个原创 + 7 个移植自 vjmap3d shaderToyTexture):
高性能特效图层运行 ↗全屏 NDC quad 渲染,不跟随地图变换;底层叠加 CAD 图与文字标注:
高性能特效图层运行 ↗把任意 GLSL / Shadertoy 代码渲染成 Symbol 图标,
高性能特效图层运行 ↗演示用 *单段* Shadertoy 烟雾着色器驱动 *大量* Symbol 图标 +
高性能特效图层运行 ↗4 个点预设:vortex / shield / firework / crosshair
高性能特效图层运行 ↗这是 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
线型运行 ↗通过 conditionQueryFeature 在后端查出 CAD 图中的文字实体(AcDbText / AcDbMText),
CAD图纸联动运行 ↗通过 queryMapEntitiesByLayer 按图层名(默认 "道路")一次拉回所有线实体,
CAD图纸联动运行 ↗场景:通过 MapEntityHider 隐藏了原图里的若干实体(例如让 SDK 用新样式重绘),
CAD图纸联动运行 ↗思路:
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 对各类实体的发光效果
属性运行 ↗演示 toJSON/fromJSON 完整序列化闭环,支持导出预览、清空、导入恢复,含自定义属性验证
序列化运行 ↗演示 DrawingDefaults 的 toJSON/fromJSON/applyTo,以及通过 mapcadLayer.setDrawingDefaults 全局切换
序列化运行 ↗演示 MapCadLayer.exportDwg:将当前图中各类实体转成 vjmap.DbXxx 并通过服务生成 DWG 图形。
序列化运行 ↗演示全部 SnapMode 位标志、getSnapModeList、启用禁用、半径调节、模式组合切换
对象捕捉运行 ↗注册自定义绘线命令,配合 SnapManager 演示捕捉点反馈和临时捕捉点
对象捕捉运行 ↗演示 svgToEntities 解析 SVG 字符串为实体,对比 SvgParseOptions 中 flipY/enableFill/tolerance/defaultColor 效果
SVG导入运行 ↗演示 createBlockDefFromSvg 创建块定义、createBlockRefFromSvg 插入多个块引用(不同位置/缩放/旋转)
SVG导入运行 ↗演示通过 toolbar.addGroup / toolbar.addItem 添加自定义按钮组,以及按钮的各种配置
UI组件运行 ↗演示 createUI 的 theme 参数以及运行时通过 themeManager 切换暗色/亮色主题
UI组件运行 ↗演示绘图默认值(DrawingDefaults)的读取和修改,以及绘图选项面板的显隐控制
UI组件运行 ↗演示工具栏、属性面板、命令输入框、绘图选项面板的独立显隐控制
UI组件运行 ↗全面展示 ToolbarManager (createUI 返回值) 的所有公开方法和 toolbar 对象的操作
UI组件运行 ↗演示 setMode / getMode / toggleMode 以及模式切换对实体交互行为的影响
UI组件运行 ↗演示工具栏方向、行数、位置、按钮组显隐、属性面板位置与折叠/固定等配置
UI组件运行 ↗演示快捷键的查看、修改、禁用、自定义,以及"重复上个命令"功能
UI组件运行 ↗在天地图栅格底图上叠加 MapCadLayer 实体。
互联网地图运行 ↗在高德路网栅格底图上叠加 MapCadLayer 实体。
互联网地图运行 ↗没有匹配的示例。
找不到想要的?,它会从示例代码里找出最接近的写法。
微信扫码添加客服