gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/BackendSyncDemo.vue

@@ -33,7 +33,7 @@
  * 推送策略（这一轮新增）：「攒批」是缺省 —— 改动只进队列，点提交 / 整份保存时一次发；「改完就传」
  * 落地就发，但同一目标的中间态只留最后一份（合并），拖拽只在 phase === 'end' 发一条。画布上的拖节点 /
  * 拖拐点也接进同一套：onPointDrag / onWaypointChange 里按 phase 过滤，中间态一条请求都不发。
- * 「视口导出」那一块是 exportViewportData：只取屏幕上看得见的那一撮（节点 / 线路 / 通道 + 拐点分组）。
+ * 「视口导出」那一块是 exportData({ scope: 'viewport' })：只取屏幕上看得见的那一撮（节点 / 线路 / 通道 + 拐点分组）。
  */
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { createGisView } from '../../src/index.js'
@@ -749,19 +749,21 @@ const pullServer = () => {
 	pushLog(result.ok ? `importData：服务端那一份已回灌（${data.points.length} 节点 / ${data.lines.length} 线路 / ${(view.getOptions().channels ?? []).length} 通道）` : `importData 没吃下服务端那一份：${result.reason ?? ''}`)
 }
 
-/** 视口导出：只取屏幕上看得见的那一撮（exportViewportData） */
+/** 视口导出：只取屏幕上看得见的那一撮（exportData · scope: viewport） */
 const exportViewport = (format) => {
-	const result = view.exportViewportData({ margin: Number(margin.value) || 0, format })
+	const range = Number(margin.value) || 0
+	const result = view.exportData({ scope: 'viewport', margin: range, format })
 	const counts = result.counts ?? {}
-	viewportText.value = `${format === 'input' ? 'input 口径' : '业务口径'}：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道 / ${counts.parallelGroups ?? 0} 拐点分组 · margin ${result.margin}px`
+	const viewRect = result.viewRect ?? view.getViewRect()
+	viewportText.value = `${format === 'input' ? 'input 口径' : '业务口径'}：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道 / ${counts.parallelGroups ?? 0} 拐点分组 · margin ${result.margin ?? range}px`
 	viewportSample.value = shortJson({
 		counts: result.counts,
-		viewRect: result.viewRect,
+		viewRect,
 		...(format === 'input'
 			? { points: (result.points ?? []).map(point => point.id), lines: (result.lines ?? []).map(line => line.id), channels: (result.channels ?? []).map(channel => channel.id) }
 			: { parallelGroups: result.parallelGroups ?? [] })
 	}, 2000)
-	pushLog(`exportViewportData({ format: '${format}', margin: ${result.margin} })：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道`)
+	pushLog(`exportData({ scope: 'viewport', format: '${format}', margin: ${result.margin ?? range} })：${counts.points ?? 0} 节点 / ${counts.lines ?? 0} 线路 / ${counts.channels ?? 0} 通道`)
 }
 
 onMounted(() => {
@@ -1049,7 +1051,7 @@ PUT   /gis/documents
 			</div>
 
 			<div class="dv-group">
-				<h3>视口内导出（exportViewportData）</h3>
+				<h3>视口内导出（exportData · scope: viewport）</h3>
 				<div class="dv-row">
 					<label>margin <input v-model.number="margin" type="number" step="8" min="0" data-demo="sync-margin" /></label>
 					<button type="button" class="dv-button" data-demo="sync-export-view" @click="exportViewport('view')">业务口径</button>
@@ -1057,7 +1059,7 @@ PUT   /gis/documents
 				</div>
 				<p class="dv-readout" data-demo="sync-viewport-text">{{ viewportText }}</p>
 				<pre class="bs-json" data-demo="sync-viewport-sample">{{ viewportSample }}</pre>
-				<p class="dv-hint">`view.exportViewportData({ margin })`：只出屏幕上看得见的那一撮 —— 节点按中心、线路按包围盒、通道跟着成员回线走（分组不拆散）；margin 是屏幕 CSS 像素的外扩，返回多带 `viewRect` / `margin`。</p>
+				<p class="dv-hint">`view.exportData({ scope: 'viewport', margin })`：只出屏幕上看得见的那一撮 —— 节点按中心、线路按包围盒、通道跟着成员回线走（分组不拆散）；margin 是屏幕 CSS 像素的外扩。业务口径另带 `viewRect` / `margin`，input / full / 自定义格式保持导出器原始结果。</p>
 			</div>
 
 			<div class="dv-group">

package/docs/demos/BasicDemo.vue

@@ -1,22 +1,22 @@
-<script setup>
-/**
- * 基础视图：一份数据 + 最少的配置，重点看相机与拾取这两组读数怎么拿。
- *
- * 面板上就四个开关（数据量 / 网格 / 节点标签 / 通道），读数栏把
- * onCameraChange / onClick / onSelect / onStats 的值直接摊开 ——
- * 事件载荷长什么样、什么时候发，一眼能对上。
- */
-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 pointCount = ref(28)
-const gridOn = ref(true)
-const labelOn = ref(true)
-const channelOn = ref(true)
+<script setup>
+/**
+ * 基础视图：一份数据 + 最少的配置，重点看相机与拾取这两组读数怎么拿。
+ *
+ * 面板上就四个开关（数据量 / 网格 / 节点标签 / 通道），读数栏把
+ * onCameraChange / onClick / onSelect / onStats 的值直接摊开 ——
+ * 事件载荷长什么样、什么时候发，一眼能对上。
+ */
+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 pointCount = ref(28)
+const gridOn = ref(true)
+const labelOn = ref(true)
+const channelOn = ref(true)
 const readouts = ref({ camera: '—', pick: '未选中', stats: '—', event: '—' })
 let dataset = buildDemoData({ count: 28 })
 let view = null
@@ -69,10 +69,10 @@ const buildOptions = () => ({
 	// 功能开关缺省全关：这一页要能平移缩放、能悬停选中，显式打开查看类（见 docs/GisView.md 的「功能开关」）
 	features: 'view',
 	label: labelOptions(),
-	onReady: () => {
-		emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
-		readouts.value = { ...readouts.value, event: 'ready：WebGL2 上下文就绪' }
-	},
+	onReady: () => {
+		emit('notice', `已加载 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
+		readouts.value = { ...readouts.value, event: 'ready：WebGL2 上下文就绪' }
+	},
 	onClick: (payload) => {
 		readouts.value = { ...readouts.value, pick: describeTarget(payload), event: `click：${describeTarget(payload)}` }
 	},
@@ -86,10 +86,10 @@ const buildOptions = () => ({
 			event: count ? `select：${mode} 选中 ${count} 个` : 'select：清空选中'
 		}
 	},
-	onCameraChange: (camera) => {
-		// 相机每帧都在变：只把读数写进面板，不再触发别的重活
-		readouts.value = { ...readouts.value, camera: `scale ${camera.scale.toPrecision(4)} px/单位 · 中心 ${camera.center[0].toFixed(3)}, ${camera.center[1].toFixed(3)}` }
-	},
+	onCameraChange: (camera) => {
+		// 相机每帧都在变：只把读数写进面板，不再触发别的重活
+		readouts.value = { ...readouts.value, camera: `scale ${camera.scale.toPrecision(4)} px/单位 · 中心 ${camera.center[0].toFixed(3)}, ${camera.center[1].toFixed(3)}` }
+	},
 	onStats: (next) => {
 		// fps 每帧都变，节流后再写响应式数据（十万级数据下每帧重渲染面板本身也是开销）
 		const now = performance.now()
@@ -101,23 +101,23 @@ const buildOptions = () => ({
 		const speed = next.idle ? '空闲' : `${Math.round(next.fps)} fps`
 		readouts.value = { ...readouts.value, stats: `${speed} · 最近一帧 ${next.frameMs.toFixed(2)} ms · ${next.pointCount.toLocaleString()} 点 / ${next.lineCount.toLocaleString()} 线` }
 	},
-	onWarning: (text) => {
-		readouts.value = { ...readouts.value, event: `warning：${text}` }
-	}
-})
-
-/** 换数据量：数据与通道一起换掉，相机重新适应（不改选项里的样式，所以点位外观不跳） */
-const applyData = () => {
-	if (!view) {
-		return
-	}
-	dataset = buildDemoData({ count: pointCount.value })
-	view.updateData(dataset.points, channelOn.value ? dataset.lines : dataset.linesWithoutChannel)
-	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
-	view.fitView(40)
-	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
-}
-
+	onWarning: (text) => {
+		readouts.value = { ...readouts.value, event: `warning：${text}` }
+	}
+})
+
+/** 换数据量：数据与通道一起换掉，相机重新适应（不改选项里的样式，所以点位外观不跳） */
+const applyData = () => {
+	if (!view) {
+		return
+	}
+	dataset = buildDemoData({ count: pointCount.value })
+	view.updateData(dataset.points, channelOn.value ? dataset.lines : dataset.linesWithoutChannel)
+	view.updateOptions({ channels: channelOn.value ? dataset.channels : [] })
+	view.fitView(40)
+	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
+}
+
 /**
  * 开关键：只改与自己相关的那几项 —— 一次「把整份 options 再发一遍」会连数据一起重发，
  * 拖过的节点与标签偏移都会被冲回原样，这里只改网格与标签两项。
@@ -133,15 +133,15 @@ const applyChannel = () => {
 		channels: channelOn.value ? dataset.channels : []
 	})
 }
-
-const resetCamera = () => {
-	view?.fitView(40)
-}
-
-const zoomBy = (factor) => {
-	view?.zoomBy(factor)
-}
-
+
+const resetCamera = () => {
+	view?.fitView(40)
+}
+
+const zoomBy = (factor) => {
+	view?.zoomBy(factor)
+}
+
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
 	// 标签拖动：面板上给一行「偏移记在状态里」的读数，松手后偏移一直留在 getLabelStates() 里
@@ -152,52 +152,52 @@ onMounted(() => {
 		readouts.value = { ...readouts.value, event: `labelDrag：${payload.phase} · ${payload.id ?? payload.index} 偏移 [${payload.offset.map(value => Math.round(value)).join(', ')}]` }
 	})
 })
-
-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="resetCamera">适应全部</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>数据</h3>
-				<div class="dv-row">
-					<label>节点数
-						<select v-model.number="pointCount" @change="applyData">
-							<option :value="12">12</option>
-							<option :value="28">28</option>
-							<option :value="60">60</option>
-						</select>
-					</label>
-					<button type="button" class="dv-button" @click="applyData">重建数据</button>
-				</div>
-				<div class="dv-row">
-					<label><input v-model="gridOn" type="checkbox" @change="applyOptions" /> 网格</label>
-					<label><input v-model="labelOn" type="checkbox" @change="applyOptions" /> 节点标签</label>
+
+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="resetCamera">适应全部</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>数据</h3>
+				<div class="dv-row">
+					<label>节点数
+						<select v-model.number="pointCount" @change="applyData">
+							<option :value="12">12</option>
+							<option :value="28">28</option>
+							<option :value="60">60</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button" @click="applyData">重建数据</button>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="gridOn" type="checkbox" @change="applyOptions" /> 网格</label>
+					<label><input v-model="labelOn" type="checkbox" @change="applyOptions" /> 节点标签</label>
 					<label><input v-model="channelOn" type="checkbox" @change="applyChannel" /> 通道</label>
-				</div>
-				<p class="dv-hint">打开标签后可以拖着标签走一段：松手后偏移记在状态里，再移动节点标签跟着走。</p>
-			</div>
-			<div class="dv-group">
-				<h3>读数</h3>
-				<p class="dv-readout">相机：{{ readouts.camera }}</p>
-				<p class="dv-readout">拾取：{{ readouts.pick }}</p>
-				<p class="dv-readout">性能：{{ readouts.stats }}</p>
-				<p class="dv-readout">事件：{{ readouts.event }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>试一下</h3>
-				<p class="dv-hint">单击节点 / 线路 / 通道看「拾取」；空白处拖框看「选中」；滚轮缩放、拖动平移时看相机的 scale 与中心。</p>
-			</div>
-		</aside>
-	</section>
-</template>
+				</div>
+				<p class="dv-hint">打开标签后可以拖着标签走一段：松手后偏移记在状态里，再移动节点标签跟着走。</p>
+			</div>
+			<div class="dv-group">
+				<h3>读数</h3>
+				<p class="dv-readout">相机：{{ readouts.camera }}</p>
+				<p class="dv-readout">拾取：{{ readouts.pick }}</p>
+				<p class="dv-readout">性能：{{ readouts.stats }}</p>
+				<p class="dv-readout">事件：{{ readouts.event }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>试一下</h3>
+				<p class="dv-hint">单击节点 / 线路 / 通道看「拾取」；空白处拖框看「选中」；滚轮缩放、拖动平移时看相机的 scale 与中心。</p>
+			</div>
+		</aside>
+	</section>
+</template>

package/docs/demos/BatchAddDemo.vue

@@ -74,7 +74,7 @@ const addPointBatch = () => runAction('addPoints', () => {
 	}))
 	const result = view.addPoints(items)
 	if (result.ok) {
-		view.select(result.items.map(item => item.id))
+		view.selectFeatures(result.items.map(item => item.id))
 	}
 	return `addPoints → ${result.count} 个节点 · indexes=[${result.indexes.join(', ')}]`
 })
@@ -95,7 +95,7 @@ const addLineBatch = () => runAction('addLines', () => {
 	]
 	const result = view.addLines(items)
 	if (result.ok) {
-		view.select(result.items.map(item => item.id))
+		view.selectFeatures(result.items.map(item => item.id))
 	}
 	return `addLines → ${result.count} 条线路 · ${items.map(item => item.name).join(' / ')}`
 })
@@ -133,7 +133,7 @@ const addChannelBatch = () => runAction('addChannels', () => {
 			lineProps: { vn_kv: 230, max_loading_rate: 0.61 }
 		}
 	])
-	view.select(result.lineIds)
+	view.selectFeatures(result.lineIds)
 	return `addChannels → ${result.count} 条通道 · ${result.channelIds.join(' / ')} · ${result.lineIds.length} 条回线`
 })
 
@@ -162,7 +162,7 @@ const addWaypointBatch = () => runAction('addWaypoints', () => {
 		[Number((from.x + dx * 0.72 + normal[0] * 0.08).toFixed(5)), Number((from.y + dy * 0.72 + normal[1] * 0.08).toFixed(5))]
 	]
 	const result = view.addWaypoints(line.id, coordinates)
-	view.select(line.id)
+	view.selectFeatures(line.id)
 	return result.ok
 		? `addWaypoints → ${result.count} 个拐点 · ${line.id} · ${JSON.stringify(result.coordinates)}`
 		: `addWaypoints 没有落地：${result.reason}`
@@ -205,7 +205,7 @@ const addChannelGroupBatch = () => runAction('addChannelGroups', () => {
 		}
 	]
 	const result = view.addChannelGroups(channel.id, groups)
-	view.select(result.lineIds)
+	view.selectFeatures(result.lineIds)
 	return result.ok
 		? `addChannelGroups → ${result.count} 组 / ${result.lineIds.length} 条回线 · ${result.groupIds.join(' / ')}`
 		: `addChannelGroups 没有落地：${result.reason}`