gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/demos.js

@@ -1,105 +1,113 @@
-/**
- * 演示注册表：一个功能一个演示，各自独立成组件（自己的画布 + 控件 + 读数），
- * 由 DemoShell.vue 按页签懒加载 —— 想看哪一块就进哪一块，不用在一屏里翻几十个面板。
- *
- * `component` 是动态 import：切到哪个演示才加载哪个组件（综合示例最大，不进来就不下载）。
- * `group` 是页签的分组（见 DEMO_GROUPS：基础 / 交互 / 样式 / 数据 / 性能 / 综合），
- * `doc` 是「这块功能对应哪一份文档」的直达链接，外壳把那句说明旁边挂一个小链接。
- */
-const docsBase = `${import.meta.env?.BASE_URL ?? '/'}docs/index.html`
-/** 文档直达链接：`#` 后面是文档中心认识的 markdown 文件名（见 docs/index.html 的 load） */
-const DOC_GUIDE = { href: `${docsBase}#GisView.md`, label: 'GisView.md' }
-const DOC_FORMAT = { href: `${docsBase}#数据格式.md`, label: '数据格式.md' }
+/**
+ * 演示注册表：一个功能一个演示，各自独立成组件（自己的画布 + 控件 + 读数），
+ * 由 DemoShell.vue 按页签懒加载 —— 想看哪一块就进哪一块，不用在一屏里翻几十个面板。
+ *
+ * `component` 是动态 import：切到哪个演示才加载哪个组件（综合示例最大，不进来就不下载）。
+ * `group` 是页签的分组（见 DEMO_GROUPS：基础 / 交互 / 样式 / 数据 / 性能 / 综合），
+ * `doc` 是「这块功能对应哪一份文档」的直达链接，外壳把那句说明旁边挂一个小链接。
+ */
+const docsBase = `${import.meta.env?.BASE_URL ?? '/'}docs/index.html`
+/** 文档直达链接：`#` 后面是文档中心认识的 markdown 文件名（见 docs/index.html 的 load） */
+const DOC_GUIDE = { href: `${docsBase}#GisView.md`, label: 'GisView.md' }
 const DOC_INTERNALS = { href: `${docsBase}#GisView实现原理.md`, label: '实现原理' }
-const DOC_QUALITY = { href: `${docsBase}#manual/05-画质与批量更新.md`, label: '05 画质与批量更新' }
-const DOC_EDIT = { href: `${docsBase}#manual/07-指针与要素编辑.md`, label: '07 指针与要素编辑' }
-const DOC_UPDATE = { href: `${docsBase}#manual/06-数据与场景更新.md`, label: '06 数据与场景更新' }
-const DOC_LABELS = { href: `${docsBase}#manual/12-标签与装饰.md`, label: '12 标签与装饰' }
+const DOC_EDIT = { href: `${docsBase}#manual/07-指针与要素编辑.md`, label: '07 指针与要素编辑' }
+const DOC_UPDATE = { href: `${docsBase}#manual/06-数据与场景更新.md`, label: '06 数据与场景更新' }
+const DOC_LABELS = { href: `${docsBase}#manual/12-标签与装饰.md`, label: '12 标签与装饰' }
+const DOC_VIEW = { href: `${docsBase}#manual/14-视图与筛选.md`, label: '14 视图与筛选' }
 const DOC_API = { href: `${docsBase}#接口协议.md`, label: '编辑接口协议' }
