gis-view-webgl2 0.1.11 → 0.1.13

package/docs/steps/selftest-features.html

@@ -37,6 +37,10 @@
 			try {
 				const { createChannels, createGisView: createGisViewRaw } = await import('../../src/gis-view/index.js')
 				const { DEFAULT_SHORTCUTS } = await import('../../src/gis-view/keys.js')
+				const { compilePointRules, resolvePoint } = await import('../../src/gis-view/point.js')
+				const { compileLineRules, resolveLineStyle } = await import('../../src/gis-view/line.js')
+				const { parseColor } = await import('../../src/gis-view/utils.js')
+				const { resolveGeoJson } = await import('../../src/gis-view/background.js')
 				// 本页断言是照「限数 + 避让」的老口径写的：统一按优化档（labelOptimize: true）跑
 				const createGisView = (host, options = {}) => createGisViewRaw(host, { labelOptimize: true, ...options })
 				const { dcLineDecoration, dcLineDecorationSymbol, pathSymbol } = await import('../demos/gisStyle.js')
@@ -243,6 +247,300 @@
 				check('关掉网格回到原来的画面', restoreLine === 0, `回退像素差 ${restoreLine}`)
 				check('表现型配置不改数据', view.getData().lines.length === 4 && view.getData().points.length === 2, JSON.stringify({ lines: view.getData().lines.length, points: view.getData().points.length }))
 
+				// 网架整体显隐 / 透明度：都是表现型配置，隐藏后数据与拾取入口一起收掉，背景与网格不参与
+				const networkSample = view.project(100, 0)
+				const samplePixel = (frame) => {
+					const x = Math.min(Math.max(Math.round(networkSample[0]), 0), frame.width - 1)
+					const y = Math.min(Math.max(Math.round(networkSample[1]), 0), frame.height - 1)
+					const index = (y * frame.width + x) * 4
+					return [frame.pixels[index], frame.pixels[index + 1], frame.pixels[index + 2]]
+				}
+				const colorDistance = (pixel, rgb) => Math.abs(pixel[0] - rgb[0]) + Math.abs(pixel[1] - rgb[1]) + Math.abs(pixel[2] - rgb[2])
+				const networkFrame = await shot()
+				const networkPixel = samplePixel(networkFrame)
+				const networkPick = view.pick(networkSample[0], networkSample[1])
+				view.updateOptions({ networkVisible: false })
+				const hiddenFrame = await shot()
+				const hiddenPixel = samplePixel(hiddenFrame)
+				const hiddenInk = ink(hiddenFrame, [0, 0, hiddenFrame.width, hiddenFrame.height])
+				const hiddenPick = view.pick(networkSample[0], networkSample[1])
+				check('networkVisible: false 真正跳过整段网架绘制，且拾取不再命中',
+					Boolean(networkPick) && hiddenPick === null && hiddenInk === 0 && colorDistance(hiddenPixel, [255, 255, 255]) < 12 &&
+					view.getData().lines.length === 4 && view.getData().points.length === 2,
+					`命中 ${Boolean(networkPick)}→${Boolean(hiddenPick)} / 剩余墨量 ${hiddenInk} / 像素 ${hiddenPixel.join(',')}`)
+				view.updateOptions({ networkVisible: true, networkOpacity: 0.25 })
+				const fadedFrame = await shot()
+				const fadedPixel = samplePixel(fadedFrame)
+				check('networkOpacity 在逐要素颜色之上再乘一层 alpha，数据不动',
+					colorDistance(fadedPixel, [255, 255, 255]) > 5 &&
+					colorDistance(fadedPixel, [255, 255, 255]) < colorDistance(networkPixel, [255, 255, 255]) &&
+					view.getData().lines.length === 4 && view.getData().points.length === 2,
+					`实色 ${networkPixel.join(',')} → 25% ${fadedPixel.join(',')}`)
+				view.updateOptions({ networkOpacity: 1, networkVisible: true })
+
+				// 创建时就隐藏网架：WebGL 数据段不画，DOM 标签层也要在第一帧前同步收起
+				const initialHiddenHost = document.createElement('div')
+				initialHiddenHost.style.cssText = 'width:320px;height:220px'
+				document.body.appendChild(initialHiddenHost)
+				const initialHiddenView = createGisView(initialHiddenHost, {
+					points: [{ id: 'initial-hidden', x: 0, y: 0, name: '初始隐藏' }],
+					lines: [],
+					label: { show: true, content: '{name}' },
+					networkVisible: false,
+					networkOpacity: 0.35,
+					fitPadding: 12
+				})
+				const initialNetworkLayers = [
+					initialHiddenHost.querySelector('.gis-view__label-layer--point'),
+					initialHiddenHost.querySelector('.gis-view__label-layer--line'),
+					initialHiddenHost.querySelector('.gis-view__cluster-layer')
+				]
+				check('初始化 networkVisible: false 时 DOM 标签层同步隐藏',
+					initialNetworkLayers.every(layer => layer?.style.visibility === 'hidden' && layer?.style.opacity === '0'),
+					initialNetworkLayers.map(layer => layer ? `${layer.style.visibility}/${layer.style.opacity}` : 'missing').join(' · '))
+				initialHiddenView.destroy()
+				initialHiddenHost.remove()
+
+				// GeoJSON 目标矩形：逐区域几何、bounds 与中心一起搬过去，原始范围留给相机 / 投影
+				const mappedGeo = resolveGeoJson({
+					type: 'Polygon',
+					coordinates: [[[0, 0], [10, 0], [10, 5], [0, 5], [0, 0]]]
+				}, {
+					aspectScale: 1,
+					bounds: { minX: 100, minY: 200, maxX: 140, maxY: 220 }
+				}, 1)
+				const mappedXs = mappedGeo.fills.filter((_value, index) => index % 2 === 0)
+				const mappedYs = mappedGeo.fills.filter((_value, index) => index % 2 === 1)
+				check('background.geoJsonStyle.bounds 把整份 GeoJSON 独立缩放到目标宽高，rawBounds 不变',
+					mappedGeo.bounds?.minX === 100 && mappedGeo.bounds?.maxX === 140 && mappedGeo.bounds?.minY === 200 && mappedGeo.bounds?.maxY === 220 &&
+					mappedGeo.rawBounds?.minX === 0 && mappedGeo.rawBounds?.maxX === 10 && mappedGeo.rawBounds?.minY === 0 && mappedGeo.rawBounds?.maxY === 5 &&
+					mappedXs.length > 0 && mappedXs.every(value => value >= 99.999 && value <= 140.001) &&
+					mappedYs.length > 0 && mappedYs.every(value => value >= 199.999 && value <= 220.001) &&
+					Math.abs(mappedGeo.regions[0].center[0] - 120) < 1e-6 && Math.abs(mappedGeo.regions[0].center[1] - 210) < 1e-6,
+					JSON.stringify({ bounds: mappedGeo.bounds, rawBounds: mappedGeo.rawBounds, center: mappedGeo.regions[0].center }))
+
+				// GeoJSON 旋转：绕目标 bounds 中心顺时针转，几何与区域 center 一起转，bounds 报旋转后的 AABB
+				const rotatedGeo = resolveGeoJson({
+					type: 'Polygon',
+					coordinates: [[[0, 0], [10, 0], [0, 5], [0, 0]]]
+				}, {
+					aspectScale: 1,
+					bounds: { minX: 100, minY: 200, maxX: 140, maxY: 220 },
+					rotation: 90
+				}, 1)
+				const rotatedFillCount = rotatedGeo.fills.length / 2
+				let rotatedCorner = false
+				for (let index = 0; index < rotatedFillCount; index += 1) {
+					if (Math.abs(rotatedGeo.fills[index * 2] - 110) < 1e-6 && Math.abs(rotatedGeo.fills[index * 2 + 1] - 190) < 1e-6) {
+						rotatedCorner = true
+						break
+					}
+				}
+				check('background.geoJsonStyle.rotation 绕中心顺时针旋转，bounds 是旋转后的 AABB、rawBounds 不变',
+					rotatedGeo.rotation === 90 && rotatedCorner &&
+					Math.abs(rotatedGeo.bounds.minX - 110) < 1e-6 && Math.abs(rotatedGeo.bounds.maxX - 130) < 1e-6 &&
+					Math.abs(rotatedGeo.bounds.minY - 190) < 1e-6 && Math.abs(rotatedGeo.bounds.maxY - 230) < 1e-6 &&
+					rotatedGeo.rawBounds?.minX === 0 && rotatedGeo.rawBounds?.maxX === 10 && rotatedGeo.rawBounds?.minY === 0 && rotatedGeo.rawBounds?.maxY === 5 &&
+					Math.abs(rotatedGeo.regions[0].center[0] - 116.66666666666666) < 1e-6 && Math.abs(rotatedGeo.regions[0].center[1] - 216.66666666666669) < 1e-6,
+					JSON.stringify({ rotation: rotatedGeo.rotation, bounds: rotatedGeo.bounds, rawBounds: rotatedGeo.rawBounds, center: rotatedGeo.regions[0].center }))
+
+				// 背景编辑模式：网架的点击 / 拖点 / 平移 / 右键 / 删除键全部停用，滚轮缩放仍保留
+				const editingBox = canvas.getBoundingClientRect()
+				const editingPointScreen = id => {
+					const item = view.getData().points.find(point => point.id === id)
+					return view.project(item.x, item.y)
+				}
+				const editingPointer = (type, screen, extra = {}) => canvas.dispatchEvent(new PointerEvent(type, {
+					bubbles: true,
+					cancelable: true,
+					pointerId: 91,
+					pointerType: 'mouse',
+					button: 0,
+					buttons: type === 'pointerup' ? 0 : 1,
+					clientX: editingBox.left + screen[0],
+					clientY: editingBox.top + screen[1],
+					...extra
+				}))
+				const editingClick = screen => {
+					editingPointer('pointermove', screen, { buttons: 0 })
+					editingPointer('pointerdown', screen)
+					editingPointer('pointerup', screen)
+				}
+				const selectionBeforeEditingTest = view.getSelections().map(({ type, index }) => ({ type, index }))
+				view.deselect()
+				editingClick(editingPointScreen('node-a'))
+				await hoverFrame()
+				const selectedBeforeEditing = view.getSelectionData().ids
+				view.updateOptions({ backgroundEditing: true })
+				const pointsBeforeEditing = JSON.stringify(view.getData().points.map(point => [point.id, point.x, point.y]))
+				const cameraBeforeEditing = view.getCamera()
+				const contextEvents = []
+				const contextOff = view.on('contextMenu', payload => contextEvents.push(payload))
+				editingClick(editingPointScreen('node-b'))
+				editingPointer('pointerdown', editingPointScreen('node-a'))
+				editingPointer('pointermove', [editingPointScreen('node-a')[0] + 60, editingPointScreen('node-a')[1] + 25])
+				editingPointer('pointerup', [editingPointScreen('node-a')[0] + 60, editingPointScreen('node-a')[1] + 25])
+				editingPointer('pointerdown', [18, 18])
+				editingPointer('pointermove', [88, 48])
+				editingPointer('pointerup', [88, 48])
+				const contextScreen = editingPointScreen('node-a')
+				const contextAllowed = canvas.dispatchEvent(new MouseEvent('contextmenu', {
+					bubbles: true,
+					cancelable: true,
+					button: 2,
+					clientX: editingBox.left + contextScreen[0],
+					clientY: editingBox.top + contextScreen[1]
+				}))
+				view.el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true, cancelable: true }))
+				await hoverFrame()
+				const cameraAfterEditing = view.getCamera()
+				const selectedAfterEditing = view.getSelectionData().ids
+				const pointsAfterEditing = JSON.stringify(view.getData().points.map(point => [point.id, point.x, point.y]))
+				contextOff()
+				check('backgroundEditing 屏蔽网架点击 / 拖点 / 平移 / 右键 / 删除键，背景仍保留',
+					view.getOptions().backgroundEditing === true && selectedBeforeEditing.length === 1 &&
+					JSON.stringify(selectedAfterEditing) === JSON.stringify(selectedBeforeEditing) &&
+					pointsAfterEditing === pointsBeforeEditing && contextEvents.length === 0 && contextAllowed === false &&
+					cameraAfterEditing.center[0] === cameraBeforeEditing.center[0] && cameraAfterEditing.center[1] === cameraBeforeEditing.center[1] &&
+					cameraAfterEditing.scale === cameraBeforeEditing.scale,
+					JSON.stringify({ selected: selectedAfterEditing, context: contextEvents.length, allowed: contextAllowed, camera: [cameraBeforeEditing, cameraAfterEditing] }))
+				const editingScaleBefore = view.getScale()
+				canvas.dispatchEvent(new WheelEvent('wheel', {
+					bubbles: true,
+					cancelable: true,
+					deltaY: -240,
+					clientX: editingBox.left + contextScreen[0],
+					clientY: editingBox.top + contextScreen[1]
+				}))
+				await hoverFrame()
+				check('backgroundEditing 下滚轮仍能让网架和背景一起缩放',
+					view.getScale() > editingScaleBefore && view.getOptions().backgroundEditing === true,
+					`${editingScaleBefore} -> ${view.getScale()}`)
+				view.updateOptions({ backgroundEditing: false })
+				check('退出 backgroundEditing 后开关可恢复，数据和选中都不丢',
+					view.getOptions().backgroundEditing === false && JSON.stringify(view.getSelectionData().ids) === JSON.stringify(selectedBeforeEditing) &&
+					view.getData().points.length === 2 && view.getData().lines.length === 4,
+					JSON.stringify({ editing: view.getOptions().backgroundEditing, selected: view.getSelectionData().ids }))
+				view.setCamera(cameraBeforeEditing)
+				view.deselect()
+				if (selectionBeforeEditingTest.length) {
+					view.selectFeatures(selectionBeforeEditingTest)
+				}
+				await hoverFrame()
+
+				// 内置背景编辑：begin / update / end 三个入口直接管住编辑层、4 / 8 / 9 点与背景写回
+				const backgroundBeforeEditorApi = view.getOptions().background
+				const cameraBeforeEditorApi = view.getCamera()
+				let editorChangeCount = 0
+				let editorEndCount = 0
+				view.updateBackground({
+					color: '#f4f8fc',
+					geoJson: {
+						type: 'FeatureCollection',
+						features: [{
+							type: 'Feature',
+							properties: { name: '编辑区域' },
+							geometry: {
+								type: 'Polygon',
+								coordinates: [[[0, 0], [10, 0], [10, 5], [0, 5], [0, 0]]]
+							}
+						}]
+					},
+					geoJsonStyle: {
+						aspectScale: 1,
+						bounds: { minX: 40, minY: -20, maxX: 160, maxY: 80 },
+						rotation: 0,
+						fill: '#b9d5ee',
+						stroke: '#6f9bc5',
+						label: { enabled: true, fontSize: 14, color: '#475569' }
+					}
+				})
+				check('内置背景编辑：未 begin 时读数为 null，也没有编辑层',
+					view.getBackgroundEdit() === null && view.el.querySelector('[data-gis-background-editor]') === null)
+				const beginEditorReturn = view.beginBackgroundEdit({
+					aspectLocked: true,
+					rotation: false,
+					fitView: true,
+					style: { color: '#1d4ed8', handleSize: 18, handleShape: 'square' },
+					onChange: () => { editorChangeCount += 1 },
+					onEnd: () => { editorEndCount += 1 }
+				})
+				await hoverFrame()
+				const editorStartState = view.getBackgroundEdit()
+				const editorLayer = view.el.querySelector('[data-gis-background-editor]')
+				const visibleEditorHandles = () => [...view.el.querySelectorAll('[data-gis-background-handle]:not([hidden])')]
+				const visibleRotateHandles = () => [...view.el.querySelectorAll('[data-gis-background-rotate]:not([hidden])')]
+				check('beginBackgroundEdit：自动打开 backgroundEditing，默认四角、无旋转点，并写入编辑器样式',
+					beginEditorReturn === view && editorStartState?.active === true && editorStartState.backgroundType === 'geojson' &&
+					editorStartState.aspectLocked === true && editorStartState.rotationEnabled === false && editorStartState.handleCount === 4 &&
+					view.getOptions().backgroundEditing === true && editorLayer !== null && visibleEditorHandles().length === 4 && visibleRotateHandles().length === 0 &&
+					editorLayer.style.getPropertyValue('--gis-view-bg-editor-color').trim().toLowerCase() === '#1d4ed8' &&
+					editorLayer.style.getPropertyValue('--gis-view-bg-editor-handle-size').trim() === '18px',
+					JSON.stringify({ state: editorStartState, handles: visibleEditorHandles().length, rotate: visibleRotateHandles().length, editing: view.getOptions().backgroundEditing }))
+				const editorAreaLabel = view.el.querySelector('.gis-view__background-label')
+				const editorAreaTransform = editorAreaLabel?.style.transform ?? ''
+				view.updateBackgroundEdit({ center: [editorStartState.center[0] + 10, editorStartState.center[1] + 6] })
+				const editorAreaSyncTransform = editorAreaLabel?.style.transform ?? ''
+				view.updateBackgroundEdit({ center: editorStartState.center })
+				await hoverFrame()
+				check('内置背景编辑：同一帧就把区域文字投到新锚点，不再比底图晚一帧',
+					Boolean(editorAreaTransform) && editorAreaSyncTransform !== editorAreaTransform,
+					`${editorAreaTransform || '(无)'} → ${editorAreaSyncTransform || '(无)'}`)
+				view.updateBackgroundEdit({ aspectLocked: false, rotation: true, style: { color: '#c2410c', dashed: false, handleSize: 22 } })
+				await hoverFrame()
+				const editorUnlockedState = view.getBackgroundEdit()
+				const editorStyledHandle = view.el.querySelector('[data-gis-background-handle=nw]')
+				const editorStyledHandleStyle = editorStyledHandle ? getComputedStyle(editorStyledHandle) : null
+				check('updateBackgroundEdit：解锁后八向加旋转点为九个编辑点，颜色 / 虚线 / 手柄尺寸即时生效',
+					editorUnlockedState?.aspectLocked === false && editorUnlockedState.rotationEnabled === true && editorUnlockedState.handleCount === 9 &&
+					visibleEditorHandles().length === 8 && visibleRotateHandles().length === 1 &&
+					editorLayer.style.getPropertyValue('--gis-view-bg-editor-color').trim().toLowerCase() === '#c2410c' &&
+					editorLayer.style.getPropertyValue('--gis-view-bg-editor-dash').trim() === 'none' &&
+					editorStyledHandleStyle?.width === '22px' && editorStyledHandleStyle?.borderRadius === '2px',
+					JSON.stringify({ state: editorUnlockedState, handles: visibleEditorHandles().length, rotate: visibleRotateHandles().length, width: editorStyledHandleStyle?.width, radius: editorStyledHandleStyle?.borderRadius }))
+				const apiRotateHandle = visibleRotateHandles()[0]
+				const apiRotateRect = apiRotateHandle?.getBoundingClientRect()
+				const apiRotateHit = apiRotateRect
+					? document.elementFromPoint(apiRotateRect.left + apiRotateRect.width / 2, apiRotateRect.top + apiRotateRect.height / 2)
+					: null
+				check('内置背景编辑：旋转点能被真实指针命中，pointer-events 没有被编辑层挡住',
+					Boolean(apiRotateHandle && apiRotateHit && (apiRotateHit === apiRotateHandle || apiRotateHandle.contains(apiRotateHit)) && getComputedStyle(apiRotateHandle).pointerEvents === 'auto'),
+					JSON.stringify({ hit: apiRotateHit?.className ?? null, pointerEvents: apiRotateHandle ? getComputedStyle(apiRotateHandle).pointerEvents : null }))
+				if (apiRotateHandle && apiRotateRect && apiRotateHit) {
+					const centerClient = view.worldToClient(editorUnlockedState.center[0], editorUnlockedState.center[1])
+					const pointer = { bubbles: true, cancelable: true, composed: true, pointerId: 93, pointerType: 'mouse', isPrimary: true, button: 0, buttons: 1 }
+					const startX = apiRotateRect.left + apiRotateRect.width / 2
+					const startY = apiRotateRect.top + apiRotateRect.height / 2
+					apiRotateHit.dispatchEvent(new PointerEvent('pointerdown', { ...pointer, clientX: startX, clientY: startY }))
+					window.dispatchEvent(new PointerEvent('pointermove', { ...pointer, clientX: centerClient[0] + 140, clientY: centerClient[1] }))
+					window.dispatchEvent(new PointerEvent('pointerup', { ...pointer, button: 0, buttons: 0, clientX: centerClient[0] + 140, clientY: centerClient[1] }))
+				}
+				await hoverFrame()
+				const apiRotatedState = view.getBackgroundEdit()
+				const apiRotatedStyle = view.getOptions().background?.geoJsonStyle
+				const apiRotatedGeo = view.getResolvedBackground()?.geoJson
+				check('内置背景编辑：拖真实旋转点后 state / geoJsonStyle.rotation / 解析角度同步写回',
+					Math.abs(apiRotatedState.rotation - 90) < 1 && Math.abs(apiRotatedStyle.rotation - 90) < 1 &&
+					Math.abs(apiRotatedGeo.rotation - 90) < 1 && editorEndCount === 1 && editorChangeCount > 1,
+					JSON.stringify({ state: apiRotatedState.rotation, style: apiRotatedStyle?.rotation, resolved: apiRotatedGeo?.rotation, changes: editorChangeCount, ends: editorEndCount }))
+				const apiWidthBefore = apiRotatedState.width
+				view.updateBackgroundEdit({ width: apiWidthBefore + 2, angle: 15 })
+				await hoverFrame()
+				const apiPatchedState = view.getBackgroundEdit()
+				check('updateBackgroundEdit：宽高 / 角度可程序化写回，背景仍保留同一份 GeoJSON',
+					Math.abs(apiPatchedState.width - (apiWidthBefore + 2)) < 1e-6 && Math.abs(apiPatchedState.rotation - 15) < 1e-6 &&
+					view.getOptions().background?.geoJson?.type === 'FeatureCollection' && view.getOptions().background?.geoJsonStyle?.rotation === 15,
+					JSON.stringify({ width: apiPatchedState.width, rotation: apiPatchedState.rotation }))
+				const endEditorReturn = view.endBackgroundEdit()
+				await hoverFrame()
+				check('endBackgroundEdit：移除编辑层、读数回到 null 并恢复进入前的 backgroundEditing',
+					endEditorReturn === view && view.getBackgroundEdit() === null && view.getOptions().backgroundEditing === false &&
+					view.el.querySelector('[data-gis-background-editor]') === null && view.getData().points.length === 2 && view.getData().lines.length === 4,
+					JSON.stringify({ state: view.getBackgroundEdit(), editing: view.getOptions().backgroundEditing, layer: Boolean(view.el.querySelector('[data-gis-background-editor]')) }))
+				view.updateBackground(backgroundBeforeEditorApi)
+				view.setCamera(cameraBeforeEditorApi)
+				await hoverFrame()
+
 				// 装饰跟着线路走：锚点长在路径上，几何一变就得跟到新位置，不能停在旧的
 				const pointBox = (target, x, y, half = 15) => {
 					const screen = target.project(x, y)
@@ -3291,6 +3589,7 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						cmSend(casView, 'pointerup', screen, { buttons: 0, button: 0, ...extra })
 						await settle(60)
 					}
