gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/ExtensionDemo.vue

@@ -0,0 +1,458 @@
+<script setup>
+/**
+ * 扩展能力：用同一个视图把五个扩展点串起来 ——
+ * 运行时插件（view.use）、自定义图元（registerSymbol）、自定义条件运算符（registerOperator）
+ * 自定义导出格式（defineExportFormat）与 WebGL 自定义层（addWebGLLayer）。
+ * 每一块都可单独开关，读数里能直接看到注册表与可见数据。
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView, defineExportFormat } from '../../src/index.js'
+import { buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const operatorOn = ref(false)
+const symbolOn = ref(false)
+const pluginOn = ref(false)
+const symbolVariant = ref('cross')
+const webglMounted = ref(false)
+const webglEnabled = ref(false)
+const webglOrder = ref(20)
+const webglDrawCount = ref(0)
+const readout = ref('正在创建视图…')
+const exportText = ref('尚未导出。点上面的按钮，会走 defineExportFormat 注册的同步适配器。')
+
+const dataset = buildDemoData({ count: 18, channels: 0 })
+const points = dataset.points.map((point, index) => ({ ...point, extension_index: index }))
+const lines = dataset.linesWithoutChannel
+
+let view = null
+let disposeOperator = null
+let disposeSymbol = null
+let disposePlugin = null
+let disposeExport = null
+let disposeWebgl = null
+
+/** WebGL 自定义层：按 gl 缓存程序 / 缓冲，draw 里只更新 uniform 与画一笔 */
+const webglResources = new WeakMap()
+const ensureWebglResources = (gl) => {
+	const cached = webglResources.get(gl)
+	if (cached) {
+		return cached
+	}
+	const compile = (type, source) => {
+		const shader = gl.createShader(type)
+		gl.shaderSource(shader, source)
+		gl.compileShader(shader)
+		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+			const reason = gl.getShaderInfoLog(shader)
+			gl.deleteShader(shader)
+			throw new Error(reason || 'shader 编译失败')
+		}
+		return shader
+	}
+	const vertex = compile(gl.VERTEX_SHADER, `
+		attribute vec2 a_position;
+		uniform vec2 u_center;
+		uniform vec2 u_radius;
+		varying vec2 v_uv;
+		void main() {
+			v_uv = a_position;
+			gl_Position = vec4(u_center + a_position * u_radius, 0.0, 1.0);
+		}
+	`)
+	const fragment = compile(gl.FRAGMENT_SHADER, `
+		precision mediump float;
+		varying vec2 v_uv;
+		uniform vec4 u_color;
+		void main() {
+			float d = length(v_uv);
+			float ring = smoothstep(0.62, 0.78, d) * (1.0 - smoothstep(0.92, 1.08, d));
+			float glow = (1.0 - smoothstep(0.0, 1.0, d)) * 0.18;
+			gl_FragColor = vec4(u_color.rgb, u_color.a * (ring + glow));
+		}
+	`)
+	const program = gl.createProgram()
+	gl.attachShader(program, vertex)
+	gl.attachShader(program, fragment)
+	gl.linkProgram(program)
+	gl.deleteShader(vertex)
+	gl.deleteShader(fragment)
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const reason = gl.getProgramInfoLog(program)
+		gl.deleteProgram(program)
+		throw new Error(reason || 'shader program 链接失败')
+	}
+	const vao = gl.createVertexArray()
+	const buffer = gl.createBuffer()
+	gl.bindVertexArray(vao)
+	gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW)
+	const position = gl.getAttribLocation(program, 'a_position')
+	gl.enableVertexAttribArray(position)
+	gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
+	gl.bindVertexArray(null)
+	const resources = {
+		program,
+		vao,
+		center: gl.getUniformLocation(program, 'u_center'),
+		radius: gl.getUniformLocation(program, 'u_radius'),
+		color: gl.getUniformLocation(program, 'u_color')
+	}
+	webglResources.set(gl, resources)
+	return resources
+}
+/** 在内置画面之上画一圈跟着第一节点呼吸的自定义光环（完全用自己的 GL 程序） */
+const drawWebglExtension = ({ gl, canvas, viewport, frame, project }) => {
+	try {
+		const resources = ensureWebglResources(gl)
+		const anchor = points[0] ?? { x: 0, y: 0 }
+		const [x, y] = project(anchor.x, anchor.y)
+		const width = Math.max(viewport.cssWidth, 1)
+		const height = Math.max(viewport.cssHeight, 1)
+		const radius = 18 + Math.sin(frame * 0.12) * 4
+		gl.useProgram(resources.program)
+		gl.bindVertexArray(resources.vao)
+		gl.uniform2f(resources.center, x / width * 2 - 1, 1 - y / height * 2)
+		gl.uniform2f(resources.radius, radius / width, radius / height)
+		gl.uniform4f(resources.color, 0.95, 0.45, 0.18, 0.9)
+		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+		gl.bindVertexArray(null)
+		webglDrawCount.value += 1
+	}
+	catch (error) {
+		emit('notice', `WebGL 自定义层绘制失败：${error instanceof Error ? error.message : String(error)}`)
+	}
+}
+
+/** 自定义图元：外圈实心 + 十字，颜色 / 描边 / 尺寸都取组件递进来的读数 */
+const paintSpark = (context, info) => {
+	const centerX = info.width / 2
+	const centerY = info.height / 2
+	const radius = Math.min(info.width, info.height) * 0.31
+	const stroke = Math.max(1, info.strokeWidth * info.scale)
+	context.clearRect(0, 0, info.width, info.height)
+	context.beginPath()
+	context.arc(centerX, centerY, radius, 0, Math.PI * 2)
+	context.fillStyle = info.color
+	context.fill()
+	context.lineWidth = stroke
+	context.strokeStyle = info.strokeColor
+	context.stroke()
+	context.beginPath()
+	context.moveTo(centerX - radius * 0.52, centerY)
+	context.lineTo(centerX + radius * 0.52, centerY)
+	context.moveTo(centerX, centerY - radius * 0.52)
+	context.lineTo(centerX, centerY + radius * 0.52)
+	context.lineWidth = Math.max(1, stroke * 0.72)
+	context.strokeStyle = 'rgba(255, 255, 255, 0.92)'
+	context.stroke()
+}
+/** 同名覆盖的第二支画笔：菱形，用来演示 registerSymbol 重新注册后贴图与标签锚点一起更新 */
+const paintSparkDiamond = (context, info) => {
+	const centerX = info.width / 2
+	const centerY = info.height / 2
+	const radius = Math.min(info.width, info.height) * 0.42
+	context.clearRect(0, 0, info.width, info.height)
+	context.beginPath()
+	context.moveTo(centerX, centerY - radius)
+	context.lineTo(centerX + radius, centerY)
+	context.lineTo(centerX, centerY + radius)
+	context.lineTo(centerX - radius, centerY)
+	context.closePath()
+	context.fillStyle = info.color
+	context.fill()
+	context.lineWidth = Math.max(1, info.strokeWidth * info.scale)
+	context.strokeStyle = info.strokeColor
+	context.stroke()
+	context.beginPath()
+	context.arc(centerX, centerY, radius * 0.18, 0, Math.PI * 2)
+	context.fillStyle = 'rgba(255, 255, 255, 0.92)'
+	context.fill()
+}
+
+const visiblePointCount = () => view?.getVisibleData()?.points?.length ?? points.length
+const refreshReadout = () => {
+	if (!view) {
+		return
+	}
+	const operators = view.listOperators()
+	const symbols = view.listSymbols()
+	readout.value = [
+		`自定义运算符 ${operators.includes('evenIndex') ? 'evenIndex 已注册' : '未注册'}`,
+		`筛选 ${operatorOn.value ? '开' : '关'}（可见 ${visiblePointCount()} / ${points.length} 个）`,
+		`自定义图元 ${symbols.includes('spark') ? `spark 已注册（${symbolVariant.value === 'diamond' ? '菱形' : '十字'}）` : '未注册'}${symbolOn.value ? ' / 使用中' : ''}`,
+		`运行时插件 ${pluginOn.value ? '已挂载' : '未挂载'}`,
+		`WebGL 上下文 ${view.gl ? '可直接取' : '不可用'}`,
+		`WebGL 层 ${webglMounted.value ? `已挂载 · ${webglEnabled.value ? '绘制中' : '已隐藏'} · order ${webglOrder.value} · draw ${webglDrawCount.value} 次` : '未挂载'}`
+	].join(' · ')
+}
+
+const buildOptions = () => ({
+	points,
+	lines,
+	pointStyle: { size: 8, color: '#ffffff', strokeColor: '#3678bf', strokeWidth: 2 },
+	lineStyle: { width: 1.5, color: 'rgba(120, 168, 226, 0.62)' },
+	showGrid: true,
+	gridColor: 'rgba(126, 168, 214, 0.2)',
+	fitPadding: 40,
+	features: 'view',
+	label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 20, style: { color: '#27405f', fontSize: '11px' } },
+	onReady: () => emit('notice', '扩展能力：已挂载 5 个扩展点')
+})
+
+const toggleOperator = () => {
+	operatorOn.value = !operatorOn.value
+	view?.setFilter(operatorOn.value ? { extension_index: { evenIndex: true } } : null)
+	refreshReadout()
+	emit('notice', operatorOn.value ? '自定义运算符 evenIndex 正在筛选偶数节点' : '已清空自定义筛选')
+}
+
+const toggleSymbol = () => {
+	symbolOn.value = !symbolOn.value
+	// 一次批量补丁：只发一条 updatePoints、只记一步历史（与逐个 updatePoint({ symbol }) 的最终数据一致）
+	const result = view?.patchPoints(points.map(point => point.id), { symbol: symbolOn.value ? 'spark' : null })
+	refreshReadout()
+	emit('notice', symbolOn.value ? `已切到自定义图元 spark（${result?.count ?? 0} 个节点）` : '已回到内置圆形图元')
+}
+const cycleSymbolPainter = () => {
+	if (!view) {
+		return
+	}
+	const next = symbolVariant.value === 'diamond' ? 'cross' : 'diamond'
+	const previous = disposeSymbol
+	disposeSymbol = view.registerSymbol('spark', next === 'diamond' ? paintSparkDiamond : paintSpark)
+	previous?.()
+	symbolVariant.value = next
+	refreshReadout()
+	emit('notice', `同名重新注册 spark：画笔已换成${next === 'diamond' ? '菱形' : '十字'}，画面当场重烘焙`)
+}
+
+const togglePlugin = () => {
+	pluginOn.value = !pluginOn.value
+	if (pluginOn.value) {
+		disposePlugin = view?.use(instance => {
+			const badge = document.createElement('div')
+			badge.className = 'demo-extension-badge'
+			badge.dataset.demo = 'extension-plugin-badge'
+			badge.textContent = 'plugin · view.use()'
+			instance.el.appendChild(badge)
+			return {
+				destroy() {
+					badge.remove()
+				}
+			}
+		}) ?? null
+	}
+	else {
+		disposePlugin?.()
+		disposePlugin = null
+	}
+	refreshReadout()
+	emit('notice', pluginOn.value ? '插件已挂载：左下角出现徽标' : '插件已卸载')
+}
+
+/** 挂载 / 移除 WebGL 自定义层：层本身不改数据，只在每帧最后叠加一圈光环 */
+const toggleWebgl = () => {
+	if (!view) {
+		return
+	}
+	if (webglMounted.value) {
+		view.removeWebGLLayer('extension-webgl')
+		disposeWebgl = null
+		webglMounted.value = false
+		webglEnabled.value = false
+		webglDrawCount.value = 0
+	}
+	else {
+		disposeWebgl = view.addWebGLLayer({
+			id: 'extension-webgl',
+			order: webglOrder.value,
+			enabled: true,
+			draw: drawWebglExtension
+		})
+		webglMounted.value = true
+		webglEnabled.value = true
+		webglDrawCount.value = 0
+	}
+	refreshReadout()
+	emit('notice', webglMounted.value ? 'WebGL 自定义层已挂载：第一个节点外出现自定义光环' : 'WebGL 自定义层已移除')
+}
+/** 只切 enabled：层还留着，跳过 draw 但不丢程序与顺序 */
+const toggleWebglEnabled = () => {
+	if (!view || !webglMounted.value) {
+		return
+	}
+	webglEnabled.value = !webglEnabled.value
+	view.updateWebGLLayer('extension-webgl', { enabled: webglEnabled.value })
+	refreshReadout()
+	emit('notice', webglEnabled.value ? 'WebGL 自定义层恢复绘制' : 'WebGL 自定义层已隐藏（enabled: false）')
+}
+/** 换 order：单层时看不出叠放差异，但读数与 getWebGLLayers 的排序会跟着变 */
+const cycleWebglOrder = () => {
+	if (!view || !webglMounted.value) {
+		return
+	}
+	webglOrder.value = webglOrder.value === 20 ? 40 : 20
+	view.updateWebGLLayer('extension-webgl', { order: webglOrder.value })
+	refreshReadout()
+	emit('notice', `WebGL 自定义层 order 改为 ${webglOrder.value}`)
+}
+const requestWebglFrame = () => {
+	view?.requestRender()
+	refreshReadout()
+	emit('notice', '已调用 requestRender()：下一帧会重新执行自定义层的 draw')
+}
+
+const exportSummary = () => {
+	if (!view) {
+		return
+	}
+	try {
+		const result = view.exportData({ format: 'extension-summary', labels: false })
+		exportText.value = JSON.stringify(result, null, 2)
+		emit('notice', `自定义导出完成：${result.highLoadCount} 个高负载节点`)
+	}
+	catch (error) {
+		exportText.value = `导出失败：${error instanceof Error ? error.message : String(error)}`
+	}
+}
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
+	disposeOperator = view.registerOperator('evenIndex', enabled => current => !enabled || Number(current) % 2 === 0)
+	disposeSymbol = view.registerSymbol('spark', paintSpark)
+	disposeExport = defineExportFormat('extension-summary', ({ document, counts }) => {
+		const highLoad = document.points.filter(point => Number(point.max_loading_rate) >= 1)
+		return {
+			schema: 'gis-view.extension-summary.v1',
+			counts,
+			highLoadCount: highLoad.length,
+			highLoadStations: highLoad.map(point => ({
+				id: point.id,
+				name: point.name,
+				load: point.max_loading_rate
+			}))
+		}
+	})
+	refreshReadout()
+})
+
+onBeforeUnmount(() => {
+	disposePlugin?.()
+	disposePlugin = null
+	disposeSymbol?.()
+	disposeSymbol = null
+	disposeOperator?.()
+	disposeOperator = null
+	disposeExport?.()
+	disposeExport = null
+	disposeWebgl?.()
+	disposeWebgl = null
+	view?.destroy()
+	view = null
+})
+</script>
+
+<template>
+	<section class="dv-demo">
+		<div class="dv-stage">
+			<div ref="container" class="dv-canvas"></div>
+			<div class="dv-toolbar">
+				<button type="button" @click="view?.fitView(40)">适应全部</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>五个扩展点</h3>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': operatorOn }"
+						:aria-pressed="operatorOn"
+						data-demo="extension-operator"
+						@click="toggleOperator"
+					>{{ operatorOn ? '关闭自定义筛选' : '自定义运算符筛选' }}</button>
+				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': symbolOn }"
+						:aria-pressed="symbolOn"
+						data-demo="extension-symbol"
+						@click="toggleSymbol"
+					>{{ symbolOn ? '换回内置圆形' : '使用自定义图元' }}</button>
+					<button type="button" class="dv-button" :disabled="!symbolOn" data-demo="extension-symbol-variant" @click="cycleSymbolPainter">同名换画笔</button>
+				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': pluginOn }"
+						:aria-pressed="pluginOn"
+						data-demo="extension-plugin"
+						@click="togglePlugin"
+					>{{ pluginOn ? '卸载运行时插件' : '挂载运行时插件' }}</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="extension-export" @click="exportSummary">自定义格式导出</button>
+				</div>
+				<div class="dv-row">
+					<button
+						type="button"
+						class="dv-button"
+						:class="{ 'dv-button--primary': webglMounted }"
+						:aria-pressed="webglMounted"
+						data-demo="extension-webgl"
+						@click="toggleWebgl"
+					>{{ webglMounted ? '移除 WebGL 自定义层' : '挂载 WebGL 自定义层' }}</button>
+					<button type="button" class="dv-button" :disabled="!webglMounted" data-demo="extension-webgl-enabled" @click="toggleWebglEnabled">{{ webglEnabled ? '隐藏层' : '显示层' }}</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" :disabled="!webglMounted" data-demo="extension-webgl-order" @click="cycleWebglOrder">order {{ webglOrder }}（切换）</button>
+					<button type="button" class="dv-button" :disabled="!webglMounted" data-demo="extension-webgl-request" @click="requestWebglFrame">requestRender()</button>
+				</div>
+				<p class="dv-hint">运算符注册进条件语言，图元注册进符号表，插件挂在实例上，导出格式挂在模块注册表，WebGL 层直接拿 <code>gl</code> 在内置内容之后画自己的东西；五者都不需要改组件源码。图元切换走一次 <code>patchPoints</code> 批量补丁，WebGL 层可用 <code>enabled</code> / <code>order</code> 原地维护。</p>
+			</div>
+			<div class="dv-group">
+				<h3>注册表读数</h3>
+				<p class="dv-readout" data-demo="extension-readout" aria-live="polite">{{ readout }}</p>
+			</div>
+			<div class="dv-group">
+				<h3>导出结果</h3>
+				<pre class="dv-readout demo-extension-export" data-demo="extension-export-text">{{ exportText }}</pre>
+			</div>
+		</aside>
+	</section>
+</template>
+
+<style scoped>
+.demo-extension-export {
+	max-height: 190px;
+	margin: 0;
+	overflow: auto;
+	white-space: pre-wrap;
+	word-break: break-all;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+	font-size: 11px;
+}
+
+:global(.demo-extension-badge) {
+	position: absolute;
+	left: 10px;
+	bottom: 10px;
+	z-index: 4;
+	padding: 5px 9px;
+	border: 1px solid rgba(54, 120, 191, 0.35);
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.9);
+	color: #2f5e94;
+	font-size: 11px;
+	line-height: 1.4;
+	pointer-events: none;
+	box-shadow: 0 4px 14px rgba(31, 62, 105, 0.14);
+}
+</style>