gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/StyleDemo.vue

@@ -1,25 +1,25 @@
-<script setup>
-/**
- * 样式与规则演示：同一份数据，换几套规则看画面怎么变。
- *
- * 规则就是「条件 + 样式」的数组（`pointRules` / `lineRules`），改完交给 updateOptions 立刻重排；
- * 演示里还对比了两种优先级：规则样式 < 要素自身字段（逐点样式），
+<script setup>
+/**
+ * 样式与规则演示：同一份数据，换几套规则看画面怎么变。
+ *
+ * 规则就是「条件 + 样式」的数组（`pointRules` / `lineRules`），改完交给 updateOptions 立刻重排；
+ * 演示里还对比了两种优先级：规则样式 < 要素自身字段（逐点样式），
  * 以及选中高亮（pointSelectStyle / lineSelectStyle）压在最上面。
- */
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { createGisView } from '../../src/index.js'
-import { buildDemoData, VOLTAGE_COLORS } from './shared/demoData.js'
-import './shared/demoStyle.css'
-
-const emit = defineEmits(['notice'])
-const container = ref(null)
-const dataset = buildDemoData({ count: 24 })
-let view = null
-
-const preset = ref('voltage')
-const pointSize = ref(7)
-const lineWidth = ref(1.6)
-const perPointStyle = ref(false)
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { createGisView } from '../../src/index.js'
+import { buildDemoData, VOLTAGE_COLORS } from './shared/demoData.js'
+import './shared/demoStyle.css'
+
+const emit = defineEmits(['notice'])
+const container = ref(null)
+const dataset = buildDemoData({ count: 24 })
+let view = null
+
+const preset = ref('voltage')
+const pointSize = ref(7)
+const lineWidth = ref(1.6)
+const perPointStyle = ref(false)
 const highlightOn = ref(true)
 const applyMs = ref('—')
 const ruleText = ref('—')
@@ -33,44 +33,44 @@ const selectText = ref('未选中：点一下节点或线路看高亮')
 const selectHighlight = () => (highlightOn.value
 	? { color: '#ffd166', sizeScale: 1.5, strokeColor: '#12233a', strokeWidth: 2 }
 	: false)
