CAD 绘制 map-source-mapcad

2026年7月20日大约 4 分钟

CAD 绘制 `map-source-mapcad`

vjmapext MapCadLayer 自渲染的 CAD 标绘。

放在 map-2d 的 pieces 里；enabled 写在节点顶层。与其它数据源不同，本源自渲染：cad-document 由 vjmapext MapCadLayer 直接画到本体地图，不产出行数据、不经「源 → 图层」管线（source-publish 对它没有可发布的行）。

在线演示

预览使用内置公开演示服务（空白 CAD 底图），联网即可出图；可拖拽缩放。一份手写 cad-document（SerializedDocument）渲染在空白 CAD 底图上：多段线围墙（虚线）、填充车间（HATCH）、储水池（圆 + 填充）、检修通道（圆弧）、输水管（直线）与两处文字标注——实体渲染由 vjmapext 内核（随包加载）完成。

常规产出方式：绘制工具

cad-document 是 vjmapext MapCadLayer.toJSON() 输出的 SerializedDocument（非 GeoJSON）。日常不必手写：编辑器属性面板点「绘制工具」→ 用内置 CAD 工具栏画点 / 线 / 圆 / 弧 / 填充 / 文字 / 标注 → 确认后自动写回 cad-document 并渲染到地图。手写时坐标为 CAD 图纸坐标（本页演示底图范围 [-1000,-1000,1000,1000]，未设 map-zoom 时 CAD 底图自动缩放到全图）。

最小可用配置（字段键名与属性面板一致；cad-document 支持 JSON 字符串或对象两种形态，绘制工具写回的是字符串）：

{
  "type": "map-source-mapcad",
  "uid": "src_mapcad",
  "enabled": true,
  "options": {
    "cad-document": {
      "version": "1.0",
      "entities": [
        {
          "type": "LINE",
          "id": "ent_line_1",
          "color": 16777215,
          "layerId": "0",
          "lineType": "CONTINUOUS",
          "data": { "start": [0, 0], "end": [500, 300] }
        }
      ]
    }
  }
}

属性

属性	名称	类型	默认
`cad-builder`	绘制工具	`map-cad`	—
`cad-document`	CAD 文档	`json(height=220px)`	—
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

事件

本源自渲染（CAD 实体直接画在本体地图上），但不产出要素、不参与要素点击 / 悬停事件。与普通数据源的另一处差异：mapSetSourceData（注入 GeoJSON）不适用——内容仅由 cad-document（SerializedDocument）驱动，改文档即重渲。地图动作总览见 2D 地图 · 事件。

示例

CAD 标绘源：一条白色直线 + 一个绿色半透明填充圆 + 一段文字标注（SerializedDocument 结构，data 内坐标为 CAD 图纸坐标 [x, y]）：

{
  "type": "map-source-mapcad",
  "uid": "src_mapcad",
  "enabled": true,
  "options": {
    "cad-document": {
      "version": "1.0",
      "entities": [
        {
          "type": "LINE",
          "id": "ent_line_1",
          "color": 16777215,
          "layerId": "0",
          "lineType": "CONTINUOUS",
          "lineWidth": 2,
          "data": { "start": [0, 0], "end": [800, 400] }
        },
        {
          "type": "CIRCLE",
          "id": "ent_circle_1",
          "color": 65280,
          "layerId": "0",
          "lineType": "CONTINUOUS",
          "data": {
            "center": [400, 200],
            "radius": 120,
            "fillColor": 65280,
            "fillOpacity": 0.3,
            "borderOpacity": 1
          }
        },
        {
          "type": "TEXT",
          "id": "ent_text_1",
          "color": 16776960,
          "layerId": "0",
          "lineType": "CONTINUOUS",
          "data": {
            "insertionPoint": [400, 360],
            "textString": "一号泵站",
            "height": 40,
            "rotation": 0,
            "font": "",
            "opacity": 1
          }
        }
      ]
    }
  }
}

闭合多段线（带填充）、圆弧与图案填充片段（可与上面的实体并列放进同一 entities 数组；完整搭配见顶部「在线演示」）：

// PLINE：闭合矩形围墙，虚线描边；bulge=0 为直线段（非 0 为圆弧段凸度）
{ "type": "PLINE", "id": "ent_wall", "color": 8377343, "layerId": "0",
  "lineType": "DASHED", "lineWidth": 2,
  "data": { "bulgePoints": [
      { "point": [-820, -560], "bulge": 0 }, { "point": [820, -560], "bulge": 0 },
      { "point": [820, 560], "bulge": 0 }, { "point": [-820, 560], "bulge": 0 }
    ], "isClosed": true } }

// ARC：四分之一圆弧；角度为弧度制（90° = 1.5708），isCCW 逆时针
{ "type": "ARC", "id": "ent_arc", "color": 16233728, "layerId": "0",
  "lineType": "CONTINUOUS", "lineWidth": 2,
  "data": { "center": [-80, 80], "radius": 220,
    "startAngle": 0, "endAngle": 1.5708, "isCCW": true } }

// HATCH：多边形填充区；loops 首个 outer 外环，可再加 inner 内环挖洞；
// patternName 空 = 纯色填充（如 "ANSI31" 为斜线图案，配 patternScale/patternAngle）
{ "type": "HATCH", "id": "ent_plant", "color": 3111935, "layerId": "0",
  "lineType": "CONTINUOUS",
  "data": { "loops": [
      { "type": "outer", "points": [[-700, -440], [-80, -440], [-80, 80], [-700, 80]] }
    ], "patternName": "", "patternScale": 1, "patternAngle": 0,
    "fillColor": 3111935, "fillOpacity": 0.25 } }

常用实体 data 结构速查（与 MapCadLayer.toJSON() 输出一致）：

`type`	`data` 关键字段
`POINT`	`position: [x, y]`
`LINE`	`start: [x, y]`、`end: [x, y]`
`PLINE`	`bulgePoints: [{ point: [x, y], bulge }]`、`isClosed`、`fillColor` / `fillOpacity`
`CIRCLE`	`center: [x, y]`、`radius`、`fillColor` / `fillOpacity` / `borderOpacity`
`ARC`	`center`、`radius`、`startAngle`（弧度）、`endAngle`（弧度）、`isCCW`
`TEXT`	`insertionPoint`、`textString`、`height`、`rotation`、`font`、`opacity`
`HATCH`	`loops: [{ type: "outer"/"inner", points }]`、`patternName`、`patternScale`、`patternAngle`、`fillColor` / `fillOpacity`

实体公共字段：id（唯一串）、color（0xRRGGBB 十进制整数，如白色 16777215）、layerId（缺省 "0"）、lineType（缺省 "CONTINUOUS"，可用 "DASHED" 等线型名）、可选 lineWidth。角度类字段均为弧度制。

延伸阅读：2D 地图子系统 · 地图数据源 · 地图图层总览。