DJI-KMZ-builder

KO | EN

gitlite — search

#go #python #api #large-language-models #cli #react-native #awesome #editor #llm #ai-agent

DJI-KMZ-builder

(★ 9)

파일 탐색기

ZIP 다운로드

- demo.gif
- - app.ts
  - types.ts
- package-lock.json
- package.json
- tsconfig.json
- test_backend_logic.ts
- App.tsx
- index.css
- logo.svg
- main.tsx
- README.md
- taskCache.ts
- vite-env.d.ts
.gitignore
index.html
package-lock.json
package.json
pnpm-lock.yaml
README.md
README_ZH.md
tsconfig.json
vite.config.ts

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

# 프로젝트 배지

演示动画

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p>
    <strong>English</strong> •
    <a href="./README_ZH.md">中文</a>
  </p>

## Introduction

This project is a lightweight, web-based GIS route planning tool tailor-made for DJI consumer drones (specifically targeting the **DJI Mini 5 Pro**) and remote controllers with built-in screens (**DJI RC 2**). Using visual map interactions (based on the Leaflet ecosystem), it helps users plan complex flight waypoints, altitudes, and gimbal angles directly within the browser. Finally, it allows for a one-click export of `.kmz` waypoint mission files that comply with DJI's WPML standards, which can be directly imported and executed in the **DJI Fly App**.

### Core Features & Technical Boundaries

Due to the strict limitations of the consumer-grade DJI Fly App, this project incorporates the following targeted designs at the implementation level:

*   **Consumer Drone Adaptation**: The exported KMZ completely removes the `<wpml:payloadInfo>` tag exclusive to the `DJI Pilot 2` enterprise edition. The drone enum value is strictly set to `68` to prevent the Fly App from black-screening and crashing upon import.
*   **Strict XML Separation**: Following DJI's standard architecture, the overall mission configuration is placed in `template.kml` (which must NEVER contain the specific route `<Folder>`), while all waypoint details and gimbal actions are strictly organized in `waylines.wpml` to ensure safe parsing without crashes.
*   **"Route + Manual Interval" Workflow**: Discards global time-lapse or distance-lapse photo capture instructions which the Fly App cannot parse. The route file **solely focuses on controlling 3D spatial trajectories** (latitude, longitude, altitude, speed) and **adjusting the gimbal angle upon reaching the start point**. The camera shutter is manually taken over by the operator enabling the "Interval" shooting mode on the RC 2 controller, ensuring stable execution.
*   **Waypoint Simplification**: Utilizes Turf.js for spatial calculations and intelligently reduces unnecessary physical waypoints through smooth curves (such as `followBadArc` or `toPointAndPassWithContinuityCurvature`). This prevents the mission from hitting the single-route limit of 200 waypoints.

### Tech Stack

*   **Frontend Framework**: React 19 + TypeScript + Vite 6
*   **Map & Spatial Computing**: Leaflet, React-Leaflet, Turf.js
*   **Data Export & Compression**: JSZip, FileSaver.js
*   **Styling**: Tailwind CSS v4 (Vite-based)

---

## Installation & Setup

### 1. Prerequisites
*   Make sure **Node.js** (v20 or higher recommended) is installed on your machine.
*   This project recommends using **pnpm** as the package manager. If it is not installed, install it globally first:
    ```bash
    npm install -g pnpm
    ```

### 2. Install Dependencies
Navigate to the project root directory and run the following command to install all required dependencies:
```bash
pnpm install
```

### 3. Local Development Server
Start the Vite development server:
```bash
pnpm run dev
```
Once started, the console will output the local access URL (e.g., `http://localhost:3000`). Open this URL in your browser to start debugging the planner.

### 4. Production Build
When development is complete and you are ready to deploy, run the build command:
```bash
pnpm run build
```
This will bundle the application using Vite and output the static files for production into the `dist/` directory.

### 5. Other Commands
*   **Linting**: Run TypeScript type checking:
    ```bash
    pnpm run lint
    ```
*   **Clean**: Remove the `dist/` directory:
    ```bash
    pnpm run clean
    ```

DJI-KMZ-builder

파일 탐색기

# CDN으로 사용하기

# 프로젝트 배지

Was this content helpful?

Recent Feedback

Download README