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

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

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

AI 可视化平台

大屏与看板 SDK:组件、数据、事件、地图、组态与三维。

打开示例站 ↗ GitHub 源码 更多源码请加客服微信客服微信二维码微信扫码添加客服
地理空白底图
地理空白底图

geographic + basemap blank,用按钮改中心、缩放、俯仰与背景色(地图、map-body、地理、空白底图、相机、离线)

2D 地图运行 ↗
CAD 空白与参考格网
CAD 空白与参考格网

cad-map-mode blank + cad-blank-bounds + grid-display,按钮开关格网(地图、CAD、空白、格网、map-body、离线)

2D 地图运行 ↗
内置四角控件
内置四角控件

map-body 的 scale/zoom/compass/fullscreen/mouseposition/minimap/draw,按钮切换指南针与鹰眼(地图、内置控件、比例尺、缩放、指南针、鹰眼、绘图、需联网)

2D 地图运行 ↗
视角预设与相机句柄
视角预设与相机句柄

perspectives 书签 + flyTo/fitData/fitWhole/setZoom/clearSelection(地图、相机、flyTo、fitData、perspectives、需联网)

2D 地图运行 ↗
GeoJSON 静态源一源三层
GeoJSON 静态源一源三层

map-source-geojson 同时驱动点/线/面,listSources 枚举(地图、GeoJSON、数据源、一源多层、需联网)

2D 地图运行 ↗
数据源运行时 setData
数据源运行时 setData

getSource.setData/hide/show/refresh 与地图级 setSourceData,全程按钮触发(地图、数据源、setData、refresh、需联网)

2D 地图运行 ↗
动态 Mock 数据源
动态 Mock 数据源

map-source-dynamic 的 use-mock + mock-data,按钮 setData 换一批点位(地图、动态源、mock、map-source-dynamic、需联网)

2D 地图运行 ↗
图形绘制源
图形绘制源

map-source-draw 预填 draw-features,打开绘图控件后可继续画(地图、绘制源、map-source-draw、需联网)

2D 地图运行 ↗
地图源发布到列表
地图源发布到列表

source-publish 生成 __vp_map_<uid> 连接,列表点行 flyTo(地图、源发布、列表、flyTo、需联网)

2D 地图运行 ↗
字段绑定点与折线
字段绑定点与折线

bind-fields 把台账表 lng/lat 直接驱 map-symbol 与 map-polyline(地图、bind-fields、台账、符号、折线、需联网)

2D 地图运行 ↗
入站推点刷新地图
入站推点刷新地图

按钮 ctx.setData 改台账,bind-fields 圆点跟着动(地图、入站、setData、bind-fields、需联网)

2D 地图运行 ↗
属性过滤与字段取色
属性过滤与字段取色

filter-expr 分流两层,point-color-mode field + stops 按 level 上色(地图、filter-expr、数据驱动样式、四色、需联网)

2D 地图运行 ↗
map-marker DOM 标记
map-marker DOM 标记

园区 10 个设施点用 DOM 水滴标记 + 名称标签,深色影像上一眼定位(地图、map-marker、图层、DOM标记、园区、需联网)

2D 地图运行 ↗
map-circle 圆点
map-circle 圆点

WebGL 圆点按 value 取色取半径,circle-blur 做辉光,深色影像上像发光测点(地图、map-circle、图层、WebGL圆点、字段取色、需联网)

2D 地图运行 ↗
map-symbol 符号点
map-symbol 符号点

符号点 16px + 图标光晕 + 带 halo 的名称,大数据量点位的批量画法(地图、map-symbol、图层、符号点、图标光晕、需联网)

2D 地图运行 ↗
map-text 文本标注
map-text 文本标注

分区名称/数值标注,halo 描边保证深色影像上可读,按钮切名称与数值(地图、map-text、图层、文本标注、halo、需联网)

2D 地图运行 ↗
map-cluster 圆点聚合
map-cluster 圆点聚合

620 个热点按密度聚合成三档彩色气泡,计数居中,缩放到底展开散点(地图、map-cluster、图层、聚合、密度、需联网)

2D 地图运行 ↗
map-marker-cluster 标记聚合
map-marker-cluster 标记聚合

DOM 标记按网格聚合,260 点合成计数气泡,按钮切网格粒度(地图、map-marker-cluster、图层、聚合、DOM标记、需联网)

2D 地图运行 ↗
map-symbol-cluster 符号聚合
map-symbol-cluster 符号聚合

WebGL 符号 + 聚合气泡,620 点仍然流畅,气泡带白描边与计数(地图、map-symbol-cluster、图层、聚合、符号点、需联网)

