---
title: AI 可视化平台
source: https://vjmap.com/guide/visual/README.html
---

---
group: 入门
description: 唯杰 AI 可视化平台是什么、能做什么、怎么开始，以及全部使用文档的导航。
---

# AI 可视化平台

唯杰 AI 可视化平台是一个在浏览器里搭数据大屏的编辑器：从组件库拖出图表、表格、地图、三维场景和组态画板，接上数据、配好交互，发布后得到一个运行态链接，可以直接投屏，也可以嵌进自己的业务系统。编辑器和运行态用的是同一套渲染，编辑时看到什么，发布后就是什么；右下角内置 AI 助手，一句话就能搭出整页，也能接着对话逐步修改。

![综合示例：三维场景、组态工艺图和图表在同一块大屏上联动](./images/overview-heating.webp)

上图是访客工作区里的示例工程「综合工程-智慧供热能源站三维组态联控」：中间上方是三维场景，下方是组态工艺流程，两侧是实时数据卡片、趋势图和告警表，点三维设备或组态图元都能弹出设备档案。

## 能做什么

- **大屏与看板**：组件库里有 81 个内置组件，分布局、图表、表格、文本、控件、媒体、时间、指标、小组件等类别，深色、浅色两套风格；常用的组件可以存进资产库，跨工程复用。
- **二维地图**：用唯杰地图服务的 CAD 图纸，或天地图、高德等互联网地图做底图，叠加点、线、面、热力、标注、三维柱等图层，配比例尺、鹰眼、测量、图层管理等地图控件。
- **三维场景**：地面、几何体、模型、管道、飞线、光柱和标签，金属、全息、流光等材质，灯光阴影和自动环绕巡航，测点数据驱动颜色和液位。
- **组态**：泵、阀、罐、换热器、仪表等工业图元，用立体管道连起来，按测点数值显示运行状态、液位和流动方向。
- **数据**：JSON、CSV、Excel 文件，HTTP 接口、WebSocket、Webhook、PostMessage，模拟数据，以及平台自带的数据表；字段点选即绑定，数据一变组件跟着变。
- **交互**：点击跳页、打开弹窗、联动筛选、切换组件状态等「触发器 → 动作」规则，不用写代码。
- **屏幕适配**：固定大屏等比铺满不变形，竖屏长卷、超宽条屏，也可以按百分比或流式布局随窗口自适应，同一工程可分别调整大、中、小三档屏幕。
- **AI 助手**：在编辑器里直接对话，让 AI 搭页面、改样式、接数据；也可以通过 MCP 让 Cursor、Claude Code 等外部 AI 工具查文档、操作页面。
- **发布与嵌入**：一键发布得到运行态链接，直接打开或投屏；也可以导出静态运行包离线部署，或导出二次开发工程包，用 SDK 接进自己的系统。

下面几张截图都来自访客工作区里的示例工程，进入平台后可以直接打开查看完整做法。

**数据看板**：「样板工程·城市智慧水务调度平台」，顶部一排导航切换十个页面，KPI 卡片和管网压力曲线由模拟数据每隔几秒刷新。

![城市智慧水务调度平台：KPI 卡片、实时曲线与事件表](./images/overview-water.webp)

**CAD 图纸**：「复杂示例·CAD图纸指挥大屏」，中间是唯杰地图服务里的 CAD 图纸，图纸上浮着测量、导出、缩放、图层开关和鹰眼控件，两侧的图表按图层统计要素，点柱子联动右侧详情。

![CAD 图纸指挥大屏：图纸底图、地图控件和统计图表](./images/overview-cad.webp)

**三维场景**：「三维示例42-组态实战110kV变电站」，主变、断路器和母线建在三维场景里，悬停看名称，点击设备弹出属性面板，左侧可以遥控合闸分闸。

![110kV 智慧变电站三维监控](./images/overview-3d.webp)

**组态**：「换热站远程监控系统2.0」，一次网、二次网的供回水管道、换热器、循环泵和传感器画在组态画板上，测点数值实时标在管线旁边。

![换热站远程监控：组态工艺流程图](./images/overview-scada.webp)

## 怎么开始

1. 在浏览器打开 https://vjmap.com/server/vp/ ，无需安装。
2. 只想看看，点「访客进入（guest）」直接进入访客工作区，里面有 350 多个示例工程，按「布局」「地图」「三维」「组态」「组件」「综合大屏」等分类整理好了。
3. 要长期使用，点「去注册」用邮箱注册自己的账号，再用账号密码登录。
4. 进入后在首页点「+ 新建」，选一个模板创建大屏，然后跟着[新手入门](./quickstart.html)做出第一块大屏。首页的新建模板、分类和搜索见[项目管理](./projects.html)。想先看一遍完整操作，可以看 5 分钟的[视频教程](/videos/tut-visual)。

![登录页](./images/overview-login.webp)