+					const casWait = ms => new Promise(resolve => setTimeout(resolve, ms))
 					await casClick(casView.project(0, 0))
 					const casPointInfo = casView.getCascadeHighlight()
 					check('级联高亮：点节点亮自身与直连线路 / 另一端节点（默认 both）',
@@ -3423,6 +3722,39 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					casView.selectInBox({ x: casBoxD[0] - 30, y: casBoxD[1] - 30, width: 60, height: 60 }, { selectionKinds: ['point'] })
 					check('triggerOnBoxSelect: false（缺省）：框选只改选中集并收掉旧级联', casView.getCascadeHighlight() === null, JSON.stringify(casView.getCascadeHighlight()))
 
+					// 取消选中时级联一起收掉：toggleSelect 的取消只发一条 null，接口取消也走同一口径
+					casView.updateOptions({ toggleSelect: true, cascadeHighlight: { scope: 'both', triggerOnClick: true, triggerOnMultiSelect: true } })
+					casView.selectFeatures(null)
+					await settle(120)
+					await casClick(casView.project(0, 0))
+					await casWait(360)
+					casEvents.length = 0
+					casBusEvents.length = 0
+					await casClick(casView.project(0, 0))
+					check('toggleSelect 取消选中：级联同步收掉，且这一击只发一条 null',
+						casView.getSelectionData().count === 0 && casView.getCascadeHighlight() === null && casEvents.length === 1 && casEvents[0] === null,
+						JSON.stringify({ selected: casView.getSelectionData().count, cascade: casView.getCascadeHighlight(), events: casEvents }))
+
+					await casWait(360)
+					await casClick(casView.project(0, 0))
+					casEvents.length = 0
+					casBusEvents.length = 0
+					casView.deselect('cas-a')
+					await settle(60)
+					check('deselect 取消级联来源：级联同步收掉并只发一条 null',
+						casView.getSelectionData().count === 0 && casView.getCascadeHighlight() === null && casEvents.length === 1 && casEvents[0] === null,
+						JSON.stringify({ selected: casView.getSelectionData().count, cascade: casView.getCascadeHighlight(), events: casEvents }))
+
+					await casWait(360)
+					await casClick(casView.project(0, 0))
+					casEvents.length = 0
+					casBusEvents.length = 0
+					casView.selectFeatures('cas-a', { mode: 'remove' })
+					await settle(60)
+					check('selectFeatures remove 取消级联来源：级联同步收掉并只发一条 null',
+						casView.getSelectionData().count === 0 && casView.getCascadeHighlight() === null && casEvents.length === 1 && casEvents[0] === null,
+						JSON.stringify({ selected: casView.getSelectionData().count, cascade: casView.getCascadeHighlight(), events: casEvents }))
+
 					casEvents.length = 0
 					casView.updateOptions({ cascadeHighlight: false })
 					await settle(60)
@@ -4383,8 +4715,10 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					const pluginLog = []
 					const pluginWarnings = []
 					const pluginErrors = []
-					let optionPluginInstance = null
+					let optionPluginInstance = null
 					let optionPluginContext = null
+					let optionSignal = null
+					let optionCleanupCount = 0
 					const pluginView = createGisView(pluginHost, {
 						points: [{ id: 'pg-1', x: 0, y: 0 }],
 						lines: [],
@@ -4395,10 +4729,13 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						plugins: [(v, context) => {
 							optionPluginInstance = v
 							optionPluginContext = context
+							optionSignal = context.signal
+							context.onCleanup(() => { optionCleanupCount += 1 })
 							return { destroy: () => pluginLog.push('options') }
 						}]
 					})
 					check('options.plugins 拿到实例本身与带 apiVersion 的只读上下文', optionPluginInstance === pluginView && optionPluginContext?.apiVersion === 1 && optionPluginContext.view === pluginView && Object.isFrozen(optionPluginContext), JSON.stringify(optionPluginContext ? { apiVersion: optionPluginContext.apiVersion, sameView: optionPluginContext.view === pluginView } : null))
+					check('插件上下文带独立 signal，创建期间未中止', optionSignal instanceof AbortSignal && optionSignal.aborted === false && optionSignal !== null, String(optionSignal?.aborted))
 					let usePluginInstance = null
 					let usePluginContext = null
 					let useDestroyCount = 0
@@ -4408,6 +4745,32 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 						return { destroy: () => { useDestroyCount += 1 } }
 					})
 					check('use() 立即执行，实例与带版本的上下文都和 options.plugins 一致', usePluginInstance === pluginView && usePluginContext?.apiVersion === 1 && usePluginContext.view === pluginView && Object.isFrozen(usePluginContext))
+					check('每个插件拿到自己的 signal（不共用同一个控制器）', usePluginContext?.signal instanceof AbortSignal && usePluginContext.signal.aborted === false && usePluginContext.signal !== optionSignal)
+					// 插件作用域的自动清理：命令 / 事件 / onCleanup 都由同一个卸载函数收回；
+					// onCleanup 提前执行过的项不会在卸载时再跑，多个清理项按登记的倒序执行
+					const lifecycleLog = []
+					let lifecycleSignal = null
+					let lifecycleEvents = 0
+					const disposeLifecycle = pluginView.use((v, context) => {
+						lifecycleSignal = context.signal
+						const early = context.onCleanup(() => lifecycleLog.push('early'))
+						early()
+						early()
+						context.onCleanup(() => lifecycleLog.push('first'))
+						context.onCleanup(() => lifecycleLog.push('second'))
+						context.on('dataChange', () => { lifecycleEvents += 1 })
+						context.registerCommand('pluginLifecycle', payload => `lifecycle:${payload}`)
+						return { destroy: () => lifecycleLog.push('destroy') }
+					})
+					const lifecycleCommitted = pluginView.executeCommand('pluginLifecycle', 'ok')
+					pluginView.updatePoint('pg-1', { name: '插件事件一' })
+					check('插件 context.on / registerCommand 已接通：事件与命令都能用', lifecycleCommitted.ok === true && lifecycleCommitted.value === 'lifecycle:ok' && lifecycleEvents === 1, JSON.stringify({ command: lifecycleCommitted, events: lifecycleEvents }))
+					disposeLifecycle()
+					disposeLifecycle()
+					const lifecycleCommandAfterDispose = pluginView.listCommands().includes('pluginLifecycle')
+					pluginView.updatePoint('pg-1', { name: '插件事件二' })
+					check('插件卸载：signal 中止、事件自动退订、命令自动注销', lifecycleSignal?.aborted === true && lifecycleCommandAfterDispose === false && lifecycleEvents === 1, JSON.stringify({ aborted: lifecycleSignal?.aborted, command: lifecycleCommandAfterDispose, events: lifecycleEvents }))
+					check('插件卸载：destroy 先跑，onCleanup 按登记倒序跑，提前执行的项不重复', lifecycleLog.join(',') === 'early,destroy,second,first', lifecycleLog.join(','))
 					disposeUse()
 					disposeUse()
 					check('use() 返回的卸载函数跑插件的 destroy（重复调用只跑一次）', useDestroyCount === 1, String(useDestroyCount))
