# react-drone-platform

**Repository Path**: dongqifei/react-drone-platform

## Basic Information

- **Project Name**: react-drone-platform
- **Description**: react版无人机接入平台
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-02-24
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 无人机接入平台

#### 1. 概述
无人机接入平台是一个基于Java + react开发的开源项目，旨在提供一套完整的无人机接入平台。

#### 2. 前端可视化平台
基于 antd、react、deck.gl、maplibre-gl开发的前端可视化平台，用户可以实时查看所管理区域中无人机的位置、速度、高度、角度等数据，并进行控制。
1. 安装依赖包：
```
npm install
```
2. 运行前端可视化平台：
```
npm run dev
```
3. 访问前端可视化平台：
http://localhost:5173


#### 3. 后端管理平台
基于 Java + Spring Boot + Redis + MySQL + WebSocket + Mavlink + MQTT + KAFKA等技术开发的后端管理平台，用户可以管理无人机、区域、任务等数据，并进行控制。
1. 安装依赖包：
```
maven clean install
```
2. 运行后端管理平台：
```
maven spring-boot:run
```
3. 访问后端管理平台：
http://localhost:8080


#### 4. 常见问题
##### 如何使用Java和Mavlink协议实现无人机的通信和控制？
###### 一、环境准备
1. 安装依赖库
```xml
<!-- MAVLink Java库 -->
<dependency>
    <groupId>org.mavlink</groupId>
    <artifactId>mavlink</artifactId>
    <version>1.12.0</version>
</dependency>

<!-- 串口通信 -->
<dependency>
    <groupId>com.fazecast</groupId>
    <artifactId>jSerialComm</artifactId>
    <version>2.10.3</version>
</dependency>

<!-- UDP通信 -->
<dependency>
    <groupId>org.java-websocket</groupId>
    <artifactId>Java-WebSocket</artifactId>
    <version>1.5.3</version>
</dependency>
```
2. MAVLink代码生成
MAVLink协议是开源的，可以参考开源项目实现MAVLink协议。

```bash
python3 -m pymavlink.tools.mavgen --lang=Java --output=generated \
  message_definitions/v1.0/common.xml
```
###### 二、通信层实现

1. 串口通信

