Initial_commit_SecMPS_v2

warehouse/src/components/DisplayRouteLine.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from "vue"
+import { useNavi } from "../hooks/useNavi"
+import { useMapStore } from "../store/useMapStore"
+
+// 可以使用pinia等管理全局数据，这里只是方便演示, 直接注入了上层提供的数据
+const store = useMapStore()
+
+const {
+  pathIdList,
+  addPath,
+  startNavi,
+  pauseNavi,
+  restoreNavi,
+  stopNavi,
+  removePathLine,
+  clearPathId,
+} = useNavi(computed(() => store.map))
+
+// 可以调整路线的颜色
+// store.map.options.pathOptions = { bgc: "#f00" }
+
+store.map.on('click', (e) => {
+  const polygon = e.object?.userData?.polygonData // 获取点位数据
+  if(!polygon?.isNavi) return
+
+  addPath(polygon)
+})
+
+defineExpose({
+  addPath,
+  removePathLine, 
+  clearPathId,
+})
+</script>
+
+<template>
+  <div class="navi">
+    <div class="path-list-status">
+      <div>点击具有分类的标签或模型生成线路:</div>
+      <div class="selected">{{ pathIdList.join(",") }}</div>
+      <button @click="() => pathIdList.pop()">删除末尾</button>
+      <button @click="() => pathIdList = []">清空</button>
+      <button @click="() => startNavi()" :disabled="pathIdList.length < 2">开始导航</button>
+      <button @click="() => pauseNavi()" :disabled="pathIdList.length < 2">暂停</button>
+      <button @click="() => restoreNavi()" :disabled="pathIdList.length < 2">继续</button>
+      <button @click="() => stopNavi()" :disabled="pathIdList.length < 2">结束导航</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.navi {
+  display: none; /* 隐藏控件 */
+}
+
+.path-list-status {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: white;
+  text-shadow: 1px 1px 1px #000;
+}
+
+.selected {
+  min-height: 1.5em;
+  width: 300px;
+  padding: 0 5px;
+  background-color: #fff;
+  border: 1px solid #767676;
+  display: flex;
+  align-items: center;
+  overflow: auto;
+}
+</style>