gis-view-webgl2 0.1.0 → 0.1.2

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "gis-view-webgl2",
-  "version": "0.1.0",
-  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，无内置界面，点击 / 双击 / 拖拽可配置",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "build:lib": "tsc && node scripts/clean-dist.mjs && vite build --config vite.config.lib.js && node scripts/obfuscate-dist.mjs && node scripts/copy-types.mjs",
-    "prepack": "npm run build:lib",
-    "pack:lib": "npm pack --dry-run",
-    "preview": "vite preview",
-    "check:docs": "node docs/steps/check-doc-coverage.mjs && node docs/steps/check-doc-truth.mjs && node docs/steps/check-sample-fields.mjs && node docs/steps/check-doc-center.mjs"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.js"
-    },
-    "./style.css": "./dist/gis-view.css"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "docs"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
-    "javascript-obfuscator": "^5.6.0",
-    "typescript": "~6.0.2",
-    "vite": "^8.2.2",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vue": "^3.5.32"
-  }
-}
+{
+  "name": "gis-view-webgl2",
+  "version": "0.1.2",
+  "description": "WebGL2 矢量视图：点、线与 GeoJSON / 图片背景层，无内置界面，点击 / 双击 / 拖拽可配置",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "tsc && node scripts/clean-dist.mjs && vite build --config vite.config.lib.js && node scripts/obfuscate-dist.mjs && node scripts/copy-types.mjs",
+    "prepack": "npm run build:lib",
+    "pack:lib": "npm pack --dry-run",
+    "preview": "vite preview",
+    "check:docs": "node docs/steps/check-doc-coverage.mjs && node docs/steps/check-doc-truth.mjs && node docs/steps/check-sample-fields.mjs && node docs/steps/check-doc-center.mjs"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/gis-view.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "javascript-obfuscator": "^5.6.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue": "^3.5.32"
+  }
+}

package/docs/demos/HistoryDemo.vue

