gis-view-webgl2 0.1.2 → 0.1.3

package/docs/demos/gis-view-demo/panels/ViewPanels.vue

@@ -0,0 +1,396 @@
+<script setup>
+import { useGisViewDemoContext } from '../demoContext.js'
+const {
+	SMALL_SCALE, LARGE_SCALE, hostZoom, hostScaleText, building, scale, showGrid, activePanel, BACKGROUND_MODES,
+	backgroundMode, backgroundOpacity, BACKGROUND_SOURCES, backgroundSource, backgroundImageFit,
+	backgroundImageCorners, provinceAspectScale, provincePalette, provinceLabelShow, provinceLabelSize,
+	provinceLabelColor, provinceLoading, INITIAL_VIEW_MODES, initialViewMode, initialZoom, initialCenterText,
+	initialViewReadout, draggable, liveDrag, liveDragHint, clickable, boxSelect, multiSelect, selectionBoxMode,
+	SHORTCUT_MODES, shortcutBoxSelect, shortcutMultiSelect, shortcutAddWaypoint, shortcutDuplicate,
+	shortcutReadout, COPY_OFFSETS, copyEnabled, copyOffsetMode, mergeEnabled, mergeTrigger, MERGE_TRIGGERS,
+	mergeDistance, MERGE_CONFIRM_MODES, mergeConfirmMode, mergeChannelGroups, selectionOnTop, copyRollback,
+	removeReadout, channelSelectMode, removeByApi, copyReadout, mergeReadout, mergeSelectedReadout,
+	mergeSelectedTarget, mergeTargetOptions, exportWithLines, exportReadout, exportFormat, exportBackground,
+	waypointEditable, waypointAlways, pointSelectMode, lineSelectMode, pointMultiSelectMode, pointBoxSelectMode,
+	lineMultiSelectMode, hoverHighlight, defaultHighlight, cascadeHighlightEnabled, cascadeHighlightScope,
+	cascadeTriggerOnClick, cascadeTriggerOnMultiSelect, cascadeTriggerOnBoxSelect,
+	cascadeReadout, CASCADE_HIGHLIGHT_SCOPES, readCascadeHighlight, datasetMode, DATASET_PROJECTIONS, datasetProjection,
+	datasetProjectionScale, datasetProjectionReadout, convertLngLatText, convertScreenText, convertReadout,
+	applyDatasetMapping, mergeSelectedByApi, exportSelectionImage, exportSelectedRecords, exportWholeImage,
+	startCopyPick, copyPointByApi, copyThenPaste, frameProvince, applyBackground, backgroundHint,
+	convertFromLngLat, convertFromScreen, applyInitialViewFromControls, minScale, maxScale, scaleLimitReadout,
+	applyScaleLimits, useCurrentScaleLimits, clearScaleLimits, testScaleLimit, toggleDraggable, selectionReadout,
+	selectedItemsJson, readSelectionByApi,
+} = useGisViewDemoContext()
+</script>
+
+<template>
+				<div v-show="activePanel === 'view-initial'" class="demo-panel-body">
+				<div class="demo-controls">
+					<label class="demo-slider">
+						初始视图
+						<select v-model="initialViewMode" @change="applyInitialViewFromControls">
+							<option v-for="item in INITIAL_VIEW_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+						</select>
+					</label>
+					<label v-if="initialViewMode === 'custom'" class="demo-slider">
+						中心
+						<input v-model="initialCenterText" type="text" placeholder="留空 = 数据范围中心" @change="applyInitialViewFromControls" />
+					</label>
+					<label v-if="initialViewMode === 'custom'" class="demo-slider">
+						倍数
+						<input v-model.number="initialZoom" type="number" min="0.1" max="20" step="0.1" @change="applyInitialViewFromControls" />
+					</label>
+					<button type="button" @click="applyInitialViewFromControls">重新套用初始视图</button>
+					<span class="demo-control-hint">{{ initialViewReadout }}</span>
+				</div>
+				<div class="demo-controls">
+					<label class="demo-slider">
+						最小比例
+						<input v-model.number="minScale" type="number" min="0.000001" step="0.01" @change="applyScaleLimits" />
+					</label>
+					<label class="demo-slider">
+						最大比例
+						<input v-model.number="maxScale" type="number" min="0.000001" step="10" @change="applyScaleLimits" />
+					</label>
+					<button type="button" @click="useCurrentScaleLimits">以当前比例设限（÷5 ~ ×5）</button>
+					<button type="button" @click="testScaleLimit('min')">试一下下限</button>
+					<button type="button" @click="testScaleLimit('max')">试一下上限</button>
+					<button type="button" @click="clearScaleLimits">解除限制</button>
+					<span class="demo-control-hint">{{ scaleLimitReadout }} —— 滚轮 / 双击 / setCamera 都会被夹住</span>
+				</div>
+				<div class="demo-controls">
+					<label class="demo-slider">
+						背景来源
+						<select v-model="backgroundSource">
+							<option v-for="item in BACKGROUND_SOURCES" :key="item.value" :value="item.value">{{ item.label }}</option>
+						</select>
+					</label>
+					<label v-if="backgroundSource === 'basemap'" class="demo-slider">
+						底图样式
+						<select v-model="backgroundMode">
+							<option v-for="item in BACKGROUND_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+						</select>
+					</label>
+					<label class="demo-slider">
+						背景透明度
+						<input v-model.number="backgroundOpacity" type="range" min="0" max="1" step="0.05" />
+						<span>{{ Math.round(backgroundOpacity * 100) }}%</span>
+					</label>
+					<button type="button" @click="applyBackground()">{{ backgroundSource === 'province' ? '重新应用' : '重新生成底图' }}</button>
+				</div>
+				<div v-if="backgroundSource === 'image' || backgroundSource === 'canvas' || backgroundSource === 'path'" class="demo-controls">
+					<label class="demo-slider">
+						铺法
+						<select v-model="backgroundImageFit">
+							<option value="contain">contain 等比铺满</option>
+							<option value="cover">cover 铺满裁剪</option>
+							<option value="stretch">stretch 拉伸</option>
+							<option value="center">center 原尺寸居中</option>
+						</select>
+					</label>
+					<label v-if="backgroundSource === 'image'" class="demo-slider">
+						<input v-model="backgroundImageCorners" type="checkbox" />
+						四角坐标定位（任意四边形）
+					</label>
+					<label v-if="backgroundSource === 'path'" class="demo-slider">
+						<span>pathStyle 填充 / 描边在代码里配</span>
+					</label>
+				</div>
+				<div v-if="backgroundSource === 'province'" class="demo-controls">
+					<label class="demo-slider">
+						aspectScale
+						<input v-model.number="provinceAspectScale" type="range" min="0.4" max="1.2" step="0.05" />
+						<span>{{ provinceAspectScale.toFixed(2) }}</span>
+					</label>
+					<label class="demo-slider">
+						区域配色
+						<select v-model="provincePalette">
+							<option value="plain">统一色</option>
+							<option value="regions">按区域名（regions）</option>
+							<option value="itemStyle">调色板（itemStyle）</option>
+						</select>
+					</label>
+					<label class="demo-slider">
+						<input v-model="provinceLabelShow" type="checkbox" />
+						区域文字
+					</label>
+					<label v-if="provinceLabelShow" class="demo-slider">
+						字号
+						<input v-model.number="provinceLabelSize" type="range" min="8" max="16" step="1" />
+						<span>{{ provinceLabelSize }}px</span>
+					</label>
+					<label v-if="provinceLabelShow" class="demo-slider">
+						文字颜色
+						<input v-model="provinceLabelColor" type="color" />
+					</label>
+					<button type="button" @click="frameProvince">定位到全省范围</button>
+					<span v-if="provinceLoading" class="demo-control-hint">正在加载全省 GeoJSON…</span>
+				</div>
+				<span class="demo-control-hint">{{ backgroundHint }}</span>
+				</div>
+
+				<div v-show="activePanel === 'view-coords'" class="demo-panel-body">
+			<div class="demo-controls">
+				<span class="demo-control-hint">lngLatToScreen / screenToLngLat · project / unproject</span>
+				<label class="demo-slider">
+					经纬度
+					<input v-model="convertLngLatText" type="text" placeholder="118.8, 32.1" @change="convertFromLngLat" />
+				</label>
+				<button type="button" @click="convertFromLngLat">经纬度 → 屏幕</button>
+				<label class="demo-slider">
+					屏幕 px
+					<input v-model="convertScreenText" type="text" placeholder="240, 180" @change="convertFromScreen" />
+				</label>
+				<button type="button" @click="convertFromScreen">屏幕 → 经纬度</button>
+				<span class="demo-control-hint">{{ convertReadout }}</span>
+			</div>
+				</div>
+
+				<div v-show="activePanel === 'view-data'" class="demo-panel-body">
+			<div class="demo-controls">
+				<label class="demo-slider">
+					数据集
+					<select v-model="datasetMode" :disabled="building">
+						<option value="new">真实数据 new.json（站点 / 通道）</option>
+						<option value="sample">样例数据 test.json</option>
+						<option value="synthetic">合成数据（可调规模）</option>
+					</select>
+				</label>
+				<label>
+					规模
+						<select v-model.number="scale" :disabled="building || datasetMode !== 'synthetic'">
+							<option :value="SMALL_SCALE">{{ SMALL_SCALE }} 节点 / 线路</option>
+							<option :value="5000">5000 节点 / 线路</option>
+							<option :value="LARGE_SCALE">10 万节点 / 线路</option>
+						</select>
+					</label>
+					<span class="demo-control-hint">合成数据的节点与线路都带 max_loading_rate（「热力图」面板可按种子重新随机一份）</span>
+					<label class="demo-slider">
+						数据映射
+						<select v-model="datasetProjection" title="把数据集坐标搬到 GeoJSON 底图坐标系：raw 不搬、lngLat 经纬度完全贴合、fit 等比铺进去、scale 按大小比例缩放">
+							<option v-for="item in DATASET_PROJECTIONS" :key="item.value" :value="item.value">{{ item.label }}</option>
+						</select>
+					</label>
+					<label v-if="datasetProjection !== 'raw'" class="demo-slider">
+						节点 / geojson 比例
+						<input v-model.number="datasetProjectionScale" type="range" min="0.1" max="3" step="0.05" />
+						<span>{{ datasetProjectionScale.toFixed(2) }}×</span>
+					</label>
+					<button type="button" :disabled="datasetProjection === 'raw'" @click="applyDatasetMapping">重新映射数据</button>
+					<span class="demo-control-hint">映射：{{ datasetProjectionReadout }}</span>
+					<label><input v-model="showGrid" type="checkbox" /> 网格</label>
+			</div>
+				</div>
+
+				<div v-show="activePanel === 'view-interact'" class="demo-panel-body">
+			<div class="demo-controls">
+				<label><input :checked="draggable" type="checkbox" @change="toggleDraggable($event.target.checked)" /> 拖拽节点</label>
+				<label><input v-model="liveDrag" type="checkbox" /> 线路实时跟随</label>
+				<span class="demo-control-hint">{{ liveDragHint }}</span>
+				<label><input v-model="clickable" type="checkbox" /> 可点击</label>
+				<label><input v-model="boxSelect" type="checkbox" /> 框选</label>
+				<label><input v-model="multiSelect" type="checkbox" /> 点击多选（multiSelect：不用按修饰键，单击即取反累加）</label>
+				<label><input v-model="waypointEditable" type="checkbox" /> 可编辑拐点</label>
+				<label><input v-model="waypointAlways" type="checkbox" /> 拐点始终显示</label>
+				<label><input v-model="hoverHighlight" type="checkbox" /> 悬停强调</label>
+				<label class="demo-slider">
+					宿主缩放 · 父元素 zoom
+					<input v-model.number="hostZoom" type="range" min="0.75" max="1.5" step="0.05" />
+					<span>{{ hostZoom.toFixed(2) }}×</span>
+				</label>
+				<span class="demo-control-hint">displayScale {{ hostScaleText }} —— 滑杆改的是画布外面那一层（.demo-stage）的 CSS zoom：组件按布局像素自适应，线宽 / 字号跟着一起缩放，画布备份像素按「设备像素比 × 显示比例」开，指针命中不用换算，鹰眼图跟着重铺</span>
+				<label><input v-model="defaultHighlight" type="checkbox" /> 未配样式的内置强调</label>
+				<label><input v-model="cascadeHighlightEnabled" data-demo="cascade-highlight-enabled" type="checkbox" /> 点击级联高亮（cascadeHighlight，与选中集独立）</label>
+				<label class="demo-slider">
+					级联范围
+					<select v-model="cascadeHighlightScope" data-demo="cascade-highlight-scope" :disabled="!cascadeHighlightEnabled">
+						<option v-for="item in CASCADE_HIGHLIGHT_SCOPES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<span class="demo-control-hint">触发方式（彼此独立）</span>
+				<label><input v-model="cascadeTriggerOnClick" data-demo="cascade-trigger-click" type="checkbox" :disabled="!cascadeHighlightEnabled" /> 单击</label>
+				<label><input v-model="cascadeTriggerOnMultiSelect" data-demo="cascade-trigger-multi" type="checkbox" :disabled="!cascadeHighlightEnabled" /> 多选</label>
+				<label><input v-model="cascadeTriggerOnBoxSelect" data-demo="cascade-trigger-box" type="checkbox" :disabled="!cascadeHighlightEnabled" /> 框选</label>
+				<button type="button" data-demo="cascade-highlight-read" @click="readCascadeHighlight()">读取 getCascadeHighlight()</button>
+				<span class="demo-control-hint" data-demo="cascade-highlight-readout">{{ cascadeReadout }}</span>
+				<label class="demo-slider">
+					快捷键 · 框选
+					<select v-model="shortcutBoxSelect">
+						<option v-for="item in SHORTCUT_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					快捷键 · 多选
+					<select v-model="shortcutMultiSelect">
+						<option v-for="item in SHORTCUT_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					快捷键 · 加点
+					<select v-model="shortcutAddWaypoint">
+						<option v-for="item in SHORTCUT_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					快捷键 · 复制
+					<select v-model="shortcutDuplicate">
+						<option v-for="item in SHORTCUT_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<span class="demo-control-hint">{{ shortcutReadout }}</span>
+			</div>
+				</div>
+
+				<div v-show="activePanel === 'view-copy'" class="demo-panel-body">
+			<div class="demo-controls">
+				<label><input v-model="copyEnabled" type="checkbox" /> 可复制节点（Alt 点节点跟随鼠标，松开落地）</label>
+				<label class="demo-slider">
+					复制落点偏移
+					<select v-model="copyOffsetMode">
+						<option v-for="item in COPY_OFFSETS" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<button type="button" @click="startCopyPick()">先点按钮再选节点（复制到旁边）</button>
+				<button type="button" @click="copyPointByApi()">复制选中 / 光标下的节点</button>
+				<button type="button" @click="copyThenPaste()">复制到剪贴板 → 粘贴</button>
+				<span class="demo-control-hint">{{ copyReadout }}</span>
+				<label><input v-model="copyRollback" type="checkbox" /> 复制后模拟「接口失败」：立刻 payload.revert() 回滚</label>
+				<label><input v-model="mergeEnabled" type="checkbox" /> 可合并节点（拖动一个节点撞上另一个）</label>
+				<label class="demo-slider">
+					合并触发时机
+					<select v-model="mergeTrigger">
+						<option v-for="item in MERGE_TRIGGERS" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					合并容差
+					<input v-model.number="mergeDistance" type="range" min="0" max="40" step="1" />
+					<span>{{ mergeDistance }} px</span>
+				</label>
+				<label class="demo-slider">
+					合并确认
+					<select v-model="mergeConfirmMode">
+						<option v-for="item in MERGE_CONFIRM_MODES" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					通道合并分组
+					<select v-model="mergeChannelGroups">
+						<option value="keep">各自保留分组（keep）</option>
+						<option value="merge">合成一个分组（merge）</option>
+					</select>
+				</label>
+				<label><input v-model="selectionOnTop" type="checkbox" /> 选中 / 拖动 / 待合并的要素与选中通道画在最上层（selectionOnTop）</label>
+				<span class="demo-control-hint">{{ mergeReadout }}</span>
+				<span class="demo-control-hint" data-demo="merge-style-hint">「合并样式」不是一项额外配置，而是合并后保留节点最终写进数据的 <code>size</code> 与 <code>symbol</code>：尺寸取双方较大值，图标优先目标节点。它决定合并后的外观，可在 <code>merge.createItem()</code> 或 <code>payload.item</code> 里改写。</span>
+				<label class="demo-slider">
+					批量合并以谁为主
+					<select v-model="mergeSelectedTarget">
+						<option v-for="item in mergeTargetOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
+					</select>
+				</label>
+				<button type="button" @click="mergeSelectedByApi()">合并选中的节点（框选 / 多选之后一步并拢）</button>
+				<span class="demo-control-hint">{{ mergeSelectedReadout }}</span>
+				<label class="demo-slider">
+					通道选中模式
+					<select v-model="channelSelectMode" title="点中通道里的回线时选中什么：只选这一条 / 连所在分组 / 连整条通道（Ctrl + 点击在 group / channel 下整批取反）">
+						<option value="line">line（只选点中的回线）</option>
+						<option value="group">group（连所在分组）</option>
+						<option value="channel">channel（连整条通道）</option>
+					</select>
+				</label>
+				<button type="button" @click="removeByApi()">删除选中（requestRemove，与 Delete 同一条路）</button>
+				<span class="demo-control-hint">{{ removeReadout }}</span>
+			</div>
+				</div>
+
+				<div v-show="activePanel === 'view-export'" class="demo-panel-body">
+			<div class="demo-controls">
+				<label class="demo-slider">
+					导出格式
+					<select v-model="exportFormat" title="PNG 是位图（画布 + DOM 标签合成），SVG 是矢量（线 / 点 / 符号 / 标签都是 SVG 元素，放大不糊）">
+						<option value="png">PNG（位图）</option>
+						<option value="svg">SVG（矢量）</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					背景
+					<select v-model="exportBackground" title="带背景 = 跟画面上一样；透明底 = 背景色 / 底图 / 区域填充与网格都不画；白底 = 只把最底下那层底色换成白色（底图 / 网格照旧）">
+						<option value="view">带背景（跟画面一样）</option>
+						<option value="none">不带背景（透明底）</option>
+						<option value="white">白底（#ffffff）</option>
+					</select>
+				</label>
+				<button type="button" @click="exportWholeImage()">导出整幅画面</button>
+				<span class="demo-control-hint">导出的是当前这一帧：格式与背景对「整幅」和「选中」两边都管用</span>
+				<label><input v-model="exportWithLines" type="checkbox" /> 导出选中时携带线路（两端都在选中集里的）</label>
+				<button type="button" @click="exportSelectionImage()">导出选中为图片</button>
+				<button type="button" @click="exportSelectedRecords()">导出选中为数据</button>
+				<span class="demo-control-hint">{{ exportReadout }}</span>
+				<label class="demo-slider">
+					选中点样式
+					<select v-model="pointSelectMode">
+						<option value="default">不配样式</option>
+						<option value="custom">自定义</option>
+						<option value="plain">不改变</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					选中线样式
+					<select v-model="lineSelectMode">
+						<option value="default">不配样式</option>
+						<option value="custom">自定义</option>
+						<option value="plain">不改变</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					多选点样式
+					<select v-model="pointMultiSelectMode">
+						<option value="default">同选中样式</option>
+						<option value="custom">自定义（绿）</option>
+						<option value="plain">不改变</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					框选点样式
+					<select v-model="pointBoxSelectMode">
+						<option value="default">同选中样式</option>
+						<option value="custom">自定义（粉）</option>
+						<option value="plain">不改变</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					多选线样式
+					<select v-model="lineMultiSelectMode">
+						<option value="default">同选中样式</option>
+						<option value="custom">自定义（绿）</option>
+						<option value="plain">不改变</option>
+					</select>
+				</label>
+				<label class="demo-slider">
+					框选矩形
+					<select v-model="selectionBoxMode">
+						<option value="default">组件默认（蓝）</option>
+						<option value="amber">琥珀色 · 粗边框</option>
+						<option value="pink">粉色 · 半透明填充</option>
+						<option value="line">只描边（背景全透明）</option>
+					</select>
+				</label>
+				<span class="demo-control-hint">Ctrl + 点击 / Shift + 拖动分别走多选与框选样式；节点或线路自己配了样式时以自身的为准；「框选矩形」换的是框本身（options.selectionBoxStyle：fill / fillOpacity / stroke / strokeWidth）</span>
+			</div>
+
+				</div>
+				<div v-show="activePanel === 'view-events'" class="demo-panel-body">
+			<div class="demo-controls">
+				<span class="demo-control-hint">指针载荷里直接给了三样东西：selected（这一刻在不在选中集里）/ wasSelected（onClick 是「点之前」的那一份，右键与按下 / 松开就是当下）/ selection（整份选中集的 ids / count / 点 / 线 / 通道条数）；点、线、空白都有载荷，空白处的 onClick 是 null；Ctrl + 点击（多选取反）与 Shift + 拖动（框选）不走 onClick，那一下的结果看 onSelectChange</span>
+			</div>
+			<div class="demo-controls">
+				<button type="button" @click="readSelectionByApi()">读一次选中信息（getSelectionData）</button>
+				<span class="demo-control-hint">{{ selectionReadout }}</span>
+			</div>
+			<div class="demo-controls">
+				<pre class="demo-groups">{{ selectedItemsJson || 'getSelectionData()：ids / count / pointCount / lineCount / channelCount / points / lines / channels / pointIndexes / lineIndexes / bounds' }}</pre>
+			</div>
+				</div>
+</template>