2D 地图运行 ↗
map-effect-marker 特效标记
map-effect-marker 特效标记

呼吸光圈标记罩住关键设施,双色渐变 + 名称,告警点一眼可见(地图、map-effect-marker、图层、特效标记、呼吸光圈、需联网)

2D 地图运行 ↗
map-polyline 折线
map-polyline 折线

管网干线按负载取色,6px 圆头线 + 暗色外发光衬底,节点带名称(地图、map-polyline、图层、折线、字段取色、管网、需联网)

2D 地图运行 ↗
map-curve 平滑曲线
map-curve 平滑曲线

同一批折点用张力插值成平滑曲线,按钮把张力归零可直接对比折线(地图、map-curve、图层、曲线、张力插值、需联网)

2D 地图运行 ↗
map-arrowline 箭头线
map-arrowline 箭头线

干线上按间距铺静态箭头指示流向,按钮切箭头疏密(地图、map-arrowline、图层、箭头线、流向、需联网)

2D 地图运行 ↗
map-flyline 飞线
map-flyline 飞线

全国 10 条干线 OD 弧线,线宽按运量取值,按钮在弧线与直线间切换(地图、map-flyline、图层、飞线、OD、全国、需联网)

2D 地图运行 ↗
map-animate-line 流动线
map-animate-line 流动线

干线上跑流光虚线,暗色轨道打底,按钮切快慢(地图、map-animate-line、图层、流动线、流光、需联网)

2D 地图运行 ↗
map-path-animate 路径动画
map-path-animate 路径动画

5 个发光圆点沿管网巡游,路径本身留一条暗轨,按钮切点数(地图、map-path-animate、图层、路径动画、巡游、需联网)

2D 地图运行 ↗
map-symbol-path-animate 符号沿路径
map-symbol-path-animate 符号沿路径

4 个箭头符号沿管网移动并自动转向,按钮切符号个数(地图、map-symbol-path-animate、图层、符号动画、巡检、需联网)

2D 地图运行 ↗
map-line-extrusion 立体线
map-line-extrusion 立体线

管网拉成发光光墙,俯仰 58° 观察,按钮切墙高(地图、map-line-extrusion、图层、立体线、光墙、三维、需联网)

2D 地图运行 ↗
map-polygon 多边形
map-polygon 多边形

六个园区分区按 value 分色填充,白描边勾边,分区名居中标注(地图、map-polygon、图层、多边形、字段取色、需联网)

2D 地图运行 ↗
map-region 区域填色
map-region 区域填色

同一批分区改走色带聚合填色,六段 ramp 自动分档,右侧图例同源(地图、map-region、图层、区域填色、色带、需联网)

2D 地图运行 ↗
map-geojson 综合点线面
map-geojson 综合点线面

一个图层同时画分区面、道路线和设施点,混合几何一把梭(地图、map-geojson、图层、综合几何、点线面、需联网)

2D 地图运行 ↗
map-geocircle 地理圆
map-geocircle 地理圆

以设施为圆心按负载画真实地理半径的影响圈,按钮切半径系数(地图、map-geocircle、图层、地理圆、影响范围、需联网)

2D 地图运行 ↗
map-heatmap 热力图
map-heatmap 热力图

620 个加权热点铺成连续热力面,火焰色带,按钮切色带(地图、map-heatmap、图层、热力图、密度、需联网)

2D 地图运行 ↗
map-fill-extrusion 立体面
map-fill-extrusion 立体面

分区按 value 拉成高低不同的发光体块,垂直渐变 + 俯仰 58°(地图、map-fill-extrusion、图层、立体面、三维、体块、需联网)

2D 地图运行 ↗
map-bar3d 三维柱
map-bar3d 三维柱

设施点长成三维柱,高度与颜色都跟 value 走,俯仰 58° 看柱阵(地图、map-bar3d、图层、三维柱、三维、需联网)

2D 地图运行 ↗
map-animate-fill 呼吸面
map-animate-fill 呼吸面

分区填充在 18%~72% 之间呼吸,勾边常亮,按钮切呼吸快慢(地图、map-animate-fill、图层、呼吸面、动画、需联网)

2D 地图运行 ↗
map-fill-extrusion-animate 生长立体面
map-fill-extrusion-animate 生长立体面

分区体块在 0~620 米之间往复生长,垂直渐变 + 俯仰 58°(地图、map-fill-extrusion-animate、图层、生长立体面、三维、动画、需联网)

2D 地图运行 ↗
map-animate-symbol 跳动符号
map-animate-symbol 跳动符号

