62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<script setup>
|
||
import { inject } from "vue"
|
||
import { useNavi } from "@/hooks/useEditNavi"
|
||
|
||
// 可以使用pinia等管理全局数据，这里只是方便演示, 直接注入了上层提供的数据
|
||
const map = inject("editMap")
|
||
|
||
const {
|
||
pathIdList,
|
||
addPath,
|
||
startNavi,
|
||
pauseNavi,
|
||
restoreNavi,
|
||
stopNavi,
|
||
} = useNavi(map)
|
||
|
||
map.value.on('click', (e) => {
|
||
const polygon = e.object?.userData?.polygonData // 获取点位数据
|
||
if(!polygon?.isNavi) return
|
||
|
||
addPath(polygon)
|
||
})
|
||
|
||
defineExpose({
|
||
addPath,
|
||
})
|
||
</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>
|
||
.path-list-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.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>
|