gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/MinimapDemo.vue

@@ -0,0 +1,358 @@
+<script setup>
+/**
+ * 鹰眼图配置：把尺寸 / 位置 / 范围 / 规则 / 交互 / 高清倍率与自定义绘制层放在一页里。
+ *
+ * 这一页只改 `minimap`，主图数据保持不动 —— 每次控件变化都走
+ * `view.updateOptions({ minimap })`，可以看到小图运行时重挂、重铺与视口框联动。
+ * 两个自定义层分别画网格和指北针，演示 `layers` 的拆分方式与叠放顺序。
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const enabled = ref(true)
+const size = ref('medium')
+const position = ref('bottom-right')
+const extent = ref('auto')
+const ruleMode = ref('voltage')
+const levelMode = ref('all')
+const linkedSizes = ref(true)
+const channelCircuits = ref(true)
+const zoomable = ref(true)
+const dragAction = ref('pan')
+const maxPixelRatio = ref('2')
+const gridPlacement = ref('below-data')
+const customLayers = ref(true)
+const readout = ref('正在创建视图…')
+const zoomReadout = ref('—')
+const layerReadout = ref('—')
+const eventText = ref('—')
+const interactionReadout = ref('还没有手势')
+
+const SIZES = {
+	small: [148, 104],
+	medium: [192, 136],
+	large: [248, 176]
+}
+
+const dataset = buildDemoData({ count: 64, channels: 3 })
+let view = null
+let layerPaints = { grid: 0, compass: 0, gridStage: '—' }
+
+const drawGrid = ({ context, width, height, stage }) => {
+	layerPaints.grid += 1
+	layerPaints.gridStage = stage
+	context.save()
+	context.strokeStyle = 'rgba(54, 120, 191, 0.18)'
+	context.lineWidth = 1
+	context.setLineDash([3, 5])
+	for (let x = 24; x < width; x += 24) {
+		context.beginPath()
+		context.moveTo(x + 0.5, 0)
+		context.lineTo(x + 0.5, height)
+		context.stroke()
+	}
+	for (let y = 24; y < height; y += 24) {
+		context.beginPath()
+		context.moveTo(0, y + 0.5)
+		context.lineTo(width, y + 0.5)
+		context.stroke()
+	}
+	context.restore()
+}
+
+const drawCompass = ({ context, width }) => {
+	layerPaints.compass += 1
+	const x = width - 18
+	const y = 18
+	context.save()
+	context.fillStyle = 'rgba(255, 255, 255, 0.82)'
+	context.strokeStyle = 'rgba(54, 120, 191, 0.55)'
+	context.lineWidth = 1
+	context.beginPath()
+	context.arc(x, y, 11, 0, Math.PI * 2)
+	context.fill()
+	context.stroke()
+	context.fillStyle = '#3678bf'
+	context.beginPath()
+	context.moveTo(x, y - 8)
+	context.lineTo(x - 4, y + 4)
+	context.lineTo(x, y + 1)
+	context.lineTo(x + 4, y + 4)
+	context.closePath()
+	context.fill()
+	context.font = '600 7px sans-serif'
+	context.textAlign = 'center'
+	context.fillStyle = '#526b8d'
+	context.fillText('N', x, y + 17)
+	context.restore()
+}
+
+const minimapLayers = () => (customLayers.value
+	? [
+		{ id: 'grid', order: 10, placement: gridPlacement.value, draw: drawGrid },
+		{ id: 'compass', order: 20, draw: drawCompass }
+	]
+	: [])
+
+let interactionCount = 0
+const handleMinimapInteraction = (info) => {
+	interactionCount += 1
+	interactionReadout.value = `${info.type} #${interactionCount} · ${info.world[0].toFixed(1)}, ${info.world[1].toFixed(1)} · 小图 ${info.zoom.toFixed(2)} · ${info.camera ? '相机已同步' : '相机未就绪'}`
+}
+
+const voltagePointRules = () => [
+	{ when: { vn_kv: { gte: 525 } }, style: { color: '#ff4fa3', size: 2.1, shape: 'square', zIndex: 2 } },
+	{ when: { vn_kv: { lt: 525 } }, style: { color: '#3fa7ff', size: 1.2, zIndex: 1 } }
+]
+
+const voltageLineRules = () => [
+	{ when: { vn_kv: { gte: 525 } }, style: { color: '#d47a52', width: 1.3, opacity: 0.86, zIndex: 2 } },
+	{ when: { vn_kv: { lt: 525 } }, style: { color: '#9fb4ca', width: 0.8, opacity: 0.54, zIndex: 1 } }
+]
+
+const minimapOptions = () => {
+	const [width, height] = SIZES[size.value] ?? SIZES.medium
+	const ownRules = ruleMode.value === 'voltage'
+	return {
+		enabled: enabled.value,
+		width,
+		height,
+		position: position.value,
+		margin: 12,
+		padding: 0.05,
+		extent: extent.value,
+		background: 'inherit',
+		backgroundStyle: 'rgba(255, 255, 255, 0.94)',
+		borderColor: '#c7d8eb',
+		borderWidth: 1,
+		radius: 7,
+		className: 'demo-minimap-surface',
+		style: { boxShadow: '0 6px 20px rgba(31, 62, 105, 0.18)' },
+		pointStyle: { color: '#3f8ee8', size: 1.35 },
+		lineStyle: { color: '#8fb2d8', width: 0.9, opacity: 0.55 },
+		pointRules: ownRules ? voltagePointRules() : undefined,
+		lineRules: ownRules ? voltageLineRules() : undefined,
+		inheritRules: ruleMode.value === 'inherit',
+		levels: levelMode.value === 'top' ? [2] : undefined,
+		cascade: 'both',
+		layered: true,
+		pointSizeScale: 1,
+		lineWidthScale: 1,
+		pointMapZoomScale: linkedSizes.value ? 0.5 : 0,
+		lineMapZoomScale: linkedSizes.value ? 0.5 : 0,
+		boxStyle: { fill: '#3678bf', fillOpacity: 0.16, stroke: '#3678bf', strokeWidth: 1, strokeStyle: 'dashed', radius: 3 },
+		selectStyle: { fill: '#f0a43c', stroke: '#f0a43c' },
+		interactive: true,
+		onInteraction: handleMinimapInteraction,
+		longPressDelay: 180,
+		zoomable: zoomable.value,
+		minZoom: 0.7,
+		maxZoom: 6,
+		zoomStep: 1.35,
+		dragAction: dragAction.value,
+		channelCircuits: channelCircuits.value,
+		maxPixelRatio: Number(maxPixelRatio.value),
+		layers: minimapLayers()
+	}
+}
+
+const refreshReadout = () => {
+	const canvas = container.value?.querySelector('.gis-view__minimap-canvas')
+	const root = container.value?.querySelector('.gis-view__minimap')
+	const options = minimapOptions()
+	const ratio = canvas && options.width ? canvas.width / options.width : 0
+	const sizeText = root ? `${Math.round(root.getBoundingClientRect().width)}×${Math.round(root.getBoundingClientRect().height)}` : '未挂载'
+	readout.value = `${sizeText} · 备份 ${canvas?.width ?? 0}×${canvas?.height ?? 0} · 像素比 ${ratio ? ratio.toFixed(2) : '—'} · 范围 ${extent.value} · 自定义层 ${options.layers.length}`
+	if (view) {
+		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomable.value ? '滚轮缩放小图' : '滚轮缩放主图'}`
+	}
+}
+
+const applyMinimap = () => {
+	if (!view) {
+		return
+	}
+	view.updateOptions({ minimap: minimapOptions() })
+	eventText.value = `updateOptions：${enabled.value ? '已更新鹰眼图配置' : '已卸载鹰眼图'}`
+	requestAnimationFrame(refreshReadout)
+}
+
+const resetZoom = () => {
+	view?.setMinimapZoom(1)
+	refreshZoom()
+}
+
+const zoomMinimap = (factor) => {
+	view?.zoomMinimapBy(factor)
+	refreshZoom()
+}
+
+const refreshZoom = () => {
+	if (view) {
+		zoomReadout.value = `小图倍数 ${view.getMinimapZoom().toFixed(2)} · ${zoomable.value ? '滚轮缩放小图' : '滚轮缩放主图'}`
+	}
+}
+
+const refreshLayerReadout = () => {
+	layerReadout.value = `网格层 ${layerPaints.grid} 次（${layerPaints.gridStage}） · 指北针层 ${layerPaints.compass} 次`
+	refreshReadout()
+}
+
+const fit = () => view?.fitView(44)
+const zoomBy = factor => view?.zoomBy(factor)
+
+onMounted(() => {
+	view = createGisView(container.value, {
+		points: dataset.points,
+		lines: dataset.lines,
+		channels: dataset.channels,
+		channelWidth: 2.4,
+		channelInset: 1.8,
+		pointStyle: { size: 6, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
+		lineStyle: { width: 1.35, color: 'rgba(120, 168, 226, 0.52)' },
+		showGrid: true,
+		gridColor: 'rgba(126, 168, 214, 0.2)',
+		fitPadding: 44,
+		features: 'view',
+		label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 18, style: { color: '#27405f', fontSize: '11px' } },
+		minimap: minimapOptions(),
+		onReady: () => {
+			emit('notice', '鹰眼图配置页：改控件会即时 updateOptions，右侧读数同步备份尺寸与像素比')
+			eventText.value = 'ready：鹰眼图已挂载'
+			requestAnimationFrame(refreshReadout)
+		},
+		onWarning: text => {
+			eventText.value = `warning：${text}`
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	view?.destroy()
+	view = null
+})
+
+const sizeSummary = computed(() => `${SIZES[size.value]?.[0] ?? 0}×${SIZES[size.value]?.[1] ?? 0}`)
+</script>
+
+<template>
+	<section class="dv-demo">
+		<div class="dv-stage">
+			<div ref="container" class="dv-canvas"></div>
+			<div class="dv-toolbar">
+				<button type="button" @click="fit">适应全部</button>
+				<button type="button" @click="zoomBy(1.4)">放大</button>
+				<button type="button" @click="zoomBy(1 / 1.4)">缩小</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>布局与范围 <span>{{ sizeSummary }}</span></h3>
+				<div class="dv-row">
+					<label><input v-model="enabled" type="checkbox" data-demo="minimap-enabled" @change="applyMinimap" /> 显示鹰眼图</label>
+				</div>
+				<div class="dv-row">
+					<label>尺寸
+						<select v-model="size" data-demo="minimap-size" @change="applyMinimap">
+							<option value="small">小</option>
+							<option value="medium">中</option>
+							<option value="large">大</option>
+						</select>
+					</label>
+					<label>位置
+						<select v-model="position" data-demo="minimap-position" @change="applyMinimap">
+							<option value="top-left">左上</option>
+							<option value="top-right">右上</option>
+							<option value="bottom-left">左下</option>
+							<option value="bottom-right">右下</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label>范围
+						<select v-model="extent" data-demo="minimap-extent" @change="applyMinimap">
+							<option value="auto">数据 ∪ 底图</option>
+							<option value="data">只看数据</option>
+							<option value="background">只看底图</option>
+						</select>
+					</label>
+					<label>备份倍率
+						<select v-model="maxPixelRatio" data-demo="minimap-ratio" @change="applyMinimap">
+							<option value="1">1×</option>
+							<option value="2">2×</option>
+							<option value="3">3×</option>
+							<option value="4">4×</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-hint"><code>maxPixelRatio</code> 越大越清晰，也越吃填充率；高分屏按机器档位调到 2 通常就够。</p>
+			</div>
+			<div class="dv-group">
+				<h3>规则与交互</h3>
+				<div class="dv-row">
+					<label>规则
+						<select v-model="ruleMode" data-demo="minimap-rules" @change="applyMinimap">
+							<option value="voltage">按电压单独配</option>
+							<option value="inherit">沿用主图</option>
+							<option value="plain">只用基础样式</option>
+						</select>
+					</label>
+					<label>层级
+						<select v-model="levelMode" data-demo="minimap-levels" @change="applyMinimap">
+							<option value="all">全部</option>
+							<option value="top">只看高层</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="linkedSizes" type="checkbox" data-demo="minimap-linked" @change="applyMinimap" /> 尺寸跟随主图缩放</label>
+					<label><input v-model="channelCircuits" type="checkbox" data-demo="minimap-circuits" @change="applyMinimap" /> 画全部回线</label>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="zoomable" type="checkbox" data-demo="minimap-zoomable" @change="applyMinimap" /> 小图自身可缩放</label>
+					<label>空白拖动
+						<select v-model="dragAction" data-demo="minimap-drag-action" @change="applyMinimap">
+							<option value="pan">平移小图</option>
+							<option value="box">直接框选</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-hint">打开「小图自身可缩放」后，滚轮缩放小图；按住 Ctrl / ⌘ + 滚轮仍然缩放主图。视口框可以拖，空白处长按跟随。</p>
+			</div>
+			<div class="dv-group">
+				<h3>扩展层</h3>
+				<div class="dv-row">
+					<label><input v-model="customLayers" type="checkbox" data-demo="minimap-layers" @change="applyMinimap" /> 网格 + 指北针</label>
+					<label>网格位置
+						<select v-model="gridPlacement" data-demo="minimap-layer-placement" @change="applyMinimap">
+							<option value="below-data">数据下面</option>
+							<option value="above-data">数据上面</option>
+						</select>
+					</label>
+					<button type="button" class="dv-button" data-demo="minimap-layer-read" @click="refreshLayerReadout">读取层计数</button>
+				</div>
+				<p class="dv-readout" data-demo="minimap-layer-readout">{{ layerReadout }}</p>
+				<p class="dv-hint"><code>layers</code> 用 <code>placement</code> 选择画在数据前还是数据后，同段内再按 <code>order</code> 排序；旧的单个 <code>draw</code> 钩子仍然可用，并排在最后。</p>
+			</div>
+			<div class="dv-group">
+				<h3>小图倍数</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="minimap-zoom-out" @click="zoomMinimap(1 / 1.35)">－</button>
+					<button type="button" class="dv-button dv-button--primary" data-demo="minimap-zoom-reset" @click="resetZoom">1×</button>
+					<button type="button" class="dv-button" data-demo="minimap-zoom-in" @click="zoomMinimap(1.35)">＋</button>
+				</div>
+				<p class="dv-readout" data-demo="minimap-zoom-readout">{{ zoomReadout }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>读数</h3>
+				<p class="dv-readout" data-demo="minimap-readout">{{ readout }}</p>
+				<p class="dv-readout" data-demo="minimap-event" aria-live="polite">{{ eventText }}</p>
+				<p class="dv-readout" data-demo="minimap-interaction" aria-live="polite">{{ interactionReadout }}</p>
+			</div>
+		</aside>
+	</section>
+</template>

package/docs/demos/PerfDemo.vue

@@ -27,6 +27,8 @@ const qualityMode = ref('auto')
 const statsText = ref('—')
 const filterText = ref('未筛选：全部要素都画')
 const qualityText = ref('—')
+const denseMode = ref('auto')
+const denseText = ref('—')
 const busy = ref(false)
 /** 交互期细线快路径（缺省开）：拖动 / 缩放期间线段用 gl.LINES 画，停手后回到四边形展开 */
 const thinLines = ref(true)