设施符号持续缩放跳动,带名称标签,按钮切跳动幅度(地图、map-animate-symbol、图层、跳动符号、动画、需联网)

2D 地图运行 ↗
map-popup 信息窗
map-popup 信息窗

设施点常驻信息窗,标题取名称、正文取负载,配色与大屏统一(地图、map-popup、图层、信息窗、popup、需联网)

2D 地图运行 ↗
map-divoverlay DIV 覆盖物
map-divoverlay DIV 覆盖物

每个设施贴一张自定义 HTML 卡片,属性用 ${name} 插值(地图、map-divoverlay、图层、DIV覆盖物、自定义HTML、需联网)

2D 地图运行 ↗
map-svgoverlay SVG 覆盖
map-svgoverlay SVG 覆盖

内联 SVG 光环贴到园区中心的经纬度矩形上,随地图一起缩放(地图、map-svgoverlay、图层、SVG覆盖、矢量贴图、需联网)

2D 地图运行 ↗
画布天空背景与贴图
画布天空背景与贴图

map-background / map-sky / map-canvas / map-image 四种环境层叠在深色影像上,俯仰 62° 看天际线(地图、map-background、map-sky、map-canvas、map-image、环境层、需联网)

2D 地图运行 ↗
点特效预设墙精选
点特效预设墙

11 种 GPU 点特效在深色影像上按网格铺开,每格带名称标注,按钮切质量档(地图、特效、fx、GPU着色器、预设墙、需联网)

2D 地图运行 ↗
线特效预设墙
线特效预设墙

5 种 GPU 线特效逐行铺开,暗色基线打底,按钮切流速与线宽(地图、特效、fx线、flowline、预设墙、需联网)

2D 地图运行 ↗
特效图标与着色器
特效图标与着色器

map-fx-symbol 离屏图标 + shadertoy 点/线/全屏,GLSL 全部内联不打外网(地图、shadertoy、fx-symbol、着色器、需联网)

2D 地图运行 ↗
导航类地图控件
导航类地图控件

独立组件 coordinate/scale/zoom/compass,target-map 绑定同一张图(地图、map-control、坐标、比例尺、缩放、指南针、需联网)

2D 地图运行 ↗
视角鹰眼与测量控件
视角鹰眼与测量控件

map-control-view / overview / measure(地图、map-control、视角、鹰眼、测量、需联网)

2D 地图运行 ↗
图层图例与导出控件
图层图例与导出控件

map-control-layers / legend / export(地图、map-control、图层管理、图例、导出、需联网)

2D 地图运行 ↗
底图与 CAD 图层控件
底图与 CAD 图层控件

sys_zp 图纸上挂 cad-layers;底图控件列出高德/OSM/天地图(地图、map-control、底图、CAD图层、sys_zp、需联网)

2D 地图运行 ↗
marker-click 按图层分流
marker-click 按图层分流

同一交互里 actions[] + triggerTarget 区分告警/正常层(地图、交互、marker-click、triggerTarget、需联网)

2D 地图运行 ↗
区域点击锚定窗
区域点击锚定窗

region-click + feature-panel-uid 打开跟随要素的窗口(地图、region-click、feature-panel、窗口、需联网)

2D 地图运行 ↗
运行态右键菜单
运行态右键菜单

contextmenu-items + map-menu-item 分流动作(地图、右键菜单、map-menu-item、需联网)

2D 地图运行 ↗
表格选点飞行并开窗
表格选点飞行并开窗

表格选行 flyTo 开窗;地图 marker-click 回写日志,形成双向联动(地图、表格、选择、flyTo、窗口、地图锚定、marker-click、需联网)

2D 地图运行 ↗
地图动作相机与图层
地图动作相机与图层

按钮用 mapZoom/mapPanBy/mapResetNorth/mapOrientation/mapLayerVisible/mapSetLayerStyle/mapStop(地图、交互动作、mapZoom、mapPanBy、图层样式、需联网)

2D 地图运行 ↗
服务瓦片与影像图层
服务瓦片与影像图层

高德底图上叠 OSM XYZ,按钮开关 OGC WMS;query/mapcad 结构仍可枚举(地图、WMS、瓦片、OSM、服务图层、需联网)

2D 地图运行 ↗
风险四色指挥图精选
风险四色指挥图

本地 GeoJSON 构建不规则风险分区、企业点、应急路径与 pulse/fire/halo 告警特效,右侧呈现统计图例、色带控件和事件清单(地图、GIS、风险四色、GeoJSON、企业点、pulse、fire、halo、需联网)

2D 地图运行 ↗
CAD 图纸 sys_zp精选
CAD 图纸 sys_zp