```java
import com.fazecast.jSerialComm.*;

public class SerialConnector {
    private SerialPort serialPort;
    
    public boolean connect(String portName, int baudRate) {
        serialPort = SerialPort.getCommPort(portName);
        serialPort.setBaudRate(baudRate);
        serialPort.setNumDataBits(8);
        serialPort.setParity(SerialPort.NO_PARITY);
        return serialPort.openPort();
    }

    public void sendPacket(byte[] data) {
        serialPort.writeBytes(data, data.length);
    }

    public byte[] readPacket() {
        byte[] buffer = new byte[1024];
        int len = serialPort.readBytes(buffer, buffer.length);
        return Arrays.copyOf(buffer, len);
    }
}
```
2. UDP通信
```java
import java.net.*;
import java.nio.ByteBuffer;

public class UDPConnector {
    private DatagramSocket socket;
    private InetAddress droneAddress;
    private int dronePort;

    public void connect(String ip, int port) throws Exception {
        droneAddress = InetAddress.getByName(ip);
        dronePort = port;
        socket = new DatagramSocket();
    }

    public void sendPacket(byte[] data) throws Exception {
        DatagramPacket packet = new DatagramPacket(
            data, data.length, droneAddress, dronePort
        );
        socket.send(packet);
    }

    public byte[] receivePacket() throws Exception {
        byte[] buffer = new byte[1024];
        DatagramPacket packet = new DatagramPacket(buffer, buffer.length);
        socket.receive(packet);
        return Arrays.copyOf(packet.getData(), packet.getLength());
    }
}
```
##### 三、MAVLink消息处理
1.  消息解析
```java
import io.dronefleet.mavlink.MavlinkConnection;
import io.dronefleet.mavlink.MavlinkMessage;

public class MavlinkParser {
    private final MavlinkConnection connection;

    public MavlinkParser(InputStream in, OutputStream out) {
        this.connection = MavlinkConnection.create(in, out);
    }

    public MavlinkMessage<?> readMessage() throws IOException {
        return connection.next();
    }

    public void sendMessage(MavlinkMessage<?> message) throws IOException {
        connection.send1(message.getSystemId(), message.getComponentId(), message);
    }
}
```
2. 心跳包维护
```java
// 发送心跳
public void sendHeartbeat(int systemId) throws IOException {
    Heartbeat heartbeat = Heartbeat.builder()
        .type(MavType.MAV_TYPE_GCS)
        .autopilot(MavAutopilot.MAV_AUTOPILOT_INVALID)
        .systemStatus(MavState.MAV_STATE_ACTIVE)
        .build();
    
    parser.sendMessage(MavlinkMessage.create(
        systemId, 
        MavComponent.MAV_COMP_ID_MISSIONPLANNER, 
        heartbeat
    ));
}

// 接收心跳
public void handleHeartbeat(Heartbeat heartbeat) {
    System.out.printf("Drone Status: %s, Mode: %s%n",
        heartbeat.systemStatus(),
        heartbeat.customMode());
}
```
##### 四、无人机控制指令
1. 起飞：
```java
public void armDrone(int systemId) throws IOException {
    CommandLong cmd = CommandLong.builder()
        .command(MavCmd.MAV_CMD_COMPONENT_ARM_DISARM)
        .param1(1) // 1=解锁
        .targetSystem(systemId)
        .targetComponent(MavComponent.MAV_COMP_ID_AUTOPILOT1)
        .build();

    parser.sendMessage(MavlinkMessage.create(
        GCS_SYSTEM_ID,
        MavComponent.MAV_COMP_ID_MISSIONPLANNER,
        cmd
    ));
}
```
2. 位置控制（示例：飞往指定GPS点）
```java
public void flyTo(int systemId, double lat, double lon, float alt) throws IOException {
    MissionItemInt mission = MissionItemInt.builder()
        .targetSystem(systemId)
        .seq(0)
        .frame(MavFrame.MAV_FRAME_GLOBAL_RELATIVE_ALT)
        .command(MavCmd.MAV_CMD_NAV_WAYPOINT)
        .x((int)(lat * 1e7))
        .y((int)(lon * 1e7))
        .z(alt)
        .build();

    parser.sendMessage(MavlinkMessage.create(
        GCS_SYSTEM_ID,
        MavComponent.MAV_COMP_ID_MISSIONPLANNER,
        mission
    ));
}
```
##### 五、遥测数据处理
1. 姿态数据解析
```java
public void handleAttitude(Attitude attitude) {
    System.out.printf("Roll: %.2f°, Pitch: %.2f°, Yaw: %.2f°%n",
        Math.toDegrees(attitude.roll()),
        Math.toDegrees(attitude.pitch()),
        Math.toDegrees(attitude.yaw()));
}
```
2. 位置数据解析
```java
public void handleGlobalPositionInt(GlobalPositionInt gps) {
    double lat = gps.lat() / 1e7D;
    double lon = gps.lon() / 1e7D;
    float alt = gps.alt() / 1000f;
    
    System.out.printf("Position: Lat=%.6f, Lon=%.6f, Alt=%.1fm%n",
        lat, lon, alt);
}
```
##### 六、完整控制流程
```java
public class DroneController {
    private static final int GCS_SYSTEM_ID = 255;
    private MavlinkParser parser;
    private Thread receiveThread;

    public void start() {
        // 1. 建立通信连接
        SerialConnector serial = new SerialConnector();
        if (!serial.connect("/dev/ttyUSB0", 57600)) {
            throw new RuntimeException("Connection failed");
        }

        // 2. 初始化MAVLink解析器
        parser = new MavlinkParser(
            new SerialInputStream(serial),
            new SerialOutputStream(serial)
        );

        // 3. 启动接收线程
        receiveThread = new Thread(this::receiveLoop);
        receiveThread.start();

        // 4. 控制流程
        armDrone(1);      // 解锁无人机
        takeOff(1, 10);   // 起飞至10米高度
        flyTo(1, 31.2304, 121.4737, 30); // 飞往指定坐标
    }

    private void receiveLoop() {
        try {
            while (true) {
                MavlinkMessage<?> msg = parser.readMessage();
                if (msg != null) {
                    handleMessage(msg.getPayload());
                }
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void handleMessage(Object payload) {
        if (payload instanceof Heartbeat) {
            handleHeartbeat((Heartbeat) payload);
        } else if (payload instanceof Attitude) {
            handleAttitude((Attitude) payload);
        }
        // 添加其他消息处理...
    }
}
```
##### 七、安全注意事项
1. 校验和验证：确保所有MAVLink消息的校验和正确
2. 超时处理：实现心跳超时检测（>5秒无心跳断开连接）
3. 应急机制：
```java
public void emergencyStop(int systemId) throws IOException {
    CommandLong cmd = CommandLong.builder()
        .command(MavCmd.MAV_CMD_OVERRIDE_GOTO)
        .param1(1) // 立即停止
        .targetSystem(systemId)
        .build();
    
    parser.sendMessage(MavlinkMessage.create(
        GCS_SYSTEM_ID,
        MavComponent.MAV_COMP_ID_MISSIONPLANNER,
        cmd
    ));
}
```
<!-- 参考 mavlink、dronekit、dronekit-sitl、pymavlink 等开源项目实现无人机的通信和控制。 -->