# flightline-visualization

**Repository Path**: zzh97228/flightline-visualization

## Basic Information

- **Project Name**: flightline-visualization
- **Description**: 航线数据可视化大屏，完全使用vue3 + vite构建的可视化应用，航线数据使用svg绘图并交互。地图具有缩放、拖动功能，底部的多选按钮可以大屏内容联动。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 5
- **Created**: 2021-04-26
- **Last Updated**: 2025-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">
  Flighline Visualization
</h1>

航线数据可视化大屏，完全使用[vue3](https://github.com/vuejs/vue-next) + [vite](https://github.com/vitejs/vite)构建的可视化应用，航线数据使用svg绘图并交互。地图具有缩放、拖动功能，底部的多选按钮可以大屏内容联动。

- 3840*1350 (pvg)
- 3840*1296 (main)
- 3840*2160 (ocean)

## Installation

```bash
yarn install

#or 

npm install
```

## Start


### 使用伪造数据进行本地调试

1.  启动node后台服务

```bash
yarn serve

# or

npm run serve
```

2.  打开一个新的`cmd`启动应用

```bash
yarn dev

# or

npm run dev
```

3.  在浏览器中打开[http://localhost:8080](http://localhost:8080)


### 向具体ip的后端请求发送数据

```
yarn dev:remote
```

## Build

### 构建本地应用

```bash
yarn build

# or

npm run build
```

### 构建远程服务的应用

```bash
yarn build:remote

# or

npm run build:remote
```



## Examples

<p align="center">
  <img src="https://zzh97228.github.io/flightline-visualization/examples/example2.png" />
</p>

<p align="center">
  <img src="https://zzh97228.github.io/flightline-visualization/examples/example1.png" />
</p>