-
-/** 页签分组的固定次序与组名（每组里的演示按 DEMOS 里的顺序排） */
-export const DEMO_GROUPS = [
-	{ id: 'basic', label: '基础' },
-	{ id: 'interact', label: '交互' },
-	{ id: 'style', label: '样式' },
-	{ id: 'data', label: '数据' },
-	{ id: 'perf', label: '性能' },
-	{ id: 'full', label: '综合' }
-]
-
-export const DEMOS = [
-	{
-		id: 'basic',
-		title: '基础视图',
-		group: 'basic',
-		blurb: '点 / 线 / 通道最少的起手式：一份数据进来、相机出去，拾取与读数都摆在台面上。',
-		doc: DOC_GUIDE,
-		component: () => import('./BasicDemo.vue')
-	},
-	{
-		id: 'labels',
-		title: '标签交互',
-		group: 'interact',
-		blurb: '标签点选 / 拖拽 / 右键菜单（编辑、改位置、删除），以及用一套 API 给选中集批量加标签。',
-		doc: DOC_GUIDE,
-		component: () => import('./LabelDemo.vue')
-	},
+const DOC_EXTEND = { href: `${docsBase}#manual/15-导出与集成.md`, label: '15 导出与集成' }
+
+/** 页签分组的固定次序与组名（每组里的演示按 DEMOS 里的顺序排） */
+export const DEMO_GROUPS = [
+	{ id: 'basic', label: '基础' },
+	{ id: 'interact', label: '交互' },
+	{ id: 'style', label: '样式' },
+	{ id: 'data', label: '数据' },
+	{ id: 'perf', label: '性能' },
+	{ id: 'full', label: '综合' }
+]
+
+export const DEMOS = [
+	{
+		id: 'basic',
+		title: '基础视图',
+		group: 'basic',
+		blurb: '点 / 线 / 通道最少的起手式：一份数据进来、相机出去，拾取与读数都摆在台面上。',
+		doc: DOC_GUIDE,
+		component: () => import('./BasicDemo.vue')
+	},
+	{
+		id: 'labels',
+		title: '标签交互',
+		group: 'interact',
+		blurb: '标签点选 / 拖拽 / 右键菜单（编辑、改位置、删除），以及用一套 API 给选中集批量加标签。',
+		doc: DOC_GUIDE,
+		component: () => import('./LabelDemo.vue')
+	},
 	{
 		id: 'label-display',
 		title: '标签显示',
-		group: 'interact',
-		blurb: '动态切换节点 / 线路标签内容：名称、电压、负载率、自定义模板，还能分别改一类或自动轮播。',
+		group: 'interact',
+		blurb: '动态切换节点 / 线路标签内容：名称、电压、负载率、自定义模板，还能分别改一类或自动轮播。',
 		doc: DOC_LABELS,
 		component: () => import('./LabelDisplayDemo.vue')
 	},
 	{
-		id: 'style',
-		title: '样式与规则',
-		group: 'style',
-		blurb: '按属性配色、规则 JSON 现场改、逐点样式与选中高亮的优先级，改完立刻重画。',
-		doc: DOC_GUIDE,
-		component: () => import('./StyleDemo.vue')
-	},
-	{
-		id: 'hover-tooltip',
-		title: '悬停与提示',
-		group: 'style',
-		blurb: '悬浮节点 / 线路的高亮样式现场调；tooltip 内容可用模板、函数或 DOM 元素，悬停期间也能立刻刷新。',
-		doc: DOC_LABELS,
-		component: () => import('./HoverTooltipDemo.vue')
-	},
-	{
-		id: 'channel',
-		title: '通道与数据',
-		group: 'data',
-		blurb: '通道分组拆合、拐点增删拖，以及整份 groups / path 覆盖的假接口联调（版本号、opId 幂等、失败重试）；另带定向更新与整份数据导出 / 回灌。',
-		doc: DOC_API,
-		component: () => import('./ChannelDemo.vue')
-	},
-	{
-		id: 'backend',
-		title: '编辑与保存',
-		group: 'data',
-		blurb: '分组增删改、拐点增删改、场站改坐标：每一步要发给后端的请求体都摊在面板上，配上待提交队列 / 版本号 / 409 与整份保存。',
-		doc: DOC_API,
-		component: () => import('./BackendSyncDemo.vue')
-	},
-	{
-		id: 'events',
-		title: '事件与方法',
+		id: 'minimap',
+		title: '鹰眼图配置',
 		group: 'interact',
-		blurb: '一条 * 订阅看全部事件，配上常用方法按钮 —— 事件载荷与方法返回值都打在日志里。',
-		doc: DOC_GUIDE,
-		component: () => import('./EventDemo.vue')
+		blurb: '尺寸 / 位置 / 范围 / 规则 / 层级 / 小图缩放与备份倍率一页调完；另有两层自定义绘制演示 layers 的扩展方式。',
+		doc: DOC_VIEW,
+		component: () => import('./MinimapDemo.vue')
 	},
 	{
-		id: 'copy-merge',
-		title: '批量复制与合并',
-		group: 'interact',
-		blurb: '在画布 Shift 框选后整组复制或合并：复制 / 合并都接假后端，演示版本号、opId 幂等、失败重试与本地回滚；Alt 点击 / Ctrl+V 的复制事件也可直接回滚或用 addPoint 接管。',
-		doc: DOC_API,
-		component: () => import('./CopyMergeDemo.vue')
-	},
+		id: 'style',
+		title: '样式与规则',
+		group: 'style',
+		blurb: '按属性配色、规则 JSON 现场改、逐点样式与选中高亮的优先级，改完立刻重画。',
+		doc: DOC_GUIDE,
+		component: () => import('./StyleDemo.vue')
+	},
+	{
+		id: 'hover-tooltip',
+		title: '悬停与提示',
+		group: 'style',
+		blurb: '悬浮节点 / 线路的高亮样式现场调；tooltip 内容可用模板、函数或 DOM 元素，悬停期间也能立刻刷新。',
+		doc: DOC_LABELS,
+		component: () => import('./HoverTooltipDemo.vue')
+	},
+	{
+		id: 'channel',
+		title: '通道与数据',
+		group: 'data',
+		blurb: '通道分组拆合、拐点增删拖，以及整份 groups / path 覆盖的假接口联调（版本号、opId 幂等、失败重试）；另带定向更新与整份数据导出 / 回灌。',
+		doc: DOC_API,
+		component: () => import('./ChannelDemo.vue')
+	},
+	{
+		id: 'backend',
+		title: '编辑与保存',
+		group: 'data',
+		blurb: '分组增删改、拐点增删改、场站改坐标：每一步要发给后端的请求体都摊在面板上，配上待提交队列 / 版本号 / 409 与整份保存。',
+		doc: DOC_API,
+		component: () => import('./BackendSyncDemo.vue')
+	},
+	{
+		id: 'events',
+		title: '事件与方法',
+		group: 'interact',
+		blurb: '一条 * 订阅看全部事件，配上常用方法按钮 —— 事件载荷与方法返回值都打在日志里。',
+		doc: DOC_GUIDE,
+		component: () => import('./EventDemo.vue')
+	},
+	{
+		id: 'copy-merge',
+		title: '批量复制与合并',
+		group: 'interact',
+		blurb: '在画布 Shift 框选后整组复制或合并：复制 / 合并都接假后端，演示版本号、opId 幂等、失败重试与本地回滚；合并可切碰撞 / 中心进入目标区域两种触发时机，Alt 点击 / Ctrl+V 的复制事件也可直接回滚或用 addPoint 接管。',
+		doc: DOC_API,
+		component: () => import('./CopyMergeDemo.vue')
+	},
 	{
 		id: 'drag',
 		title: '拖拽落点',
@@ -109,45 +117,53 @@ export const DEMOS = [
 		component: () => import('./DragDropDemo.vue')
 	},
 	{
-		id: 'history',
-		title: '历史与批量',
-		group: 'data',
-		blurb: '改数据的账本：batch 把 8 次改动作一条记录（面板上看得见「8 笔合并成一条」），history 给出撤销 / 重做与两份栈读数，另附画质四档与 features 三个预设。',
-		doc: DOC_QUALITY,
-		component: () => import('./HistoryDemo.vue')
-	},
-	{
-		id: 'batch-add',
-		title: '批量新增',
-		group: 'data',
-		blurb: '五个批量入口各一颗按钮：多节点、多线路、多通道、多拐点、多分组；每次只记一步历史、只发一条数据变更，返回读数与当前规模都摊在面板上。',
-		doc: DOC_UPDATE,
-		component: () => import('./BatchAddDemo.vue')
+		id: 'connect',
+		title: '可视化连线',
+		group: 'interact',
+		blurb: '没有通道也能只用点与线：当场配置直线 / 正交折线、箭头、颜色与线宽，再分别用默认提交、addLines 或 addChannels 落地。',
+		doc: DOC_GUIDE,
+		component: () => import('./ConnectDemo.vue')
 	},
 	{
-		id: 'samples',
-		title: '完整样本',
-		group: 'data',
-		blurb: '四份 sample-*.json 原样喂进来（标签 / 拐点 / 分组 / 标记 / 偏移 / 颜色样式都在数据里），还能与文件对账。',
-		doc: DOC_FORMAT,
-		component: () => import('./SampleDemo.vue')
-	},
+		id: 'decoration',
+		title: '动态装饰器',
+		group: 'interact',
+		blurb: '线路与节点可分开或同时开启：悬停目标就出临时装饰，移开收掉、松手命中才发 ready；节点可调偏移 / 固定 / 鼠标吸附、连接线与白名单，线路可调平行方向与单线 / 分组 / 通道范围，确认才写数据。',
+		doc: DOC_LABELS,
+		component: () => import('./DecorationDraftDemo.vue')
+	},
 	{
-		id: 'interface',
-		title: '接口数据',
+		id: 'batch-add',
+		title: '批量新增',
+		group: 'data',
+		blurb: '五个批量入口各一颗按钮：多节点、多线路、多通道、多拐点、多分组；每次只记一步历史、只发一条数据变更，返回读数与当前规模都摊在面板上。',
+		doc: DOC_UPDATE,
+		component: () => import('./BatchAddDemo.vue')
+	},
+	{
+		id: 'search-filter',
+		title: '搜索与筛选',
+		group: 'data',
+		blurb: '关键字 / scope / fields / limit 现场调，同步搜索与 Worker 异步搜索对照；筛选条件、getFilterResult 与 getVisibleData 同屏读数。',
+		doc: DOC_VIEW,
+		component: () => import('./SearchFilterDemo.vue')
+	},
+	{
+		id: 'extension',
+		title: '扩展能力',
 		group: 'data',
-		blurb: '后端返回的 station_data / channel_data 在 demo 里映射成 points / lines / channels：切场景整体换、通道分批补、whenDataRendered 收 loading。',
-		doc: DOC_FORMAT,
-		component: () => import('./InterfaceDemo.vue')
-	},
-	{
-		id: 'perf',
-		title: '性能与质量',
-		group: 'perf',
-		blurb: '几千 / 十万级数据切换、筛选走 Worker、质量档自动升降，交互期细线与 MSAA 两个开关现场对比帧耗时。',
-		doc: DOC_INTERNALS,
-		component: () => import('./PerfDemo.vue')
-	},
+		blurb: '四个扩展点同屏：view.use 运行时插件、自定义图元、自定义条件运算符与 defineExportFormat 业务导出。',
+		doc: DOC_EXTEND,
+		component: () => import('./ExtensionDemo.vue')
+	},
+	{
+		id: 'perf',
+		title: '性能与质量',
+		group: 'perf',
+		blurb: '几千 / 十万级数据切换、筛选走 Worker、质量档自动升降，交互期细线与 MSAA 两个开关现场对比帧耗时。',
+		doc: DOC_INTERNALS,
+		component: () => import('./PerfDemo.vue')
+	},
 	{
 		id: 'effects',
 		title: '动画效果',
@@ -156,15 +172,23 @@ export const DEMOS = [
 		doc: DOC_GUIDE,
 		component: () => import('./EffectsDemo.vue')
 	},
+	{
+		id: 'graphic',
+		title: '扩展图形',
+		group: 'style',
+		blurb: 'SVG 路径 / 图片 / 外部 Canvas 三类图形同屏：世界坐标锚定、相机联动、透明度 / 旋转 / 层级与运行时增删改。',
+		doc: DOC_LABELS,
+		component: () => import('./GraphicDemo.vue')
+	},
 	{
 		id: 'full',
-		title: '综合示例（全功能）',
-		group: 'full',
-		blurb: '所有面板都在这一个演示里：十万级数据、热力图、鹰眼图、通道编辑、历史与快捷键。',
-		doc: { href: docsBase, label: '文档中心' },
-		component: () => import('./GisViewDemo.vue')
-	}
-]
-
-/** 默认进综合示例：它信息量最全，也是文档里到处引用的那一个 */
-export const DEFAULT_DEMO_ID = 'full'
+		title: '综合示例（全功能）',
+		group: 'full',
+		blurb: '所有面板都在这一个演示里：十万级数据、热力图、鹰眼图、通道编辑、历史与快捷键。',
+		doc: { href: docsBase, label: '文档中心' },
+		component: () => import('./GisViewDemo.vue')
+	}
+]
+
+/** 默认进综合示例：它信息量最全，也是文档里到处引用的那一个 */
+export const DEFAULT_DEMO_ID = 'full'

