76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<script setup>
|
||
import { computed } from "vue"
|
||
import { useNavi } from "../hooks/useNavi"
|
||
import { useMapStore } from "../stores/mapStore"
|
||
|
||
// 可以使用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>
|