mars3d App开发——判定导航路线或者POI点是否被收藏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

mars3d App开发暂时涉及到的业务都是纯前端部分，但是我们也为后端留有接口，其中就包括判定导航路线或者POI点是否被收藏。

---

一、业务需求

点击收藏POI点或者路线后，再次进入时能够判定是否已经被收藏，并且收藏图标发现改变。
合肥南站 POI点已经被收藏，下次再次进来是依然显示被收藏。

二、实现过程

1.接口部分

代码如下：

// 判断是否已经被收藏
export async function isCollectionPoint(currPoint) {
  const result = await getCollectionPointList() //或者所有被收藏的数据
  if (result.data) {
    return result.data.some((point) => {
      let samePoint = false
      if (point.name === currPoint.name || point.positions === currPoint.positions) {
        samePoint = true
      }
      return samePoint
    })
  }
}

第一步：首先拿到所有被收藏的POI点数据
第二步：currPoint是传入的当前POI点。
第三步：通过名字和坐标是否相同判断该POI点是否已经被收藏

2.取消收藏

代码如下

const deleteCollectionPointById = async () => {
  const { status, data } = await api.getCollectionPointList()
  if (status === 200) {
    const deletePoint = data.filter((item) => item.name === point.name)
    deletePoint.forEach(async (element) => {
      const { status } = await api.deleteCollectionPointById(element.id)
      if (status === 200) {
        $message({
          message: "已取消收藏",
          type: "success"
        })
        icon.value = "clarity:star-line"
      }
    })
  }
}

3、收藏

代码如下

const addCollectionPoint = async (e: any) => {
  const { status, data } = await api.addCollectionPoint(e)
  if (status === 200) {
    $message({
      message: "已收藏",
      type: "success"
    })
    icon.value = "ant-design:star-filled"
    pointId.value = data.id
  }
}