gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/demos.js

@@ -1,34 +1,34 @@
-/**
- * 演示注册表：一个功能一个演示，各自独立成组件（自己的画布 + 控件 + 读数），
- * 由 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' }
+/**
+ * 演示注册表：一个功能一个演示，各自独立成组件（自己的画布 + 控件 + 读数），
+ * 由 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_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_PERF = { href: `${docsBase}#manual/20-性能与大数据.md`, label: '20 性能与大数据' }
 const DOC_API = { href: `${docsBase}#接口协议.md`, label: '编辑接口协议' }
 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 = [
+
+/** 页签分组的固定次序与组名（每组里的演示按 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: '基础视图',
@@ -47,17 +47,17 @@ export const DEMOS = [
 	},
 	{
 		id: 'labels',
-		title: '标签交互',
-		group: 'interact',
-		blurb: '标签点选 / 拖拽 / 右键菜单（编辑、改位置、删除），以及用一套 API 给选中集批量加标签。',
-		doc: DOC_GUIDE,
-		component: () => import('./LabelDemo.vue')
-	},
+		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')
 	},
@@ -77,35 +77,35 @@ export const DEMOS = [
 		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',
+	{
+		id: 'hover-tooltip',
+		title: '悬停与提示',
+		group: 'style',
+		blurb: '悬浮节点 / 线路的高亮样式现场调；tooltip 内容可用模板、函数或 DOM 元素，悬停期间也能立刻刷新。',
+		doc: DOC_LABELS,
+		component: () => import('./HoverTooltipDemo.vue')
+	},
+	{
+		id: 'channel',
+		title: '通道与数据',
+		group: 'data',
 		blurb: '通道分组拆合、拐点增删拖、通道内指定回线显隐、节点 / 线路 / 通道 / 分组单条与批量显隐，以及隐藏回线车道 preserve / center 对照；另带整份 groups / path 覆盖的假接口联调与数据导出 / 回灌。',
-		doc: DOC_API,
-		component: () => import('./ChannelDemo.vue')
-	},
-	{
-		id: 'backend',
-		title: '编辑与保存',
-		group: 'data',
-		blurb: '分组增删改、拐点增删改、场站改坐标：每一步要发给后端的请求体都摊在面板上，配上待提交队列 / 版本号 / 409 与整份保存。',
-		doc: DOC_API,
-		component: () => import('./BackendSyncDemo.vue')
-	},
+		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: '一条 * 订阅看全部事件，配上常用方法按钮 —— 事件载荷与方法返回值都打在日志里。',
+		group: 'interact',
+		blurb: '一条 * 订阅看全部事件，配上常用方法按钮 —— 事件载荷与方法返回值都打在日志里。',
 		doc: DOC_GUIDE,
 		component: () => import('./EventDemo.vue')
 	},
@@ -119,12 +119,12 @@ export const DEMOS = [
 	},
 	{
 		id: 'copy-merge',
-		title: '批量复制与合并',
-		group: 'interact',
+		title: '批量复制与合并',
+		group: 'interact',
 		blurb: '在画布 Shift 框选后整组复制或合并：复制 / 合并都接假后端，演示版本号、opId 幂等、失败重试与本地回滚；合并可切碰撞 / 中心进入目标区域两种触发时机，Alt 点击 / Ctrl+V 的复制事件也可直接回滚或用 addPoint 接管。',
-		doc: DOC_API,
-		component: () => import('./CopyMergeDemo.vue')
-	},
+		doc: DOC_API,
+		component: () => import('./CopyMergeDemo.vue')
+	},
 	{
 		id: 'drag',
 		title: '拖拽落点',
@@ -143,28 +143,28 @@ export const DEMOS = [
 	},
 	{
 		id: 'decoration',
-		title: '动态装饰器',
-		group: 'interact',
+		title: '动态装饰器',
+		group: 'interact',
 		blurb: '线路与节点可分开或同时开启：悬停目标就出临时装饰，移开收掉、松手命中才发 ready；节点可调偏移 / 固定 / 鼠标吸附、连接线与白名单，线路可调平行方向与单线 / 分组 / 通道范围，确认才写数据。',
-		doc: DOC_LABELS,
-		component: () => import('./DecorationDraftDemo.vue')
-	},
+		doc: DOC_LABELS,
+		component: () => import('./DecorationDraftDemo.vue')
+	},
 	{
 		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')
-	},
+		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: '扩展能力',
@@ -207,13 +207,13 @@ export const DEMOS = [
 	},
 	{
 		id: 'full',
-		title: '综合示例（全功能）',
-		group: 'full',
+		title: '综合示例（全功能）',
+		group: 'full',
 		blurb: '所有面板都在这一个演示里：十万级数据、热力图、鹰眼图、通道编辑、历史与快捷键；框选还能保留矩形、框内拖动整组平移，并切到 DOM 框演示线型 / 圆角 / className。',
-		doc: { href: docsBase, label: '文档中心' },
-		component: () => import('./GisViewDemo.vue')
-	}
-]
-
-/** 默认进综合示例：它信息量最全，也是文档里到处引用的那一个 */
-export const DEFAULT_DEMO_ID = 'full'
+		doc: { href: docsBase, label: '文档中心' },
+		component: () => import('./GisViewDemo.vue')
+	}
+]
+
+/** 默认进综合示例：它信息量最全，也是文档里到处引用的那一个 */
+export const DEFAULT_DEMO_ID = 'full'

