Vue.js与AMap实现航线管理系统开发实践

1. 项目概述

这个基于Vue.js和AMap地图组件开发的航线管理系统，是我最近完成的一个实际项目。系统主要实现了两个核心功能：航线管理和围栏管理。在开发过程中，我发现同时展示折线图和多边形矢量图在地图上是一个常见但又有一定技术挑战的需求，特别是在需要保持两者独立操作的情况下。

系统采用了现代化的前端技术栈，包括Vue 3的组合式API、TypeScript类型系统，以及AMap地图SDK。界面设计采用了暗色主题，与地图的卫星图层风格相得益彰。最让我满意的是系统实现了航点与围栏的完全独立管理，两者可以同时显示但互不干扰，这在无人机航线规划等场景中非常实用。

2. 技术架构与核心设计

2.1 技术选型解析

选择Vue 3作为前端框架主要考虑其优秀的响应式系统和组合式API，这对于地图应用的状态管理特别重要。AMap作为国内领先的地图服务，提供了丰富的API和稳定的服务，特别适合需要展示复杂地理信息的应用。

TypeScript的引入大大提升了代码的可靠性，特别是在处理经纬度坐标、地图覆盖物等复杂数据结构时，类型检查可以避免很多低级错误。Element UI虽然在这个项目中用得不多，但它的基础组件为快速搭建UI提供了便利。

2.2 核心数据结构设计

系统中最关键的两个数据结构是航点信息和围栏信息：

typescript复制// 航点数据结构
interface Waypoint {
  lng: number;
  lat: number;
  longitude?: number; // 兼容不同命名
  latitude?: number;
  height: number;
  waypoint_speed: number;
  gimbal_pitch_angle: number;
  filesuffix: string;
  action_group: Array<{
    action: Array<{
      actionActuatorFunc: string;
    }>;
  }>;
}

// 围栏数据结构
interface FenceFormState {
  id: string;
  name: string;
  desc: string;
  resource: {
    type: number;
    content: {
      type: string;
      properties: {
        color: string;
        clampToGround: boolean;
      };
      geometry: {
        type: 'Polygon' | 'Circle';
        coordinates: number[][][] | number[];
        radius: number;
      };
    };
  };
}

这种设计充分考虑了业务需求，航点信息包含了飞行动作组，围栏信息则区分了多边形和圆形两种类型，为后续功能扩展预留了空间。

3. 核心功能实现细节

3.1 地图初始化与基础配置

地图初始化是整个系统的基础，我们采用了卫星图层和路网图层的组合：

typescript复制const init = () => {
  workSpacesCurrent({}).then(res => {
    map.value = new AMap.Map('g-container',