@@ -4417,8 +4780,15 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					const beforeWarn = pluginWarnings.length
 					pluginView.use(null)
 					check('use() 收到非函数只提醒、不抛错', pluginWarnings.length === beforeWarn + 1 && /插件函数/.test(pluginWarnings.at(-1)), pluginWarnings.at(-1))
-					pluginView.use(() => { throw new Error('插件里抛的错') })
+					let failedPluginSignal = null
+					let failedPluginCleanups = 0
+					pluginView.use((v, context) => {
+						failedPluginSignal = context.signal
+						context.onCleanup(() => { failedPluginCleanups += 1 })
+						throw new Error('插件里抛的错')
+					})
 					check('插件初始化抛错走 onError、不打断其它插件', pluginErrors.some(text => text.includes('插件初始化失败')), pluginErrors.at(-1))
+					check('插件初始化抛错也会中止 signal 并清理已登记资源', failedPluginSignal?.aborted === true && failedPluginCleanups === 1, JSON.stringify({ aborted: failedPluginSignal?.aborted, cleanups: failedPluginCleanups }))
 					let destroyOrder = []
 					const orderHost = document.createElement('div')
 					document.querySelector('#map').append(orderHost)
@@ -4432,9 +4802,26 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 					check('销毁时按挂载的相反顺序清理（use 挂得晚、先清）', destroyOrder.join(',') === 'use,options', destroyOrder.join(','))
 					orderView.use(() => { throw new Error('destroy 之后不该执行') })
 					check('destroy 之后 use() 不再执行插件（返回的卸载函数也安全）', true)
+					// 插件初始化时可能只保存 context，之后再按用户操作登记资源：
+					// 成功初始化就必须进入视图生命周期，不能因为「挂载那一刻没有清理项」漏掉 destroy 时的回收
+					const lateHost = document.createElement('div')
+					document.querySelector('#map').append(lateHost)
+					const lateView = createGisView(lateHost, {
+						points: [{ id: 'late-1', x: 0, y: 0 }],
+						width: 200,
+						height: 160
+					})
+					let lateContext = null
+					let lateCleanups = 0
+					lateView.use((v, context) => { lateContext = context })
+					lateContext.onCleanup(() => { lateCleanups += 1 })
+					lateView.destroy()
+					check('插件初始化后再登记的资源仍随实例销毁清理（signal 中止 / onCleanup 执行）', lateContext?.signal.aborted === true && lateCleanups === 1, JSON.stringify({ aborted: lateContext?.signal.aborted, cleanups: lateCleanups }))
+					lateHost.remove()
 					pluginView.destroy()
 					check('options 插件随实例销毁一起清理', pluginLog.join(',') === 'options', pluginLog.join(','))
 					check('use 挂的插件在实例销毁时也已清理（卸载函数不会二次回调）', useDestroyCount === 1, String(useDestroyCount))
+					check('实例 destroy 会中止 options 插件的 signal 并执行自动清理', optionSignal?.aborted === true && optionCleanupCount === 1, JSON.stringify({ aborted: optionSignal?.aborted, cleanups: optionCleanupCount }))
 					pluginHost.remove()
 					orderHost.remove()
 				}
