gis-view-webgl2 0.1.11 → 0.1.13

package/docs/demos/BackgroundDemo.vue

@@ -0,0 +1,600 @@
+<script setup>
+/**
+ * 背景与网架：先只渲染网架，再添加图片或 GeoJSON 底图。
+ * 编辑本身完全由组件的 beginBackgroundEdit / updateBackgroundEdit / endBackgroundEdit 接管；
+ * 这个页面只负责导入素材、调背景透明度与内置编辑器的配置。
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import { buildDemoBasemap } from './demoBackground.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const dataset = buildDemoData({ count: 32 })
+const dataBounds = (() => {
+	let minX = Number.POSITIVE_INFINITY
+	let minY = Number.POSITIVE_INFINITY
+	let maxX = Number.NEGATIVE_INFINITY
+	let maxY = Number.NEGATIVE_INFINITY
+	for (const point of dataset.points) {
+		minX = Math.min(minX, point.x)
+		minY = Math.min(minY, point.y)
+		maxX = Math.max(maxX, point.x)
+		maxY = Math.max(maxY, point.y)
+	}
+	return { minX, minY, maxX, maxY }
+})()
+const paddedBounds = (bounds, ratio = 0.28) => {
+	const padX = Math.max(bounds.maxX - bounds.minX, 1e-4) * ratio
+	const padY = Math.max(bounds.maxY - bounds.minY, 1e-4) * ratio
+	return { minX: bounds.minX - padX, minY: bounds.minY - padY, maxX: bounds.maxX + padX, maxY: bounds.maxY + padY }
+}
+const formatWorld = value => Number(value.toFixed(3)).toString()
+const normalizeRotation = (value) => {
+	const degrees = Number(value)
+	if (!Number.isFinite(degrees)) {
+		return 0
+	}
+	const wrapped = ((degrees + 180) % 360 + 360) % 360 - 180
+	return Math.abs(wrapped) < 1e-9 ? 0 : wrapped
+}
+const rotateOffset = (x, y, degrees) => {
+	const radians = degrees * Math.PI / 180
+	const cosine = Math.cos(radians)
+	const sine = Math.sin(radians)
+	return [x * cosine - y * sine, x * sine + y * cosine]
+}
+
+/** 内置背景图：SVG data URL，不请求网络；换成任意宽高比也不会牵连外部资源 */
+const buildSampleImage = () => {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800">
+		<defs>
+			<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse"><path d="M 64 0 L 0 0 0 64" fill="none" stroke="#c4d9ec" stroke-width="1" opacity="0.72"/></pattern>
+			<linearGradient id="water" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#b6ddf7"/><stop offset="1" stop-color="#8ec9ee"/></linearGradient>
+		</defs>
+		<rect width="1280" height="800" fill="#eef6fc"/><rect width="1280" height="800" fill="url(#grid)"/>
+		<path d="M -40 590 C 160 500 280 640 470 560 S 800 420 980 500 S 1210 600 1320 470 L 1320 860 L -40 860 Z" fill="url(#water)" opacity="0.82"/>
+		<g fill="#dceaf6" stroke="#9ebed9" stroke-width="2">
+			<rect x="90" y="90" width="220" height="130" rx="18"/><rect x="350" y="72" width="300" height="165" rx="22"/>
+			<rect x="700" y="105" width="210" height="125" rx="16"/><rect x="955" y="78" width="230" height="155" rx="20"/>
+			<rect x="120" y="260" width="270" height="175" rx="18"/><rect x="445" y="280" width="190" height="140" rx="16"/>
+			<rect x="685" y="275" width="260" height="180" rx="22"/><rect x="990" y="270" width="190" height="150" rx="16"/>
+		</g>
+		<g fill="#cfe8d7" stroke="#8fb99d" stroke-width="2"><rect x="175" y="115" width="88" height="72" rx="35"/><rect x="735" y="135" width="130" height="66" rx="30"/><rect x="1025" y="300" width="115" height="84" rx="30"/></g>
+		<g stroke="#f7fbfe" stroke-width="9" opacity="0.92" fill="none"><path d="M 0 235 L 1280 235"/><path d="M 0 455 L 1280 455"/><path d="M 325 0 L 325 800"/><path d="M 660 0 L 660 520"/><path d="M 960 0 L 960 800"/></g>
+		<g fill="#537b9f" font-family="Arial, sans-serif" font-size="22" font-weight="700"><text x="96" y="55">NORTH GRID</text><text x="1010" y="55">SECTOR 04</text><text x="152" y="690">RIVER FRONT</text><text x="914" y="690">SOUTH DOCK</text></g>
+		<g fill="#7897b3" font-family="Arial, sans-serif" font-size="14"><text x="96" y="76">CUSTOM BACKGROUND · DRAG TO RESIZE</text><text x="1008" y="76">WGS GRID / DEMO</text></g>
+		<circle cx="660" cy="455" r="13" fill="#ffffff" stroke="#3d7cb3" stroke-width="5"/><circle cx="660" cy="455" r="36" fill="none" stroke="#3d7cb3" stroke-width="2" opacity="0.45"/>
+	</svg>`
+	return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`
+}
+const imageSource = ref(buildSampleImage())
+const imageName = ref('内置示意底图')
+const geoJsonSource = ref(buildDemoBasemap(dataBounds, { grid: true, padding: 0.28 }))
+const geoJsonName = ref('内置街区 / 网格')
+const backgroundMode = ref('none')
+const backgroundOpacity = ref(0.92)
+const networkVisible = ref(true)
+const networkOpacity = ref(1)
+const aspectLocked = ref(true)
+const rotationEnabled = ref(false)
+const editorStyle = reactive({
+	color: '#2f78b7',
+	lineWidth: 1.5,
+	dashed: true,
+	handleSize: 15,
+	handleShape: 'circle'
+})
+const initialBounds = paddedBounds(dataBounds)
+const editCenter = ref([(initialBounds.minX + initialBounds.maxX) / 2, (initialBounds.minY + initialBounds.maxY) / 2])
+const editWidth = ref(initialBounds.maxX - initialBounds.minX)
+const editHeight = ref(initialBounds.maxY - initialBounds.minY)
+const editRotation = ref(0)
+const editBounds = computed(() => ({
+	minX: editCenter.value[0] - editWidth.value / 2,
+	minY: editCenter.value[1] - editHeight.value / 2,
+	maxX: editCenter.value[0] + editWidth.value / 2,
+	maxY: editCenter.value[1] + editHeight.value / 2
+}))
+const backgroundEditing = ref(false)
+const widthDraft = ref(formatWorld(editWidth.value))
+const heightDraft = ref(formatWorld(editHeight.value))
+const rotationDraft = ref('0')
+const resolvedReadout = ref('尚未添加背景')
+const notice = ref('先看网架；再添加背景。编辑背景时网架不可点击，滚轮仍可整体缩放。')
+let view = null
+let readoutTimer = 0
+
+const modeLabel = computed(() => ({ none: '无背景', image: '图片', geojson: 'GeoJSON' })[backgroundMode.value])
+const sizeReadout = computed(() => `${editWidth.value.toFixed(2)} × ${editHeight.value.toFixed(2)} 世界单位 · ${formatWorld(editRotation.value)}°`)
+const centerReadout = computed(() => `中心 [${formatWorld(editCenter.value[0])}, ${formatWorld(editCenter.value[1])}]`)
+const networkStateText = computed(() => networkVisible.value ? '网架显示中' : '网架已隐藏')
+const sourceName = computed(() => backgroundMode.value === 'image' ? imageName.value : backgroundMode.value === 'geojson' ? geoJsonName.value : '—')
+const resizeModeText = computed(() => aspectLocked.value ? '四角等比缩放' : '八向自由缩放')
+const editorPointSummary = computed(() => {
+	const resizeCount = aspectLocked.value ? 4 : 8
+	return rotationEnabled.value
+		? `${resizeCount + 1} 个编辑点（${resizeCount} 缩放 + 1 旋转）`
+		: `${resizeCount} 个编辑点（仅缩放）`
+})
+const editorGestureHint = computed(() => `拖背景移动 · ${resizeModeText.value} · ${rotationEnabled.value ? '顶部圆点旋转' : '开启旋转后显示旋转圆点'}`)
+
+const rotatedCorners = () => {
+	const halfWidth = editWidth.value / 2
+	const halfHeight = editHeight.value / 2
+	return [
+		[-halfWidth, halfHeight],
+		[halfWidth, halfHeight],
+		[halfWidth, -halfHeight],
+		[-halfWidth, -halfHeight]
+	].map(([x, y]) => {
+		const [offsetX, offsetY] = rotateOffset(x, y, -editRotation.value)
+		return [editCenter.value[0] + offsetX, editCenter.value[1] + offsetY]
+	})
+}
+const buildBackground = () => {
+	const base = { color: '#f4f8fc', opacity: backgroundOpacity.value }
+	if (backgroundMode.value === 'image') {
+		return { ...base, image: { src: imageSource.value, corners: rotatedCorners(), opacity: 1, shadow: { color: '#3f6388', opacity: 0.2, offsetX: 8, offsetY: 10, blur: 18 } } }
+	}
+	if (backgroundMode.value === 'geojson') {
+		return {
+			...base,
+			geoJson: geoJsonSource.value,
+			geoJsonStyle: {
+				bounds: editBounds.value,
+				rotation: editRotation.value,
+				aspectScale: 1,
+				fill: '#b9d5ee',
+				fillOpacity: 0.48,
+				stroke: '#6f9bc5',
+				borderWidth: 1.2,
+				opacity: 0.82,
+				pointColor: '#4676a4',
+				pointSize: 4,
+				label: { show: true, color: '#31597f', fontSize: 12, fontWeight: '600' }
+			}
+		}
+	}
+	return base
+}
+
+const refreshResolvedReadout = () => {
+	if (readoutTimer) {
+		window.clearTimeout(readoutTimer)
+		readoutTimer = 0
+	}
+	const read = () => {
+		const resolved = view?.getResolvedBackground() ?? null
+		if (backgroundMode.value === 'none' || !resolved) {
+			resolvedReadout.value = '尚未添加背景'
+			return
+		}
+		if (backgroundMode.value === 'image') {
+			const corners = view.getOptions().background?.image?.corners ?? []
+			resolvedReadout.value = resolved.image?.quad?.length
+				? `图片四角已解析：${corners.map(corner => `[${corner.map(value => Number(value).toFixed(2)).join(', ')}]`).join(' / ')}`
+				: '图片正在解码，四角解析完成后会更新'
+			return
+		}
+		const geo = resolved.geoJson
+		resolvedReadout.value = geo
+			? `GeoJSON ${geo.regions.length} 个区域 · ${formatWorld(geo.rotation)}° · 显示范围 ${geo.bounds ? `[${Number(geo.bounds.minX).toFixed(2)}, ${Number(geo.bounds.minY).toFixed(2)}, ${Number(geo.bounds.maxX).toFixed(2)}, ${Number(geo.bounds.maxY).toFixed(2)}]` : '—'} · ${geo.labels.length} 条区域文字`
+			: 'GeoJSON 正在解析'
+	}
+	read()
+	if (backgroundMode.value === 'image') {
+		readoutTimer = window.setTimeout(() => {
+			readoutTimer = 0
+			read()
+		}, 160)
+	}
+}
+
+const syncFrameInputs = () => {
+	widthDraft.value = formatWorld(editWidth.value)
+	heightDraft.value = formatWorld(editHeight.value)
+	rotationDraft.value = formatWorld(editRotation.value)
+}
+const syncEditorState = (state) => {
+	if (!state) {
+		backgroundEditing.value = false
+		return
+	}
+	backgroundEditing.value = state.active
+	editCenter.value = [...state.center]
+	editWidth.value = state.width
+	editHeight.value = state.height
+	editRotation.value = state.rotation
+	syncFrameInputs()
+	refreshResolvedReadout()
+}
+const editorOptions = ({ fitView = false, onChange = syncEditorState, onEnd } = {}) => ({
+	aspectLocked: aspectLocked.value,
+	rotation: rotationEnabled.value,
+	snapAngle: 15,
+	minSize: 12,
+	rotationDistance: 30,
+	fitView,
+	fitPadding: 64,
+	showHint: true,
+	style: { ...editorStyle },
+	onChange,
+	onEnd: onEnd ?? ((state) => {
+		syncEditorState(state)
+		notice.value = `背景编辑完成：${editorGestureHint.value}。`
+	})
+})
+const beginEditor = ({ fitView = false } = {}) => {
+	if (!view || backgroundMode.value === 'none') {
+		backgroundEditing.value = false
+		return
+	}
+	view.beginBackgroundEdit(editorOptions({ fitView }))
+	syncEditorState(view.getBackgroundEdit())
+	backgroundEditing.value = view.getBackgroundEdit() !== null
+}
+const applyBackground = () => {
+	if (!view) {
+		return
+	}
+	view.updateBackground(buildBackground())
+	view.refresh({ reflow: false })
+	refreshResolvedReadout()
+}
+const setMode = (mode) => {
+	if (!view) {
+		backgroundMode.value = mode
+		return
+	}
+	view.endBackgroundEdit()
+	backgroundEditing.value = false
+	backgroundMode.value = mode
+	if (mode === 'none') {
+		applyBackground()
+		notice.value = '背景已清空，网架与相机位置保持不变。'
+		return
+	}
+	applyBackground()
+	beginEditor({ fitView: true })
+	notice.value = mode === 'image'
+		? `背景图已添加：${editorGestureHint.value}。`
+		: `GeoJSON 已添加：位置写 bounds、旋转写 geoJsonStyle.rotation；${editorGestureHint.value}。`
+}
+const setEditing = (value) => {
+	if (value && backgroundMode.value === 'none') {
+		backgroundEditing.value = false
+		return
+	}
+	if (value) {
+		beginEditor()
+		notice.value = `背景编辑模式：${editorGestureHint.value}；滚轮只缩放不操作网架。`
+	}
+	else {
+		view?.endBackgroundEdit()
+		backgroundEditing.value = false
+		notice.value = '已退出背景编辑，网架恢复浏览交互。'
+	}
+}
+const focusBackground = () => {
+	if (backgroundMode.value === 'none') {
+		view?.fitView(72)
+		return
+	}
+	if (!backgroundEditing.value) {
+		beginEditor()
+	}
+	view?.updateBackgroundEdit({ fitView: true })
+	emit('notice', '已把整块背景和编辑框放回视野。')
+}
+const fitViewport = () => {
+	if (backgroundMode.value === 'none') {
+		view?.fitView(72)
+		return
+	}
+	focusBackground()
+}
+const applySize = (axis) => {
+	if (!view || !backgroundEditing.value) {
+		syncFrameInputs()
+		return
+	}
+	const value = axis === 'width' ? Number(widthDraft.value) : Number(heightDraft.value)
+	if (!Number.isFinite(value) || value <= 0) {
+		syncFrameInputs()
+		return
+	}
+	view.updateBackgroundEdit(axis === 'width' ? { width: value } : { height: value })
+	syncEditorState(view.getBackgroundEdit())
+}
+const applyRotation = () => {
+	if (!view || !backgroundEditing.value) {
+		syncFrameInputs()
+		return
+	}
+	const next = normalizeRotation(Number(rotationDraft.value) || 0)
+	view.updateBackgroundEdit({ angle: next })
+	syncEditorState(view.getBackgroundEdit())
+}
+const rotateBy = (delta) => {
+	if (!view || !backgroundEditing.value) {
+		return
+	}
+	view.updateBackgroundEdit({ angle: normalizeRotation(editRotation.value + delta) })
+	syncEditorState(view.getBackgroundEdit())
+}
+const toggleNetwork = () => {
+	networkVisible.value = !networkVisible.value
+}
+const onImageFile = (event) => {
+	const file = event.target.files?.[0]
+	if (!file) {
+		return
+	}
+	const reader = new FileReader()
+	reader.onload = () => {
+		imageSource.value = String(reader.result)
+		imageName.value = file.name
+		setMode('image')
+		emit('notice', `已载入背景图 ${file.name}`)
+	}
+	reader.readAsDataURL(file)
+	event.target.value = ''
+}
+const onGeoJsonFile = (event) => {
+	const file = event.target.files?.[0]
+	if (!file) {
+		return
+	}
+	const reader = new FileReader()
+	reader.onload = () => {
+		try {
+			geoJsonSource.value = JSON.parse(String(reader.result))
+			geoJsonName.value = file.name
+			setMode('geojson')
+			emit('notice', `已载入 GeoJSON ${file.name}`)
+		}
+		catch {
+			notice.value = `无法解析 ${file.name}：请选择合法的 GeoJSON JSON 文件。`
+			emit('notice', notice.value)
+		}
+	}
+	reader.readAsText(file, 'utf-8')
+	event.target.value = ''
+}
+
+watch(networkVisible, value => {
+	view?.updateOptions({ networkVisible: value })
+	notice.value = value ? '网架已恢复；背景仍保持当前范围。' : '网架已完全隐藏，只留下背景与编辑手柄。'
+})
+watch(networkOpacity, value => {
+	view?.updateOptions({ networkOpacity: value })
+})
+watch(backgroundOpacity, () => applyBackground())
+watch(aspectLocked, (value) => {
+	if (backgroundEditing.value) {
+		view?.updateBackgroundEdit({ aspectLocked: value })
+	}
+})
+watch(rotationEnabled, (value) => {
+	if (backgroundEditing.value) {
+		view?.updateBackgroundEdit({ rotation: value })
+		notice.value = `背景编辑模式：${editorGestureHint.value}${value ? '；拖动顶部圆点即可旋转' : '；当前只显示缩放手柄'}。`
+	}
+})
+watch(editorStyle, () => {
+	if (backgroundEditing.value) {
+		view?.updateBackgroundEdit({ style: { ...editorStyle } })
+	}
+}, { deep: true })
+
+onMounted(() => {
+	view = createGisView(container.value, {
+		points: dataset.points,
+		lines: dataset.linesWithoutChannel,
+		channels: [],
+		pointStyle: { size: 7, color: '#ffffff', strokeColor: '#3d7cb3', strokeWidth: 1.8 },
+		lineStyle: { width: 1.8, color: 'rgba(64, 112, 158, 0.72)' },
+		fitPadding: 72,
+		showGrid: false,
+		features: 'view',
+		networkVisible: networkVisible.value,
+		networkOpacity: networkOpacity.value,
+		background: buildBackground(),
+		onReady: () => {
+			emit('notice', '网架已就绪：添加图片或 GeoJSON，再拖动内置编辑框调背景。')
+		},
+		onWarning: (text) => {
+			notice.value = `warning：${text}`
+			emit('notice', notice.value)
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	if (readoutTimer) {
+		window.clearTimeout(readoutTimer)
+		readoutTimer = 0
+	}
+	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" data-demo="background-fit" @click="fitViewport">{{ backgroundMode === 'none' ? '适应全部' : '适应背景' }}</button>
+				<button v-if="backgroundMode !== 'none'" type="button" data-demo="background-toggle-editing" @click="setEditing(!backgroundEditing)">
+					{{ backgroundEditing ? '退出背景编辑' : '编辑背景' }}
+				</button>
+				<button type="button" @click="setMode('image')">切到图片</button>
+				<button type="button" @click="setMode('geojson')">切到 GeoJSON</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>添加背景<span class="dv-chip">{{ modeLabel }}</span></h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="background-add-image" @click="setMode('image')">添加背景图</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="background-add-geojson" @click="setMode('geojson')">添加 GeoJSON</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="background-clear" @click="setMode('none')">清空</button>
+				</div>
+				<div class="dv-row">
+					<label class="bg-upload">上传图片<input data-demo="background-image-file" type="file" accept="image/*" @change="onImageFile" /></label>
+					<label class="bg-upload">上传 GeoJSON<input data-demo="background-geojson-file" type="file" accept=".json,.geojson,application/json" @change="onGeoJsonFile" /></label>
+				</div>
+				<p class="dv-hint">先显示网架，再选一种背景。上传的文件只在这一页本地解析，不会发请求。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>位置、大小与旋转<span class="dv-chip">{{ sizeReadout }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="aspectLocked" data-demo="background-lock-ratio" type="checkbox" /> 锁定宽高比</label>
+					<label><input v-model="rotationEnabled" data-demo="background-rotation-enabled" type="checkbox" /> 允许旋转</label>
+					<span class="dv-chip" data-demo="background-edit-point-summary">{{ editorPointSummary }}</span>
+				</div>
+				<p class="dv-hint">锁定时只显示四个角点并等比缩放；解锁后显示四角与四边中点，共八向自由缩放；开启旋转时再多一个顶部旋转点，共九个编辑点。</p>
+				<div class="dv-row">
+					<label>宽 <input v-model="widthDraft" class="dv-number" data-demo="background-width" type="number" min="0.001" step="0.1" @change="applySize('width')" /></label>
+					<label>高 <input v-model="heightDraft" class="dv-number" data-demo="background-height" type="number" min="0.001" step="0.1" @change="applySize('height')" /></label>
+				</div>
+				<div v-if="rotationEnabled" class="dv-row">
+					<label>旋转 <input v-model="rotationDraft" class="dv-number" data-demo="background-rotation" type="number" step="1" @change="applyRotation" /><span class="dv-unit">°</span></label>
+					<button type="button" class="dv-button" data-demo="background-rotate-left" @click="rotateBy(-15)">−15°</button>
+					<button type="button" class="dv-button" data-demo="background-rotate-right" @click="rotateBy(15)">+15°</button>
+				</div>
+				<div class="dv-row">
+					<label><input :checked="backgroundEditing" :disabled="backgroundMode === 'none'" data-demo="background-edit-mode" type="checkbox" @change="setEditing($event.target.checked)" /> 背景编辑模式</label>
+					<button type="button" class="dv-button" :disabled="backgroundMode === 'none'" data-demo="background-fit-panel" @click="focusBackground">把背景放回视野</button>
+				</div>
+				<p class="dv-readout" data-demo="background-center-read">{{ centerReadout }}</p>
+				<p class="dv-hint">页面只调用 `beginBackgroundEdit()` / `updateBackgroundEdit()` / `endBackgroundEdit()`；组件负责编辑层、命中与同帧刷新。图片写回 `image.corners`，GeoJSON 写回 `geoJsonStyle.bounds` + `rotation`。</p>
+				<p class="dv-readout" data-demo="background-size-read">当前背景范围：{{ sizeReadout }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>编辑框样式<span class="dv-chip">内置 API</span></h3>
+				<div class="dv-row">
+					<label>颜色 <input v-model="editorStyle.color" class="bg-color-input" data-demo="background-edit-color" type="color" /></label>
+					<label>线宽
+						<input v-model.number="editorStyle.lineWidth" data-demo="background-edit-line-width" type="range" min="0.5" max="5" step="0.5" />
+						<span>{{ editorStyle.lineWidth }} px</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="editorStyle.dashed" data-demo="background-edit-dashed" type="checkbox" /> 虚线轮廓</label>
+					<label>手柄大小
+						<input v-model.number="editorStyle.handleSize" data-demo="background-edit-handle-size" type="range" min="8" max="28" step="1" />
+						<span>{{ editorStyle.handleSize }} px</span>
+					</label>
+					<label>形状
+						<select v-model="editorStyle.handleShape" class="bg-select" data-demo="background-edit-handle-shape">
+							<option value="circle">圆形</option>
+							<option value="square">方形</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-hint">这些控件走 `updateBackgroundEdit({ style })`，实时作用到轮廓、旋转连线和缩放手柄；组件背景本身的渲染不依赖编辑框样式。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>网架显隐与透明度<span class="dv-chip">{{ networkStateText }}</span></h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" :class="{ 'dv-button--primary': !networkVisible }" data-demo="background-toggle-network" @click="toggleNetwork">
+						{{ networkVisible ? '一键隐藏网架' : '恢复显示网架' }}
+					</button>
+					<label><input v-model="networkVisible" data-demo="background-network-visible" type="checkbox" /> 显示网架</label>
+				</div>
+				<div class="dv-row">
+					<label>整体透明度
+						<input v-model.number="networkOpacity" data-demo="background-network-opacity" type="range" min="0" max="1" step="0.05" />
+						<span>{{ Math.round(networkOpacity * 100) }}%</span>
+					</label>
+				</div>
+				<p class="dv-hint">隐藏时网架节点、线路、动画、标签和拾取一起收掉，背景与网格照常显示；若只想让网架退到背景后面，把透明度拉到 0 ~ 40%。</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>背景层<span class="dv-chip">{{ sourceName }}</span></h3>
+				<div class="dv-row">
+					<label>背景透明度
+						<input v-model.number="backgroundOpacity" data-demo="background-opacity" type="range" min="0" max="1" step="0.05" />
+						<span>{{ Math.round(backgroundOpacity * 100) }}%</span>
+					</label>
+				</div>
+				<p class="dv-readout" data-demo="background-readout">
+					{{ modeLabel }} · {{ sizeReadout }} · {{ networkStateText }} · 整体不透明度 {{ Math.round(networkOpacity * 100) }}%
+				</p>
+				<p class="dv-readout" data-demo="background-resolved">{{ resolvedReadout }}</p>
+			</div>
+
+			<div class="dv-group">
+				<h3>操作提示</h3>
+				<p class="dv-hint" data-demo="background-notice">{{ notice }}</p>
+				<p class="dv-hint">调背景时可以先隐藏网架，只留编辑框和手柄；恢复网架后，透明度滑块能直接预览「网架压住背景」的效果。GeoJSON 的区域文字属于背景层，不受网架显隐影响。</p>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.dv-toolbar {
+	z-index: 5;
+}
+
+.bg-upload {
+	position: relative;
+	padding: 5px 9px;
+	border: 1px solid #cfdcec;
+	border-radius: 6px;
+	background: #f6f9fd;
+	color: #2f5e94;
+	overflow: hidden;
+}
+
+.bg-upload input {
+	position: absolute;
+	inset: 0;
+	opacity: 0;
+	cursor: pointer;
+}
+
+.bg-color-input {
+	width: 36px;
+	height: 26px;
+	padding: 2px;
+	border: 1px solid #cfdcec;
+	border-radius: 6px;
+	background: #fff;
+	cursor: pointer;
+}
+
+.bg-select {
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
+.dv-number {
+	width: 88px;
+	padding: 4px 6px;
+	border: 1px solid #d6e0ec;
+	border-radius: 6px;
+	background: #fff;
+	color: #1f2a44;
+	font-size: 12px;
+}
+
+.dv-unit {
+	color: #60718a;
+	font-size: 12px;
+}
+</style>