package/docs/demos/shared/demoData.js

@@ -1,107 +1,107 @@
-/**
- * 几个功能演示（Basic / Label / Style / Channel / Event / Perf）共用的一份小规模演示数据：
- * 字段名与真实样例数据保持一致（节点 id / name / x / y / vn_kv / station_type / zone_name，
- * 线路 id / name / from / to / vn_kv / max_loading_rate），换成真实数据时写法不用改。
- *
- * 数据量刻意压在几十个节点：每个演示只讲一件事，读数与事件日志一眼能对上；
- * 想看十万级规模的性能表现去「性能与质量」演示（它自己放大数据）。
- */
-import { createChannels } from '../../../src/index.js'
-
-/** 与真实样例同一套电压等级与站点类型 */
-export const VOLTAGE_LEVELS = [1050, 525, 230, 15.7]
-export const STATION_TYPES = ['station', 'storage', 'coal', 'gas', 'solar', 'wind', 'nuclear', 'load']
-/** 电压等级配色：规则 / 图例 / 标签三处共用一份，改这里到处一致 */
-export const VOLTAGE_COLORS = {
-	1050: '#ff4fa3',
-	525: '#a06bff',
-	230: '#3fa7ff',
-	15.7: '#4fd1a5'
-}
-
-/** 固定种子的随机数：每次刷新布局一致，方便对着文档看效果 */
-export const createRandom = (seed) => () => {
-	seed = (seed * 1664525 + 1013904223) % 4294967296
-	return seed / 4294967296
-}
-
-/** 演示数据落在这块范围里：fitView 一次全看到 */
-export const DEMO_CENTER = [116.35, 39.0]
-export const DEMO_RADIUS = 2.2
-/**
- * 演示节点：环上撒点（半径按序号轻微起伏，不是标准圆），
- * 电压 / 类型 / 分区按序号取模，分布均匀 —— 按属性配色、按规则改样式一眼能看出效果。
- */
-export const createDemoPoints = (count = 28, seed = 20240915) => {
-	const random = createRandom(seed)
-	const points = []
-	for (let index = 0; index < count; index += 1) {
-		const angle = (index / count) * Math.PI * 2
-		const radius = DEMO_RADIUS * (0.6 + ((index % 5) / 5) * 0.4)
-		points.push({
-			id: `node-${index}`,
-			x: Number((DEMO_CENTER[0] + Math.cos(angle) * radius).toFixed(5)),
-			y: Number((DEMO_CENTER[1] + Math.sin(angle) * radius).toFixed(5)),
-			name: `变电站 ${index + 1}`,
-			vn_kv: VOLTAGE_LEVELS[index % VOLTAGE_LEVELS.length],
-			station_type: STATION_TYPES[(index * 3) % STATION_TYPES.length],
-			zone_name: `分区 ${(index % 4) + 1}`,
-			max_loading_rate: Number((0.4 + random() * 1.1).toFixed(3))
-		})
-	}
-	return points
-}
-/**
- * 演示线路：沿环把相邻节点连起来（每点两条，度数均匀），
- * 再补几条「辐条」连到 0 号节点 —— 环 + 辐条比纯环更像一张网，框选 / 拾取都有东西可点。
- * 每 7 条里有一条标成直流线路（type: 'dc_line'），给装饰 / 规则演示用。
- */
-export const connectDemoLines = (points) => {
-	const lines = []
-	const push = (fromIndex, toIndex) => {
-		const from = points[fromIndex]
-		const to = points[toIndex]
-		lines.push({
-			id: `line-${lines.length}`,
-			name: `线路 ${lines.length + 1}`,
-			from: from.id,
-			to: to.id,
-			vn_kv: from.vn_kv,
-			max_loading_rate: Number(((from.max_loading_rate + to.max_loading_rate) / 2).toFixed(3)),
-			...(lines.length % 7 === 3 ? { type: 'dc_line' } : {})
-		})
-	}
-	points.forEach((point, index) => push(index, (index + 1) % points.length))
-	points.forEach((point, index) => {
-		if (index > 0 && index % 5 === 0) {
-			push(0, index)
-		}
-	})
-	return lines
-}
-/**
- * 一次拿齐：节点 + 线路（含通道回线）+ 通道。
- * `lines` 已经带上通道回线，直接交给 createGisView({ points, lines, channels }) 就行；
- * 只想演示普通线路时用 `linesWithoutChannel`。
- */
-export const buildDemoData = (options = {}) => {
-	const { count = 28, seed = 20240915, channels = 3 } = options
-	const points = createDemoPoints(count, seed)
-	const lines = connectDemoLines(points)
-	if (!channels) {
-		return { points, lines, linesWithoutChannel: lines, channelLines: [], channels: [] }
-	}
-	const specs = [
-		{ id: 'channel-a', name: '甲通道', from: points[0].id, to: points[7 % count].id, circuits: 3, lineProps: { vn_kv: 1050, max_loading_rate: 1.12 } },
-		{ id: 'channel-b', name: '乙通道', from: points[12 % count].id, to: points[19 % count].id, circuits: 2, lineProps: { vn_kv: 525, max_loading_rate: 0.72 } },
-		{ id: 'channel-c', name: '丙通道', from: points[3 % count].id, to: points[15 % count].id, circuits: 4, lineProps: { vn_kv: 230, max_loading_rate: 0.51 } }
-	].slice(0, channels)
-	const built = createChannels(specs)
-	return {
-		points,
-		lines: [...lines, ...built.lines],
-		linesWithoutChannel: lines,
-		channelLines: built.lines,
-		channels: built.channels
-	}
-}
+/**
+ * 几个功能演示（Basic / Label / Style / Channel / Event / Perf）共用的一份小规模演示数据：
+ * 字段名与真实样例数据保持一致（节点 id / name / x / y / vn_kv / station_type / zone_name，
+ * 线路 id / name / from / to / vn_kv / max_loading_rate），换成真实数据时写法不用改。
+ *
+ * 数据量刻意压在几十个节点：每个演示只讲一件事，读数与事件日志一眼能对上；
+ * 想看十万级规模的性能表现去「性能与质量」演示（它自己放大数据）。
+ */
+import { createChannels } from '../../../src/index.js'
+
+/** 与真实样例同一套电压等级与站点类型 */
+export const VOLTAGE_LEVELS = [1050, 525, 230, 15.7]
+export const STATION_TYPES = ['station', 'storage', 'coal', 'gas', 'solar', 'wind', 'nuclear', 'load']
+/** 电压等级配色：规则 / 图例 / 标签三处共用一份，改这里到处一致 */
+export const VOLTAGE_COLORS = {
+	1050: '#ff4fa3',
+	525: '#a06bff',
+	230: '#3fa7ff',
+	15.7: '#4fd1a5'
+}
+
+/** 固定种子的随机数：每次刷新布局一致，方便对着文档看效果 */
+export const createRandom = (seed) => () => {
+	seed = (seed * 1664525 + 1013904223) % 4294967296
+	return seed / 4294967296
+}
+
+/** 演示数据落在这块范围里：fitView 一次全看到 */
+export const DEMO_CENTER = [116.35, 39.0]
+export const DEMO_RADIUS = 2.2
+/**
+ * 演示节点：环上撒点（半径按序号轻微起伏，不是标准圆），
+ * 电压 / 类型 / 分区按序号取模，分布均匀 —— 按属性配色、按规则改样式一眼能看出效果。
+ */
+export const createDemoPoints = (count = 28, seed = 20240915) => {
+	const random = createRandom(seed)
+	const points = []
+	for (let index = 0; index < count; index += 1) {
+		const angle = (index / count) * Math.PI * 2
+		const radius = DEMO_RADIUS * (0.6 + ((index % 5) / 5) * 0.4)
+		points.push({
+			id: `node-${index}`,
+			x: Number((DEMO_CENTER[0] + Math.cos(angle) * radius).toFixed(5)),
+			y: Number((DEMO_CENTER[1] + Math.sin(angle) * radius).toFixed(5)),
+			name: `变电站 ${index + 1}`,
+			vn_kv: VOLTAGE_LEVELS[index % VOLTAGE_LEVELS.length],
+			station_type: STATION_TYPES[(index * 3) % STATION_TYPES.length],
+			zone_name: `分区 ${(index % 4) + 1}`,
+			max_loading_rate: Number((0.4 + random() * 1.1).toFixed(3))
+		})
+	}
+	return points
+}
+/**
+ * 演示线路：沿环把相邻节点连起来（每点两条，度数均匀），
+ * 再补几条「辐条」连到 0 号节点 —— 环 + 辐条比纯环更像一张网，框选 / 拾取都有东西可点。
+ * 每 7 条里有一条标成直流线路（type: 'dc_line'），给装饰 / 规则演示用。
+ */
+export const connectDemoLines = (points) => {
+	const lines = []
+	const push = (fromIndex, toIndex) => {
+		const from = points[fromIndex]
+		const to = points[toIndex]
+		lines.push({
+			id: `line-${lines.length}`,
+			name: `线路 ${lines.length + 1}`,
+			from: from.id,
+			to: to.id,
+			vn_kv: from.vn_kv,
+			max_loading_rate: Number(((from.max_loading_rate + to.max_loading_rate) / 2).toFixed(3)),
+			...(lines.length % 7 === 3 ? { type: 'dc_line' } : {})
+		})
+	}
+	points.forEach((point, index) => push(index, (index + 1) % points.length))
+	points.forEach((point, index) => {
+		if (index > 0 && index % 5 === 0) {
+			push(0, index)
+		}
+	})
+	return lines
+}
+/**
+ * 一次拿齐：节点 + 线路（含通道回线）+ 通道。
+ * `lines` 已经带上通道回线，直接交给 createGisView({ points, lines, channels }) 就行；
+ * 只想演示普通线路时用 `linesWithoutChannel`。
+ */
+export const buildDemoData = (options = {}) => {
+	const { count = 28, seed = 20240915, channels = 3 } = options
+	const points = createDemoPoints(count, seed)
+	const lines = connectDemoLines(points)
+	if (!channels) {
+		return { points, lines, linesWithoutChannel: lines, channelLines: [], channels: [] }
+	}
+	const specs = [
+		{ id: 'channel-a', name: '甲通道', from: points[0].id, to: points[7 % count].id, circuits: 3, lineProps: { vn_kv: 1050, max_loading_rate: 1.12 } },
+		{ id: 'channel-b', name: '乙通道', from: points[12 % count].id, to: points[19 % count].id, circuits: 2, lineProps: { vn_kv: 525, max_loading_rate: 0.72 } },
+		{ id: 'channel-c', name: '丙通道', from: points[3 % count].id, to: points[15 % count].id, circuits: 4, lineProps: { vn_kv: 230, max_loading_rate: 0.51 } }
+	].slice(0, channels)
+	const built = createChannels(specs)
+	return {
+		points,
+		lines: [...lines, ...built.lines],
+		linesWithoutChannel: lines,
+		channelLines: built.lines,
+		channels: built.channels
+	}
+}