gis-view-webgl2 0.1.13 → 0.1.15

package/docs/demos/BackgroundDemo.vue

@@ -4,7 +4,7 @@
  * 编辑本身完全由组件的 beginBackgroundEdit / updateBackgroundEdit / endBackgroundEdit 接管；
  * 这个页面只负责导入素材、调背景透明度与内置编辑器的配置。
  */
-import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { createGisView } from '../../src/index.js'
 import { buildDemoData } from './shared/demoData.js'
 import { buildDemoBasemap } from './demoBackground.js'
@@ -104,6 +104,9 @@ const heightDraft = ref(formatWorld(editHeight.value))
 const rotationDraft = ref('0')
 const resolvedReadout = ref('尚未添加背景')
 const notice = ref('先看网架；再添加背景。编辑背景时网架不可点击，滚轮仍可整体缩放。')
+const savedLngLat = shallowRef(null)
+const savedAnchor = shallowRef(null)
+const roundtripReadout = ref('尚未保存经纬度。先切到 GeoJSON 背景，再保存整份网架。')
 let view = null
 let readoutTimer = 0
 
@@ -325,6 +328,59 @@ const rotateBy = (delta) => {
 	view.updateBackgroundEdit({ angle: normalizeRotation(editRotation.value + delta) })
 	syncEditorState(view.getBackgroundEdit())
 }
+const formatLngLat = coordinate => coordinate && Number.isFinite(Number(coordinate[0])) && Number.isFinite(Number(coordinate[1]))
+	? `[${Number(coordinate[0]).toFixed(6)}, ${Number(coordinate[1]).toFixed(6)}]`
+	: '—'
+const saveNetworkLngLat = () => {
+	if (!view || backgroundMode.value !== 'geojson') {
+		roundtripReadout.value = '保存经纬度需要 GeoJSON 背景：先用上方按钮添加底图。'
+		return
+	}
+	const data = view.getData()
+	const firstPoint = data.points[0] ?? null
+	const saved = view.mapDataToLngLat()
+	if (!saved) {
+		roundtripReadout.value = '当前没有可用的 GeoJSON 投影，未能保存经纬度。'
+		return
+	}
+	savedLngLat.value = saved
+	savedAnchor.value = firstPoint ? { id: firstPoint.id, x: firstPoint.x, y: firstPoint.y } : null
+	const savedFirstPoint = firstPoint ? saved.points?.find(point => point.id === firstPoint.id) ?? saved.points?.[0] : null
+	roundtripReadout.value = firstPoint && savedFirstPoint
+		? `已保存 ${saved.points?.length ?? 0} 节点 / ${saved.lines?.length ?? 0} 线路 / ${saved.channels?.length ?? 0} 通道。首节点 ${firstPoint.id}：世界 [${formatWorld(firstPoint.x)}, ${formatWorld(firstPoint.y)}] → 经纬度 ${formatLngLat([savedFirstPoint.x, savedFirstPoint.y])}。`
+		: `已保存 ${saved.points?.length ?? 0} 节点 / ${saved.lines?.length ?? 0} 线路 / ${saved.channels?.length ?? 0} 通道；网架里还没有节点。`
+	emit('notice', '经纬度存档已生成：现在可以清空网架，再用 mapLngLatToData() 原样回灌。')
+}
+const clearNetwork = () => {
+	if (!view) {
+		return
+	}
+	view.updateData({ points: [], lines: [], channels: [] })
+	roundtripReadout.value = savedLngLat.value
+		? '网架已清空；经纬度存档仍在，点「3. 原样回灌」恢复。'
+		: '网架已清空；当前没有经纬度存档。'
+	emit('notice', '网架已清空，背景与相机位置保持不变。')
+}
+const restoreNetworkLngLat = () => {
+	if (!view || backgroundMode.value !== 'geojson' || !savedLngLat.value) {
+		roundtripReadout.value = '回灌需要 GeoJSON 背景和一份已保存的经纬度存档。'
+		return
+	}
+	const restored = view.mapLngLatToData(savedLngLat.value)
+	if (!restored) {
+		roundtripReadout.value = '当前没有可用的 GeoJSON 投影，未能回灌。'
+		return
+	}
+	view.updateData(restored)
+	const anchor = savedAnchor.value
+	const restoredAnchor = anchor ? view.getData().points.find(point => point.id === anchor.id) ?? null : null
+	const delta = anchor && restoredAnchor ? Math.hypot(restoredAnchor.x - anchor.x, restoredAnchor.y - anchor.y) : null
+	const savedFirstPoint = anchor ? savedLngLat.value.points?.find(point => point.id === anchor.id) ?? savedLngLat.value.points?.[0] : null
+	roundtripReadout.value = anchor && restoredAnchor && delta !== null && delta < 1e-7
+		? `回灌完成：${restored.points?.length ?? 0} 节点 / ${restored.lines?.length ?? 0} 线路 / ${restored.channels?.length ?? 0} 通道。首节点 ${anchor.id} 经纬度 ${formatLngLat(savedFirstPoint ? [savedFirstPoint.x, savedFirstPoint.y] : null)} → 世界 [${formatWorld(restoredAnchor.x)}, ${formatWorld(restoredAnchor.y)}]，与保存前一致（误差 ${delta.toExponential(1)}）。`
+		: `回灌完成，但首节点世界坐标与保存前不一致${delta === null ? '' : `（误差 ${delta.toExponential(1)}）`}；请确认底图 bounds / rotation 没有在保存后改动。`
+	emit('notice', '经纬度存档已按当前底图投影回灌为世界坐标。')
+}
 const toggleNetwork = () => {
 	networkVisible.value = !networkVisible.value
 }
