添加 路径数量

This commit is contained in:
Shikong 2023-05-17 23:39:58 +08:00
parent 5c7ee289ca
commit 3efd57d667

View File

@ -65,7 +65,7 @@
/> />
</div> </div>
<div id="container"> <div id="container">
<div class="fixed bg-amber-50 rounded-r z-max text-center" style="width: 300px" v-if="view.filterData.length > 0"> <div class="fixed bg-amber-50 rounded-br z-max text-center" style="width: 300px" v-if="view.filterData.length > 0">
<div class="flex"> <div class="flex">
<div class="w-1/4">最高速度</div> <div class="w-1/4">最高速度</div>
<div>{{view.speed.max}} km/h</div> <div>{{view.speed.max}} km/h</div>
@ -75,6 +75,10 @@
<div>{{view.speed.avg}} km/h</div> <div>{{view.speed.avg}} km/h</div>
</div> </div>
</div> </div>
<div class="fixed bg-amber-50 rounded-tl z-max text-center absolute-bottom-right" style="width: 300px" v-if="view.lines.length > 0">
路径数量 {{view.lines.length}}
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -118,7 +122,8 @@ const view = reactive({
speed: { speed: {
max: 0, max: 0,
avg: 0 avg: 0
} },
lines: [],
}) })
const layers = reactive({ const layers = reactive({
satellite: { satellite: {
@ -215,7 +220,8 @@ AMapLoader.load({
"AMap.HawkEye", "AMap.HawkEye",
"AMap.ToolBar", "AMap.ToolBar",
"AMap.ControlBar" "AMap.ControlBar"
], // 使'AMap.Scale' ],// 使'AMap.Scale'
"lang": "zh_cn"
}).then((AMap) => { }).then((AMap) => {
let scale = new AMap.Scale({ let scale = new AMap.Scale({
visible: true visible: true
@ -284,6 +290,7 @@ AMapLoader.load({
}) })
function clearMap(){ function clearMap(){
view.lines = []
map.remove(data.polylines) map.remove(data.polylines)
map.remove(data.polyline) map.remove(data.polyline)
map.remove(data.labelsLayer) map.remove(data.labelsLayer)
@ -397,7 +404,7 @@ function drawMap(){
map.add(data.labelsLayer) map.add(data.labelsLayer)
} }
let lines = [] view.lines = []
let prev = moment(0) let prev = moment(0)
for (let i = 0; i < _data.length; i++) { for (let i = 0; i < _data.length; i++) {
let datum = _data[i] let datum = _data[i]
@ -406,17 +413,17 @@ function drawMap(){
prev = datum.time prev = datum.time
} else { } else {
prev = datum.time prev = datum.time
lines.push([]) view.lines.push([])
} }
lines[lines.length -1].push(datum) view.lines[view.lines.length -1].push(datum)
} }
console.log("lines", lines) console.log("lines", view.lines)
let colorList = Array.from({ length: lines.length }) let colorList = Array.from({ length: view.lines.length })
.map(() => COLOR[Math.floor(Math.random() * COLOR.length)]); .map(() => COLOR[Math.floor(Math.random() * COLOR.length)]);
data.polylines = [] data.polylines = []
lines.forEach((_data,index) => { view.lines.forEach((_data,index) => {
let path = _data.map((item) => { let path = _data.map((item) => {
return new AMap.LngLat(item.longitude, item.latitude) return new AMap.LngLat(item.longitude, item.latitude)
}) })