1. **账号登录**：输入账号或邮箱、密码，点「登录」。
2. **访客进入（guest）**：不用注册，直接进入公共的访客工作区。
3. **去注册**：用邮箱注册自己的账号。

::: warning 访客工作区是公共的
所有访客共用同一个工作区，你新建或修改的工程别人也能看到、也能改。打开示例工程看完不要点「保存」；自己的正式工程请注册账号后再做。
:::

## 界面一览

打开一个工程后进入编辑器，分为下面几块：

![编辑器的各个区域](./images/overview-editor.webp)

1. **顶栏**：左边是「项目」「数据」「操作」三个菜单，中间是工程名，右边是撤销恢复、大中小屏幕切换、预览、保存、历史和发布。
2. **图层面板**：当前页面的组件树，越靠上层级越高；切到「页面」页签可以在页面和画面之间跳转。
3. **组件库**：左侧竖排是分类，右边是组件卡片，悬停卡片点「+」或直接拖进画布。
4. **画布**：所见即所得地摆放组件，顶部和左侧有标尺；双击地图、三维、组态等组件可以进入它的内部编辑。
5. **属性面板**：选中组件后在这里调「样式」「数据」「事件」「代码」；什么都没选时显示页面属性，如布局画像、适配方式、大屏尺寸和背景。
6. **页面条**：前景、各个页面、背景和画面的页签，以及右下角的缩放比例。
7. **AI 助手**：右下角的圆形按钮，打开 AI 对话。

每块区域的详细用法见[编辑器界面](./editor.html)。

## 文档导航

### 入门

- [新手入门](./quickstart.html)：从新建到发布，做一块带柱状图、饼图和数据表的销售看板。
- [项目管理](./projects.html)：首页的新建模板、分类、搜索、多选、导入和回收站。
- [编辑器界面](./editor.html)：顶栏菜单、图层面板、组件库、画布、属性面板、页面条和快捷键。

### 搭建页面

- [组件库与样式](./components.html)：81 个内置组件怎么找、怎么加，样式面板里的常用设置，资产库与分组。
- [画布适配与布局](./layout.html)：布局画像与适配方式，大中小三档屏幕，行、列、网格、停靠等布局组件。
- [多页面、画面与弹窗](./pages-windows.html)：前景、子页面、背景和画面，启动画面，弹窗与抽屉。

### 数据与交互

- [数据接入与绑定](./data.html)：各类数据源、模拟数据、平台数据表，字段绑定、数据规则、筛选与联动。
- [事件交互与多状态](./events.html)：添加事件，点击跳页、打开弹窗、联动筛选，组件多状态。

### 地图、三维与组态

- [二维地图](./map.html)：CAD 图纸与互联网地图底图，数据源与图层，地图控件。
- [三维场景](./scene3d.html)：三维元素、材质灯光、相机巡航，测点数据驱动。
- [组态](./scada.html)：组态画板与图元库，管道连线与流动，测点驱动状态。

### AI 与发布

- [AI 助手](./ai.html)：一句话搭大屏、对话修改、拖给 AI、截图标注，以及用 MCP 接入外部 AI 工具。
- [保存、发布与嵌入](./publish.html)：保存与历史版本，发布运行态链接，导出部署文件、工程文件，用 SDK 嵌入。

## 常见问题

### 不会写代码能用吗？

能。组件、数据、交互和发布都在界面上点选完成；需要更复杂的逻辑时，再在属性面板的「代码」页签里写脚本。

### 做好的大屏怎么放进自己的系统？

有三种做法：导出静态运行包放到自己的服务器上，用 iframe 嵌进页面；导出二次开发工程包，用 SDK 加载工程、传入数据、监听交互事件；或者私有化部署整个平台，直接嵌入运行态链接。详见[保存、发布与嵌入](./publish.html)。

### 能部署在内网吗？

能。唯杰 AI 可视化平台支持私有化部署（Windows 免安装版和 Linux Docker 离线包），CAD 图纸部分需要同时部署唯杰地图服务。部署方式可以[联系我们](/contact)。

### 这份文档和「AI 可视化平台开发文档」有什么区别？

这份文档讲怎么在编辑器里搭大屏；[开发文档](https://vjmap.com/app/docsvp/)面向开发者，讲每个组件的全部参数、工程文件结构、SDK 接口和二次开发脚本。可运行的 SDK 示例见 [AI 可视化平台示例](https://vjmap.com/app/demovp)。

## 相关文档

- [唯杰 AI 可视化平台产品介绍](/products/visual)
- [AI 可视化平台开发文档](https://vjmap.com/app/docsvp/)：组件参数手册、工程文件结构、SDK 与二次开发。
- [AI 可视化平台示例](https://vjmap.com/app/demovp)：几百个可在线修改运行的 SDK 示例。
- [VJMAP 开发指南](/guide/)：CAD 图纸上传、图层与坐标，二维地图组件里的 CAD 底图来自唯杰地图服务。