更新记录

1.0.0（2024-01-03）

首个版本发布。

平台兼容性

组件功能

基于mapbox地图的轨迹回放。

文档

安装说明

本组件依赖mapbox地图运行，所以需要先安装 mapbox-gl 库，在终端运行以下指令：

npm install mapbox-gl --save

本组件依赖 turf 运行，所以需要先安装 turf 库，在终端运行以下指令：

npm install @turf/turf --save

属性说明

list 数组元素属性说明

list 的每个元素必须是一个对象且有下列属性：

示例代码

<template>
  <view class="track">
    <lk-mapbox-trace
      :list="traceList"
      map-key="申请的mapbox地图的accessToken"
      @load-data="loadTrace"
    ></lk-mapbox-trace>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import useRequest from '@/composables/useRequest.js' // 接口请求工具

  /* 历史轨迹 */
  const { request, toast } = useRequest()
  const traceList = ref([])

  const loadTrace = ({start, end} = {}) => request({
    url: '后端接口url',
    data: {
      id: vehId,
      startTime: start,
      endTime: end
    }
  }).then(({data}) => {
    if (!data || !data.length) {
      traceList.value = []
      toast('未查询到轨迹数据')
      return
    }
    const pathList = data.filter((item, index, arr) => {
      const lng = item.lng
      const lat = item.lat
      return lng > 0 && lat > 0 && (!index || (index && (lat !== arr[index - 1].lat || lng !== arr[index - 1].lng))) // 过滤掉无效和重复节点
    })
    traceList.value = pathList
  })
</script>

<style lang="scss">
  page,
  .track {
    height: 100%;
  }
</style>

在线演示

在线演示地址

其他

组件难免有不足之处，欢迎各位老铁们批评指正，有任何问题都可以在评论区中留言。