@@ -1,230 +0,0 @@
-<script setup>
-/**
- * 历史与批量：把「改数据」这件事的账本摊开 —— 一批改动作一条记录，history 给出撤销 / 重做与两份栈。
- *
- * 面板上四件事：
- *   1. 「批量移动 / 批量换色」：view.batch(fn) 里逐个 updatePoint / setPointColor —— 回调里立刻生效，
- *      收尾只发一条 onDataChange（type: 'batch'，changes 里是每一笔）、历史里也只多一步；
- *   2. 「撤销 / 重做」：history 缺省是关的（记录要占内存），这一页显式打开（history: { limit: 100 }）。
- *      读数来自 onHistory；快捷键 Ctrl+Z / Ctrl+Shift+Z 与按钮走同一条路，没得撤销 / 重做时按钮灰掉；
- *   3. 「画质」：四档只影响绘制 —— 换档不重排场景、不动数据，也不改选中与筛选；
- *   4. 「功能预设」：features 的 edit（全开）/ view（只读浏览）/ static（静态图）一次切好交互口径。
- *
- * 注意：把改回原样的操作（拖过去又拖回来）不会进历史 —— 记的是「改动本身」的净效果，不是操作流水。
- */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
-import { buildDemoData } from './shared/demoData.js'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const batchCount = ref(8)
-const quality = ref('high')
-const preset = ref('edit')
-const historyState = ref({ enabled: true, undoCount: 0, redoCount: 0, canUndo: false, canRedo: false })
-const readouts = ref({ change: '—', quality: '—', features: '—', last: '—', stats: '—' })
-const dataset = buildDemoData({ count: 28 })
-let view = null
-let round = 0
-/** 面板下一次刷新读数的时刻（fps 每帧都变，节流之后再写响应式数据） */
-let statsDrawnAt = Number.NEGATIVE_INFINITY
-
-const PALETTE = ['#ff4fa3', '#a06bff', '#3fa7ff', '#4fd1a5', '#ffb454', '#ff6b6b']
-const QUALITY_CYCLE = [
-	{ id: 'high', label: 'high 全开' },
-	{ id: 'balanced', label: 'balanced 关光晕' },
-	{ id: 'lean', label: 'lean 关装饰' },
-	{ id: 'fast', label: 'fast 降分辨率' }
-]
-const FEATURE_PRESETS = [
-	{ id: 'edit', label: '全功能编辑' },
-	{ id: 'view', label: '只读浏览' },
-	{ id: 'static', label: '静态图' }
-]
-
-/** 开关表的读数：挑当前最影响手感的那几项摆在面板上 */
-const describeFeatures = (state) => {
-	const on = (name) => (state[name] ? '开' : '关')
-	return `平移 ${on('pan')} · 缩放 ${on('zoom')} · 悬停 ${on('hover')} · 选中 ${on('select')} · 拖动 ${on('drag')} · 拐点 ${on('waypoint')} · 快捷键 ${on('keyboard')}`
-}
-const describeQuality = (state) => `${state.name}（第 ${state.level} 档 · ${state.scale === 1 ? '原生分辨率' : `${Math.round(state.scale * 100)}% 分辨率`}）`
-
-const buildOptions = () => ({
-	points: dataset.points,
-	lines: dataset.lines,
-	channels: dataset.channels,
-	channelWidth: 2.4,
-	channelInset: 1.8,
-	pointStyle: { size: 6, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
-	lineStyle: { width: 1.4, color: 'rgba(120, 168, 226, 0.55)' },
-	showGrid: true,
-	gridColor: 'rgba(126, 168, 214, 0.22)',
-	fitPadding: 40,
-	// 这一页的主角：历史显式打开、画质从 high 起、功能开关先全开
-	history: { limit: 100 },
-	quality: 'high',
-	features: 'edit',
-	onReady: () => emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路，历史已打开`),
-	onHistory: (payload) => {
-		historyState.value = { enabled: true, canUndo: payload.canUndo, canRedo: payload.canRedo, undoCount: payload.undoCount, redoCount: payload.redoCount }
-		const action = payload.action === 'push' ? '记下' : payload.action === 'undo' ? '撤销' : payload.action === 'redo' ? '重做' : '清空'
-		readouts.value = { ...readouts.value, last: payload.action === 'clear' ? `清空了两份栈` : `${action}「${payload.entry?.label ?? '—'}」` }
-	},
-	onQualityChange: (state) => {
-		quality.value = state.name
-		readouts.value = { ...readouts.value, quality: describeQuality(state) }
-	},
-	onFeatureChange: (state) => {
-		readouts.value = { ...readouts.value, features: describeFeatures(state) }
-	},
-	onDataChange: (payload) => {
-		const changes = payload?.changes?.length ?? 0
-		const counts = payload?.counts ?? {}
-		readouts.value = {
-			...readouts.value,
-			change: payload?.type === 'batch'
-				? `batch · ${changes} 笔合并成一条（${counts.points ?? 0} 点 / ${counts.lines ?? 0} 线 / ${counts.channels ?? 0} 通道）`
-				: `${payload?.type ?? '—'} · ${counts.points ?? 0} 点 / ${counts.lines ?? 0} 线 / ${counts.channels ?? 0} 通道`
-		}
-	},
-	onStats: (next) => {
-		const now = performance.now()
-		if (now - statsDrawnAt < 300) {
-			return
-		}
-		statsDrawnAt = now
-		readouts.value = { ...readouts.value, stats: `${next.idle ? '空闲' : `${Math.round(next.fps)} fps`} · 最近一帧 ${next.frameMs.toFixed(2)} ms · 绘制 ${next.drawCalls} 次` }
-	}
-})
-
-/** 一批改动：8 / 20 / 28 个节点一起动，收尾只留一条记录、一步历史 */
-const batchMove = () => {
-	if (!view) {
-		return
-	}
-	round += 1
-	const step = round % 2 === 1 ? 12 : -12
-	const picked = view.getData().points.slice(0, batchCount.value)
-	view.batch(() => {
-		for (const point of picked) {
-			view.updatePoint(point.id, { x: point.x + step, y: point.y })
-		}
-	}, { label: `批量移动 ${picked.length} 个节点` })
-	emit('notice', `batch：${picked.length} 次 updatePoint 收成一条记录（${step > 0 ? '+' : ''}${step}）`)
-}
-const batchColor = () => {
-	if (!view) {
-		return
-	}
-	round += 1
-	const picked = view.getData().points.slice(0, batchCount.value)
-	view.batch(() => {
-		picked.forEach((point, index) => view.setPointColor(point.id, PALETTE[(index + round) % PALETTE.length]))
-	}, { label: `批量换色 ${picked.length} 个节点` })
-	emit('notice', `batch：${picked.length} 次 setPointColor 收成一条记录`)
-}
-const undo = () => {
-	const entry = view?.undo()
-	emit('notice', entry ? `撤销「${entry.label}」` : '没得撤销')
-}
-const redo = () => {
-	const entry = view?.redo()
-	emit('notice', entry ? `重做「${entry.label}」` : '没得重做')
-}
-const clearHistory = () => {
-	const removed = view?.clearHistory() ?? 0
-	emit('notice', `clearHistory：清掉 ${removed} 条记录（数据保持现状）`)
-}
-/** 换档：读数由 onQualityChange 写，这里只把选中的 chip 点亮 */
-const setQuality = (id) => {
-	view?.setQuality(id)
-	quality.value = id
-}
-const setPreset = (id) => {
-	view?.setFeatures(id)
-	preset.value = id
-}
-const fitView = () => {
-	view?.fitView(40)
-}
-const zoomBy = (factor) => {
-	view?.zoomBy(factor)
-}
-
-onMounted(() => {
-	view = createGisView(container.value, buildOptions())
-	readouts.value = {
-		...readouts.value,
-		quality: describeQuality(view.getQuality()),
-		features: describeFeatures(view.getFeatures())
-	}
-	historyState.value = { enabled: true, ...view.getHistoryState() }
-})
-
-onBeforeUnmount(() => {
-	view?.destroy()
-	view = null
-})
-</script>
-<template>
-	<section class="dv-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" @click="fitView">适应全部</button>
-				<button type="button" @click="zoomBy(1.4)">放大</button>
-				<button type="button" @click="zoomBy(1 / 1.4)">缩小</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>批量改动（batch）</h3>
-				<div class="dv-row">
-					<label>一批改
-						<select v-model.number="batchCount">
-							<option :value="8">8 个节点</option>
-							<option :value="20">20 个节点</option>
-							<option :value="28">全部 28 个</option>
-						</select>
-					</label>
-					<button type="button" class="dv-button dv-button--primary" @click="batchMove">批量移动</button>
-					<button type="button" class="dv-button" @click="batchColor">批量换色</button>
-				</div>
-				<p class="dv-hint">回调里的每一次 updatePoint / setPointColor 都立刻生效，但收尾只发一条 onDataChange（type: batch）、历史里只多一步。</p>
-			</div>
-			<div class="dv-group">
-				<h3>历史（history）</h3>
-				<div class="dv-row">
-					<button type="button" class="dv-button" :disabled="!historyState.canUndo" @click="undo">撤销</button>
-					<button type="button" class="dv-button" :disabled="!historyState.canRedo" @click="redo">重做</button>
-					<button type="button" class="dv-button dv-button--danger" @click="clearHistory">清空历史</button>
-				</div>
-				<p class="dv-readout">栈：可撤销 {{ historyState.undoCount }} 步 / 可重做 {{ historyState.redoCount }} 步</p>
-				<p class="dv-readout">最近一条：{{ readouts.last }}</p>
-				<p class="dv-hint">缺省是关的，这一页写的是 history: { limit: 100 }；快捷键 Ctrl+Z / Ctrl+Shift+Z 走同一条路，把节点移回去的那次改动不进历史（记的是净改动）。</p>
-			</div>
-			<div class="dv-group">
-				<h3>画质（quality）</h3>
-				<div class="dv-chips">
-					<button v-for="item in QUALITY_CYCLE" :key="item.id" type="button" class="dv-chip" :class="{ 'dv-chip--active': quality === item.id }" @click="setQuality(item.id)">{{ item.label }}</button>
-				</div>
-				<p class="dv-readout">当前：{{ readouts.quality }}</p>
-				<p class="dv-hint">换档只影响绘制 —— 不重排场景、不动数据、也不改选中与筛选。</p>
-			</div>
-			<div class="dv-group">
-				<h3>功能预设（features）</h3>
-				<div class="dv-chips">
-					<button v-for="item in FEATURE_PRESETS" :key="item.id" type="button" class="dv-chip" :class="{ 'dv-chip--active': preset === item.id }" @click="setPreset(item.id)">{{ item.label }}</button>
-				</div>
-				<p class="dv-readout">{{ readouts.features }}</p>
-				<p class="dv-hint">缺省全关：'edit' 全开、'view' 只读（能看能选、改不动数据）、'static' 只剩画布与数据。</p>
-			</div>
-			<div class="dv-group">
-				<h3>读数</h3>
-				<p class="dv-readout">最近变更：{{ readouts.change }}</p>
-				<p class="dv-readout">性能：{{ readouts.stats }}</p>
-			</div>
-		</aside>
-	</section>
-</template>

package/docs/demos/InterfaceDemo.vue

@@ -1,309 +0,0 @@
-<script setup>
-/**
- * 接口数据：后端返回的 station_data / channel_data 口径怎么接进组件。
- *
- * 组件本身只认 points / lines / channels 三列（见 docs/GisView.md 的「动态换数据」），
- * 接口的列名不一样就在这里映射一次 —— 这一份映射逻辑属于业务侧，放在 demo 里，
- * 组件一个字节都不用改。页面上演示三件事：
- *
- * 1. 整体换：把接口载荷映射成三列之后走 updateData(points, lines, channels)，一次换完只发一条数据变更；
- * 2. 分批补：通道一条条到货时走 addChannels（逐条落地，只重排一次场景）；
- * 3. 收 loading：onDataRendered / whenDataRendered 在「新数据真的画出来」之后兑现，见读数栏。
- * 4. 先建实例后拉数据：createGisView 在 onMounted 就位（空场景照样先铺底图 / 网格），
- *    「模拟接口（延迟 900ms）」演示「清空 + loading → 接口返回 → updateData → whenDataRendered」这一段。
- *
- * real.json 是仓库里那份真实接口样本（1 个场站 + 1 条两回通道），
- * 「生成场景」另造一份结构相同的多场站载荷，用来演示切场景。
- */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
-import realPayload from '../../real.json'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const readouts = ref({ scene: '—', counts: '—', frame: '—', warnings: '0 条' })
-const loading = ref(false)
-const activeScene = ref('real')
-let view = null
-let sceneA = null
-
-/** 单条对象与数组都收：接口里这两种写法都出现过 */
-const toList = value => (Array.isArray(value) ? value : value && typeof value === 'object' ? [value] : [])
-const pick = (...values) => values.find(value => value !== undefined && value !== null)
-const number = (...values) => {
-	for (const value of values) {
-		const parsed = Number(value)
-		if (Number.isFinite(parsed)) {
-			return parsed
-		}
-	}
-	return null
-}
-
-/**
- * 接口载荷 → 组件三列。映射规则（列名不一样时改这一个函数就行）：
- * - 场站：id 取 station_id / id / station_name；坐标取 lon / lng / longitude / x 与 lat / latitude / y；
- * - 通道：两端取 from_station / to_station，回线在 line_data，整条路由在 coords（首尾就是两端节点，去掉当拐点）；
- * - 两端有一个不在 station_data 里时，按 coords 画成一条独立线路并记一条提醒（不丢数据、也不抛错）。
- */
-const mapInterfacePayload = (payload) => {
-	const stations = toList(payload?.station_data)
-	const channelList = toList(payload?.channel_data)
-	const points = []
-	const lines = []
-	const channels = []
-	const warnings = []
-	const usedStationIds = new Set()
-	const usedLineIds = new Set()
-	stations.forEach((station, index) => {
-		const raw = pick(station.station_id, station.id, station.station_name, `station-${index}`)
-		const x = number(station.lon, station.lng, station.longitude, station.x)
-		const y = number(station.lat, station.latitude, station.y)
-		if (x === null || y === null) {
-			warnings.push(`场站 ${String(raw)} 读不出坐标，已跳过`)
-			return
-		}
-		let id = String(raw)
-		// id 撞车往后排：label 与 from / to 都按它对齐，不能重复
-		for (let suffix = 2; usedStationIds.has(id); suffix += 1) {
-			id = `${String(raw)}-${suffix}`
-		}
-		usedStationIds.add(id)
-		points.push({ ...station, id, x, y, name: pick(station.station_name, station.name, id) })
-	})
-	channelList.forEach((channel, channelIndex) => {
-		const fromId = String(pick(channel.from_station, channel.from, ''))
-		const toId = String(pick(channel.to_station, channel.to, ''))
-		const fromOk = usedStationIds.has(fromId)
-		const toOk = usedStationIds.has(toId)
-		const channelId = pick(channel.channel_id, channel.id, `channel-${channelIndex}`)
-		const channelName = pick(channel.channel_name, channel.name, channelId)
-		// 路由：coords / route 是整条（首尾就是两端节点，去掉当拐点）；path / waypoints 本来就是拐点
-		const route = toList(pick(channel.coords, channel.coords_list, channel.route))
-		const path = (toList(pick(channel.path, channel.waypoints)).length
-			? toList(pick(channel.path, channel.waypoints))
-			: route.slice(1, -1)
-		).map(([x, y]) => [Number(x), Number(y)]).filter(([x, y]) => Number.isFinite(x) && Number.isFinite(y))
-		const circuits = toList(channel.line_data).length || toList(channel.lines).length || 1
-		if (!fromOk || !toOk) {
-			// 两端缺一个：按路由坐标画一条独立线路（还是走组件自己的 lines），提醒留给人看
-			warnings.push(`通道 ${String(channelName)} 的两端不在 station_data 里，已按 coords 画成独立线路`)
-			const start = route[0] ?? path[0]
-			const end = route[route.length - 1] ?? path[path.length - 1]
-			const extra = route.length > 2 ? route.slice(1, -1).map(([x, y]) => [Number(x), Number(y)]) : path
-			const startOk = Array.isArray(start) && number(start[0]) !== null
-			const endOk = Array.isArray(end) && number(end[0]) !== null
-			if (!startOk || !endOk) {
-				warnings.push(`通道 ${String(channelName)} 既没有可用端点也没有 coords，已跳过`)
-				return
-			}
-			let lineId = `${String(channelId)}#1`
-			while (usedLineIds.has(lineId)) {
-				lineId = `${lineId}-2`
-			}
-			usedLineIds.add(lineId)
-			lines.push({
-				...channel,
-				id: lineId,
-				name: String(channelName),
-				start: [Number(start[0]), Number(start[1])],
-				end: [Number(end[0]), Number(end[1])],
-				path: extra,
-				channel_id: channelId
-			})
-			return
-		}
-		const channelLines = []
-		for (let index = 0; index < circuits; index += 1) {
-			const member = toList(channel.line_data)[index] ?? toList(channel.lines)[index] ?? {}
-			let lineId = circuits > 1 ? `${String(channelId)}#${index + 1}` : String(pick(member.line_id, member.id, channelId))
-			while (usedLineIds.has(lineId)) {
-				lineId = `${lineId}-2`
-			}
-			usedLineIds.add(lineId)
-			const line = {
-				...member,
-				id: lineId,
-				name: member.name ?? (circuits > 1 ? `${String(channelName)} #${index + 1}` : String(channelName)),
-				from: fromId,
-				to: toId,
-				channel_id: channelId
-			}
-			lines.push(line)
-			channelLines.push(lineId)
-		}
-		channels.push({ ...channel, id: String(channelId), name: String(channelName), lineIds: channelLines })
-	})
-	return { points, lines, channels, warnings }
-}
-
-/** 另造一份结构相同的接口载荷（多场站 + 通道 + 路由拐点），用来演示切场景 */
-const buildScenePayload = (count, offset) => {
-	const station_data = []
-	const channel_data = []
-	const at = index => {
-		const angle = (index / count) * Math.PI * 2
-		return { lon: 20 + Math.cos(angle) * (12 + offset), lat: 4 + Math.sin(angle) * (12 + offset) }
-	}
-	for (let index = 0; index < count; index += 1) {
-		const spot = at(index)
-		station_data.push({
-			station_id: `S${index}`,
-			station_name: `场站 ${index + 1}`,
-			lon: spot.lon,
-			lat: spot.lat,
-			vn_kv: index % 2 ? 220 : 525,
-			station_type: index % 3 === 0 ? 'storage' : 'substation'
-		})
-	}
-	for (let index = 0; index < count; index += 1) {
-		const next = (index + 1) % count
-		const a = at(index)
-		const b = at(next)
-		channel_data.push({
-			channel_id: `C${index}`,
-			channel_name: `通道 ${index + 1}`,
-			from_station: `S${index}`,
-			to_station: `S${next}`,
-			line_data: [{ name: `回线 ${index + 1}-1` }, { name: `回线 ${index + 1}-2` }],
-			coords: [[a.lon, a.lat], [(a.lon + b.lon) / 2 + 1.5, (a.lat + b.lat) / 2 - 1.5], [b.lon, b.lat]]
-		})
-	}
-	return { station_data, channel_data }
-}
-
-const showWarnings = (warnings) => {
-	readouts.value = { ...readouts.value, warnings: warnings.length ? warnings.join('；') : '0 条' }
-}
-
-/** 读接口载荷 → 映射 → 整体换：切场景就走这一条 */
-const loadScene = async (payload, name) => {
-	if (!view) {
-		return
-	}
-	const mapped = mapInterfacePayload(payload)
-	loading.value = true
-	view.updateData(mapped.points, mapped.lines, mapped.channels)
-	const rendered = await view.whenDataRendered()
-	loading.value = false
-	readouts.value = {
-		...readouts.value,
-		scene: name,
-		counts: `${mapped.points.length} 场站 / ${mapped.lines.length} 回线 / ${mapped.channels.length} 通道`,
-		frame: rendered ? `第 ${rendered.frame} 帧画完（${rendered.frameMs.toFixed(1)} ms）` : '—'
-	}
-	showWarnings(mapped.warnings)
-	activeScene.value = name
-	emit('notice', `已切到「${name}」：${mapped.points.length} 场站 / ${mapped.lines.length} 回线`)
-}
-
-/**
- * 「先建实例、后拉数据」：实例在 onMounted 里已经建好（空场景也照样先铺网格 / 底图），
- * 接口没回来之前画面停在空场景 + loading；数据到了走同一条 updateData，收尾等 whenDataRendered。
- * 首屏落位不用自己管：组件在「首次拿到数据」时会按 initialView 自动适应一次。
- */
-const loadFromApi = async () => {
-	if (!view || loading.value) {
-		return
-	}
-	loading.value = true
-	view.updateData([], [], [])
-	readouts.value = { ...readouts.value, scene: '接口请求中…（实例已建好，空场景）', counts: '0 / 0 / 0', frame: '等待接口返回' }
-	await new Promise(resolve => setTimeout(resolve, 900))
-	await loadScene(buildScenePayload(12, 3), '接口场景（延迟 900ms 后到货）')
-}
-const loadReal = () => loadScene(realPayload, 'real.json')
-const loadGenerated = (offset) => loadScene(buildScenePayload(10, offset), `生成场景（半径 ${12 + offset}）`)
-
-/** 分批补：通道一条条到货时的写法（逐条落地，只重排一次场景、只记一步历史） */
-const appendChannels = () => {
-	if (!view) {
-		return
-	}
-	const payload = buildScenePayload(6, 9)
-	const stations = mapInterfacePayload(payload)
-	const extra = payload.channel_data.slice(2, 5).map((channel, index) => ({
-		from: `S${index + 2}`,
-		to: `S${index + 3}`,
-		circuits: 1,
-		name: `补进来的通道 ${index + 1}`
-	}))
-	view.addPoints(stations.points)
-	const result = view.addChannels(extra)
-	readouts.value = {
-		...readouts.value,
-		scene: '依次补通道',
-		counts: `本次补进 ${result.count} 条通道（成功 ${result.lineIds.length} 回线）`,
-		frame: '—'
-	}
-	emit('notice', `addChannels：${result.count} 条通道一次落地`)
-}
-
-const clearData = () => {
-	view?.updateData([], [], [])
-	readouts.value = { ...readouts.value, scene: '已清空', counts: '0 / 0 / 0', frame: '—' }
-}
-
-onMounted(() => {
-	sceneA = mapInterfacePayload(realPayload)
-	view = createGisView(container.value, {
-		points: sceneA.points,
-		lines: sceneA.lines,
-		channels: sceneA.channels,
-		// 功能开关缺省都是关的：demo 要能看能选，就显式打开查看类那几个（见 docs/GisView.md 的「功能开关」）
-		features: 'view',
-		showGrid: true,
-		fitPadding: 48,
-		pointStyle: { size: 8, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
-		lineStyle: { width: 1.6, color: 'rgba(120, 168, 226, 0.7)' },
-		channelWidth: 2.2,
-		channelInset: 1.6,
-		onDataRendered: (payload) => {
-			readouts.value = { ...readouts.value, frame: `第 ${payload.frame} 帧画完（${payload.frameMs.toFixed(1)} ms，合并 ${payload.changes} 笔）` }
-		},
-		onWarning: (text) => showWarnings([text])
-	})
-	readouts.value = {
-		...readouts.value,
-		scene: 'real.json',
-		counts: `${sceneA.points.length} 场站 / ${sceneA.lines.length} 回线 / ${sceneA.channels.length} 通道`
-	}
-	showWarnings(sceneA.warnings)
-})
-
-onBeforeUnmount(() => {
-	view?.destroy()
-	view = null
-})
-</script>
-<template>
-	<section class="dv-demo">
-		<div class="dv-stage">
-			<div ref="container" class="dv-canvas"></div>
-			<div class="dv-toolbar">
-				<button type="button" @click="loadReal">real.json</button>
-				<button type="button" @click="loadGenerated(0)">生成场景 A</button>
-				<button type="button" @click="loadGenerated(4)">生成场景 B</button>
-				<button type="button" :disabled="loading" @click="loadFromApi">模拟接口（延迟 900ms）</button>
-				<button type="button" @click="appendChannels">依次补通道</button>
-				<button type="button" @click="clearData">清空</button>
-			</div>
-			<p v-if="loading" class="dv-hint">正在加载：接口 / 切场景期间停在这句提示上，等 whenDataRendered() 兑现再撤下…</p>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>接口 → 组件</h3>
-				<p class="dv-readout">当前：{{ readouts.scene }}</p>
-				<p class="dv-readout">条数：{{ readouts.counts }}</p>
-				<p class="dv-readout">渲染：{{ readouts.frame }}</p>
-				<p class="dv-readout">提醒：{{ readouts.warnings }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>映射口径</h3>
-				<p class="dv-hint">这一页的 mapInterfacePayload 就是全部转换逻辑：场站取 station_id / lon / lat，通道取 from_station / to_station，line_data 展开成回线，coords 去掉首尾当拐点；两端不在 station_data 里的通道按 coords 画成独立线路并记一条提醒。</p>
-				<p class="dv-hint">组件只认 points / lines / channels：切场景走 updateData 一次换完，通道一条条到货走 addChannels 批量落地，收 loading 用 onDataRendered / whenDataRendered；「模拟接口（延迟 900ms）」演示推荐的「先 createGisView（空场景）→ 接口回来 → updateData」—— 首屏落位由组件在首次拿到数据时自动做一次，不用等接口再建实例。</p>
-			</div>
-		</aside>
-	</section>
-</template>