@@ -533,6 +589,17 @@ onBeforeUnmount(() => {
 				<p class="dv-readout" data-demo="background-resolved">{{ resolvedReadout }}</p>
 			</div>
 
+			<div class="dv-group">
+				<h3>经纬度存档回灌<span class="dv-chip">mapDataToLngLat → mapLngLatToData</span></h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="background-save-lnglat" :disabled="backgroundMode !== 'geojson'" @click="saveNetworkLngLat">1. 保存经纬度</button>
+					<button type="button" class="dv-button" data-demo="background-clear-network" :disabled="!savedLngLat" @click="clearNetwork">2. 清空网架</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="background-restore-lnglat" :disabled="!savedLngLat || backgroundMode !== 'geojson'" @click="restoreNetworkLngLat">3. 原样回灌</button>
+				</div>
+				<p class="dv-readout" data-demo="background-lnglat-readout">{{ roundtripReadout }}</p>
+				<p class="dv-hint">保存时把节点、线路、通道分组一起写成经纬度；回灌先由 `mapLngLatToData()` 按当前最终底图投影写回世界坐标，再交给 `updateData()`。底图未改动时世界坐标与屏幕落点原样恢复。</p>
+			</div>
+
 			<div class="dv-group">
 				<h3>操作提示</h3>
 				<p class="dv-hint" data-demo="background-notice">{{ notice }}</p>

package/docs/demos/BasicDemo.vue

@@ -1,5 +1,5 @@
-<script setup>
-/**
+<script setup>
+/**
  * 基础视图：一份数据 + 最少的配置，重点看相机、比例、空闲与拾取读数怎么拿。
  *
  * 首屏用顶层 center / scale 落位；面板能读写比例、观察 idleTimeout 的回调与事件，
@@ -7,16 +7,16 @@
  * onCameraChange / onClick / onSelect / onStats / onIdle 的值直接摊开 ——
  * 事件载荷长什么样、什么时候发，一眼能对上。
  */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
 import { buildDemoData, DEMO_CENTER } 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)
+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 scaleDraft = ref('72')
 const currentScale = ref(72)
@@ -90,10 +90,10 @@ const buildOptions = () => ({
 			event: `onIdle：停手 ${Math.round(idleTime)} ms（阈值 ${timeout} ms）`
 		}
 	},
-	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)}` }
 	},
@@ -107,10 +107,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()
@@ -122,24 +122,24 @@ 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)
+	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)
 	syncScaleFromView()
 	emit('notice', `已换成 ${dataset.points.length} 个节点 / ${dataset.lines.length} 条线路`)
-}
-
+}
+
 /**
  * 开关键：只改与自己相关的那几项 —— 一次「把整份 options 再发一遍」会连数据一起重发，
  * 拖过的节点与标签偏移都会被冲回原样，这里只改网格与标签两项。
@@ -155,7 +155,7 @@ const applyChannel = () => {
 		channels: channelOn.value ? dataset.channels : []
 	})
 }
-
+
 const resetCamera = () => {
 	view?.fitView(40)
 	syncScaleFromView()
@@ -209,7 +209,7 @@ const toggleIdle = () => {
 		event: idleEnabled.value ? `idleTimeout 已开启（${IDLE_TIMEOUT_MS} ms）` : 'idleTimeout 已关闭（0）'
 	}
 }
-
+
 onMounted(() => {
 	view = createGisView(container.value, buildOptions())
 	syncScaleFromView()
@@ -238,18 +238,18 @@ onBeforeUnmount(() => {
 	window.clearInterval(idleTicker)
 	idleTicker = null
 	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>
+	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>比例读写<span class="dv-chip">center / scale 首屏</span></h3>
@@ -275,36 +275,36 @@ onBeforeUnmount(() => {
 			</div>
 			<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>
+				<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>
+				</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>
 
 <style scoped>

package/docs/demos/BatchAddDemo.vue

@@ -352,7 +352,8 @@ onMounted(() => {
 		lineStyle: { width: 1.4, color: 'rgba(120, 168, 226, 0.6)' },
 		showGrid: true,
 		fitPadding: 48,
-		waypointEditable: true,
+		// 批量拐点接口要打开拐点总闸；页面本身不需要画布拖拽
+		features: { waypoint: true },
 		history: { limit: 50 },
 		onReady: () => {
 			refreshState()

package/docs/demos/ChannelDemo.vue

@@ -316,7 +316,7 @@ const buildOptions = () => ({
 	fitPadding: 60,
 	// 开关缺省全关（见 features.js）：这个演示要的是「拖节点改通道 + 右键通道回线出交互框 + Delete 删除」，逐项显式打开
 	// 通道路由与普通右键共用 contextMenu，不再另开一个功能开关
-	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, remove: true },
+	features: { pan: true, zoom: true, hover: true, select: true, contextMenu: true, keyboard: true, drag: true, remove: true, waypoint: true },
 	// 通道选中模式：点一条回线选它自己 / 连所在分组 / 连整条通道
 	channelSelectMode: channelSelectMode.value,
 	// 分组拐点拖动：共用骨架 / 只移同组同序号拐点
@@ -326,8 +326,6 @@ const buildOptions = () => ({
 	channelHiddenLineLayout: channelHiddenLineLayout.value,
 	// 删除配置：confirm 缺省（null）表示组件不弹界面、停在待确认 —— 这一页订阅 'remove' 事件自己画确认框
 	remove: { scope: 'lines' },
-	// 交互框里的「加拐点 / 删拐点」动的是分组骨架，要有这一项才不是灰的（Ctrl + 点击加点、双击删点也一起开了）
-	waypointEditable: true,
 	// 这两条是假接口的入口：拐点只接 add / remove / end，分组只接整份声明；事件载荷本身已经够组请求
 	onWaypointChange: handleWaypointBackend,
 	onChannelGroupChange: handleChannelGroupBackend,

package/docs/demos/ClusterDemo.vue

@@ -22,6 +22,11 @@ const clusterOn = ref(true)
 const radius = ref(60)
 const minPoints = ref(2)
 const maxZoom = ref(0)
+const clusterColor = ref('#2970db')
+const clusterTextColor = ref('#ffffff')
+const clusterIcon = ref('circle')
+const clusterShowCount = ref(true)
+const clusterSizeScale = ref(1)
 const statsText = ref('—')
 const clusterText = ref('—')
 const eventText = ref('等待点击聚合圆')
@@ -62,8 +67,25 @@ const buildDataset = (count) => {
 	return { points }
 }
 
+const CLUSTER_ICONS = {
+	star: { type: 'svg', path: 'M0 -11 L3.2 -3.4 L11.5 -3.4 L4.9 1.8 L7.3 9.6 L0 5 L-7.3 9.6 L-4.9 1.8 L-11.5 -3.4 L-3.2 -3.4 Z', viewBox: [-12, -12, 24, 24], fill: 'currentColor' },
+	pin: { type: 'svg', path: 'M0 -11 C-6 -11 -10 -7 -10 -1 C-10 6 0 12 0 12 C0 12 10 6 10 -1 C10 -7 6 -11 0 -11 Z', viewBox: [-12, -12, 24, 24], fill: 'currentColor' }
+}
+
+const clusterSymbol = () => CLUSTER_ICONS[clusterIcon.value] ?? clusterIcon.value
+
 const clusterOptions = () => clusterOn.value
-	? { enabled: true, radius: radius.value, minPoints: minPoints.value, maxZoom: maxZoom.value }
+	? {
+		enabled: true,
+		radius: radius.value,
+		minPoints: minPoints.value,
+		maxZoom: maxZoom.value,
+		color: clusterColor.value,
+		textColor: clusterTextColor.value,
+		symbol: clusterSymbol(),
+		showCount: clusterShowCount.value,
+		sizeScale: clusterSizeScale.value
+	}
 	: false
 
 const buildOptions = () => ({
@@ -209,6 +231,31 @@ onBeforeUnmount(() => {
 						</select>
 					</label>
 				</div>
+				<div class='dv-row'>
+					<label>填充色
+						<input v-model='clusterColor' data-demo='cluster-color' type='color' @change='applyCluster' />
+					</label>
+					<label>文字色
+						<input v-model='clusterTextColor' data-demo='cluster-text-color' type='color' @change='applyCluster' />
+					</label>
+				</div>
+				<div class='dv-row'>
+					<label>图标
+						<select v-model='clusterIcon' data-demo='cluster-icon' @change='applyCluster'>
+							<option value='circle'>圆形</option>
+							<option value='square'>方形</option>
+							<option value='star'>星标</option>
+							<option value='pin'>定位钉</option>
+						</select>
+					</label>
+					<label>尺寸
+						<input v-model.number='clusterSizeScale' data-demo='cluster-size-scale' type='range' min='0.5' max='2' step='0.1' @change='applyCluster' />
+						<span class='cl-value'>{{ clusterSizeScale }}×</span>
+					</label>
+				</div>
+				<div class='dv-row'>
+					<label><input v-model='clusterShowCount' data-demo='cluster-show-count' type='checkbox' @change='applyCluster' /> 显示数量</label>
+				</div>
 				<p class='dv-hint'>半径是屏幕像素；maxZoom 是相机比例相对基准比例的倍数，超过后展开原始点。聚合期间发散初始化暂停，缩放 / 数据 / 选中变化才重算。</p>
 			</div>
 			<div class='dv-group'>