gis-view-webgl2 0.1.1 → 0.1.3

package/docs/demos/LabelDemo.vue

@@ -101,8 +101,35 @@ const syncFormFromHit = () => {
 	nextTick(() => contentInput.value?.focus())
 }
 
-const buildOptions = () => ({
-	points: dataset.points,
+const buildOptions = () => ({
+	points: dataset.points.map((point, index) => index === 0
+		? {
+			...point,
+			labels: [
+				{ id: 'default', hidden: true },
+				{
+					id: 'per-item-draggable',
+					content: '逐条 A · 可拖 / 可编辑',
+					position: 'top',
+					gap: 24,
+					draggable: true,
+					editable: true,
+					avoidOverlap: false,
+					style: { color: '#8ff0c4', fontSize: '12px' }
+				},
+				{
+					id: 'per-item-locked',
+					content: '逐条 B · 只读',
+					position: 'bottom',
+					gap: 24,
+					draggable: false,
+					editable: false,
+					avoidOverlap: false,
+					style: { color: '#ffb4c8', fontSize: '12px' }
+				}
+			]
+		}
+		: point),
 	lines: dataset.lines,
 	channels: dataset.channels,
 	channelWidth: 2.4,
@@ -134,10 +161,16 @@ const buildOptions = () => ({
 		editable: true,
 		style: { color: '#ffe08a', fontSize: '11px' }
 	},
-	onReady: () => {
-		emit('notice', `${dataset.points.length} 个节点 / ${dataset.channels.length} 条通道，标签可点可拖可右键`)
-		pushLog('ready', '视图就绪：点一下标签试试（右键还有菜单）')
-	},
+	onReady: () => {
+		emit('notice', `${dataset.points.length} 个节点 / ${dataset.channels.length} 条通道，标签可点可拖可右键`)
+		pushLog('ready', '视图就绪：点一下标签试试（右键还有菜单）')
+		const first = dataset.points[0]
+		const labels = view?.getLabels('point', first.id) ?? []
+		const perItem = labels.filter(label => label.id === 'per-item-draggable' || label.id === 'per-item-locked')
+		if (perItem.length) {
+			perItemText.value = `第一个节点有 ${perItem.length} 条逐条配置：${perItem.map(label => `${label.id}（${String(label.content)}）`).join(' · ')}；A 可拖可点，B 只读`
+		}
+	},
 	onSelect: () => syncSelection()
 })
 /* ---- 三条添加路径：统一 API 的三种 refs 写法 ---- */
@@ -164,7 +197,7 @@ const syncSelection = () => {
 }
 
 /** 面板上的「选中一个」：不用在画布上瞄，点一下就把第一条节点 / 线路交给选中集 */
-const selectFirst = (kind) => {
+const selectFirst = (kind) => {
 	const item = kind === 'line' ? view?.getData().lines?.[0] : view?.getData().points?.[0]
 	if (!item) {
 		return
@@ -173,8 +206,21 @@ const selectFirst = (kind) => {
 		labelKind.value = 'line'
 	}
 	view.selectFeatures([item.id])
-	pushLog('select', `用接口选中 ${item.id}`)
-}
+	pushLog('select', `用接口选中 ${item.id}`)
+}
+
+/** 逐条交互示例：选中第一个节点并复读两条 labels 的定义来源 */
+const focusPerItemLabels = () => {
+	const first = dataset.points[0]
+	if (!view || !first) return
+	view.selectFeatures([first.id])
+	const labels = view.getLabels('point', first.id) ?? []
+	const perItem = labels.filter(label => label.id === 'per-item-draggable' || label.id === 'per-item-locked')
+	perItemText.value = perItem.length
+		? `第一个节点 ${String(first.id)}：${perItem.map(label => `${label.id}（${String(label.content)}）`).join(' · ')}；A 可拖可点，B 只读`
+		: '逐条交互示例没有读出来'
+	pushLog('逐条标签', perItemText.value)
+}
 
 /** 记住这一批加出来的 labelId：批量改 / 批量删就动这一批（addOnce 每次写 备注1 / 备注2…） */
 const rememberBatch = (result) => {
@@ -405,7 +451,8 @@ const describeChange = (payload) => {
  * 标签覆盖读数（getLabelStates）：一次列出「哪些标签被改过 / 拖过 / 隐藏过、哪些是运行时加的」，
  * 不用自己拿 getLabels 逐条比对。labelChange 一响就刷新一次（批量加减改都在这一条路上）。
  */
-const labelStatesText = ref('—')
+const labelStatesText = ref('—')
+const perItemText = ref('第一个节点有两条标签：A 可拖 / 可编辑，B 只读（不可拖 / 不可点）')
 const syncLabelStates = () => {
 	const states = view?.getLabelStates() ?? []
 	if (!states.length) {
@@ -479,9 +526,18 @@ onBeforeUnmount(() => {
 					<p class="dv-hint">overlapMode: 'shift'（默认）撞上别的标签时先换落点；'hide' 撞上就直接不显示。两者都只在 labelOptimize: true 且 avoidOverlap 没关时生效。</p>
 				</div>
 
+				<div class="dv-group">
+					<h3>逐条配置可拖 / 可编辑</h3>
+					<div class="dv-row">
+						<button type="button" class="dv-button dv-button--primary" data-demo="label-per-item-focus" @click="focusPerItemLabels">选中第一个节点并查看两条标签</button>
+					</div>
+					<p class="dv-readout" data-demo="label-per-item-readout">{{ perItemText }}</p>
+					<p class="dv-hint">第一个节点的数据 labels 里写了两条：A 单条 draggable / editable 为 true，B 单条写 false。逐条配置覆盖全局 label 开关；直接拖 A、点 B 就能看出差别。</p>
+				</div>
+
 				<div class="dv-group">
 				<h3>
-					加标签（统一 API）
+					加标签（统一 API）
 					<span class="dv-chips">
 						<button
 							v-for="item in ['point', 'line']"