• 简体中文

      • 区块：地图

      地图区块，支持高德地图和 Google 地图，你也可以扩展更多地图类型。

      Package name@nocobase/plugin-map
      Built-inYes
      Default enabledNo
      Edition
      Community Edition+

      Related

      在 NocoBase v2 中，地图区块（Map block） 用于把数据表里的地理信息展示在地图上。它支持高德地图和 Google Maps，可以展示点、线、多边形、圆等地图字段，也可以通过区块操作打开记录详情、筛选数据或执行自定义操作。

      地图区块是数据表区块。使用前需要先启用 @nocobase/plugin-map，并在数据表里准备至少一个地图字段。

      使用前准备

      配置地图服务

      启用插件后，进入「插件配置 / 地图管理」配置地图服务。

      其中：

      • 高德地图：需要填写 Access key，以及 securityJsCode 或 serviceHost
      • Google Maps：需要填写 Api key

      配置保存后，地图字段和地图区块会根据字段选择的地图类型加载对应服务。如果地图无法加载，可以先检查 key 是否正确、域名白名单是否包含当前访问域名，以及浏览器是否能访问对应地图服务。

      创建地图字段

      在数据表中添加字段时，可以在「基于地图的几何图形」分组下选择字段类型。

      字段类型用途
      点标记单个位置，比如门店、设备、客户地址
      线表示路线或轨迹
      多边形表示区域范围
      圆表示以某个点为中心的半径范围

      创建字段时需要选择「地图类型」。这个配置决定字段编辑和区块展示时使用高德地图还是 Google Maps。通常来说，同一套业务数据建议统一使用一种地图类型。

      添加地图区块

      进入 v2 页面配置模式后，点击「添加区块」，在「数据区块」分组里选择「地图」。

      创建时需要选择：

      • 数据表：地图区块要展示的数据来源
      • 地图字段：用于绘制地图覆盖物的字段，支持当前数据表的地图字段，也支持通过关联字段选择关联数据表里的地图字段
      • 标记字段：可选。地图字段为「点」时，可以选择一个文本字段作为点位标签

      如果数据表中没有可用的地图字段，地图区块不会有可选字段。需要先回到数据表配置里添加点、线、多边形或圆字段。

      区块设置

      地图区块创建后，可以在区块设置里调整展示和交互行为。

      设置项说明
      地图字段和标记字段切换区块使用的地图字段，以及点位标签字段
      数据范围限制地图区块加载和展示的记录
      连接顺序字段对点位排序，并按顺序连接成线路。只有地图字段为「点」时才会生效
      地图默认缩放级别设置地图初始化时的缩放级别
      操作在地图区块顶部添加筛选、新增、弹窗、链接、刷新、自定义请求、AI 员工、JS 操作等按钮

      地图区块会加载符合数据范围的所有记录，不走分页。数据量较大时，建议先配置「数据范围」，或者通过筛选操作缩小展示范围。

      查看和选择记录

      地图区块会把每条记录的地图字段渲染成地图覆盖物。点击覆盖物时，会触发记录打开流程，通常用于打开弹窗、抽屉或其他记录视图。

      区块左上角提供选择工具：

      • 位置图标：退出框选模式，回到普通查看状态
      • 框选图标：进入框选模式，在地图上绘制一个多边形区域
      • 确认图标：确认当前框选区域，把区域内的记录加入选中状态

      选中的记录会同步到区块资源，后续可以配合区块操作处理这些记录。

      v2 开发入口

      地图区块的 v2 客户端实现位于 packages/plugins/@nocobase/plugin-map/src/client-v2/。

      几个主要入口：

      • plugin.tsx：注册地图字段、地图管理设置页，以及 v2 FlowModel loader
      • models/MapBlockModel.tsx：地图区块模型，继承 CollectionBlockModel，定义创建区块、数据范围、排序、缩放级别和打开记录等流程
      • models/MapActionGroupModel.tsx：地图区块可添加的操作集合
      • models/MapBlockComponent.tsx：根据地图字段的 mapType 分发到高德地图或 Google Maps 组件
      • models/fieldModels/：点、线、多边形、圆等地图字段在 v2 中的模型实现

      如果你要扩展新的地图服务，通常需要新增地图字段的 mapType 选项，并补充对应的地图渲染组件和区块组件。