-
-/** 三套预设：按电压上色 / 按负载上色 / 单色 */
-const buildPointRules = () => {
-	if (preset.value === 'load') {
-		return [
-			{ name: '重载', when: { max_loading_rate: { gte: 1.1 } }, style: { color: '#ff7a45', strokeColor: '#7a2d10', strokeWidth: 2, size: pointSize.value + 3 } },
-			{ name: '正常', when: { max_loading_rate: { gte: 0.7, lt: 1.1 } }, style: { color: '#ffd166', strokeColor: '#6d5a1e', strokeWidth: 1.6, size: pointSize.value } },
-			{ name: '轻载', when: { max_loading_rate: { lt: 0.7 } }, style: { color: '#4fd1a5', strokeColor: '#1d5c46', strokeWidth: 1.6, size: pointSize.value - 1 } }
-		]
-	}
-	if (preset.value === 'mono') {
-		return [{ name: '统一', when: { field: 'id', op: 'exists' }, style: { color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5, size: pointSize.value } }]
-	}
-	return [
-		{ name: '1050 kV', when: { vn_kv: { gte: 1050 } }, style: { color: VOLTAGE_COLORS[1050], strokeColor: '#5c1338', strokeWidth: 2.2, size: pointSize.value + 3, zIndex: 4 } },
-		{ name: '525 kV', when: { vn_kv: { gte: 525, lt: 1050 } }, style: { color: VOLTAGE_COLORS[525], strokeColor: '#2f1b5c', strokeWidth: 2, size: pointSize.value + 1, zIndex: 3 } },
-		{ name: '230 kV', when: { vn_kv: { gte: 230, lt: 525 } }, style: { color: VOLTAGE_COLORS[230], strokeColor: '#123a5c', strokeWidth: 1.6, size: pointSize.value, zIndex: 2 } },
-		{ name: '其它', when: { vn_kv: { lt: 230 } }, style: { color: VOLTAGE_COLORS[15.7], strokeColor: '#12402f', strokeWidth: 1.4, size: pointSize.value - 1, zIndex: 1 } }
-	]
-}
-
-const buildLineRules = () => (preset.value === 'load'
-	? [{ name: '线路重载', when: { max_loading_rate: { gte: 1 } }, style: { color: '#ff9f68', width: lineWidth.value + 1.4 } }]
-	: [])
-
-/** 逐点样式：数据里自己写了 color / size 的节点直接压过规则（每 6 个一个金节点） */
-const pointsWithOwnStyle = () => (perPointStyle.value
-	? dataset.points.map((point, index) => (index % 6 === 0 ? { ...point, color: '#ffd15c', size: 15, selectStyle: { color: '#ff7a45' } } : point))
-	: dataset.points)
-
-const buildOptions = () => ({
-	points: pointsWithOwnStyle(),
-	lines: dataset.lines,
-	channels: dataset.channels,
-	pointStyle: { size: pointSize.value, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
-	lineStyle: { width: lineWidth.value, color: 'rgba(120, 168, 226, 0.5)' },
-	pointRules: buildPointRules(),
-	lineRules: buildLineRules(),
+
+/** 三套预设：按电压上色 / 按负载上色 / 单色 */
+const buildPointRules = () => {
+	if (preset.value === 'load') {
+		return [
+			{ name: '重载', when: { max_loading_rate: { gte: 1.1 } }, style: { color: '#ff7a45', strokeColor: '#7a2d10', strokeWidth: 2, size: pointSize.value + 3 } },
+			{ name: '正常', when: { max_loading_rate: { gte: 0.7, lt: 1.1 } }, style: { color: '#ffd166', strokeColor: '#6d5a1e', strokeWidth: 1.6, size: pointSize.value } },
+			{ name: '轻载', when: { max_loading_rate: { lt: 0.7 } }, style: { color: '#4fd1a5', strokeColor: '#1d5c46', strokeWidth: 1.6, size: pointSize.value - 1 } }
+		]
+	}
+	if (preset.value === 'mono') {
+		return [{ name: '统一', when: { field: 'id', op: 'exists' }, style: { color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5, size: pointSize.value } }]
+	}
+	return [
+		{ name: '1050 kV', when: { vn_kv: { gte: 1050 } }, style: { color: VOLTAGE_COLORS[1050], strokeColor: '#5c1338', strokeWidth: 2.2, size: pointSize.value + 3, zIndex: 4 } },
+		{ name: '525 kV', when: { vn_kv: { gte: 525, lt: 1050 } }, style: { color: VOLTAGE_COLORS[525], strokeColor: '#2f1b5c', strokeWidth: 2, size: pointSize.value + 1, zIndex: 3 } },
+		{ name: '230 kV', when: { vn_kv: { gte: 230, lt: 525 } }, style: { color: VOLTAGE_COLORS[230], strokeColor: '#123a5c', strokeWidth: 1.6, size: pointSize.value, zIndex: 2 } },
+		{ name: '其它', when: { vn_kv: { lt: 230 } }, style: { color: VOLTAGE_COLORS[15.7], strokeColor: '#12402f', strokeWidth: 1.4, size: pointSize.value - 1, zIndex: 1 } }
+	]
+}
+
+const buildLineRules = () => (preset.value === 'load'
+	? [{ name: '线路重载', when: { max_loading_rate: { gte: 1 } }, style: { color: '#ff9f68', width: lineWidth.value + 1.4 } }]
+	: [])
+
+/** 逐点样式：数据里自己写了 color / size 的节点直接压过规则（每 6 个一个金节点） */
+const pointsWithOwnStyle = () => (perPointStyle.value
+	? dataset.points.map((point, index) => (index % 6 === 0 ? { ...point, color: '#ffd15c', size: 15, selectStyle: { color: '#ff7a45' } } : point))
+	: dataset.points)
+
+const buildOptions = () => ({
+	points: pointsWithOwnStyle(),
+	lines: dataset.lines,
+	channels: dataset.channels,
+	pointStyle: { size: pointSize.value, color: '#ffffff', strokeColor: '#4c8dff', strokeWidth: 1.5 },
+	lineStyle: { width: lineWidth.value, color: 'rgba(120, 168, 226, 0.5)' },
+	pointRules: buildPointRules(),
+	lineRules: buildLineRules(),
 	pointSelectStyle: selectHighlight(),
 	lineSelectStyle: selectHighlight(),
 	waypointSelectStyle: selectHighlight(),
@@ -81,10 +81,10 @@ const buildOptions = () => ({
 	label: { content: '{vn_kv} kV', position: 'top', gap: 7, maxCount: 30, style: { color: '#27405f', fontSize: '11px' } },
 	// 标签按优化档显示（限数 + 避让），见 docs/GisView.md 的「标签显示优化开关」
 	labelOptimize: true,
-	onReady: () => {
-		emit('notice', `${dataset.points.length} 个节点，规则预设「${preset.value}」`)
-		syncRules()
-	},
+	onReady: () => {
+		emit('notice', `${dataset.points.length} 个节点，规则预设「${preset.value}」`)
+		syncRules()
+	},
 	/**
 	 * 读数接 onSelectChange 而不是 onSelect：前者对「点选、框选、API select()」都会发，
 	 * 后者只代表画布上的那一次点击 —— 用接口选中时读数也不会停在「未选中」。
@@ -96,11 +96,11 @@ const buildOptions = () => ({
 			: '未选中：点一下节点或线路看高亮'
 	}
 })
-
-const syncRules = () => {
-	ruleText.value = `节点规则 ${buildPointRules().length} 条 · 线路规则 ${buildLineRules().length} 条`
-}
-
+
+const syncRules = () => {
+	ruleText.value = `节点规则 ${buildPointRules().length} 条 · 线路规则 ${buildLineRules().length} 条`
+}
+
 /**
  * 改规则 / 尺寸 / 高亮：只发样式类配置（不重发 points / lines），
  * 一次 updateOptions 落到引擎的「重解析 + 槽位覆盖」快路径，顺带报一下这一趟的耗时。
@@ -125,60 +125,60 @@ const applyPerPointStyle = () => {
 	view?.updateOptions({ points: pointsWithOwnStyle() })
 	syncRules()
 }
-
-onMounted(() => {
-	view = createGisView(container.value, buildOptions())
-})
-
-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" class="dv-button" @click="view?.fitView(60)">适应全部</button>
-			</div>
-		</div>
-		<aside class="dv-panel">
-			<div class="dv-group">
-				<h3>规则预设</h3>
-				<div class="dv-row">
-					<label>预设
-						<select v-model="preset" @change="applyRules">
-							<option value="voltage">按电压上色（带分层 zIndex）</option>
-							<option value="load">按负载率上色</option>
-							<option value="mono">单色</option>
-						</select>
-					</label>
-				</div>
-				<div class="dv-row">
-					<label>节点尺寸 <input v-model.number="pointSize" type="range" min="3" max="16" step="1" @change="applyRules" /></label>
-					<label>线宽 <input v-model.number="lineWidth" type="range" min="0.6" max="6" step="0.2" @change="applyRules" /></label>
-				</div>
-				<div class="dv-row">
+
+onMounted(() => {
+	view = createGisView(container.value, buildOptions())
+})
+
+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" class="dv-button" @click="view?.fitView(60)">适应全部</button>
+			</div>
+		</div>
+		<aside class="dv-panel">
+			<div class="dv-group">
+				<h3>规则预设</h3>
+				<div class="dv-row">
+					<label>预设
+						<select v-model="preset" @change="applyRules">
+							<option value="voltage">按电压上色（带分层 zIndex）</option>
+							<option value="load">按负载率上色</option>
+							<option value="mono">单色</option>
+						</select>
+					</label>
+				</div>
+				<div class="dv-row">
+					<label>节点尺寸 <input v-model.number="pointSize" type="range" min="3" max="16" step="1" @change="applyRules" /></label>
+					<label>线宽 <input v-model.number="lineWidth" type="range" min="0.6" max="6" step="0.2" @change="applyRules" /></label>
+				</div>
+				<div class="dv-row">
 					<label><input v-model="perPointStyle" type="checkbox" @change="applyPerPointStyle" /> 逐点样式（数据里自己写 color / size）</label>
-				</div>
-				<div class="dv-row">
-					<label><input v-model="highlightOn" type="checkbox" @change="applyRules" /> 选中高亮</label>
-				</div>
+				</div>
+				<div class="dv-row">
+					<label><input v-model="highlightOn" type="checkbox" @change="applyRules" /> 选中高亮</label>
+				</div>
 				<p class="dv-readout">{{ ruleText }}</p>
 				<p class="dv-readout">最近一次重排：{{ applyMs }}</p>
 				<p class="dv-readout">{{ selectText }}</p>
-			</div>
-			<div class="dv-group">
-				<h3>优先级</h3>
-				<p class="dv-hint">
-					规则命中之后，要素自己写的字段（逐点样式）压过规则；选中的高亮又压在两者之上。
-					勾上「逐点样式」看每 6 个一个金节点，点一下它看高亮。
-				</p>
-			</div>
-			<div class="dv-group">
-				<h3>试一下</h3>
-				<p class="dv-hint">先把预设切到「按电压上色」再切「按负载率」，同一份数据两种读法；调尺寸 / 线宽只改样式，不动数据与相机。</p>
-			</div>
-		</aside>
-	</section>
-</template>
+			</div>
+			<div class="dv-group">
+				<h3>优先级</h3>
+				<p class="dv-hint">
+					规则命中之后，要素自己写的字段（逐点样式）压过规则；选中的高亮又压在两者之上。
+					勾上「逐点样式」看每 6 个一个金节点，点一下它看高亮。
+				</p>
+			</div>
+			<div class="dv-group">
+				<h3>试一下</h3>
+				<p class="dv-hint">先把预设切到「按电压上色」再切「按负载率」，同一份数据两种读法；调尺寸 / 线宽只改样式，不动数据与相机。</p>
+			</div>
+		</aside>
+	</section>
+</template>