gis-view-webgl2 0.1.2 → 0.1.3

package/docs/demos/ChannelDemo.vue

@@ -7,7 +7,7 @@
  *   `mergeChannelGroups(id, [要并的组], 目标组)` 再并回去。
  *   `addChannelGroup(id, [回线…], { id?, path? })` 一次把几条拆成单独一组（分组那一块的勾选就是它）。
  * - 外观：通道宽度 / 内收比例 / 偏移方式（tangent 沿切向，inset 按比例内收）都是 updateOptions。
- * - 交互：右键一条通道回线弹出交互框（onChannelContextMenu）—— 点分组切换当前分组并选中它的回线，
+ * - 交互：右键一条通道回线弹出交互框（统一的 onContextMenu + payload.channelContext）—— 点分组切换当前分组并选中它的回线，
  *   每条回线可以拆成新分组 / 并进别的分组（moveChannelLine），下面一排按钮走 runChannelAction。
  * - 选中模式 / 删除：channelSelectMode 决定点一条回线是只选它自己、连所在分组还是连整条通道；
  *   Delete（或 requestRemove()）先出删除载荷 —— 删什么、连带什么、能按「只删线路 / 整个分组 / 整条通道」哪个范围删，
@@ -303,7 +303,8 @@ const buildOptions = () => ({
 	showGrid: true,
 	fitPadding: 60,
 	// 开关缺省全关（见 features.js）：这个演示要的是「拖节点改通道 + 右键通道回线出交互框 + Delete 删除」，逐项显式打开
-	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, channelMenu: true, remove: true },
+	// 通道路由与普通右键共用 contextMenu，不再另开一个功能开关
+	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, remove: true },
 	// 通道选中模式：点一条回线选它自己 / 连所在分组 / 连整条通道
 	channelSelectMode: channelSelectMode.value,
 	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
@@ -315,7 +316,7 @@ const buildOptions = () => ({
 	// 这两条是假接口的入口：拐点只接 add / remove / end，分组只接整份声明；事件载荷本身已经够组请求
 	onWaypointChange: handleWaypointBackend,
 	onChannelGroupChange: handleChannelGroupBackend,
-	onChannelContextMenu: handleChannelContextMenu,
+	onContextMenu: handleContextMenu,
 	onReady: () => {
 		emit('notice', `${dataset.channels.length} 条通道 / ${dataset.channelLines.length} 回线`)
 		pushLog('就绪：拖通道端点节点、改宽度或拆一组试试')
@@ -626,7 +627,7 @@ const confirmGroupDialog = () => {
 }
 
 /**
- * 右键交互框：右键一条通道回线时 onChannelContextMenu(payload) 把「这条通道几组 / 当前是哪一组 /
+ * 右键交互框：右键一条通道回线时 onContextMenu(payload) 的 payload.channelContext 把「这条通道几组 / 当前是哪一组 /
  * 这一组能做哪些交互」一次交出来，界面照着 groups 与 actions 渲染就行 —— 核心是四件事：
  * 点分组 = setCurrentChannelGroup（顺带选中这一组的回线）、每条回线的下拉 + 分配 = moveChannelLine、
  * 按钮 = runChannelAction、点空白处（回调收到 null）/ Esc / × 收框。
@@ -684,11 +685,12 @@ const syncMenu = () => {
 	syncMenuLineTargets()
 }
 
-/** 右键回调：payload 就是整份上下文，null 表示点在空白处（把框收掉） */
-const handleChannelContextMenu = (payload) => {
-	channelMenu.value = payload
-	if (payload) {
-		pushLog('右键 ' + payload.channelId + '：共 ' + payload.groupCount + ' 组，命中「' + payload.groupId + '」的 ' + payload.group.lineCount + ' 回线')
+/** 右键回调：所有命中都走这一条，通道上下文挂在 payload.channelContext 上；点空白 / 节点时把框收掉 */
+const handleContextMenu = (payload) => {
+	const channelContext = payload?.channelContext
+	channelMenu.value = channelContext ? { ...payload, ...channelContext } : null
+	if (channelContext) {
+		pushLog('右键 ' + channelContext.channelId + '：共 ' + channelContext.groupCount + ' 组，命中「' + channelContext.groupId + '」的 ' + channelContext.group.lineCount + ' 回线')
 	}
 	syncMenu()
 }
@@ -1032,7 +1034,7 @@ onBeforeUnmount(() => {
 					</button>
 				</div>
 				<p class="dv-channel-menu__hint">
-					命中回线 {{ channelMenu.lineId }} · 这些都在 onChannelContextMenu(payload) 里；点空白处 / Esc / × 收框
+					命中回线 {{ channelMenu.lineId }} · 这些都在 onContextMenu(payload).channelContext 里；点空白处 / Esc / × 收框
 				</p>
 			</div>
 			<div v-if="groupDialog" class="dv-group-dialog" data-demo="channel-group-dialog" @click.self="closeGroupDialog">
@@ -1257,8 +1259,8 @@ onBeforeUnmount(() => {
 				<h3>右键交互框<span class="dv-chip">{{ channelMenu ? '已打开' : '未打开' }}</span></h3>
 				<p class="dv-readout">{{ menuText }}</p>
 				<p class="dv-hint">
-					右键一条通道回线：onChannelContextMenu(payload) 把「几组 / 当前哪一组 / 这一组能做什么」一次交出来，
-					框里照着 groups 与 actions 渲染；点空白处回调收到 null，按 Esc 或点 × 也会收框。
+					右键一条通道回线：onContextMenu(payload) 在 payload.channelContext 里把「几组 / 当前哪一组 /
+					这一组能做什么」一次交出来，框里照着 groups 与 actions 渲染；点空白处 / 节点时没有 channelContext，框自动收起。
 				</p>
 			</div>
 

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

@@ -984,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,

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('—')