@@ -5994,6 +6381,128 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 				check('hideFeatures(channel)：visible 落数据、通道退场，变化账本记 visibility', hideChannel.ok === true && splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')?.visible === false && hiddenChannelRead?.lineIndexes?.length === 0 && hideChanged?.visibilityChanged === true, JSON.stringify({ ok: hideChannel.ok, paths: hiddenChannelRead?.lineIndexes?.length, reasons: hideChanged?.reasons }))
 				const showChannel = splitView.showFeatures('channel', 'sv-ch')
 				check('showFeatures(channel)：隐藏后原样恢复（回线、分组、拐点都还在）', showChannel.ok === true && splitView.getChannel('sv-ch')?.lineIndexes?.length === 2 && splitView.getOptions().channels.find(channel => channel.id === 'sv-ch')?.visible === true && splitView.getChannelGroups('sv-ch').length === 1, JSON.stringify({ lines: splitView.getChannel('sv-ch')?.lineIndexes?.length, groups: splitView.getChannelGroups('sv-ch').length }))
+
+				/* ---------- 本轮：单个 / 批量隐藏通道分组，隐藏组的成员归属仍可查 ---------- */
+				const groupHost = document.createElement('div')
+				groupHost.style.cssText = 'width:560px;height:320px'
+				document.body.append(groupHost)
+				const groupChanges = []
+				const groupView = createGisView(groupHost, {
+					points: [
+						{ id: 'gv-a', x: 0, y: 0 },
+						{ id: 'gv-b', x: 100, y: 0 }
+					],
+					lines: [
+						{ id: 'gv-l1', from: 'gv-a', to: 'gv-b', name: 'G1-A' },
+						{ id: 'gv-l2', from: 'gv-a', to: 'gv-b', name: 'G1-B' },
+						{ id: 'gv-l3', from: 'gv-a', to: 'gv-b', name: 'G2-A' }
+					],
+					channels: [{
+						id: 'gv-ch',
+						from: 'gv-a',
+						to: 'gv-b',
+						width: 40,
+						groups: [
+							{ id: 'gv-g1', lineIds: ['gv-l1', 'gv-l2'] },
+							{ id: 'gv-g2', lineIds: ['gv-l3'] }
+						]
+					}],
+					initialView: { scale: 1, center: [50, 0] },
+					labelOptimize: false,
+					showGrid: false,
+					onDataChange: payload => groupChanges.push(payload)
+				})
+				await settle(100)
+				const hiddenGroup = groupView.hideFeatures('group', { channelId: 'gv-ch', groupId: 'gv-g1' })
+				const hiddenGroupRead = groupView.getChannelGroups('gv-ch').find(group => group.id === 'gv-g1')
+				const hiddenGroupLines = groupView.listLines().map(line => line.item.id)
+				const hiddenGroupMembership = groupView.getLineChannel('gv-l1')
+				check('hideFeatures(group)：只把这一组的 visible 落数据，隐藏组读数仍保留成员与骨架',
+					hiddenGroup.ok === true && hiddenGroup.ids[0] === 'gv-g1' && hiddenGroup.groups[0]?.visible === false && hiddenGroupRead?.visible === false && hiddenGroupRead.lineIds.length === 2 && groupView.getData().lines.length === 3,
+					JSON.stringify({ ids: hiddenGroup.ids, read: hiddenGroupRead && { visible: hiddenGroupRead.visible, lineIds: hiddenGroupRead.lineIds } }))
+				check('hideFeatures(group)：隐藏组成员从画面退场，其他分组不受影响；getLineChannel 仍能查回隐藏组',
+					!hiddenGroupLines.includes('gv-l1') && !hiddenGroupLines.includes('gv-l2') && hiddenGroupLines.includes('gv-l3') && hiddenGroupMembership?.groupId === 'gv-g1' && hiddenGroupMembership?.group?.visible === false,
+					JSON.stringify({ lines: hiddenGroupLines, membership: hiddenGroupMembership?.groupId }))
+				const shownGroup = groupView.showFeatures('group', 'gv-g1')
+				check('showFeatures(group)：唯一分组 id 可直接恢复，成员原样回来',
+					shownGroup.ok === true && shownGroup.groups[0]?.visible === true && groupView.listLines().some(line => line.item.id === 'gv-l1') && groupView.getOptions().channels[0].groups.every(group => group.visible !== false),
+					JSON.stringify({ groups: shownGroup.groups.map(group => ({ id: group.id, visible: group.visible })) }))
+				const changesBeforeGroupBatch = groupChanges.length
+				const batchHiddenGroups = groupView.hideFeatures('group', [
+					{ channelId: 'gv-ch', groupId: 'gv-g1' },
+					{ channelIndex: 0, groupIndex: 1 }
+				])
+				check('hideFeatures(group)：一次批量隐藏多组，结果按分组返回且只有一条 batch 数据变更',
+					batchHiddenGroups.ok === true && batchHiddenGroups.groups.length === 2 && batchHiddenGroups.groups.every(group => group.visible === false) && groupChanges.length === changesBeforeGroupBatch + 1 && groupChanges.at(-1)?.type === 'batch',
+					JSON.stringify({ groups: batchHiddenGroups.groups.map(group => group.visible), events: groupChanges.slice(changesBeforeGroupBatch).map(payload => payload.type) }))
+				const batchShownGroups = groupView.showFeatures('group', [
+					{ channelId: 'gv-ch', groupIndex: 0 },
+					{ channelId: 'gv-ch', groupIndex: 1 }
+				])
+				check('showFeatures(group)：按通道 + groupIndex 批量恢复', batchShownGroups.ok === true && batchShownGroups.groups.every(group => group.visible === true) && groupView.listLines().length === 3, JSON.stringify(batchShownGroups.groups.map(group => group.visible)))
+				groupView.selectFeatures('gv-l1')
+				const selectionGroup = groupView.hideFeatures('group', 'selection')
+				check('hideFeatures(group, selection)：按选中回线推导所属分组，只隐藏这一组',
+					selectionGroup.ok === true && selectionGroup.ids[0] === 'gv-g1' && groupView.getChannelGroups('gv-ch').find(group => group.id === 'gv-g1')?.visible === false && groupView.getChannelGroups('gv-ch').find(group => group.id === 'gv-g2')?.visible === true,
+					JSON.stringify(selectionGroup.groups.map(group => ({ id: group.id, visible: group.visible }))))
+				groupView.showFeatures('group', 'gv-g1')
+				const batchHiddenLines = groupView.hideFeatures('line', ['gv-l1', 'gv-l2'])
+				const batchHiddenPoints = groupView.hideFeatures('point', ['gv-a', 'gv-b'])
+				const batchHiddenChannel = groupView.hideFeatures('channel', ['gv-ch'])
+				check('hideFeatures：节点 / 线路 / 通道 / 分组都支持一批引用，并返回统一的 groups 字段',
+					batchHiddenLines.ok === true && batchHiddenLines.indexes.length === 2 && batchHiddenPoints.ok === true && batchHiddenPoints.indexes.length === 2 && batchHiddenChannel.ok === true && Array.isArray(batchHiddenLines.groups) && Array.isArray(batchHiddenPoints.groups) && Array.isArray(batchHiddenChannel.groups),
+					JSON.stringify({ lines: batchHiddenLines.indexes, points: batchHiddenPoints.indexes, channel: batchHiddenChannel.indexes }))
+				groupView.showFeatures('line', ['gv-l1', 'gv-l2'])
+				groupView.showFeatures('point', ['gv-a', 'gv-b'])
+				groupView.showFeatures('channel', ['gv-ch'])
+				check('showFeatures：批量恢复节点、线路、通道后分组与成员都回来',
+					groupView.listLines().length === 3 && groupView.getChannels().filter(channel => channel.channelId === 'gv-ch').reduce((count, channel) => count + channel.lineIndexes.length, 0) === 3 && groupView.getChannelGroups('gv-ch').length === 2,
+					JSON.stringify({ lines: groupView.listLines().map(line => line.item.id), channelLines: groupView.getChannels().filter(channel => channel.channelId === 'gv-ch').map(channel => channel.lineIndexes), groups: groupView.getChannelGroups('gv-ch').map(group => group.id) }))
+
+				/* ---------- 本轮：隐藏回线后的车道排布 preserve / center ---------- */
+				const layoutHost = document.createElement('div')
+				layoutHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(layoutHost)
+				const layoutView = createGisView(layoutHost, {
+					points: [
+						{ id: 'lv-a', x: 0, y: 0 },
+						{ id: 'lv-b', x: 120, y: 0 }
+					],
+					lines: [
+						{ id: 'lv-l1', from: 'lv-a', to: 'lv-b', width: 5 },
+						{ id: 'lv-l2', from: 'lv-a', to: 'lv-b', width: 5 }
+					],
+					channels: [{ id: 'lv-ch', from: 'lv-a', to: 'lv-b', lineIds: ['lv-l1', 'lv-l2'], width: 44 }],
+					channelHiddenLineLayout: 'preserve',
+					initialView: { scale: 1, center: [60, 0] },
+					labelOptimize: false,
+					showGrid: false
+				})
+				await settle(100)
+				const layoutPath = id => layoutView.listLines().find(line => line.item.id === id)?.path ?? null
+				const preserveBefore = layoutPath('lv-l2')
+				layoutView.hideFeatures('line', 'lv-l1')
+				const preserveHidden = layoutPath('lv-l2')
+				check('channelHiddenLineLayout: preserve（缺省）隐藏一条回线时，另一条保持原车道',
+					Boolean(preserveBefore && preserveHidden) && preserveHidden[0][1] === preserveBefore[0][1] && Math.abs(preserveHidden[0][1]) > 0.5,
+					JSON.stringify({ before: preserveBefore?.[0], hidden: preserveHidden?.[0] }))
+				layoutView.updateOptions({ channelHiddenLineLayout: 'center' })
+				const centeredHidden = layoutPath('lv-l2')
+				check('channelHiddenLineLayout: center 隐藏一条回线后，剩余回线回到通道中心',
+					Boolean(centeredHidden) && Math.abs(centeredHidden[0][1]) < 1e-6,
+					JSON.stringify(centeredHidden?.[0]))
+				layoutView.showFeatures('line', 'lv-l1')
+				layoutView.hideFeatures('line', 'lv-l2')
+				const centeredFromRight = layoutPath('lv-l1')
+				check('channelHiddenLineLayout: center 对另一条回线同样居中', Boolean(centeredFromRight) && Math.abs(centeredFromRight[0][1]) < 1e-6, JSON.stringify({ path: centeredFromRight?.[0], hidden: layoutView.getOptions().lines.find(line => line.id === 'lv-l2')?.visible, visibleLines: layoutView.listLines().map(line => line.item.id) }))
+				layoutView.showFeatures('line', 'lv-l2')
+				layoutView.updateOptions({ channelHiddenLineLayout: 'preserve' })
+				const preserveRestored = layoutPath('lv-l1')
+				check('channelHiddenLineLayout: preserve 恢复后回线仍有独立车道', Boolean(preserveRestored) && Math.abs(preserveRestored[0][1]) > 0.5, JSON.stringify(preserveRestored?.[0]))
+				groupView.destroy()
+				groupHost.remove()
+				layoutView.destroy()
+				layoutHost.remove()
 				const generatedId = splitView.getData().points.find(point => point.name === 'A-右')?.id
 				const hidePoint = splitView.hideFeatures('point', generatedId)
 				const hideLine = splitView.hideFeatures('line', 'sv-ac')
@@ -6137,6 +6646,923 @@ check('beginAddChannel({ lineData })：草稿按第二段对齐条数（circuits
 				check('destroy 后清除 idle 定时器，不再触发回调', idleCalls.length === idleBeforeDestroyWait, JSON.stringify({ before: idleBeforeDestroyWait, after: idleCalls.length }))
 				idleHost.remove()
 
+				// 样式规则优先级：普通规则 > pointStyle / lineStyle，要素字段默认更高，override: true 才压过要素；
+				// 状态样式始终最高。直接调解析函数验证字段级回落，再用实例方法验证单条改样式与动态换规则。
+				const sameRgba = (actual, expected) => {
+					const target = parseColor(expected)
+					return Array.isArray(actual) && actual.length === 4 && actual.every((part, index) => Math.abs(part - target[index]) < 1e-4)
+				}
+				const ruleSymbolStore = {
+					resolve: (input, color, size, strokeColor, strokeWidth) => ({ input, color, size, strokeColor, strokeWidth, width: size, height: size })
+				}
+				const rulePointDefaults = { color: '#111111', size: 10, strokeColor: '#eeeeee', strokeWidth: 1, opacity: 1, zIndex: 0 }
+				const ruleLineDefaults = { color: '#111111', width: 1, opacity: 1 }
+				const pointWhen = { field: 'id', op: 'eq', value: 'priority-edge' }
+				const normalPointRules = compilePointRules([
+					{ when: pointWhen, style: { color: '#3366ff', size: 24, strokeColor: '#2244cc', opacity: 0.45, zIndex: 4, symbol: undefined } },
+					{ when: pointWhen, style: { color: '#00aa88', size: 26 } }
+				])
+				const pointRuleOptions = { rules: normalPointRules, ruleScratch: {}, ruleOverrideScratch: {} }
+				const pointFromStyle = resolvePoint({ id: 'priority-edge', x: 0, y: 0 }, 0, { color: '#00ff00', size: 12, opacity: 0.9, zIndex: 1 }, rulePointDefaults, ruleSymbolStore, undefined, pointRuleOptions)
+				check('普通点规则高于 pointStyle：没写的字段取规则，后命中的同层规则覆盖前面',
+					sameRgba(pointFromStyle.color, '#00aa88') && pointFromStyle.styleSize === 26 && pointFromStyle.opacity === 0.45 && sameRgba(pointFromStyle.strokeColor, '#2244cc') && pointFromStyle.zIndex === 4,
+					JSON.stringify({ color: pointFromStyle.color, size: pointFromStyle.styleSize, opacity: pointFromStyle.opacity, strokeColor: pointFromStyle.strokeColor, zIndex: pointFromStyle.zIndex }))
+				const ownPoint = { id: 'priority-edge', x: 0, y: 0, color: '#ff0000', size: 18, symbol: 'square' }
+				const pointOwnStyle = resolvePoint(ownPoint, 0, { color: '#00ff00', size: 12, opacity: 0.9, zIndex: 1 }, rulePointDefaults, ruleSymbolStore, undefined, pointRuleOptions)
+				check('普通点规则低于要素自身字段：逐点的 color / size / symbol 不被批量规则改掉，缺的字段仍由规则补齐',
+					sameRgba(pointOwnStyle.color, '#ff0000') && pointOwnStyle.styleSize === 18 && pointOwnStyle.styleSymbol === 'square' && pointOwnStyle.opacity === 0.45 && pointOwnStyle.zIndex === 4,
+					JSON.stringify({ color: pointOwnStyle.color, size: pointOwnStyle.styleSize, symbol: pointOwnStyle.styleSymbol, opacity: pointOwnStyle.opacity, zIndex: pointOwnStyle.zIndex }))
+				check('规则编译期只记真正写了的字段', normalPointRules[0].fields.length === 5 && ['color', 'size', 'strokeColor', 'opacity', 'zIndex'].every(key => normalPointRules[0].fields.includes(key)) && !normalPointRules[0].fields.includes('symbol'), JSON.stringify(normalPointRules[0].fields))
+
+				const overridePointRules = compilePointRules([
+					{ when: pointWhen, style: { strokeWidth: 3, opacity: 0.35 } },
+					{ when: pointWhen, override: true, style: { color: '#0033ff', size: 30 } },
+					{ when: pointWhen, override: true, style: { color: '#9900ff', size: 32 } }
+				])
+				const overridePointOptions = { rules: overridePointRules, ruleScratch: {}, ruleOverrideScratch: {} }
+				const mixedPoint = { id: 'priority-edge', x: 0, y: 0, color: '#ff0000', size: 18, symbol: 'circle' }
+				const overriddenPoint = resolvePoint(mixedPoint, 0, { color: '#00ff00', size: 12, zIndex: 1 }, rulePointDefaults, ruleSymbolStore, undefined, overridePointOptions)
+				check('override 点规则压过要素字段，未写的字段继续取要素 / 普通规则；override 层后命中的赢',
+					sameRgba(overriddenPoint.color, '#9900ff') && overriddenPoint.styleSize === 32 && overriddenPoint.styleSymbol === 'circle' && overriddenPoint.symbol.strokeWidth === 3 && overriddenPoint.opacity === 0.35,
+					JSON.stringify({ color: overriddenPoint.color, size: overriddenPoint.styleSize, symbol: overriddenPoint.styleSymbol, strokeWidth: overriddenPoint.symbol.strokeWidth, opacity: overriddenPoint.opacity }))
+				const statedPoint = resolvePoint(mixedPoint, 0, { color: '#00ff00', size: 12, zIndex: 1 }, rulePointDefaults, ruleSymbolStore, { color: '#222222', size: 12, symbol: 'triangle', opacity: 0.8 }, overridePointOptions)
+				check('状态样式仍高于 override 点规则', sameRgba(statedPoint.color, '#222222') && statedPoint.size === 12 && statedPoint.symbol.input === 'triangle' && statedPoint.opacity === 0.8, JSON.stringify({ color: statedPoint.color, size: statedPoint.size, symbol: statedPoint.symbol.input, opacity: statedPoint.opacity }))
+
+				const lineWhen = { field: 'id', op: 'eq', value: 'priority-line' }
+				const lineStyleBase = { color: '#00ff00', width: 2, opacity: 0.9, zIndex: 1 }
+				const normalLineRules = compileLineRules([
+					{ when: lineWhen, style: { color: '#3366ff', width: 4.5, opacity: 0.35, lineType: 'dashed' } },
+					{ when: lineWhen, style: { color: '#00aa88', width: 5 } }
+				])
+				const lineRuleOptions = { rules: normalLineRules, ruleScratch: {}, ruleOverrideScratch: {} }
+				const lineFromStyle = resolveLineStyle({ id: 'priority-line' }, 0, lineStyleBase, ruleLineDefaults, null, undefined, lineRuleOptions)
+				const ownLine = { id: 'priority-line', color: '#ff0000', width: 8, opacity: 0.8, lineType: 'dotted', zIndex: 2 }
+				const ownLineStyle = resolveLineStyle(ownLine, 0, lineStyleBase, ruleLineDefaults, null, undefined, lineRuleOptions)
+				check('普通线规则高于 lineStyle 且低于线路自身字段', sameRgba(lineFromStyle.color, '#00aa88') && lineFromStyle.baseWidth === 5 && lineFromStyle.opacity === 0.35 && Boolean(lineFromStyle.dash) && sameRgba(ownLineStyle.color, '#ff0000') && ownLineStyle.baseWidth === 8 && ownLineStyle.zIndex === 2 && Boolean(ownLineStyle.dash), JSON.stringify({ fromStyle: { color: lineFromStyle.color, width: lineFromStyle.baseWidth, opacity: lineFromStyle.opacity, dashed: Boolean(lineFromStyle.dash) }, own: { color: ownLineStyle.color, width: ownLineStyle.baseWidth, zIndex: ownLineStyle.zIndex, dashed: Boolean(ownLineStyle.dash) } }))
+
+				const overrideLineRules = compileLineRules([
+					{ when: lineWhen, style: { opacity: 0.4 } },
+					{ when: lineWhen, override: true, style: { color: '#0033ff', width: 6 } },
+					{ when: lineWhen, override: true, style: { color: '#9900ff', width: 7, zIndex: 6 } }
+				])
+				const overrideLineOptions = { rules: overrideLineRules, ruleScratch: {}, ruleOverrideScratch: {} }
+				const overriddenLine = resolveLineStyle({ id: 'priority-line', color: '#ff0000', width: 8, lineType: 'dotted' }, 0, lineStyleBase, ruleLineDefaults, null, undefined, overrideLineOptions)
+				const statedLine = resolveLineStyle({ id: 'priority-line', color: '#ff0000', width: 8, lineType: 'dotted' }, 0, lineStyleBase, ruleLineDefaults, null, { color: '#222222', width: 3, opacity: 0.8 }, overrideLineOptions)
+				check('override 线规则压过要素字段，未写字段回落普通规则；状态样式仍最高', sameRgba(overriddenLine.color, '#9900ff') && overriddenLine.baseWidth === 7 && overriddenLine.opacity === 0.4 && overriddenLine.zIndex === 6 && Boolean(overriddenLine.dash) && sameRgba(statedLine.color, '#222222') && statedLine.halfWidth === 1.5 && statedLine.opacity === 0.8, JSON.stringify({ override: { color: overriddenLine.color, width: overriddenLine.baseWidth, opacity: overriddenLine.opacity, zIndex: overriddenLine.zIndex, dashed: Boolean(overriddenLine.dash) }, state: { color: statedLine.color, baseWidth: statedLine.baseWidth, halfWidth: statedLine.halfWidth, opacity: statedLine.opacity } }))
+
+				const rulePriorityHost = document.createElement('div')
+				rulePriorityHost.style.cssText = 'width:480px;height:280px'
+				document.body.append(rulePriorityHost)
+				const rulePriorityView = createGisView(rulePriorityHost, {
+					points: [
+						{ id: 'rp-normal', x: 0, y: 0 },
+						{ id: 'rp-own', x: 60, y: 0, color: '#ff0000', size: 18, symbol: 'circle' }
+					],
+					lines: [{ id: 'rp-line', path: [[0, 40], [60, 40]], color: '#10b981', width: 6, lineType: 'dotted' }],
+					pointStyle: { color: '#00ff00', size: 12 },
+					lineStyle: { color: '#00ff00', width: 1, opacity: 0.9 },
+					pointRules: [
+						{ when: { id: 'rp-normal' }, style: { color: '#00aa88', size: 22 } },
+						{ when: { id: 'rp-own' }, style: { color: '#00aa88', size: 22 } }
+					],
+					lineRules: [{ when: { id: 'rp-line' }, style: { color: '#00aa88', width: 3, opacity: 0.5 } }],
+					showGrid: false
+				})
+				const rulePointIndex = id => rulePriorityView.getData().points.findIndex(point => point.id === id)
+				const ruleLineIndex = id => rulePriorityView.getData().lines.findIndex(line => line.id === id)
+				check('主视图快照：普通规则补 pointStyle，但逐点字段仍优先', rulePriorityView.getPointStyle(rulePointIndex('rp-normal'))?.size === 22 && rulePriorityView.getPointStyle(rulePointIndex('rp-own'))?.size === 18 && rulePriorityView.getLineStyle(ruleLineIndex('rp-line'))?.width === 6, JSON.stringify({ normal: rulePriorityView.getPointStyle(rulePointIndex('rp-normal')), own: rulePriorityView.getPointStyle(rulePointIndex('rp-own')), line: rulePriorityView.getLineStyle(ruleLineIndex('rp-line')) }))
+				rulePriorityView.updatePoint('rp-own', { color: '#ffcc00', size: 27, symbol: { type: 'square', radius: 2 } })
+				const updatedPointStyle = rulePriorityView.getPointStyle(rulePointIndex('rp-own'))
+				check('updatePoint：单个节点可改颜色、尺寸与图标，普通规则不把它盖回去', rulePriorityView.getData().points[rulePointIndex('rp-own')]?.color === '#ffcc00' && updatedPointStyle?.size === 27 && updatedPointStyle?.symbol?.type === 'square' && updatedPointStyle?.symbol?.radius === 2, JSON.stringify({ item: rulePriorityView.getData().points[rulePointIndex('rp-own')], style: updatedPointStyle }))
+				rulePriorityView.updateOptions({ pointRules: [{ when: { id: 'rp-own' }, override: true, style: { color: '#0033ff', size: 30 } }] })
+				const overrideRulePointStyle = rulePriorityView.getPointStyle(rulePointIndex('rp-own'))
+				rulePriorityView.updateOptions({ pointRules: [{ when: { id: 'rp-own' }, style: { color: '#00aa88', size: 22 } }] })
+				check('updateOptions 切换 override：规则可压过单点样式，改回普通规则后逐点值恢复', overrideRulePointStyle?.size === 30 && rulePriorityView.getPointStyle(rulePointIndex('rp-own'))?.size === 27, JSON.stringify({ override: overrideRulePointStyle, normal: rulePriorityView.getPointStyle(rulePointIndex('rp-own')) }))
+				rulePriorityView.updateLine('rp-line', { color: '#ef4444', width: 7, opacity: 0.25, lineType: 'dashed', zIndex: 3 })
+				const updatedLineStyle = rulePriorityView.getLineStyle(ruleLineIndex('rp-line'))
+				rulePriorityView.updateOptions({ lineRules: [{ when: { id: 'rp-line' }, override: true, style: { color: '#0033ff', width: 2 } }] })
+				const overrideRuleLineStyle = rulePriorityView.getLineStyle(ruleLineIndex('rp-line'))
+				check('updateLine / updateOptions：单条线路改色宽透明度与线型，override 规则再压过它', sameRgba(updatedLineStyle?.color, '#ef4444') && updatedLineStyle?.width === 7 && updatedLineStyle?.opacity === 0.25 && updatedLineStyle?.zIndex === 3 && sameRgba(overrideRuleLineStyle?.color, '#0033ff') && overrideRuleLineStyle?.width === 2 && overrideRuleLineStyle?.opacity === 0.25, JSON.stringify({ updated: updatedLineStyle, override: overrideRuleLineStyle }))
+				rulePriorityView.destroy()
+				rulePriorityHost.remove()
+
+				// 交互样式优先级：单选 / 多选 / 框选 / 级联是独立的状态层，override 规则也不能改它们写的颜色
+				const interactionPriorityHost = document.createElement('div')
+				interactionPriorityHost.style.cssText = 'width:520px;height:320px'
+				document.body.append(interactionPriorityHost)
+				const interactionPriorityView = createGisView(interactionPriorityHost, {
+					points: [
+						{ id: 'ip-a', x: 0, y: 0, size: 16 },
+						{ id: 'ip-b', x: 120, y: 0, size: 16 },
+						{ id: 'ip-c', x: 240, y: 0, size: 16 }
+					],
+					lines: [
+						{ id: 'ip-ab', from: 'ip-a', to: 'ip-b' },
+						{ id: 'ip-bc', from: 'ip-b', to: 'ip-c' }
+					],
+					pointStyle: { color: '#64748b', size: 14 },
+					lineStyle: { color: '#64748b', width: 2, opacity: 1 },
+					pointRules: [{ when: { field: 'id', op: 'exists' }, override: true, style: { color: '#ef4444', size: 26, strokeColor: '#7f1d1d', strokeWidth: 4 } }],
+					lineRules: [{ when: { field: 'id', op: 'exists' }, override: true, style: { color: '#ef4444', width: 9, opacity: 1 } }],
+					pointSelectStyle: { color: '#22c55e', strokeColor: '#14532d', strokeWidth: 2, sizeScale: 1 },
+					pointMultiSelectStyle: { color: '#2563eb', strokeColor: '#1e3a8a', strokeWidth: 2, sizeScale: 1 },
+					pointBoxSelectStyle: { color: '#facc15', strokeColor: '#713f12', strokeWidth: 2, sizeScale: 1 },
+					lineSelectStyle: { color: '#22c55e', width: 6, opacity: 1 },
+					lineMultiSelectStyle: { color: '#2563eb', width: 7, opacity: 1 },
+					cascadeHighlight: {
+						scope: 'both',
+						pointStyle: { color: '#db2777', strokeColor: '#831843', strokeWidth: 2, sizeScale: 1 },
+						lineStyle: { color: '#06b6d4', width: 5, opacity: 1 }
+					},
+					features: { select: true },
+					fitPadding: 60,
+					showGrid: false
+				})
+				await settle(140)
+				const interactionPointPaint = (snapshot, id) => {
+					const item = interactionPriorityView.getData().points.find(point => point.id === id)
+					const [x, y] = interactionPriorityView.project(item.x, item.y)
+					return [...snapshot.points, ...snapshot.raised].find(point => Math.hypot(point.x - x, point.y - y) < 3)
+				}
+				const interactionLineColor = (snapshot, color, minWidth = 0) => [...snapshot.lines, ...snapshot.raisedLines].some(line => line.color === color && line.width >= minWidth)
+				const interactionBoxA = interactionPriorityView.project(0, 0)
+				const interactionBoxB = interactionPriorityView.project(120, 0)
+				const interactionBox = {
+					x: Math.min(interactionBoxA[0], interactionBoxB[0]) - 30,
+					y: Math.min(interactionBoxA[1], interactionBoxB[1]) - 30,
+					width: Math.abs(interactionBoxA[0] - interactionBoxB[0]) + 60,
+					height: Math.abs(interactionBoxA[1] - interactionBoxB[1]) + 60
+				}
+				const interactionRuleSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('交互优先级前置：override 规则确实把未交互的节点与线路改成红色',
+					interactionPointPaint(interactionRuleSnapshot, 'ip-a')?.fill === 'rgba(239,68,68,1)' && interactionLineColor(interactionRuleSnapshot, 'rgba(239,68,68,1)', 9),
+					JSON.stringify({ point: interactionPointPaint(interactionRuleSnapshot, 'ip-a'), lines: interactionRuleSnapshot.lines.map(line => [line.color, line.width]) }))
+
+				interactionPriorityView.selectFeatures('ip-a')
+				await settle(60)
+				const interactionSingleSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				interactionPriorityView.updateOptions({
+					pointRules: [{ when: { field: 'id', op: 'exists' }, override: true, style: { color: '#dc2626', size: 28, strokeColor: '#7f1d1d', strokeWidth: 4 } }],
+					lineRules: [{ when: { field: 'id', op: 'exists' }, override: true, style: { color: '#dc2626', width: 10, opacity: 1 } }]
+				})
+				await settle(60)
+				const interactionRuleSwapSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('单选颜色高于 override 规则，动态换一套强制规则后仍是选中色',
+					interactionPointPaint(interactionSingleSnapshot, 'ip-a')?.fill === 'rgba(34,197,94,1)' && interactionPointPaint(interactionRuleSwapSnapshot, 'ip-a')?.fill === 'rgba(34,197,94,1)',
+					JSON.stringify({ before: interactionPointPaint(interactionSingleSnapshot, 'ip-a'), after: interactionPointPaint(interactionRuleSwapSnapshot, 'ip-a') }))
+
+				interactionPriorityView.selectFeatures(['ip-a', 'ip-b'])
+				await settle(60)
+				const interactionMultiPointSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('多选节点颜色高于 override 规则', interactionPointPaint(interactionMultiPointSnapshot, 'ip-a')?.fill === 'rgba(37,99,235,1)' && interactionPointPaint(interactionMultiPointSnapshot, 'ip-b')?.fill === 'rgba(37,99,235,1)', JSON.stringify({ a: interactionPointPaint(interactionMultiPointSnapshot, 'ip-a'), b: interactionPointPaint(interactionMultiPointSnapshot, 'ip-b') }))
+
+				interactionPriorityView.selectFeatures(['ip-ab', 'ip-bc'])
+				await settle(60)
+				const interactionMultiLineSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('多选线路颜色高于 override 规则', interactionLineColor(interactionMultiLineSnapshot, 'rgba(37,99,235,1)', 7), JSON.stringify(interactionMultiLineSnapshot.lines.map(line => [line.color, line.width])))
+
+				interactionPriorityView.selectInBox(interactionBox, { selectionKinds: ['point'] })
+				await settle(60)
+				const interactionBoxPointSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('框选节点颜色高于 override 规则', interactionPointPaint(interactionBoxPointSnapshot, 'ip-a')?.fill === 'rgba(250,204,21,1)' && interactionPointPaint(interactionBoxPointSnapshot, 'ip-b')?.fill === 'rgba(250,204,21,1)', JSON.stringify({ a: interactionPointPaint(interactionBoxPointSnapshot, 'ip-a'), b: interactionPointPaint(interactionBoxPointSnapshot, 'ip-b') }))
+
+				interactionPriorityView.selectInBox(interactionBox, { selectionKinds: ['line'] })
+				await settle(60)
+				const interactionBoxLineSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('框选线路沿用 lineSelectStyle，颜色仍高于 override 规则', interactionLineColor(interactionBoxLineSnapshot, 'rgba(34,197,94,1)', 6), JSON.stringify(interactionBoxLineSnapshot.lines.map(line => [line.color, line.width])))
+
+				interactionPriorityView.selectFeatures(null)
+				await settle(30)
+				const interactionSend = (type, screen, extra = {}) => {
+					const box = interactionPriorityView.canvas.getBoundingClientRect()
+					interactionPriorityView.canvas.dispatchEvent(new PointerEvent(type, {
+						bubbles: true,
+						cancelable: true,
+						pointerId: 41,
+						pointerType: 'mouse',
+						button: extra.button ?? 0,
+						buttons: extra.buttons ?? (type === 'pointerup' ? 0 : 1),
+						clientX: box.left + screen[0],
+						clientY: box.top + screen[1],
+						...extra
+					}))
+				}
+				const interactionClickAt = async (screen) => {
+					interactionSend('pointerdown', screen, { buttons: 1 })
+					interactionSend('pointerup', screen, { buttons: 0, button: 0 })
+					await settle(80)
+				}
+				await interactionClickAt(interactionPriorityView.project(0, 0))
+				const interactionCascadeInfo = interactionPriorityView.getCascadeHighlight()
+				const interactionCascadeSnapshot = interactionPriorityView.snapshotScene({ background: false })
+				check('级联颜色高于 override 规则：起始节点仍走选中色，邻接节点 / 线路走级联色',
+					interactionCascadeInfo?.pointIndexes?.length === 2 && interactionPointPaint(interactionCascadeSnapshot, 'ip-a')?.fill === 'rgba(34,197,94,1)' && interactionPointPaint(interactionCascadeSnapshot, 'ip-b')?.fill === 'rgba(219,39,119,1)' && interactionLineColor(interactionCascadeSnapshot, 'rgba(6,182,212,1)', 5),
+					JSON.stringify({ info: interactionCascadeInfo, a: interactionPointPaint(interactionCascadeSnapshot, 'ip-a'), b: interactionPointPaint(interactionCascadeSnapshot, 'ip-b'), lines: interactionCascadeSnapshot.lines.map(line => [line.color, line.width]) }))
+				interactionPriorityView.destroy()
+				interactionPriorityHost.remove()
+
+				/* ---------------- visualMap 图例：连续尺 / 分段色块 / 懒挂载 / 数据值域 ---------------- */
+				const visualMapHost = document.createElement('div')
+				visualMapHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapHost)
+				const visualMapView = createGisView(visualMapHost, {
+					points: [
+						{ id: 'vm-a', x: 0, y: 0, name: '甲', value: 0 },
+						{ id: 'vm-b', x: 60, y: 20, name: '乙', value: 10 },
+						{ id: 'vm-c', x: 120, y: 0, name: '丙', value: 20 }
+					],
+					heatmap: { target: 'point', field: 'value', density: false, glow: false, opacity: 1 },
+					visualMap: { target: 'point', title: '负荷', unit: 'kW', tickCount: 3 },
+					label: { content: '{name}' },
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapElement = visualMapView.getVisualMapElement()
+				const visualMapReadout = visualMapView.getVisualMap()
+				check('visualMap：默认跟随 heatmap 的字段与自动值域', visualMapReadout?.field === 'value' && visualMapReadout.domain[0] === 0 && visualMapReadout.domain[1] === 20 && visualMapReadout.type === 'ruler', JSON.stringify(visualMapReadout))
+				check('visualMap：连续尺有渐变、刻度与单位', Boolean(visualMapElement && visualMapHost.contains(visualMapElement)) && visualMapElement.querySelectorAll('.gis-view__visual-map-tick').length === 3 && visualMapElement.querySelector('.gis-view__visual-map-ruler')?.style.background.includes('gradient') && visualMapReadout.ticks[0].label.includes('kW'), visualMapReadout?.ticks?.map(tick => tick.label).join(' / '))
+				const visualMapLabelLayer = visualMapHost.querySelector('.gis-view__labels')
+				let visualMapLabelMutations = 0
+				const visualMapLabelObserver = new MutationObserver(records => { visualMapLabelMutations += records.length })
+				if (visualMapLabelLayer) {
+					visualMapLabelObserver.observe(visualMapLabelLayer, { subtree: true, childList: true, attributes: true, characterData: true })
+				}
+				let visualMapRootMutations = 0
+				const visualMapRootObserver = new MutationObserver(records => { visualMapRootMutations += records.length })
+				visualMapRootObserver.observe(visualMapElement, { subtree: true, childList: true, attributes: true, characterData: true })
+				const visualMapSameConfig = { target: 'point', title: '负荷', unit: 'kW', tickCount: 3 }
+				visualMapView.updateOptions({ visualMap: visualMapSameConfig })
+				visualMapView.updateOptions({ visualMap: { ...visualMapSameConfig } })
+				await settle(80)
+				visualMapRootObserver.disconnect()
+				visualMapLabelObserver.disconnect()
+				check('visualMap：同签名重复更新零 DOM 写入', visualMapRootMutations === 0, `${visualMapRootMutations} 条 mutation`)
+				check('visualMap：只改图例不重排标签层', visualMapLabelMutations === 0 && Boolean(visualMapLabelLayer), `${visualMapLabelMutations} 条 mutation`)
+				visualMapView.updateData([
+					{ id: 'vm-a', x: 0, y: 0, name: '甲', value: 1000 },
+					{ id: 'vm-b', x: 60, y: 20, name: '乙', value: 1500 },
+					{ id: 'vm-c', x: 120, y: 0, name: '丙', value: 2000 }
+				], [])
+				await settle(80)
+				const visualMapUpdated = visualMapView.getVisualMap()
+				check('visualMap：数据变化后自动值域在图例层内更新', visualMapUpdated?.domain[0] === 1000 && visualMapUpdated.domain[1] === 2000, JSON.stringify(visualMapUpdated?.domain))
+				visualMapView.updateOptions({ heatmap: { target: 'point', field: 'value', density: false, glow: false, colors: ['#111827', '#f8fafc'], stops: [0, 1], opacity: 1 } })
+				await settle(80)
+				const visualMapInheritedGradient = visualMapElement.querySelector('.gis-view__visual-map-ruler')?.style.background
+				visualMapView.updateOptions({ heatmap: { target: 'point', field: 'value', density: false, glow: false, colors: ['#111827', '#f8fafc'], stops: [0.35, 1], opacity: 0.3 } })
+				await settle(80)
+				const visualMapChangedGradient = visualMapElement.querySelector('.gis-view__visual-map-ruler')?.style.background
+				check('visualMap：heatmap 的 stops / opacity 变化也会重画继承色带', Boolean(visualMapInheritedGradient) && visualMapChangedGradient !== visualMapInheritedGradient, `${visualMapInheritedGradient} -> ${visualMapChangedGradient}`)
+				visualMapView.updateOptions({ visualMap: { type: 'piecewise', title: '负荷分档', unit: 'kW', pieces: [{ lt: 1200, label: '低' }, { gte: 1200, color: '#dd4b2e', label: '高' }] } })
+				await settle(80)
+				const piecewiseReadout = visualMapView.getVisualMap()
+				check('visualMap：piecewise 支持 ECharts 的 lt / gte 与自定义色块', piecewiseReadout?.type === 'piecewise' && piecewiseReadout.pieces.length === 2 && piecewiseReadout.pieces[0].label === '低' && piecewiseReadout.pieces[1].color === '#dd4b2e' && visualMapHost.querySelectorAll('.gis-view__visual-map-piece').length === 2, JSON.stringify(piecewiseReadout?.pieces))
+				visualMapView.updateOptions({ visualMap: null })
+				await settle(80)
+				check('visualMap：关掉后不保留任何图例 DOM', visualMapView.getVisualMapElement() === null && visualMapView.getVisualMap() === null && !visualMapHost.querySelector('.gis-view__visual-map'))
+				visualMapView.destroy()
+				visualMapHost.remove()
+
+				const visualMapExternal = document.createElement('div')
+				visualMapExternal.style.cssText = 'width:260px;height:120px'
+				document.body.append(visualMapExternal)
+				const visualMapStandaloneHost = document.createElement('div')
+				visualMapStandaloneHost.style.cssText = 'width:480px;height:260px'
+				document.body.append(visualMapStandaloneHost)
+				const visualMapStandalone = createGisView(visualMapStandaloneHost, {
+					points: [{ id: 'vm-x', x: 0, y: 0, score: 12 }, { id: 'vm-y', x: 30, y: 0, score: 48 }],
+					visualMap: {
+						field: 'score',
+						type: 'continuous',
+						orient: 'horizontal',
+						position: 'top-right',
+						container: visualMapExternal,
+						colors: ['#2f6fd0', '#dd4b2e'],
+						formatter: '{value}{unit}',
+						unit: '分',
+						title: '评分'
+					},
+					showGrid: false
+				})
+				await settle(80)
+				const standaloneReadout = visualMapStandalone.getVisualMap()
+				check('visualMap：没有 heatmap 时也能按字段自动算独立图例', standaloneReadout?.domain[0] === 12 && standaloneReadout.domain[1] === 48 && standaloneReadout.unit === '分', JSON.stringify(standaloneReadout?.domain))
+				check('visualMap：container / continuous / horizontal / formatter 生效', visualMapStandalone.getVisualMapElement()?.parentElement === visualMapExternal && standaloneReadout.type === 'ruler' && standaloneReadout.orient === 'horizontal' && standaloneReadout.ticks[0].label === '12分', JSON.stringify({ parent: visualMapStandalone.getVisualMapElement()?.parentElement?.className, labels: standaloneReadout?.ticks?.map(tick => tick.label) }))
+				visualMapStandalone.updateOptions({ visualMap: { enabled: false } })
+				await settle(80)
+				check('visualMap：enabled: false 等同不配，外部容器也不留节点', visualMapStandalone.getVisualMapElement() === null && visualMapExternal.childElementCount === 0)
+				visualMapStandalone.destroy()
+				visualMapStandaloneHost.remove()
+				visualMapExternal.remove()
+
+				/* 值域两端都已确定时不应再为了补另一端扫数据；用 getter 直接统计字段读取次数 */
+				const visualMapFixedHost = document.createElement('div')
+				visualMapFixedHost.style.cssText = 'width:420px;height:240px'
+				document.body.append(visualMapFixedHost)
+				let visualMapFixedReads = 0
+				const visualMapFixedPoints = [{ id: 'vm-fixed-a', x: 0, y: 0 }, { id: 'vm-fixed-b', x: 40, y: 0 }]
+				for (const point of visualMapFixedPoints) {
+					Object.defineProperty(point, 'metric', {
+						enumerable: true,
+						get: () => {
+							visualMapFixedReads += 1
+							return 25
+						}
+					})
+				}
+				const visualMapFixed = createGisView(visualMapFixedHost, {
+					points: visualMapFixedPoints,
+					visualMap: { field: 'metric', domain: [0, 100] },
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapFixedDomain = visualMapFixed.getVisualMap()?.domain
+				check('visualMap：显式 domain 不读数据字段', visualMapFixedReads === 0 && visualMapFixedDomain?.[0] === 0 && visualMapFixedDomain?.[1] === 100, `${visualMapFixedReads} 次字段读取 · ${JSON.stringify(visualMapFixedDomain)}`)
+				visualMapFixed.updateOptions({ visualMap: { field: 'metric', min: 0, max: 100 } })
+				await settle(80)
+				const visualMapMinMaxDomain = visualMapFixed.getVisualMap()?.domain
+				check('visualMap：min / max 两端都给定时也不扫数据', visualMapFixedReads === 0 && visualMapMinMaxDomain?.[0] === 0 && visualMapMinMaxDomain?.[1] === 100, `${visualMapFixedReads} 次字段读取 · ${JSON.stringify(visualMapMinMaxDomain)}`)
+				visualMapFixed.destroy()
+				visualMapFixedHost.remove()
+
+				const visualMapReplaceHost = document.createElement('div')
+				visualMapReplaceHost.style.cssText = 'width:420px;height:240px'
+				document.body.append(visualMapReplaceHost)
+				const visualMapReplaceConfig = { target: 'point', title: '替换后图例' }
+				const visualMapReplace = createGisView(visualMapReplaceHost, {
+					points: [{ id: 'vm-r', x: 0, y: 0, value: 5, load: 90 }],
+					heatmap: { target: 'point', field: 'load', density: false, glow: false },
+					visualMap: visualMapReplaceConfig,
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapBeforeReplace = visualMapReplace.getVisualMap()
+				visualMapReplace.updateOptions({
+					points: [{ id: 'vm-r', x: 0, y: 0, value: 5, load: 90 }],
+					visualMap: visualMapReplaceConfig,
+					showGrid: false
+				}, true)
+				await settle(80)
+				const visualMapAfterReplace = visualMapReplace.getVisualMap()
+				check('visualMap：整份替换去掉 heatmap 后，图例立即改读独立字段 / 值域', visualMapBeforeReplace?.field === 'load' && visualMapAfterReplace?.field === 'value' && visualMapAfterReplace.domain[0] === 5 && visualMapAfterReplace.domain[1] === 5, JSON.stringify({ before: visualMapBeforeReplace, after: visualMapAfterReplace }))
+				visualMapReplace.destroy()
+				visualMapReplaceHost.remove()
+
+				/* visualMap：分段点选 / 键盘 / 合帧回调 / 受控选择 */
+				const visualMapInteractionHost = document.createElement('div')
+				visualMapInteractionHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapInteractionHost)
+				let visualMapChangeCount = 0
+				const visualMapChanges = []
+				const visualMapInteractionConfig = {
+					target: 'point',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					title: '交互分档',
+					pieces: [{ lt: 5, label: '低' }, { gte: 5, lt: 15, label: '中' }, { gte: 15, label: '高' }],
+					onChange: (payload) => {
+						visualMapChangeCount += 1
+						visualMapChanges.push(payload)
+					}
+				}
+				const visualMapInteraction = createGisView(visualMapInteractionHost, {
+					points: [{ id: 'vmi-a', x: 0, y: 0, value: 1 }, { id: 'vmi-b', x: 40, y: 0, value: 10 }, { id: 'vmi-c', x: 80, y: 0, value: 20 }],
+					visualMap: visualMapInteractionConfig,
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapInteractionElement = visualMapInteraction.getVisualMapElement()
+				const visualMapInteractionRows = [...visualMapInteractionElement.querySelectorAll('.gis-view__visual-map-piece')]
+				const visualMapInitialReadout = visualMapInteraction.getVisualMap()
+				check('visualMap：显式开启交互后分段可点、初始全选', visualMapInteractionElement.classList.contains('gis-view__visual-map--interactive') && getComputedStyle(visualMapInteractionElement).pointerEvents === 'auto' && visualMapInteractionRows.length === 3 && visualMapInteractionRows.every(row => row.getAttribute('role') === 'button' && row.tabIndex === 0 && row.getAttribute('aria-pressed') === 'true') && visualMapInitialReadout.selected.length === 3, JSON.stringify({ pointerEvents: getComputedStyle(visualMapInteractionElement).pointerEvents, selected: visualMapInitialReadout?.selected, roles: visualMapInteractionRows.map(row => row.getAttribute('role')) }))
+				const visualMapRow = index => visualMapInteractionElement.querySelector(`.gis-view__visual-map-piece[data-index="${index}"]`)
+				visualMapRow(0).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapAfterClick = visualMapInteraction.getVisualMap()
+				check('visualMap：点击分段切换选中态并回写读数 / onChange', visualMapAfterClick.selected.join(',') === '1,2' && visualMapRow(0).classList.contains('is-unselected') && visualMapRow(0).getAttribute('aria-pressed') === 'false' && visualMapChangeCount === 1 && visualMapChanges[0].source === 'user' && visualMapChanges[0].reason === 'piece', JSON.stringify({ selected: visualMapAfterClick?.selected, count: visualMapChangeCount, payload: visualMapChanges[0] }))
+				visualMapRow(1).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapAfterKeyboard = visualMapInteraction.getVisualMap()
+				check('visualMap：分段支持 Enter / 空格键盘操作', visualMapAfterKeyboard.selected.join(',') === '2' && visualMapChangeCount === 2, JSON.stringify({ selected: visualMapAfterKeyboard?.selected, count: visualMapChangeCount }))
+				const visualMapBatchStart = visualMapChangeCount
+				visualMapRow(1).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				visualMapRow(2).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				visualMapRow(1).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapAfterBatch = visualMapInteraction.getVisualMap()
+				check('visualMap：同一帧多次点击合并成一次 onChange', visualMapAfterBatch.selected.length === 0 && visualMapChangeCount === visualMapBatchStart + 1, JSON.stringify({ selected: visualMapAfterBatch?.selected, count: visualMapChangeCount - visualMapBatchStart }))
+				visualMapInteraction.updateOptions({ visualMap: { ...visualMapInteractionConfig, selected: [0] } })
+				await settle(60)
+				const visualMapControlled = visualMapInteraction.getVisualMap()
+				check('visualMap：受控 selected 更新会重绘且不回声 onChange', visualMapControlled.selected.join(',') === '0' && visualMapRow(0).getAttribute('aria-pressed') === 'true' && visualMapRow(1).getAttribute('aria-pressed') === 'false' && visualMapChangeCount === visualMapBatchStart + 1, JSON.stringify({ selected: visualMapControlled?.selected, count: visualMapChangeCount }))
+				visualMapInteraction.updateOptions({ visualMap: { ...visualMapInteractionConfig, selectedMode: 'single', selected: [0] } })
+				await settle(60)
+				visualMapRow(1).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapSingle = visualMapInteraction.getVisualMap()
+				const visualMapSingleCount = visualMapChangeCount
+				visualMapRow(1).dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapSingleCleared = visualMapInteraction.getVisualMap()
+				check('visualMap：selectedMode single 只保留一段，再点可清空', visualMapSingle.selected.join(',') === '1' && visualMapSingleCleared.selected.length === 0 && visualMapChangeCount === visualMapSingleCount + 1, JSON.stringify({ single: visualMapSingle?.selected, cleared: visualMapSingleCleared?.selected }))
+				visualMapInteraction.destroy()
+				visualMapInteractionHost.remove()
+
+				/* visualMap：连续尺区间手柄 / 拖动 / 受控 range */
+				const visualMapRangeHost = document.createElement('div')
+				visualMapRangeHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapRangeHost)
+				let visualMapRangeChanges = 0
+				const visualMapRangePayloads = []
+				const visualMapRangeConfig = {
+					target: 'point',
+					type: 'ruler',
+					interactive: true,
+					orient: 'horizontal',
+					title: '区间过滤',
+					unit: 'kW',
+					onChange: (payload) => {
+						visualMapRangeChanges += 1
+						visualMapRangePayloads.push(payload)
+					}
+				}
+				const visualMapRangeView = createGisView(visualMapRangeHost, {
+					points: [{ id: 'vmr-a', x: 0, y: 0, value: 0 }, { id: 'vmr-b', x: 40, y: 0, value: 50 }, { id: 'vmr-c', x: 80, y: 0, value: 100 }],
+					visualMap: visualMapRangeConfig,
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapRangeElement = visualMapRangeView.getVisualMapElement()
+				const visualMapRangeTrack = visualMapRangeElement.querySelector('.gis-view__visual-map-ruler')
+				const visualMapRangeHandles = [...visualMapRangeElement.querySelectorAll('.gis-view__visual-map-range-handle')]
+				const visualMapRangeInitial = visualMapRangeView.getVisualMap()
+				check('visualMap：interactive 连续尺默认 calculable 并显示两端手柄', visualMapRangeInitial.calculable === true && visualMapRangeInitial.range[0] === 0 && visualMapRangeInitial.range[1] === 100 && visualMapRangeInitial.rangeRatios.join(',') === '0,1' && visualMapRangeHandles.length === 2 && visualMapRangeHandles.every(handle => handle.getAttribute('role') === 'slider'), JSON.stringify({ range: visualMapRangeInitial?.range, ratios: visualMapRangeInitial?.rangeRatios }))
+				visualMapRangeHandles[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true }))
+				await settle(40)
+				const visualMapRangeKeyboard = visualMapRangeView.getVisualMap()
+				check('visualMap：区间手柄支持键盘步进并触发 range 回调', Math.abs(visualMapRangeKeyboard.range[0]) < 1e-6 && Math.abs(visualMapRangeKeyboard.range[1] - 98) < 1e-6 && visualMapRangeChanges === 1 && visualMapRangePayloads[0].reason === 'range', JSON.stringify({ range: visualMapRangeKeyboard?.range, count: visualMapRangeChanges }))
+				const visualMapRangeRect = visualMapRangeTrack.getBoundingClientRect()
+				const visualMapPointer = (type, ratio, buttons) => visualMapRangeHandles[1].dispatchEvent(new PointerEvent(type, {
+					bubbles: true,
+					cancelable: true,
+					pointerId: 71,
+					pointerType: 'mouse',
+					button: 0,
+					buttons,
+					clientX: visualMapRangeRect.left + visualMapRangeRect.width * ratio,
+					clientY: visualMapRangeRect.top + visualMapRangeRect.height / 2
+				}))
+				const visualMapDragStart = visualMapRangeChanges
+				visualMapPointer('pointerdown', 0.98, 1)
+				visualMapPointer('pointermove', 0.8, 1)
+				visualMapPointer('pointermove', 0.65, 1)
+				visualMapPointer('pointermove', 0.5, 1)
+				visualMapPointer('pointerup', 0.5, 0)
+				await settle(50)
+				const visualMapRangeDragged = visualMapRangeView.getVisualMap()
+				check('visualMap：拖动区间手柄更新 range，连续事件只回调一次', Math.abs(visualMapRangeDragged.range[0]) < 1e-6 && Math.abs(visualMapRangeDragged.range[1] - 50) < 1e-6 && visualMapRangeChanges === visualMapDragStart + 1, JSON.stringify({ range: visualMapRangeDragged?.range, callbacks: visualMapRangeChanges - visualMapDragStart }))
+				visualMapRangeView.updateOptions({ visualMap: { ...visualMapRangeConfig, range: [25, 75] } })
+				await settle(60)
+				const visualMapRangeControlled = visualMapRangeView.getVisualMap()
+				const visualMapRangeWindow = visualMapRangeElement.querySelector('.gis-view__visual-map-range')
+				check('visualMap：受控 range 更新手柄位置且不回声 onChange', visualMapRangeControlled.range.join(',') === '25,75' && Math.abs(visualMapRangeControlled.rangeRatios[0] - 0.25) < 1e-6 && Math.abs(visualMapRangeControlled.rangeRatios[1] - 0.75) < 1e-6 && visualMapRangeWindow.style.left === '25%' && visualMapRangeWindow.style.width === '50%' && visualMapRangeChanges === visualMapDragStart + 1, JSON.stringify({ range: visualMapRangeControlled?.range, ratios: visualMapRangeControlled?.rangeRatios, style: [visualMapRangeWindow.style.left, visualMapRangeWindow.style.width] }))
+				const visualMapRangeCopy = visualMapRangeView.getVisualMap()
+				visualMapRangeCopy.range[0] = -999
+				visualMapRangeCopy.rangeRatios[1] = 9
+				const visualMapRangeFresh = visualMapRangeView.getVisualMap()
+				check('visualMap：读数里的 range / rangeRatios 是独立副本', visualMapRangeFresh.range[0] === 25 && visualMapRangeFresh.rangeRatios[1] === 0.75, JSON.stringify({ range: visualMapRangeFresh.range, ratios: visualMapRangeFresh.rangeRatios }))
+				visualMapRangeView.destroy()
+				visualMapRangeHost.remove()
+
+				/* visualMap：选区真正进入热力上色（分段 / 连续区间都门控，而不只是回显读数） */
+				const visualMapGateHost = document.createElement('div')
+				visualMapGateHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapGateHost)
+				const visualMapGateHeatmap = {
+					enabled: true,
+					target: 'point',
+					field: 'value',
+					domain: [0, 20],
+					colors: ['#ff0000', '#ff0000'],
+					opacity: 1,
+					density: false,
+					glow: false
+				}
+				const visualMapGateConfig = {
+					target: 'point',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					pieces: [{ lt: 5 }, { gte: 5, lt: 15 }, { gte: 15 }]
+				}
+				const visualMapGateView = createGisView(visualMapGateHost, {
+					points: [{ id: 'vmg-a', x: 0, y: 0, value: 1 }, { id: 'vmg-b', x: 40, y: 0, value: 10 }, { id: 'vmg-c', x: 80, y: 0, value: 20 }],
+					pointStyle: { color: '#ffffff', size: 12 },
+					heatmap: visualMapGateHeatmap,
+					visualMap: visualMapGateConfig,
+					minimap: { width: 180, height: 120 },
+					showGrid: false
+				})
+				await settle(100)
+				const visualMapGateFills = () => visualMapGateView.snapshotScene().points.map(point => point.fill)
+				const visualMapGateMiniCanvas = visualMapGateView.getMinimapElement()?.querySelector('.gis-view__minimap-canvas')
+				const visualMapGateMiniRed = () => {
+					const context = visualMapGateMiniCanvas?.getContext('2d')
+					if (!context) {
+						return -1
+					}
+					const data = context.getImageData(0, 0, visualMapGateMiniCanvas.width, visualMapGateMiniCanvas.height).data
+					let count = 0
+					for (let index = 0; index < data.length; index += 4) {
+						if (data[index] > 180 && data[index + 1] < 100 && data[index + 2] < 100) {
+							count += 1
+						}
+					}
+					return count
+				}
+				const visualMapGateInitial = visualMapGateFills()
+				const visualMapGateMiniInitial = visualMapGateMiniRed()
+				visualMapGateView.getVisualMapElement().querySelector('.gis-view__visual-map-piece[data-index="0"]').dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(80)
+				const visualMapGatePiecewise = visualMapGateFills()
+				visualMapGateView.updateOptions({ visualMap: { ...visualMapGateConfig, selected: [2] } })
+				await settle(80)
+				const visualMapGateControlled = visualMapGateFills()
+				const visualMapGateMiniControlled = visualMapGateMiniRed()
+				check('visualMap：取消分段后对应值退出热力上色，再选一段只保留该档',
+					visualMapGateInitial.every(fill => fill === 'rgba(255,0,0,1)') &&
+						visualMapGatePiecewise[0] === 'rgba(255,255,255,1)' && visualMapGatePiecewise[1] === 'rgba(255,0,0,1)' && visualMapGatePiecewise[2] === 'rgba(255,0,0,1)' &&
+						visualMapGateControlled[0] === 'rgba(255,255,255,1)' && visualMapGateControlled[1] === 'rgba(255,255,255,1)' && visualMapGateControlled[2] === 'rgba(255,0,0,1)',
+					JSON.stringify({ initial: visualMapGateInitial, piecewise: visualMapGatePiecewise, controlled: visualMapGateControlled }))
+				check('visualMap：鹰眼图继承主图热力时也按同一选区门控',
+					visualMapGateMiniInitial > 0 && visualMapGateMiniControlled > 0 && visualMapGateMiniControlled < visualMapGateMiniInitial * 0.8,
+					`初始红色 ${visualMapGateMiniInitial} px · 选中高段后 ${visualMapGateMiniControlled} px`)
+				const visualMapGateMiniGreen = () => {
+					const context = visualMapGateMiniCanvas?.getContext('2d')
+					if (!context) {
+						return -1
+					}
+					const data = context.getImageData(0, 0, visualMapGateMiniCanvas.width, visualMapGateMiniCanvas.height).data
+					let count = 0
+					for (let index = 0; index < data.length; index += 4) {
+						if (data[index] < 100 && data[index + 1] > 180 && data[index + 2] < 100) {
+							count += 1
+						}
+					}
+					return count
+				}
+				visualMapGateView.updateOptions({ minimap: { width: 180, height: 120, heatmap: { target: 'point', field: 'value', domain: [0, 20], colors: ['#00ff00', '#00ff00'], opacity: 1, density: false, glow: false } } })
+				await settle(100)
+				const visualMapGateMiniIndependent = visualMapGateMiniGreen()
+				visualMapGateView.updateOptions({ visualMap: { ...visualMapGateConfig, selected: [0] } })
+				await settle(100)
+				const visualMapGateMiniIndependentAfter = visualMapGateMiniGreen()
+				check('visualMap：显式 minimap.heatmap 仍按自己的配置取色，不被主图选区门控',
+					visualMapGateMiniIndependent > 0 && visualMapGateMiniIndependentAfter === visualMapGateMiniIndependent,
+					`绿色 ${visualMapGateMiniIndependent} px → ${visualMapGateMiniIndependentAfter} px`)
+				visualMapGateView.destroy()
+				visualMapGateHost.remove()
+
+				const visualMapDensityGateHost = document.createElement('div')
+				visualMapDensityGateHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapDensityGateHost)
+				const visualMapDensityGateConfig = { target: 'point', type: 'piecewise', interactive: true, selectedMode: 'multiple', pieces: [{ lt: 5 }, { gte: 5, lt: 15 }, { gte: 15 }], selected: [2] }
+				const visualMapDensityGateView = createGisView(visualMapDensityGateHost, {
+					points: [{ id: 'vmdg-a', x: 0, y: 0, value: 1 }, { id: 'vmdg-b', x: 40, y: 0, value: 10 }, { id: 'vmdg-c', x: 80, y: 0, value: 20 }],
+					heatmap: { ...visualMapGateHeatmap, density: { resolution: 96, radiusRatio: 0.12, threshold: 0 } },
+					visualMap: visualMapDensityGateConfig,
+					showGrid: false
+				})
+				await settle(140)
+				const visualMapDensityGated = visualMapDensityGateView.getStats().heatDensity
+				visualMapDensityGateView.updateOptions({ visualMap: { ...visualMapDensityGateConfig, selected: [0, 1, 2] } })
+				await settle(140)
+				const visualMapDensityExpanded = visualMapDensityGateView.getStats().heatDensity
+				check('visualMap：密度场也按选区重新采样，落选值不再贡献密度',
+					visualMapDensityGated?.samples === 1 && visualMapDensityExpanded?.samples === 3,
+					JSON.stringify({ gated: visualMapDensityGated, expanded: visualMapDensityExpanded }))
+				visualMapDensityGateView.destroy()
+				visualMapDensityGateHost.remove()
+
+				const visualMapRangeGateHost = document.createElement('div')
+				visualMapRangeGateHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapRangeGateHost)
+				const visualMapRangeGateConfig = { target: 'point', type: 'ruler', interactive: true, range: [25, 75] }
+				const visualMapRangeGateView = createGisView(visualMapRangeGateHost, {
+					points: [{ id: 'vmrg-a', x: 0, y: 0, value: 0 }, { id: 'vmrg-b', x: 40, y: 0, value: 50 }, { id: 'vmrg-c', x: 80, y: 0, value: 100 }],
+					pointStyle: { color: '#ffffff', size: 12 },
+					heatmap: { ...visualMapGateHeatmap, domain: [0, 100] },
+					visualMap: visualMapRangeGateConfig,
+					showGrid: false
+				})
+				await settle(100)
+				const visualMapRangeGateFills = () => visualMapRangeGateView.snapshotScene().points.map(point => point.fill)
+				const visualMapRangeGateInitial = visualMapRangeGateFills()
+				visualMapRangeGateView.updateOptions({ visualMap: { ...visualMapRangeGateConfig, range: [0, 100] } })
+				await settle(80)
+				const visualMapRangeGateExpanded = visualMapRangeGateFills()
+				check('visualMap：连续尺区间外不参与热力上色，拖动扩回整段后全部恢复',
+					visualMapRangeGateInitial[0] === 'rgba(255,255,255,1)' && visualMapRangeGateInitial[1] === 'rgba(255,0,0,1)' && visualMapRangeGateInitial[2] === 'rgba(255,255,255,1)' &&
+						visualMapRangeGateExpanded.every(fill => fill === 'rgba(255,0,0,1)'),
+					JSON.stringify({ initial: visualMapRangeGateInitial, expanded: visualMapRangeGateExpanded }))
+				visualMapRangeGateView.destroy()
+				visualMapRangeGateHost.remove()
+
+				/* visualMap：render(context) 完全自定义 + 上下文交互 */
+				const visualMapCustomHost = document.createElement('div')
+				visualMapCustomHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapCustomHost)
+				let visualMapCustomCalls = 0
+				let visualMapCustomContext = null
+				let visualMapCustomChanges = 0
+				const visualMapCustomRender = (context) => {
+					visualMapCustomCalls += 1
+					visualMapCustomContext = context
+					const wrapper = document.createElement('div')
+					wrapper.className = 'vm-custom-content'
+					const readout = document.createElement('span')
+					readout.className = 'vm-custom-readout'
+					readout.textContent = `${context.title}：${context.selected.join('/')}`
+					const button = document.createElement('button')
+					button.type = 'button'
+					button.className = 'vm-custom-select-high'
+					button.textContent = '只选高档'
+					button.addEventListener('click', () => context.setSelection([2]))
+					wrapper.append(readout, button)
+					return wrapper
+				}
+				const visualMapCustomConfig = {
+					target: 'point',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					title: '自定义图例',
+					pieces: [{ lt: 5, label: '低' }, { gte: 5, lt: 15, label: '中' }, { gte: 15, label: '高' }],
+					render: visualMapCustomRender,
+					onChange: () => { visualMapCustomChanges += 1 }
+				}
+				const visualMapCustomView = createGisView(visualMapCustomHost, {
+					points: [{ id: 'vmc-a', x: 0, y: 0, value: 1 }, { id: 'vmc-b', x: 40, y: 0, value: 10 }, { id: 'vmc-c', x: 80, y: 0, value: 20 }],
+					visualMap: visualMapCustomConfig,
+					showGrid: false
+				})
+				await settle(80)
+				const visualMapCustomElement = visualMapCustomView.getVisualMapElement()
+				const visualMapCustomInitial = visualMapCustomView.getVisualMap()
+				check('visualMap：自定义 render 返回 DOM、隐藏内置标题并提供上下文读数', visualMapCustomCalls === 1 && visualMapCustomElement.querySelector('.vm-custom-content') !== null && visualMapCustomElement.querySelector('.gis-view__visual-map-title').hidden === true && visualMapCustomContext.domain.join(',') === '1,20' && visualMapCustomContext.selected.join(',') === '0,1,2' && visualMapCustomInitial.selected.length === 3, JSON.stringify({ calls: visualMapCustomCalls, hidden: visualMapCustomElement.querySelector('.gis-view__visual-map-title')?.hidden, context: visualMapCustomContext && { domain: visualMapCustomContext.domain, selected: visualMapCustomContext.selected } }))
+				visualMapCustomElement.querySelector('.vm-custom-select-high').dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle(50)
+				const visualMapCustomSelected = visualMapCustomView.getVisualMap()
+				check('visualMap：自定义上下文 setSelection 更新读数并回调 api 来源', visualMapCustomSelected.selected.join(',') === '2' && visualMapCustomChanges === 1 && visualMapCustomCalls === 1, JSON.stringify({ selected: visualMapCustomSelected?.selected, changes: visualMapCustomChanges, calls: visualMapCustomCalls }))
+				visualMapCustomView.updateOptions({ visualMap: { ...visualMapCustomConfig, title: '自定义图例 2' } })
+				await settle(60)
+				check('visualMap：自定义 render 的配置签名变化会重绘，并保留用户选区', visualMapCustomCalls === 2 && visualMapCustomElement.querySelector('.vm-custom-readout')?.textContent === '自定义图例 2：2', JSON.stringify({ calls: visualMapCustomCalls, text: visualMapCustomElement.querySelector('.vm-custom-readout')?.textContent }))
+				visualMapCustomView.updateOptions({ visualMap: { ...visualMapCustomConfig, title: '字符串图例', render: context => `<strong class="vm-custom-string">${context.domain[0]} ~ ${context.domain[1]}</strong>` } })
+				await settle(60)
+				check('visualMap：自定义 render 也可返回 HTML 字符串', visualMapCustomElement.querySelector('.vm-custom-string')?.textContent === '1 ~ 20', visualMapCustomElement.innerHTML)
+				visualMapCustomView.destroy()
+				visualMapCustomHost.remove()
+
+				/* visualMap：outOfRange 三种落选策略；network 只做视觉门控，不改数据 / 筛选 / 通道声明 */
+				const visualMapOutOfRangeHost = document.createElement('div')
+				visualMapOutOfRangeHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapOutOfRangeHost)
+				const visualMapOutOfRangeChanges = []
+				const visualMapOutOfRangeHeatmap = {
+					enabled: true,
+					target: 'point',
+					field: 'value',
+					domain: [0, 20],
+					colors: ['#ff0000', '#ff0000'],
+					opacity: 1,
+					density: false,
+					glow: false
+				}
+				const visualMapOutOfRangeConfig = {
+					target: 'point',
+					field: 'value',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					pieces: [{ lt: 5 }, { gte: 5, lt: 15 }, { gte: 15 }],
+					selected: [1],
+					onChange: payload => visualMapOutOfRangeChanges.push(payload)
+				}
+				const visualMapOutOfRangeView = createGisView(visualMapOutOfRangeHost, {
+					points: [
+						{ id: 'vmor-a', x: -60, y: 0, value: 1 },
+						{ id: 'vmor-b', x: 0, y: 0, value: 10 },
+						{ id: 'vmor-c', x: 60, y: 0, value: 20 }
+					],
+					pointStyle: { color: '#ffffff', size: 14 },
+					heatmap: visualMapOutOfRangeHeatmap,
+					visualMap: visualMapOutOfRangeConfig,
+					minimap: {
+						width: 180,
+						height: 120,
+						heatmap: {
+							target: 'point',
+							field: 'value',
+							domain: [0, 20],
+							colors: ['#00ff00', '#00ff00'],
+							opacity: 1,
+							density: false,
+							glow: false
+						}
+					},
+					showGrid: false
+				})
+				await settle()
+				const visualMapOutOfRangeScenePoints = () => {
+					const scene = visualMapOutOfRangeView.snapshotScene()
+					return [...scene.points, ...scene.raised]
+				}
+				const visualMapOutOfRangeCanvas = visualMapOutOfRangeView.getMinimapElement()?.querySelector('.gis-view__minimap-canvas')
+				const visualMapOutOfRangeMiniGreen = () => {
+					const context = visualMapOutOfRangeCanvas?.getContext('2d')
+					if (!context) {
+						return -1
+					}
+					const data = context.getImageData(0, 0, visualMapOutOfRangeCanvas.width, visualMapOutOfRangeCanvas.height).data
+					let count = 0
+					for (let index = 0; index < data.length; index += 4) {
+						if (data[index] < 100 && data[index + 1] > 180 && data[index + 2] < 100) {
+							count += 1
+						}
+					}
+					return count
+				}
+				const visualMapOutOfRangeInitialFills = visualMapOutOfRangeScenePoints().map(point => point.fill)
+				const visualMapOutOfRangeMiniInitial = visualMapOutOfRangeMiniGreen()
+				check('visualMap：outOfRange 缺省 heatmap，只退热力，落选节点仍在画布上',
+					visualMapOutOfRangeView.getVisualMap()?.outOfRange === 'heatmap' &&
+						visualMapOutOfRangeInitialFills.length === 3 && visualMapOutOfRangeInitialFills[0] === 'rgba(255,255,255,1)' && visualMapOutOfRangeInitialFills[1] === 'rgba(255,0,0,1)' && visualMapOutOfRangeInitialFills[2] === 'rgba(255,255,255,1)',
+					JSON.stringify({ mode: visualMapOutOfRangeView.getVisualMap()?.outOfRange, fills: visualMapOutOfRangeInitialFills }))
+				visualMapOutOfRangeView.selectFeatures('vmor-a')
+				const visualMapOutOfRangeFilterBefore = visualMapOutOfRangeView.getFilterResult()
+				visualMapOutOfRangeView.updateOptions({ visualMap: { ...visualMapOutOfRangeConfig, outOfRange: 'network' } })
+				await settle()
+				const visualMapOutOfRangeHiddenIds = visualMapOutOfRangeView.listPoints().map(point => point.item.id)
+				const visualMapOutOfRangeMiniHidden = visualMapOutOfRangeMiniGreen()
+				check('visualMap：network 让落选点退出画布与可见列表，数据 / 筛选 / 选中集原样保留',
+					visualMapOutOfRangeHiddenIds.join(',') === 'vmor-b' &&
+						visualMapOutOfRangeScenePoints().length === 1 &&
+						visualMapOutOfRangeView.getData().points.length === 3 &&
+						visualMapOutOfRangeView.getVisibleData().points.length === 3 &&
+						visualMapOutOfRangeView.getFilterResult() === visualMapOutOfRangeFilterBefore &&
+						visualMapOutOfRangeView.getSelectionData().ids.join(',') === 'vmor-a',
+					JSON.stringify({ visible: visualMapOutOfRangeHiddenIds, data: visualMapOutOfRangeView.getData().points.length, selection: visualMapOutOfRangeView.getSelectionData().ids }))
+				check('visualMap：network 的隐藏集合同步到使用独立热力配置的鹰眼图',
+					visualMapOutOfRangeMiniInitial > 0 && visualMapOutOfRangeMiniHidden > 0 && visualMapOutOfRangeMiniHidden < visualMapOutOfRangeMiniInitial * 0.75,
+					`初始绿色 ${visualMapOutOfRangeMiniInitial} px · 隐藏后 ${visualMapOutOfRangeMiniHidden} px`)
+				visualMapOutOfRangeView.updateOptions({ visualMap: { ...visualMapOutOfRangeConfig, outOfRange: 'network', selected: [0, 1, 2] } })
+				await settleMs(300)
+				const visualMapOutOfRangeMiniRestored = visualMapOutOfRangeMiniGreen()
+				check('visualMap：network 恢复全选后落选点回到画布，原选中集仍在',
+					visualMapOutOfRangeView.listPoints().length === 3 && visualMapOutOfRangeScenePoints().length === 3 &&
+						visualMapOutOfRangeView.getSelectionData().ids.join(',') === 'vmor-a' && visualMapOutOfRangeMiniRestored >= visualMapOutOfRangeMiniInitial * 0.8,
+					JSON.stringify({ visible: visualMapOutOfRangeView.listPoints().map(point => point.item.id), selection: visualMapOutOfRangeView.getSelectionData().ids, mini: [visualMapOutOfRangeMiniInitial, visualMapOutOfRangeMiniHidden, visualMapOutOfRangeMiniRestored] }))
+				visualMapOutOfRangeView.updateOptions({ visualMap: { ...visualMapOutOfRangeConfig, outOfRange: 'none', selected: [0, 1, 2] } })
+				await settle()
+				const visualMapOutOfRangeNoneChanges = visualMapOutOfRangeChanges.length
+				visualMapOutOfRangeView.getVisualMapElement().querySelectorAll('.gis-view__visual-map-piece')[1].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+				await settle()
+				const visualMapOutOfRangeNoneFills = visualMapOutOfRangeScenePoints().map(point => point.fill)
+				check('visualMap：outOfRange none 不做事先门控，选区变化只通过 onChange 交给业务',
+					visualMapOutOfRangeNoneFills.length === 3 && visualMapOutOfRangeNoneFills.every(fill => fill === 'rgba(255,0,0,1)') &&
+						visualMapOutOfRangeView.getVisualMap().selected.join(',') === '0,2' &&
+						visualMapOutOfRangeChanges.length === visualMapOutOfRangeNoneChanges + 1 && visualMapOutOfRangeChanges.at(-1)?.outOfRange === 'none',
+					JSON.stringify({ fills: visualMapOutOfRangeNoneFills, selected: visualMapOutOfRangeView.getVisualMap().selected, changes: visualMapOutOfRangeChanges.length - visualMapOutOfRangeNoneChanges }))
+				visualMapOutOfRangeView.destroy()
+				visualMapOutOfRangeHost.remove()
+
+				const visualMapLineOutOfRangeHost = document.createElement('div')
+				visualMapLineOutOfRangeHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapLineOutOfRangeHost)
+				const visualMapLineOutOfRangeConfig = {
+					target: 'line',
+					field: 'value',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					pieces: [{ lt: 5 }, { gte: 5, lt: 15 }, { gte: 15 }],
+					selected: [0, 1],
+					outOfRange: 'network'
+				}
+				const visualMapLineOutOfRangeView = createGisView(visualMapLineOutOfRangeHost, {
+					points: [
+						{ id: 'vml-a', x: 0, y: 0, size: 12 },
+						{ id: 'vml-b', x: 180, y: 60, size: 12 }
+					],
+					lines: [
+						{ id: 'vml-solo-low', path: [[0, 130], [180, 130]], value: 1, width: 6 },
+						{ id: 'vml-solo-high', path: [[0, 160], [180, 160]], value: 10, width: 6 },
+						{ id: 'vml-ch-low', path: [[0, 0], [90, 30], [180, 60]], value: 1, width: 6 },
+						{ id: 'vml-ch-high', path: [[0, 10], [90, 40], [180, 70]], value: 10, width: 6 }
+					],
+					channels: [
+						{ id: 'vml-ch-low', from: 'vml-a', to: 'vml-b', lineIds: ['vml-ch-low'], value: 1 },
+						{ id: 'vml-ch-high', from: 'vml-a', to: 'vml-b', lineIds: ['vml-ch-high'], value: 10 }
+					],
+					visualMap: visualMapLineOutOfRangeConfig,
+					showGrid: false
+				})
+				await settle()
+				const visualMapLineSceneCount = () => {
+					const scene = visualMapLineOutOfRangeView.snapshotScene()
+					return scene.lines.length + scene.raisedLines.length
+				}
+				const visualMapLineChannelsBefore = JSON.stringify(visualMapLineOutOfRangeView.getChannels())
+				const visualMapLineChannelLowBefore = JSON.stringify(visualMapLineOutOfRangeView.getChannel('vml-ch-low'))
+				const visualMapLineFilterBefore = visualMapLineOutOfRangeView.getFilterResult()
+				visualMapLineOutOfRangeView.selectFeatures('vml-solo-low')
+				visualMapLineOutOfRangeView.updateOptions({ visualMap: { ...visualMapLineOutOfRangeConfig, selected: [1] } })
+				await settle()
+				const visualMapLineHiddenIds = visualMapLineOutOfRangeView.listLines().map(line => line.item.id)
+				check('visualMap：network + line 只隐藏落选独立线路，不误伤同值的通道回线',
+					!visualMapLineHiddenIds.includes('vml-solo-low') && visualMapLineHiddenIds.includes('vml-solo-high') &&
+						visualMapLineHiddenIds.includes('vml-ch-low') && visualMapLineHiddenIds.includes('vml-ch-high') &&
+						visualMapLineSceneCount() === 3 && visualMapLineOutOfRangeView.getData().lines.length === 4 &&
+						visualMapLineOutOfRangeView.getFilterResult() === visualMapLineFilterBefore && visualMapLineOutOfRangeView.getSelectionData().ids.join(',') === 'vml-solo-low',
+					JSON.stringify({ visible: visualMapLineHiddenIds, data: visualMapLineOutOfRangeView.getData().lines.length, selection: visualMapLineOutOfRangeView.getSelectionData().ids }))
+				visualMapLineOutOfRangeView.updateOptions({ visualMap: { ...visualMapLineOutOfRangeConfig, target: 'channel', selected: [1] } })
+				await settle()
+				const visualMapChannelHiddenIds = visualMapLineOutOfRangeView.listLines().map(line => line.item.id)
+				check('visualMap：network + channel 按声明隐藏整条落选通道，通道声明与数据不变',
+					visualMapChannelHiddenIds.includes('vml-solo-low') && visualMapChannelHiddenIds.includes('vml-solo-high') &&
+						!visualMapChannelHiddenIds.includes('vml-ch-low') && visualMapChannelHiddenIds.includes('vml-ch-high') &&
+						visualMapLineSceneCount() === 3 &&
+						JSON.stringify(visualMapLineOutOfRangeView.getChannels()) === visualMapLineChannelsBefore &&
+						JSON.stringify(visualMapLineOutOfRangeView.getChannel('vml-ch-low')) === visualMapLineChannelLowBefore,
+					JSON.stringify({ visible: visualMapChannelHiddenIds, channels: visualMapLineOutOfRangeView.getChannels().map(channel => channel.channelId) }))
+				visualMapLineOutOfRangeView.updateOptions({ visualMap: { ...visualMapLineOutOfRangeConfig, target: 'channel', selected: [0, 1] } })
+				await settle()
+				check('visualMap：channel 恢复全选后所有通道回线回到画布',
+					visualMapLineOutOfRangeView.listLines().length === 4 && visualMapLineSceneCount() === 4,
+					JSON.stringify({ visible: visualMapLineOutOfRangeView.listLines().map(line => line.item.id) }))
+				visualMapLineOutOfRangeView.destroy()
+				visualMapLineOutOfRangeHost.remove()
+
+				const visualMapMultiTargetHost = document.createElement('div')
+				visualMapMultiTargetHost.style.cssText = 'width:520px;height:300px'
+				document.body.append(visualMapMultiTargetHost)
+				const visualMapMultiTargetConfig = {
+					field: 'value',
+					type: 'piecewise',
+					interactive: true,
+					selectedMode: 'multiple',
+					pieces: [{ lt: 5 }, { gte: 5 }],
+					selected: [1],
+					outOfRange: 'network'
+				}
+				const visualMapMultiTargetView = createGisView(visualMapMultiTargetHost, {
+					points: [
+						{ id: 'vmmt-low', x: 0, y: 0, size: 12 },
+						{ id: 'vmmt-high', x: 180, y: 60, size: 12 }
+					],
+					lines: [
+						{ id: 'vmmt-solo-low', path: [[0, 130], [180, 130]], value: 1, width: 6 },
+						{ id: 'vmmt-solo-high', path: [[0, 160], [180, 160]], value: 10, width: 6 },
+						{ id: 'vmmt-ch-low', path: [[0, 0], [90, 30], [180, 60]], value: 1, width: 6 },
+						{ id: 'vmmt-ch-high', path: [[0, 10], [90, 40], [180, 70]], value: 10, width: 6 }
+					],
+					channels: [
+						{ id: 'vmmt-ch-low', from: 'vmmt-low', to: 'vmmt-high', lineIds: ['vmmt-ch-low'], value: 1 },
+						{ id: 'vmmt-ch-high', from: 'vmmt-low', to: 'vmmt-high', lineIds: ['vmmt-ch-high'], value: 10 }
+					],
+					heatmap: { target: ['point', 'line', 'channel'], field: 'value', density: false, glow: false, opacity: 1 },
+					visualMap: visualMapMultiTargetConfig,
+					showGrid: false
+				})
+				await settle()
+				const visualMapMultiTargetInitial = visualMapMultiTargetView.getVisualMap()
+				const visualMapMultiTargetInitialLines = visualMapMultiTargetView.listLines().map(line => line.item.id)
+				check('visualMap：不写 target 时跳过缺字段的节点选展示值域，门控仍覆盖全部热力目标',
+					visualMapMultiTargetInitial?.target === 'line' && visualMapMultiTargetInitial.domain.join(',') === '1,10' &&
+						visualMapMultiTargetView.listPoints().length === 2 &&
+						visualMapMultiTargetInitialLines.join(',') === 'vmmt-solo-high,vmmt-ch-high',
+					JSON.stringify({ readout: visualMapMultiTargetInitial && { target: visualMapMultiTargetInitial.target, domain: visualMapMultiTargetInitial.domain }, points: visualMapMultiTargetView.listPoints().map(point => point.item.id), lines: visualMapMultiTargetInitialLines }))
+				visualMapMultiTargetView.updatePoint('vmmt-low', { value: 1 })
+				visualMapMultiTargetView.updatePoint('vmmt-high', { value: 10 })
+				await settle()
+				const visualMapMultiTargetPoints = visualMapMultiTargetView.listPoints().map(point => point.item.id)
+				const visualMapMultiTargetLines = visualMapMultiTargetView.listLines().map(line => line.item.id)
+				check('visualMap：多目标 network 同时隐藏落选节点、独立线路与整条落选通道',
+					visualMapMultiTargetView.getVisualMap()?.target === 'point' &&
+						visualMapMultiTargetPoints.join(',') === 'vmmt-high' &&
+						visualMapMultiTargetLines.join(',') === 'vmmt-solo-high,vmmt-ch-high' &&
+						visualMapMultiTargetView.getData().points.length === 2 && visualMapMultiTargetView.getData().lines.length === 4 &&
+						visualMapMultiTargetView.getChannels().length === 2,
+					JSON.stringify({ target: visualMapMultiTargetView.getVisualMap()?.target, points: visualMapMultiTargetPoints, lines: visualMapMultiTargetLines }))
+				visualMapMultiTargetView.updateOptions({ visualMap: { ...visualMapMultiTargetConfig, selected: [0, 1] } })
+				await settle()
+				check('visualMap：多目标恢复全选后节点、独立线路与通道成员全部回到画布',
+					visualMapMultiTargetView.listPoints().length === 2 && visualMapMultiTargetView.listLines().length === 4,
+					JSON.stringify({ points: visualMapMultiTargetView.listPoints().map(point => point.item.id), lines: visualMapMultiTargetView.listLines().map(line => line.item.id) }))
+				visualMapMultiTargetView.destroy()
+				visualMapMultiTargetHost.remove()
+
 				lineOnlyView.destroy()
 				lineOnlyHost.remove()
 				splitView.destroy()