gis-view-webgl2 0.1.1 → 0.1.3

package/docs/demos/ClusterDemo.vue

@@ -0,0 +1,251 @@
+<script setup>
+/**
+ * 点聚合演示：同一份合成数据在多簇中心附近铺开，面板上调开关 / 半径 / 最少成员数 / 展开缩放。
+ *
+ * 聚合只改「展示什么、能点到什么」：原始 points、getData()、listPoints() 与业务导出都不变；
+ * 聚合圆替代密集成员参与绘制、拾取、快照与 SVG / PNG 导出。点中聚合圆只发 clusterClick，
+ * 不会同时发普通 click，也不会改动选中集。
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { DEMO_CENTER, DEMO_RADIUS, createRandom } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+let view = null
+let statsDrawnAt = Number.NEGATIVE_INFINITY
+
+const DATA_COUNTS = [2000, 12000, 60000, 100000]
+const pointCountChoice = ref(12000)
+const clusterOn = ref(true)
+const radius = ref(60)
+const minPoints = ref(2)
+const maxZoom = ref(0)
+const statsText = ref('—')
+const clusterText = ref('—')
+const eventText = ref('等待点击聚合圆')
+const normalClicks = ref(0)
+const clusterClicks = ref(0)
+const lastCluster = ref(null)
+const firstClusterClient = ref(null)
+let dataset = { points: [] }
+
+/** 多簇数据：每簇一个中心，正态近似（四个随机数求和）让簇内密度自然衰减。 */
+const buildDataset = (count) => {
+	const random = createRandom(20261021)
+	const points = []
+	const centers = [
+		[-0.56, 0.34, 0.16],
+		[0.08, 0.56, 0.13],
+		[0.62, 0.22, 0.18],
+		[-0.32, -0.42, 0.15],
+		[0.48, -0.5, 0.14],
+		[0.02, -0.08, 0.1]
+	]
+	for (let index = 0; index < count; index += 1) {
+		const center = centers[index % centers.length]
+		const common = index < count * 0.08
+		const spread = common ? 1.6 : 0.68
+		const nx = (random() + random() + random() + random() - 2) * spread
+		const ny = (random() + random() + random() + random() - 2) * spread
+		points.push({
+			id: `cluster-point-${index}`,
+			x: Number((DEMO_CENTER[0] + (center[0] + nx * center[2]) * DEMO_RADIUS).toFixed(6)),
+			y: Number((DEMO_CENTER[1] + (center[1] + ny * center[2]) * DEMO_RADIUS).toFixed(6)),
+			name: `站点 ${index + 1}`,
+			zone_name: `分区 ${(index % centers.length) + 1}`,
+			vn_kv: [1050, 525, 230, 15.7][index % 4],
+			max_loading_rate: Number((0.35 + random() * 1.1).toFixed(3))
+		})
+	}
+	return { points }
+}
+
+const clusterOptions = () => clusterOn.value
+	? { enabled: true, radius: radius.value, minPoints: minPoints.value, maxZoom: maxZoom.value }
+	: false
+
+const buildOptions = () => ({
+	points: dataset.points,
+	pointStyle: { size: 4, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1 },
+	showGrid: true,
+	gridColor: 'rgba(126, 168, 214, 0.18)',
+	fitPadding: 42,
+	denseMode: 'off',
+	features: 'view',
+	pointCluster: clusterOptions(),
+	onReady: () => {
+		emit('notice', `点聚合演示已加载 ${dataset.points.length.toLocaleString()} 个点`)
+		queueMicrotask(syncClusters)
+	},
+	onClick: () => {
+		normalClicks.value += 1
+		eventText.value = '普通 click：聚合圆的点击不会再走到这里'
+	},
+	onClusterClick: payload => {
+		clusterClicks.value += 1
+		lastCluster.value = {
+			id: payload.id,
+			count: payload.count,
+			pointIds: [...payload.pointIds],
+			bounds: { ...payload.bounds },
+			coordinate: [...payload.coordinate]
+		}
+		const ids = payload.pointIds.slice(0, 6).join('、') + (payload.pointIds.length > 6 ? '…' : '')
+		eventText.value = `clusterClick：${payload.count} 点 · ${ids} · 包围盒 ${payload.bounds.minX.toFixed(3)}, ${payload.bounds.minY.toFixed(3)} ~ ${payload.bounds.maxX.toFixed(3)}, ${payload.bounds.maxY.toFixed(3)}`
+	},
+	onStats: next => {
+		const now = performance.now()
+		if (now - statsDrawnAt < 250) {
+			return
+		}
+		statsDrawnAt = now
+		statsText.value = `${next.pointCount.toLocaleString()} 原始点 · ${next.clusterCount.toLocaleString()} 个聚合圆（${next.clusterPointCount.toLocaleString()} 点）· 展示 ${(next.pointCount - next.clusterPointCount + next.clusterCount).toLocaleString()} 项 · 本帧 ${next.frameMs.toFixed(2)} ms`
+		clusterText.value = `聚合耗时 ${next.clusterMs.toFixed(2)} ms · ${view?.getPointCluster()?.active ? '当前缩放仍在聚合' : '当前缩放已展开原始点'}`
+	}
+})
+
+/** getClusters() 会按当前数据顺序展开单成员；这里只取第一个多成员组，给自测定位点击位置。 */
+const syncClusters = async (options = {}) => {
+	if (!view) {
+		return
+	}
+	if (options.render !== false) {
+		await view.whenRendered()
+	}
+	const clusters = view.getClusters().filter(item => item.count > 1)
+	const first = clusters[0]
+	firstClusterClient.value = first ? view.screenToClient(first.screen[0], first.screen[1]) : null
+}
+
+const applyCluster = async () => {
+	if (!view) {
+		return
+	}
+	view.updateOptions({ pointCluster: clusterOptions() })
+	await syncClusters()
+}
+
+const applyData = async () => {
+	if (!view) {
+		return
+	}
+	dataset = buildDataset(pointCountChoice.value)
+	view.updateData(dataset.points, [])
+	view.fitView(42)
+	lastCluster.value = null
+	await syncClusters()
+	emit('notice', `已换成 ${dataset.points.length.toLocaleString()} 个点`)
+}
+
+const fitAll = () => {
+	view?.fitView(42)
+}
+
+const zoomLastCluster = () => {
+	if (lastCluster.value?.bounds) {
+		view?.zoomToBounds(lastCluster.value.bounds, 54)
+	}
+}
+
+const countText = computed(() => `${normalClicks.value} 次普通点击 / ${clusterClicks.value} 次聚合点击`)
+
+onMounted(() => {
+	dataset = buildDataset(pointCountChoice.value)
+	view = createGisView(container.value, buildOptions())
+})
+
+onBeforeUnmount(() => {
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class='dv-demo'>
+		<div class='dv-stage' data-demo='cluster-stage'>
+			<div ref='container' class='dv-canvas' data-demo='cluster-canvas' />
+			<div class='dv-toolbar'>
+				<button type='button' data-demo='cluster-fit' @click='fitAll'>适应全部</button>
+				<button type='button' data-demo='cluster-zoom' :disabled='!lastCluster' @click='zoomLastCluster'>放大到最近聚合</button>
+			</div>
+			<span
+				class='cl-anchor'
+				data-demo='cluster-first-client'
+				:data-client-x='firstClusterClient ? firstClusterClient[0] : undefined'
+				:data-client-y='firstClusterClient ? firstClusterClient[1] : undefined'
+			/>
+		</div>
+		<aside class='dv-panel'>
+			<div class='dv-group'>
+				<h3>聚合配置</h3>
+				<div class='dv-row'>
+					<label><input v-model='clusterOn' data-demo='cluster-toggle' type='checkbox' @change='applyCluster' /> 开启聚合</label>
+				</div>
+				<div class='dv-row'>
+					<label>半径
+						<input v-model.number='radius' data-demo='cluster-radius' type='range' min='16' max='180' step='4' @change='applyCluster' />
+						<span class='cl-value'>{{ radius }}px</span>
+					</label>
+				</div>
+				<div class='dv-row'>
+					<label>最少点数
+						<select v-model.number='minPoints' data-demo='cluster-min-points' @change='applyCluster'>
+							<option :value='2'>2</option>
+							<option :value='3'>3</option>
+							<option :value='5'>5</option>
+							<option :value='8'>8</option>
+							<option :value='12'>12</option>
+						</select>
+					</label>
+					<label>展开缩放
+						<select v-model.number='maxZoom' data-demo='cluster-max-zoom' @change='applyCluster'>
+							<option :value='0'>不限</option>
+							<option :value='1.5'>1.5×</option>
+							<option :value='2'>2×</option>
+							<option :value='4'>4×</option>
+							<option :value='8'>8×</option>
+						</select>
+					</label>
+				</div>
+				<p class='dv-hint'>半径是屏幕像素；maxZoom 是相机比例相对基准比例的倍数，超过后展开原始点。聚合期间发散初始化暂停，缩放 / 数据 / 选中变化才重算。</p>
+			</div>
+			<div class='dv-group'>
+				<h3>数据规模</h3>
+				<div class='dv-row'>
+					<label>点数
+						<select v-model.number='pointCountChoice' data-demo='cluster-count'>
+							<option v-for='count in DATA_COUNTS' :key='count' :value='count'>{{ count.toLocaleString() }}</option>
+						</select>
+					</label>
+					<button type='button' class='dv-button' data-demo='cluster-rebuild' @click='applyData'>重建</button>
+				</div>
+				<p class='dv-hint'>十万点仍按整份网格 O(n) 建组；平移不重算，拖动 / 选中中的点强制保持单成员。</p>
+			</div>
+			<div class='dv-group'>
+				<h3>读数</h3>
+				<p class='dv-readout' data-demo='cluster-stats'>{{ statsText }}</p>
+				<p class='dv-readout' data-demo='cluster-summary'>{{ clusterText }}</p>
+				<p class='dv-readout' data-demo='cluster-click-count'>{{ countText }}</p>
+				<p class='dv-readout' data-demo='cluster-event'>{{ eventText }}</p>
+				<p class='dv-hint'>点击聚合圆应只增加「聚合点击」计数；普通 click 不会被聚合圆触发，选中集也保持不变。</p>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.cl-anchor {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	pointer-events: none;
+}
+.cl-value {
+	min-width: 38px;
+	color: #526b8d;
+	font-size: 11px;
+}
+</style>

package/docs/demos/CopyMergeDemo.vue

@@ -25,6 +25,7 @@ const copyItemsText = ref('—')
 const copyLineChannelsText = ref('—')
 const manualText = ref('—')
 const mergeBackendText = ref('合并变更 → 后端事务：—')
+const splitText = ref('拆分：先选中一个节点（不选就取第一个），再点拆分')
 const copyBackendText = ref('复制落库：—')
 const mergeSyncText = ref('合并落库：—')
 const backendMode = ref('success')
@@ -64,6 +65,7 @@ let logSeq = 0
 let copyRound = 0
 let pasteRound = 0
 let addPointRound = 0
+let splitRound = 0
 let mergeSyncTimer = null
 let mergeSyncQueue = []
 let disposed = false
@@ -735,7 +737,7 @@ const manualAddPointCopy = () => {
 	return manualText.value
 }
 
-const prepareMerge = () => {
+const prepareMerge = () => {
 	if (!selectedPoints.value.length) selectBatchSources()
 	if (!mergeTargetOptions.value.some(item => item.value === mergeTargetId.value)) {
 		mergeTargetId.value = mergeTargetOptions.value[0]?.value ?? ''
@@ -743,8 +745,48 @@ const prepareMerge = () => {
 	refreshState()
 	actionText.value = `已准备 ${selectedPoints.value.length} 个选中节点；保留目标 ${mergeTargetId.value || '—'}，可在画布继续 Ctrl 点选`
 	pushLog('merge/prepare', actionText.value)
-	return actionText.value
-}
+	return actionText.value
+}
+
+/** 节点拆分：把连在来源节点上的线路隔一条分给第二份，通道端点默认跟随成员线路 */
+const splitSelectedPoint = () => {
+	const data = view?.getData()
+	if (!data?.points?.length) return '没有可拆分的节点'
+	const source = selectedPoints.value[0] ?? data.points[0]
+	const linked = data.lines
+		.map((line, index) => ({ line, index }))
+		.filter(({ line }) => String(line.from) === String(source.id) || String(line.to) === String(source.id))
+	const movedLines = linked.filter((_entry, index) => index % 2 === 1).map(entry => entry.line.id ?? entry.index)
+	splitRound += 1
+	const offset = 0.42 + splitRound * 0.04
+	const result = view.splitPoint(source.id, [
+		{
+			x: Number(source.x) - offset,
+			y: Number(source.y) - offset * 0.55,
+			name: `${pointLabel(source)} · A`,
+			zone_name: '拆分后 · A'
+		},
+		{
+			x: Number(source.x) + offset,
+			y: Number(source.y) + offset * 0.55,
+			name: `${pointLabel(source)} · B`,
+			zone_name: '拆分后 · B',
+			lines: movedLines
+		}
+	])
+	if (!result.ok) {
+		splitText.value = `拆分失败：${result.reason}`
+		actionText.value = splitText.value
+		pushLog('splitPoint', splitText.value)
+		return splitText.value
+	}
+	splitText.value = `splitPoint：${pointLabel(source)} → ${result.pointIds.join(' / ')} · 改线 ${result.linesChanged} / 删线 ${result.removedLines} · 改通道 ${result.channelsChanged} / 删通道 ${result.removedChannels} · 第 2 份接回线 ${movedLines.length} 条`
+	actionText.value = splitText.value
+	pushLog('splitPoint', splitText.value)
+	view.selectFeatures(result.pointIds)
+	refreshState()
+	return splitText.value
+}
 
 const mergePatch = () => {
 	const patch = {
@@ -879,6 +921,7 @@ const resetScene = () => {
 	copyText.value = '复制：—'
 	copyLineChannelsText.value = '—'
 	mergeBackendText.value = '合并变更 → 后端事务：—'
+	splitText.value = '拆分：先选中一个节点（不选就取第一个），再点拆分'
 	clipboardText.value = '剪贴板：—'
 	copyEventText.value = '还没有 pointCopy 事件'
 	copySourcesText.value = '—'
@@ -888,7 +931,8 @@ const resetScene = () => {
 	resetBackendDemo()
 	copyRound = 0
 	pasteRound = 0
-	addPointRound = 0
+	addPointRound = 0
+	splitRound = 0
 	refreshState()
 	actionText.value = `已恢复 ${fresh.points.length} 节点 / ${fresh.lines.length} 线路 / ${fresh.channels.length} 通道`
 	return actionText.value
@@ -940,10 +984,9 @@ onMounted(() => {
 			merge: true,
 			keyboard: true,
 			waypoint: false,
-			remove: false,
-			channelDraft: false,
-			channelMenu: false,
-			contextMenu: false
+			remove: false,
+			channelDraft: false,
+			contextMenu: false
 		},
 		copy: {
 			enabled: true,
@@ -1134,7 +1177,14 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">mergeSelectedPoints 只并选中集；target 可以指定保留谁，item 只改最终节点的字段。拖点相撞走 pending / confirm 两站，确认前也能改写。合并落地后的 changes 可直接作为后端事务：删除来源节点、更新保留节点、更新 / 删除线路与通道。</p>
 			</div>
 			<div class="dv-group">
-				<h3>4 · 待确认合并</h3>
+				<h3>4 · 拆分节点</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="split-selected" @click="splitSelectedPoint">拆分选中节点</button>
+				</div>
+				<p class="dv-readout" data-demo="split-readout">{{ splitText }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>5 · 待确认合并</h3>
 				<p class="dv-readout" data-demo="merge-pending-readout">{{ pendingText }}</p>
 				<div class="dv-row cm-form">
 					<label>
@@ -1156,7 +1206,7 @@ onBeforeUnmount(() => {
 				<p class="dv-hint">清空选中后，把画布上的一个节点拖到另一个节点上松手；选保留拖动来源 / 碰撞目标，再点确认。pending 载荷的 impact 已按「保留碰撞目标」预演影响线路数，confirm 时按最终 keep 重算；名称、分区、电压和样式都随 item 写回最终节点。</p>
 			</div>
 			<div class="dv-group">
-				<h3>5 · 复制 / 合并假接口<span class="dv-chip">{{ backendBusy ? '请求中' : '空闲' }}</span></h3>
+				<h3>6 · 复制 / 合并假接口<span class="dv-chip">{{ backendBusy ? '请求中' : '空闲' }}</span></h3>
 				<div class="dv-row cm-form">
 					<label>
 						下一次响应

package/docs/demos/EventDemo.vue

@@ -89,14 +89,14 @@ const dataLabel = (value) => {
 }
 
 /**
- * 要 DOM 事件的四个事件（pointerDown / pointerUp / contextMenu / channelContextMenu）在总线上
+ * 要 DOM 事件的三个事件（pointerDown / pointerUp / contextMenu）在总线上
  * 载荷是 `{ payload, event }`（与回调的两个参数一一对应），其余事件载荷就是回调里那一份 —— 这里统一拆开。
  */
-const EVENT_PAYLOAD_EVENTS = new Set(['pointerDown', 'pointerUp', 'contextMenu', 'channelContextMenu'])
+const EVENT_PAYLOAD_EVENTS = new Set(['pointerDown', 'pointerUp', 'contextMenu'])
 const unwrapPayload = (raw, name) => (EVENT_PAYLOAD_EVENTS.has(name) && raw && typeof raw === 'object' && 'payload' in raw ? raw.payload : raw)
 
 /** 会带 action 的事件名：* 订阅里从载荷上认出「这一次是什么操作」 */
-const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'channelContextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
+const ACTION_EVENTS = new Set(['click', 'dblClick', 'pointerDown', 'pointerUp', 'contextMenu', 'labelClick', 'labelDrag', 'labelContextMenu', 'labelDblClick', 'selectChange', 'waypointChange'])
 
 /** 最近一次操作的判读：面板上的「动作判读」直接读它 */
 const lastAction = ref('—')