gis-view-webgl2 0.1.2 → 0.1.4

package/docs/demos/SearchFilterDemo.vue

@@ -48,10 +48,11 @@ let view = null
 let requestSeq = 0
 
 const SCOPES = [
-	{ id: 'all', label: '全部三类' },
+	{ id: 'all', label: '全部四类' },
 	{ id: 'points', label: '只看节点' },
 	{ id: 'lines', label: '只看线路' },
-	{ id: 'channels', label: '只看通道' }
+	{ id: 'channels', label: '只看通道' },
+	{ id: 'groups', label: '只看分组' }
 ]
 const FIELD_MODES = [
 	{ id: 'all', label: '全部字段', fields: null },
@@ -64,6 +65,7 @@ const PRESETS = [
 	{ id: 'name', demo: 'search-filter-preset-name', label: '变电站（limit 3）', keyword: '变电站', scope: 'points', field: 'all', limit: 3 },
 	{ id: 'owner', demo: 'search-filter-preset-owner', label: '北城运检（props.owner）', keyword: '北城运检', scope: 'points', field: 'owner', limit: 10 },
 	{ id: 'channel', demo: 'search-filter-preset-channel', label: '甲通道（scope=channels）', keyword: '甲通道', scope: 'channels', field: 'all', limit: 10 },
+	{ id: 'group', demo: 'search-filter-preset-group', label: 'channel-a（scope=groups）', keyword: 'channel-a', scope: 'groups', field: 'all', limit: 10 },
 	{ id: 'symbol', demo: 'search-filter-preset-symbol', label: 'square（显式 symbol）', keyword: 'square', scope: 'points', field: 'symbol', limit: 10 }
 ]
 const FILTERS = [
@@ -72,15 +74,15 @@ const FILTERS = [
 	{ id: 'zone', demo: 'search-filter-filter-zone', label: '分区 2 / 4', condition: { points: { zone_name: { in: ['分区 2', '分区 4'] } }, cascade: 'binding' } },
 	{ id: 'loading', demo: 'search-filter-filter-loading', label: '线路负载 ≥ 1', condition: { lines: { max_loading_rate: { gte: 1 } } } }
 ]
-const KIND_LABELS = { point: '节点', line: '线路', channel: '通道' }
+const KIND_LABELS = { point: '节点', line: '线路', channel: '通道', group: '分组' }
 
-const scopeLabel = computed(() => SCOPES.find(item => item.id === scope.value)?.label ?? '全部三类')
+const scopeLabel = computed(() => SCOPES.find(item => item.id === scope.value)?.label ?? '全部四类')
 const searchSummary = computed(() => {
 	const result = searchResult.value
 	if (!result) {
 		return '还没有搜索'
 	}
-	return `命中 ${result.total} 条：节点 ${result.points.length} / 线路 ${result.lines.length} / 通道 ${result.channels.length}`
+	return `命中 ${result.total} 条：节点 ${result.points.length} / 线路 ${result.lines.length} / 通道 ${result.channels.length} / 分组 ${result.groups?.length ?? 0}`
 })
 const searchMeta = computed(() => {
 	const result = searchResult.value
@@ -172,8 +174,8 @@ const applyWorker = () => {
 		: 'searchWorker=false：searchAsync 退回主线程同步计算'
 }
 const focusHit = (hit) => {
-	view?.focusOn(hit, { select: true })
-	actionText.value = `focusOn(${KIND_LABELS[hit.kind] ?? hit.kind} #${hit.index}, { select: true })`
+	view?.focusOn(hit, { select: true, zoom: true })
+	actionText.value = `focusOn(${KIND_LABELS[hit.kind] ?? hit.kind} #${hit.index}, { select: true, zoom: true })`
 }
 const focusAllHits = () => {
 	const hits = searchResult.value?.hits ?? []
@@ -181,8 +183,8 @@ const focusAllHits = () => {
 		actionText.value = '当前没有可定位的命中'
 		return
 	}
-	view?.focusOn(hits, { select: true })
-	actionText.value = `focusOn(hits, { select: true })：${hits.length} 条命中一起进包围盒并选中`
+	view?.focusOn(hits, { select: true, zoom: true })
+	actionText.value = `focusOn(hits, { select: true, zoom: true })：${hits.length} 条命中一起进包围盒并选中`
 }
 const readVisibleData = () => {
 	if (!view) {
@@ -296,7 +298,7 @@ onBeforeUnmount(() => {
 				<div class='dv-chips'>
 					<button v-for='preset in PRESETS' :key='preset.id' type='button' class='dv-chip' :data-demo='preset.demo' @click='choosePreset(preset)'>{{ preset.label }}</button>
 				</div>
-				<p class='dv-hint'>显式 fields 能搜默认会跳过的 symbol；搜索基于全量数据，不隐藏、也不自动移动视角。</p>
+				<p class='dv-hint'>scope 可写 points / lines / channels / groups，也认 point / line / channel / group；显式 fields 能搜默认会跳过的 symbol。搜索基于全量数据，不隐藏、也不自动移动视角。</p>
 				<div class='dv-row'>
 					<button type='button' class='dv-button' data-demo='search-filter-focus-all' @click='focusAllHits'>聚焦并选中全部命中</button>
 				</div>
@@ -335,7 +337,7 @@ onBeforeUnmount(() => {
 			</div>
 			<div class='dv-group'>
 				<h3>两件事别混用</h3>
-				<p class='dv-hint'>search 只把要素找出来，结果带 bounds；要居中就再调 focusOn。setFilter 才会隐藏要素，并从 getVisibleData / listPoints 的可见集合里消失。</p>
+				<p class='dv-hint'>search 只把要素找出来，结果带 bounds；要居中就再调 focusOn。setFilter 只隐藏显示、不删数据，也不清空选中集：条件放宽后，原本选中的要素仍保持选中。</p>
 			</div>
 		</aside>
 	</section>