uploaded + mapid sys_zp 打开 vjmap 演示图纸,按钮全图适配 / 切 raster↔vector(地图、sys_zp、CAD、uploaded、需联网)

2D 地图运行 ↗
互联网底图切换精选
互联网底图切换

geographic 下用 mapSwitchBasemap 在高德矢量/影像、OSM、天地图之间切换(地图、basemap、高德、天地图、OSM、需联网)

2D 地图运行 ↗
CAD 查询源一源三层
CAD 查询源一源三层

sys_zp + map-source-query 同时驱动折线/圆点/标记,对照 data 04-CAD一源三层(地图、sys_zp、map-source-query、一源三层、需联网)

2D 地图运行 ↗
WMS 叠加栅格图形
WMS 叠加栅格图形

CAD sys_hello 底图上 WMS direct 叠 sys_world(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
WMS 叠加矢量图形
WMS 叠加矢量图形

空白 CAD 上 WMS direct 两图,m1 带四参数偏移(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
WMS 多图坐标系随图变
WMS 多图坐标系随图变

空白 CAD 上 direct 叠 hello/world/topo(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
WMS 多图坐标系不变
WMS 多图坐标系不变

多图同坐标系 direct 叠加(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
WMS 图形排列组合
WMS 图形排列组合

ov-mode arrange 宫格,含 sys_zp(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
WMTS union 无底图
WMTS union 无底图

空白 CAD 上 WMTS union 自动对齐(地图、叠加、map-wmts、需联网)

2D 地图运行 ↗
WMTS union 先有底图
WMTS union 先有底图

sys_world 底图 + union 叠加 hello/topo(地图、叠加、map-wmts、需联网)

2D 地图运行 ↗
WMTS clip-mode base
WMTS clip-mode base

先有底图且坐标系不变(地图、叠加、map-wmts、需联网)

2D 地图运行 ↗
公共点叠加互联网图形
公共点叠加互联网图形

天地图底图 + WMS param 公共点(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
互联网底图叠加多张 CAD
互联网底图叠加多张 CAD

高德影像 + WMS auto 多 CAD(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
互联网旋转叠加至 CAD精选
互联网旋转叠加至 CAD

sys_zp 为底,高德路网四参数 ov-as-base + clip-zoom 8(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
CAD 旋转叠加至互联网
CAD 旋转叠加至互联网

天地图底图 + sys_zp 公共点 param(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
多 CAD 旋转叠加至互联网
多 CAD 旋转叠加至互联网

天地图 + 两张 sys_zp param(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
天地图为底 CAD auto 叠加
天地图为底 CAD auto 叠加

对照 data 14,WMS auto sys_cad2000(地图、叠加、map-wms、需联网)

2D 地图运行 ↗
叠加图上点选 CAD 实体
叠加图上点选 CAD 实体

天地图 + param 叠 sys_webwms,预览点击选实体(地图、叠加、map-wms、点选、需联网)

2D 地图运行 ↗
CAD 测绘控件工作台
CAD 测绘控件工作台

sys_zp 上独立放置测量/坐标/导出/鹰眼/视角控件,对照地图控件示例 06(地图、map-control、测量、导出、sys_zp、需联网)

2D 地图运行 ↗
地图动作底图与数据源
地图动作底图与数据源

补 mapSwitchBasemap / mapSwitchMap / mapSourceVisible / mapRefreshData / mapFitWhole(地图、mapSwitchBasemap、mapSwitchMap、mapSourceVisible、mapRefreshData、需联网)

2D 地图运行 ↗
地图生命周期与悬停事件
地图生命周期与悬停事件

map-ready / map-hover / map-dblclick / map-view-change / map-source-loaded 写回状态栏(地图、map-ready、map-hover、map-dblclick、map-view-change、map-source-loaded、需联网)

2D 地图运行 ↗
按缩放驱动线宽与点半径
按缩放驱动线宽与点半径

line-width-mode/point-radius-mode = zoom,滚轮放大线变粗、点变大(地图、数据驱动样式、zoom、需联网)

2D 地图运行 ↗
DOM 标记嵌入窗口
DOM 标记嵌入窗口

map-marker marker-embed-source=window,每个点克隆窗口卡片并绑定本行字段(地图、map-marker、嵌入窗口、需联网)

2D 地图运行 ↗
2D 地图精选
取出 vjmap.Map

句柄 raw 逃生舱拿到引擎 Map / vjmapModule,用原生 SDK 加点、听点击、easeTo(地图、逃生舱、vjmap、Map、原生SDK、离线)

2D 地图运行 ↗

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