@@ -70,6 +72,8 @@ const buildOptions = () => ({
 	pointStyle: { size: 4, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1 },
 	lineStyle: { width: 1, color: 'rgba(120, 168, 226, 0.45)' },
 	quality: qualityMode.value,
+	// 大数据展示模式：auto 按可见节点数 / 屏幕密度 / 总量自动切，面板上也可以强制开或关
+	denseMode: denseMode.value,
 	// MSAA 只在建上下文时用一次，细线开关每帧现读
 	antialias: antialias.value,
 	interactionThinLines: thinLines.value,
@@ -103,6 +107,10 @@ const buildOptions = () => ({
 		const speed = next.idle ? '空闲' : `${Math.round(next.fps)} fps`
 		statsText.value = `${speed} · 最近一帧 ${next.frameMs.toFixed(2)} ms · 画 ${next.pointCount.toLocaleString()} 点 / ${next.lineCount.toLocaleString()} 线`
 		deviceText.value = `${next.antialias ? 'MSAA 4×' : '无 MSAA'} · ${next.software ? '软件光栅' : 'GPU 光栅'} · 线段${next.thinLines ? '走细线快路径' : '走四边形展开'} · ${next.noMsaa ? '交互 / 动画帧走非 MSAA 后备缓冲' : '与静止帧同一张画布'}`
+		const dense = next.dense
+		denseText.value = dense
+			? `密集档：${dense.active ? '开' : '关'} · ${dense.reason} · 可见 ${dense.visiblePoints === null ? '—' : dense.visiblePoints.toLocaleString()} 点（阈值 ${dense.visibleThreshold.toLocaleString()}）`
+			: '—'
 	},
 	onQualityChange: (next) => {
 		qualityText.value = `画质：${next?.name ?? next?.level ?? '—'}`
@@ -162,6 +170,12 @@ const applyQuality = () => {
 	emit('notice', `画质档：${qualityMode.value}`)
 }
 
+/** 密集档：auto 自动判定，on / off 强制开关；切回 auto 时立即按当前视口重判一次 */
+const applyDenseMode = () => {
+	view?.updateOptions({ denseMode: denseMode.value })
+	emit('notice', `大数据展示模式：${denseMode.value}`)
+}
+
 const applyThinLines = () => {
 	// 表现类配置：只在下一帧现读，不重排场景、不重传实例
 	view?.updateOptions({ interactionThinLines: thinLines.value })
@@ -222,6 +236,21 @@ onBeforeUnmount(() => {
 			</div>
 			<div class="dv-group">
 				<h3>筛选与画质</h3>
+				<div class="dv-row">
+					<label>密集档
+						<select v-model="denseMode" @change="applyDenseMode">
+							<option value="auto">auto（按数据量 / 密度）</option>
+							<option value="on">on（强制开启）</option>
+							<option value="off">off（强制关闭）</option>
+						</select>
+					</label>
+				</div>
+				<p class="dv-readout">{{ denseText }}</p>
+				<p class="dv-hint">
+					密集档是数据侧的自动降级：可见节点达到 4000、每百万 CSS 像素达到 3000 个，或总数达到 5 万时，
+					标签切到避让 / 截断，线路动点与节点涟漪暂停；条件回落并留 22% 缓冲后自动恢复。
+					档位与判定依据看 getStats().dense，也可以按 updateOptions({ denseMode }) 强制切换。
+				</p>
 				<div class="dv-row">
 					<label>电压
 						<select v-model="voltageFilter" @change="applyFilter">