package/docs/demos/gis-view-demo/useGisViewDemo.js

@@ -613,9 +613,9 @@ export const useGisViewDemo = () => {
 		renderLabel.value = `第 ${payload.frame} 帧 · ${payload.fps.toFixed(0)} FPS · ${payload.drawCalls} 次绘制 · ${payload.interval}ms 节流`
 	}
 	/**
-	 * 功能开关（features）：18 个开关的**有效值**由 getFeatures() 给出来 —— 预设名
+	 * 功能开关（features）：19 个开关的**有效值**由 getFeatures() 给出来 —— 预设名
 	 * （'edit' 全开 / 'view' 只读浏览 / 'static' 静态图）一行决定整体口径，单点开关再叠一层，
-	 * 没写的开关跟随各自的详细配置（draggable / boxSelect / copy.enabled…）。
+	 * 没写的开关跟随各自的详细配置（boxSelect / copy.enabled…；拖拽只由 features.drag 控制）。
 	 * 面板上的复选框直接照着这份有效值画：取消勾选＝强制关掉这一个，勾回去＝强制打开。
 	 */
 	const FEATURE_PRESET_OPTIONS = [
@@ -630,6 +630,8 @@ export const useGisViewDemo = () => {
 		zoom: '滚轮缩放',
 		hover: '悬停拾取',
 		select: '点击选中',
+		multiSelect: '无修饰键多选',
+		toggleSelect: '再次点击取消',
 		boxSelect: '框选',
 		drag: '拖动节点',
 		waypoint: '线路拐点',
@@ -4400,14 +4402,9 @@ export const useGisViewDemo = () => {
 			quality: qualityMode.value,
 			// 插件：把可复用的交互封装成一份（这里演示「F 键聚焦选中要素」，带自己的清理逻辑）
 			plugins: [focusSelectionPlugin],
-			draggable: draggable.value,
 			liveDrag: liveDrag.value,
-			clickable: clickable.value,
-			boxSelect: boxSelect.value,
 			// 框选结束后保留矩形：框内拖动整组平移选中的节点；面板可随时改，右侧读数能看到坐标
 			selectionBoxPersistent: selectionBoxPersistent.value,
-			multiSelect: multiSelect.value,
-			toggleSelect: toggleSelect.value,
 			// 快捷键：框选 / 多选 / 加点 / 复制这四个「按住 + 操作」的修饰键都能改（缺省 Ctrl / Ctrl / Ctrl / Alt）
 			shortcuts: buildShortcuts(),
 			// 节点复制：Alt 点节点跟随鼠标落地，接口复制落在节点旁边（落点偏移在 copy.offset 里）
@@ -4423,7 +4420,6 @@ export const useGisViewDemo = () => {
 			selectionOnTop: selectionOnTop.value,
 			// 光标：按悬停目标分类 + 按住 Ctrl 的变体，见「光标档位」下拉
 			cursorStyle: cursorStylePatch(),
-			waypointEditable: waypointEditable.value,
 			waypointVisibility: waypointAlways.value ? 'always' : 'selected',
 			fitPadding: 40,
 			// 鹰眼图由组件自带：这里只给尺寸、节点 / 线路各自的样式与交互参数
@@ -4569,18 +4565,27 @@ export const useGisViewDemo = () => {
 	// 换底图来源：定位到全省范围，并让数据映射跟着新底图重算一遍
 	watch(backgroundSource, value => applyBackground({ frame: value === 'province', remap: true }))
 	watch([backgroundMode, backgroundOpacity, backgroundImageFit, backgroundImageCorners, provinceAspectScale, provincePalette, provinceLabelShow, provinceLabelSize, provinceLabelColor], () => applyBackground())
-	watch(draggable, value => viewRef.value?.updateOptions({ draggable: value }))
+	const setDemoFeature = (name, value) => {
+		const view = viewRef.value
+		if (view) {
+			view.setFeatures({ ...view.getFeatures(), [name]: value })
+		}
+	}
+	watch(draggable, value => setDemoFeature('drag', value))
 	watch(liveDrag, value => viewRef.value?.updateOptions({ liveDrag: value }))
-	watch(clickable, value => viewRef.value?.updateOptions({ clickable: value }))
-	watch(boxSelect, value => viewRef.value?.updateOptions({ boxSelect: value }))
+	watch(clickable, value => {
+		setDemoFeature('hover', value)
+		setDemoFeature('select', value)
+	})
+	watch(boxSelect, value => setDemoFeature('boxSelect', value))
 	watch(selectionBoxPersistent, value => {
 		viewRef.value?.updateOptions({ selectionBoxPersistent: value })
 		if (!value) {
 			readSelectionBox()
 		}
 	})
-	watch(multiSelect, value => viewRef.value?.updateOptions({ multiSelect: value }))
-	watch(toggleSelect, value => viewRef.value?.updateOptions({ toggleSelect: value }))
+	watch(multiSelect, value => setDemoFeature('multiSelect', value))
+	watch(toggleSelect, value => setDemoFeature('toggleSelect', value))
 	// 快捷键自定义：四个「按住 + 操作」的动作改完立刻下发（框选 / 多选 / 加点的修饰键同时也是光标变体的判据）
 	watch([shortcutBoxSelect, shortcutMultiSelect, shortcutAddWaypoint, shortcutDuplicate], () => {
 		viewRef.value?.updateOptions({ shortcuts: buildShortcuts() })
@@ -4601,7 +4606,7 @@ export const useGisViewDemo = () => {
 		viewRef.value?.updateOptions({ selectionBoxStyle: buildSelectionBoxStyle() })
 		readSelectionBox()
 	})
-	watch(waypointEditable, value => viewRef.value?.updateOptions({ waypointEditable: value }))
+	watch(waypointEditable, value => setDemoFeature('waypoint', value))
 	watch(waypointAlways, value => viewRef.value?.updateOptions({ waypointVisibility: value ? 'always' : 'selected' }))
 	watch([pointSize, lineWidth], () => viewRef.value?.updateOptions({ pointStyle: buildPointStyle(), lineStyle: buildLineStyle(), ...hoverStylePatch() }))
 	// 线型与直流标记：把当前的这批线重新加工一遍再交回视图 —— 相机、选中与筛选都不动，只是重解析这批线

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
+	}
+}