全栈从0到1 3D旅游地图标记和轨迹生成

功能演示

演示视频

体验地址

Vercel App

开发技术栈：

• NextJs（前端框架）
• React（前端框架）
• TailwindCSS （CSS样式）
• echart + echart gl （地图生成）
• shadui（UI组件库）
• Zustand
• lucide-react （图标）

第三方：

• Convex（数据存储+接口）
• Vercel（项目托管）
• 高德开放平台（提供地图编码、逆编码等WEB API）

开发流程

下面给出关键步骤及部分代码。

1. Setup

1.1 初始化NextJS项目

系统要求：Nodejs 18.17+
打开终端，在控制台执行：

npx create-next-app@latest```
  
全部选择默认选项即可。  
![image.png](https://cdn.jsdelivr.net/gh/Ygria/Pictures@main/20240425232407.png)  
  
初始化完成后，进入项目并运行。  
  
```bash  
cd travel-tracel  
npm run dev  
  

打开localhost:3000，看到如下页面，项目初始化成功。

1.2 安装npm依赖

安装一些主要的依赖。后续需要用到的依赖可以边开发边安装。

# 安装echarts依赖  
npm install echarts-for-react  
npm install echarts-gl  
npm install require # 图标组件  
npm install lucide-react  

2 定义标记点

实现输入地点或地点关键字，查询经纬度，从而完成标记点的定义。
实现思路：

1. 首先查询Convex数据库，提供10个最匹配的候选项
2. 若没有找到对应候选项，用户可以点击搜索按钮，会调用高德API进行查询。
3. 如果仍然没有查询到，可以点击“经纬度”按钮，进行经纬度的自行填写。
4. 已经添加了的标记点，支持编辑和删除。
5. 使用Zustand，进行地点增、删、改等状态管理。

2.1 定义useLocationPoints store

import {
   
   create} from "zustand";  import {
   
   nanoid} from "nanoid";  interface ILocationPoints {
   
       
    locations: LocationPoint[],    
    addLocation: (loc: LocationPoint) => void,    
    editLocation: (loc: LocationPoint) => void,    
removeLocation: (id: string) => void  }  interface LocationPoint{
   
       
    id: string,    
    name: string,    
    lng: string,    
lat: string  }    
    
export const useLocationPoints = create<ILocationPoints>(set => ({
   
       
    locations: [] as LocationPoint[],    
    addLocation: (loc: LocationPoint) => {
   
       
        const _id  = nanoid()    
        loc["id"] = _id    
        set(state => ({
   
       
            locations: [...state.locations, loc]    
        }));    
    },    
    
    editLocation: (loc: LocationPoint)=>{
   
       
        set(state => ({
   
       
            locations: state.locations.map(item=>{
   
       
                if(item.id === loc.id){
   
       
                    return {
   
       
                        ...loc,    
                        id: item.id,    
                    }    
                }else {
   
       
                    return item    
                }    
            })    
        }));    
    
    },    
// 移除location    
    removeLocation:(id:string)=>{
   
       
        set(state => ({
   
       
            locations: state.locations.filter(item=>item.id !== id)    
        }));    
}  }));  

对于location的增删改，均依赖于以上store实现。单页面定义React自带的useState当然也可以，但是为了便利于组件拆分，所以使用store，不用再跨组件管理状态的提交、更新、监听等，方便了很多。
考虑到location的名称、经纬度均有可能更改，所以使用nanoid生成唯一id进行location的索引。

2.2 引入Convex

使用convex作为平台后台。convex可以提供数据库存储、RESTful接口及接口调试的功能。

2.2.1 Convex 项目配置

1. 访问Convex

2. 创建app
   

3. 在nextjs项目中，进行相应的配置。
   参考Convex官方文档：
   Next.js Quickstart | Convex Developer Hub

# 进入项目目录后，安装  
cd my-app && npm install convex  
npx convex dev  

因为我已经在Convex控制台中创建过app了，所以选择已存在的project

2.2.2 Table Schema定义和数据初始化

在Convex目录下，新建·文件schema.ts

import {
   
    v } from "convex/values";  
import {
   
   defineSchema, defineTable} from "convex/server";  
  
  
export default defineSchema({
   
     
    locations: defineTable({
   
           // 经纬度