gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/GraphicDemo.vue

@@ -0,0 +1,338 @@
+<script setup>
+/**
+ * 扩展图形（graphic）：同一张画布上放 SVG 路径、图片与外部 Canvas。
+ *
+ * 这一页只演示 graphics 这一层：三类图形都按世界坐标锚定，相机平移 / 缩放时只更新
+ * DOM；右侧可以现场改透明度 / 旋转 / 层级与 scaleWithView，用公开的增删改方法验证
+ * getGraphics() 读数。图形层不参与拾取，也不进入数据与历史。
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { DEMO_CENTER, buildDemoData } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const countText = ref('—')
+const detailText = ref('—')
+const eventText = ref('正在创建视图…')
+const scaleWithView = ref(false)
+const opacity = ref(0.9)
+const rotation = ref(-8)
+const zIndex = ref(6)
+
+const dataset = buildDemoData({ count: 18, channels: 1 })
+const IMAGE_SRC = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <rect x="4" y="4" width="88" height="88" rx="18" fill="#ffffff" stroke="#3678bf" stroke-width="6"/>
+  <circle cx="48" cy="38" r="17" fill="#eaf2fc" stroke="#3678bf" stroke-width="4"/>
+  <path d="M28 76l12-15 9 10 10-14 10 19z" fill="#4fd1a5"/>
+  <text x="48" y="86" text-anchor="middle" font-family="sans-serif" font-size="14" fill="#2f5e94">IMAGE</text>
+</svg>`)}`
+
+let view = null
+let addedSeed = 0
+let imageOffset = 0
+const addedIds = []
+
+const createCanvas = () => {
+	const canvas = document.createElement('canvas')
+	canvas.width = 220
+	canvas.height = 64
+	const context = canvas.getContext('2d')
+	const gradient = context.createLinearGradient(0, 0, 220, 0)
+	gradient.addColorStop(0, '#1f5f9f')
+	gradient.addColorStop(1, '#39a77c')
+	context.fillStyle = gradient
+	context.fillRect(0, 0, 220, 64)
+	context.fillStyle = 'rgba(255, 255, 255, 0.9)'
+	context.fillRect(12, 12, 4, 40)
+	context.font = '600 20px sans-serif'
+	context.fillText('Canvas', 30, 40)
+	context.font = '12px sans-serif'
+	context.fillStyle = 'rgba(255, 255, 255, 0.72)'
+	context.fillText('外部画布直接挂进图形层', 108, 39)
+	return canvas
+}
+
+const buildGraphics = () => [
+	{
+		id: 'graphic-zone',
+		type: 'path',
+		x: DEMO_CENTER[0],
+		y: DEMO_CENTER[1],
+		width: 300,
+		height: 180,
+		viewBox: [0, 0, 300, 180],
+		d: 'M20 0H280A20 20 0 0 1 300 20V160A20 20 0 0 1 280 180H20A20 20 0 0 1 0 160V20A20 20 0 0 1 20 0Z',
+		anchor: 'center',
+		fill: 'rgba(54, 120, 191, 0.08)',
+		stroke: '#3678bf',
+		strokeWidth: 2,
+		lineDash: [9, 6],
+		zIndex: 1,
+		scaleWithView: true
+	},
+	{
+		id: 'graphic-image',
+		type: 'image',
+		src: IMAGE_SRC,
+		alt: '扩展图形图片示例',
+		x: DEMO_CENTER[0] - 1.1,
+		y: DEMO_CENTER[1] + 0.55,
+		width: 62,
+		height: 62,
+		anchor: 'center',
+		rotation: rotation.value,
+		opacity: opacity.value,
+		zIndex: zIndex.value,
+		scaleWithView: scaleWithView.value
+	},
+	{
+		id: 'graphic-canvas',
+		type: 'canvas',
+		canvas: createCanvas(),
+		x: DEMO_CENTER[0] + 1.0,
+		y: DEMO_CENTER[1] - 0.7,
+		width: 154,
+		height: 45,
+		anchor: 'center',
+		zIndex: 4,
+		scaleWithView: scaleWithView.value
+	}
+]
+const baseIds = new Set(['graphic-zone', 'graphic-image', 'graphic-canvas'])
+
+const describe = (item) => item
+	? `${item.id} · ${item.type} · (${item.x.toFixed(2)}, ${item.y.toFixed(2)}) · ${Math.round(item.width)}×${Math.round(item.height)} · z=${item.zIndex}`
+	: '没有这一条'
+
+const refreshReadout = () => {
+	if (!view) {
+		return
+	}
+	const list = view.getGraphics()
+	countText.value = `${list.length} 个（基础 3 个 + 运行时 ${Math.max(list.length - 3, 0)} 个）· z 序 ${list.map(item => item.id).join(' → ')}`
+	detailText.value = describe(view.getGraphic('graphic-image'))
+}
+
+const note = (text) => {
+	eventText.value = text
+	refreshReadout()
+}
+
+const applyImageStyle = () => {
+	if (!view) {
+		return
+	}
+	const updated = view.updateGraphic('graphic-image', {
+		rotation: Number(rotation.value),
+		opacity: Number(opacity.value),
+		zIndex: Number(zIndex.value)
+	})
+	note(updated ? `updateGraphic：图片旋转 ${updated.rotation}° / 透明度 ${updated.opacity} / z=${updated.zIndex}` : 'updateGraphic：图片不存在')
+}
+
+const nudgeImage = () => {
+	if (!view) {
+		return
+	}
+	imageOffset = imageOffset === 0 ? 36 : 0
+	const updated = view.updateGraphic('graphic-image', { offset: [imageOffset, 0] })
+	note(updated ? `updateGraphic：offset 改为 [${imageOffset}, 0]` : 'updateGraphic：图片不存在')
+}
+
+const applyScaleWithView = () => {
+	if (!view) {
+		return
+	}
+	view.updateGraphic('graphic-image', { scaleWithView: scaleWithView.value })
+	view.updateGraphic('graphic-canvas', { scaleWithView: scaleWithView.value })
+	note(scaleWithView.value ? '图片 / Canvas 改为随相机缩放' : '图片 / Canvas 改为保持屏幕像素尺寸')
+}
+
+const addOne = () => {
+	if (!view) {
+		return
+	}
+	addedSeed += 1
+	const angle = addedSeed * 0.85
+	const item = view.addGraphic({
+		id: `graphic-marker-${addedSeed}`,
+		type: 'path',
+		x: DEMO_CENTER[0] + Math.cos(angle) * 0.95,
+		y: DEMO_CENTER[1] + Math.sin(angle) * 0.66,
+		width: 22,
+		height: 22,
+		viewBox: [0, 0, 22, 22],
+		d: 'M11 0L22 11L11 22L0 11Z',
+		anchor: 'center',
+		fill: '#ef476f',
+		stroke: '#ffffff',
+		strokeWidth: 2,
+		zIndex: 8
+	})
+	if (item) {
+		addedIds.push(item.id)
+	}
+	note(item ? `addGraphic：新增 ${item.id}` : 'addGraphic：参数无效')
+}
+
+const addMany = () => {
+	if (!view) {
+		return
+	}
+	const start = addedSeed
+	addedSeed += 2
+	const batch = [0, 1].map(slot => ({
+		id: `graphic-marker-${start + slot + 1}`,
+		type: 'path',
+		x: DEMO_CENTER[0] - 0.8 + slot * 0.42,
+		y: DEMO_CENTER[1] - 0.92,
+		width: 18,
+		height: 18,
+		viewBox: [0, 0, 18, 18],
+		d: 'M0 0H18V18H0Z',
+		anchor: 'center',
+		fill: slot ? '#f2a33c' : '#06d6a0',
+		stroke: '#ffffff',
+		strokeWidth: 2,
+		zIndex: 7,
+		rotation: slot ? 45 : 0
+	}))
+	const added = view.addGraphics(batch)
+	addedIds.push(...added.map(item => item.id))
+	note(`addGraphics：一次加入 ${added.length} 个标记`)
+}
+
+const removeLatest = () => {
+	if (!view) {
+		return
+	}
+	let id = addedIds.pop()
+	if (!id) {
+		id = [...view.getGraphics()].reverse().find(item => !baseIds.has(item.id))?.id
+	}
+	const removed = id ? view.removeGraphic(id) : null
+	note(removed ? `removeGraphic：删掉 ${removed.id}` : 'removeGraphic：没有运行时新增的图形可删')
+}
+
+const clearAll = () => {
+	if (!view) {
+		return
+	}
+	const count = view.clearGraphics()
+	addedIds.length = 0
+	note(`clearGraphics：清空 ${count} 个图形`)
+}
+
+const resetAll = () => {
+	if (!view) {
+		return
+	}
+	addedIds.length = 0
+	imageOffset = 0
+	view.updateOptions({ graphics: buildGraphics() })
+	note('updateOptions({ graphics })：恢复三类基础图形')
+}
+
+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,
+		graphics: buildGraphics(),
+		pointStyle: { size: 6, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
+		lineStyle: { width: 1.4, color: 'rgba(120, 168, 226, 0.52)' },
+		channelWidth: 2.2,
+		showGrid: true,
+		gridColor: 'rgba(126, 168, 214, 0.2)',
+		fitPadding: 44,
+		features: 'view',
+		label: { enabled: true, content: '{name}', position: 'top', gap: 7, maxCount: 20, style: { color: '#27405f', fontSize: '11px' } },
+		onReady: () => {
+			emit('notice', '扩展图形：SVG 路径 / 图片 / Canvas 三类都已挂到画布上')
+			refreshReadout()
+		},
+		onWarning: text => {
+			eventText.value = `warning：${text}`
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	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="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>三类图形</h3>
+				<p class="dv-hint">蓝框是 SVG <code>path</code>，左侧是内联 SVG 图片，右侧色块是外部 <code>HTMLCanvasElement</code>。三者都按世界坐标锚定，相机移动时只改这一层 DOM。</p>
+				<div class="dv-row">
+					<label><input v-model="scaleWithView" type="checkbox" data-demo="graphic-scale" @change="applyScaleWithView" /> 图片 / Canvas 随地图缩放</label>
+				</div>
+				<p class="dv-hint">不勾选时宽高保持屏幕像素；勾选后 zoomBy 会改变它们的屏幕尺寸。蓝框固定为 <code>scaleWithView: true</code>，方便对比。</p>
+			</div>
+			<div class="dv-group">
+				<h3>图片参数（updateGraphic）</h3>
+				<div class="dv-row">
+					<label>旋转
+						<input v-model.number="rotation" type="range" min="-180" max="180" step="1" data-demo="graphic-rotation" @input="applyImageStyle" />
+						<span>{{ rotation }}°</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label>透明度
+						<input v-model.number="opacity" type="range" min="0.1" max="1" step="0.05" data-demo="graphic-opacity" @input="applyImageStyle" />
+						<span>{{ opacity.toFixed(2) }}</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label>层级
+						<input v-model.number="zIndex" type="range" min="0" max="10" step="1" data-demo="graphic-zindex" @input="applyImageStyle" />
+						<span>{{ zIndex }}</span>
+					</label>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="graphic-nudge" @click="nudgeImage">平移 36px</button>
+				</div>
+			</div>
+			<div class="dv-group">
+				<h3>运行时增删改</h3>
+				<div class="dv-row">
+					<button type="button" class="dv-button dv-button--primary" data-demo="graphic-add" @click="addOne">addGraphic</button>
+					<button type="button" class="dv-button" data-demo="graphic-add-many" @click="addMany">addGraphics ×2</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="graphic-remove" @click="removeLatest">removeGraphic</button>
+					<button type="button" class="dv-button dv-button--danger" data-demo="graphic-clear" @click="clearAll">clearGraphics</button>
+				</div>
+				<div class="dv-row">
+					<button type="button" class="dv-button" data-demo="graphic-reset" @click="resetAll">恢复初始图形</button>
+				</div>
+				<p class="dv-hint">增删改只动图形层，<code>getData()</code>、历史与选中集都不受影响；批量新增只触发一次变更回调。</p>
+			</div>
+			<div class="dv-group">
+				<h3>读数</h3>
+				<p class="dv-readout" data-demo="graphic-count">{{ countText }}</p>
+				<p class="dv-readout" data-demo="graphic-detail">{{ detailText }}</p>
+				<p class="dv-readout" data-demo="graphic-event" aria-live="polite">{{ eventText }}</p>
+			</div>
+		</aside>
+	</section>
+</template>