# quadratic-bezier-curve-3d-flow-renderer

> 基于ArcGIS JS API的扩展渲染器，用于展示三维二次贝塞尔曲线流动效果。

Latest version **1.0.1** (published 2022-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install quadratic-bezier-curve-3d-flow-renderer
pnpm add quadratic-bezier-curve-3d-flow-renderer
yarn add quadratic-bezier-curve-3d-flow-renderer
bun add quadratic-bezier-curve-3d-flow-renderer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-14 |
| First published | 2022-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 69 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | travelclover |
| Maintainers | travelclover |
| Keywords | renderer, bezier, curve, line, arcgis, quadratic, 流向, 贝塞尔 |

## Links

- npm: https://www.npmjs.com/package/quadratic-bezier-curve-3d-flow-renderer
- Repository: https://github.com/travelclover/quadratic-bezier-curve-3d-flow-renderer
- Homepage: https://github.com/travelclover/quadratic-bezier-curve-3d-flow-renderer#readme
- Issues: https://github.com/travelclover/quadratic-bezier-curve-3d-flow-renderer/issues
- npm.io page: https://npm.io/package/quadratic-bezier-curve-3d-flow-renderer

## Dependencies (1)

- [gl-matrix](https://npm.io/package/gl-matrix.md) ^3.4.3

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-11-14
- 1.0.0 — 2022-11-14

## README

# quadratic-bezier-curve-3d-flow-renderer
基于ArcGIS JS API的扩展渲染器，用于展示三维二次贝塞尔曲线流动效果。  
![地图场景视频融合效果](https://travelclover.github.io/img/2022/11/二次贝塞尔曲线流线效果图.gif)  

二次贝塞尔曲线示意图如下。  
![二次贝塞尔曲线示意图](https://travelclover.github.io/img/2022/11/二次贝塞尔曲线示意图.gif)

## 安装
使用npm：
```
$ npm install quadratic-bezier-curve-3d-flow-renderer
```
使用yarn：
```
$ yarn add quadratic-bezier-curve-3d-flow-renderer
```
使用pnpm：
```
$ pnpm add quadratic-bezier-curve-3d-flow-renderer
```

## 构造方法
```javascript
new QuadraticBezierCurve3dFlowRenderer(
  linesConfig, // 线条配置数据，属性详情见下方表格
  sceneView, // 创建的三维场景对象
  externalRenderers, // ArcGIS API提供的外部扩展渲染器的接口
  defaultConfig, // 可选项，默认配置，详情见下方表格
);
```

### 构造方法参数
| 参数名称 | 类型 | 描述 | 
| :---- | :---- | :---- | 
| linesConfig | LineConfig[] | 线条配置数据，详情见下方lineConfig属性表格。 |
| sceneView | [__esri.SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) | 创建的三维场景对象。 |
| externalRenderers | [__esri.externalRenderers](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-3d-externalRenderers.html) | ArcGIS API提供的外部扩展渲染器的接口。 |
| defaultConfig | DefaultConfig | 可选项，默认配置，详情见下方defaultConfig属性表格。 |

### lineConfig属性
| 属性 | 类型 | 描述 | 
| :---- | :---- | :---- | 
| startPoint | [__esri.Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 线条起点。 |
| endPoint | [__esri.Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 线条终点。 |
| controlPoint | [__esri.Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html) | 二次贝塞尔曲线的控制点。 |
| 其它属性见defaultConfig属性介绍 |  |  |

### defaultConfig属性
| 属性 | 类型 | 描述 | 
| :---- | :---- | :---- | 
| color | string | 十六进制表示的颜色。可选项。默认值：#00ffff。 |
| flowRatio | number | 流动效果长度占流动路径长度的比例。可选项。取值范围大于0小于等于1。默认值：0.25。 |
| pointsCount | number | 点的数量。可选项。默认值：500。 |
| size | number | 点大小。可选项。默认值：3。 |
| speed | number | 流动速度。可选项。默认值：500。 |

## 实例方法
| 方法名称 | 返回值类型 | 描述   | 
| :---- | :---- | :---- | 
| updateDefaultConfig(defaultConfig) | undefind | 更新默认配置。参数为defaultConfig对象。 |
| updateLinesConfig(linesConfig) | undefind | 更新线条配置。参数为lineConfig数组。 |

## 示例
使用时，需引入ArcGIS API中的相关接口对象：
```javascript
import Point from '@arcgis/core/geometry/Point';
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';
```
以及引入`quadratic-bezier-curve-3d-flow-renderer`：
```javascript
import QuadraticBezierCurve3dFlowRenderer from 'quadratic-bezier-curve-3d-flow-renderer';
```

生成线的配置：
```javascript
const linesConfig = [
  // 第一条线
  { 
    // 线条起始点，为ArcGIS API中Point类的实例对象
    startPoint: new Point({
      longitude: 104.07082665464789,
      latitude: 30.67089665572961,
      z: 1,
    }),
    // 线条终点
    endPoint: new Point({
      longitude: 104.07103884320988,
      latitude: 30.656671934579894,
      z: 1,
    }),
    // 控制点
    controlPoint: new Point({
      longitude: 104.0709823651847,
      latitude: 30.6637032277326,
      z: 500,
    }),
    color: '#00ff00', // 可选项，颜色
    flowRatio: 0.5, // 可选项，流动效果长度占流动路径长度的比例
    pointsCount: 1000, // 可选项，点数量
    size: 3, // 可选项，点大小
    speed: 400, // 可选项，速度
  },
  // 第二条线
  // ...
]
```

实例化renderer对象：
```javascript
const myExternalRenderer = new QuadraticBezierCurve3dFlowRenderer(
  linesConfig,
  sceneView, // 创建的三维场景对象
  externalRenderers // 
);
```

注册renderer：
```javascript
externalRenderers.add(sceneView, myExternalRenderer);
```

更新默认配置：
```javascript
myExternalRenderer.updateDefaultConfig({
  color: '#ff0000', // 修改默认颜色
  flowRatio: 1, // 修改比例
  pointsCount: 2000, // 修改默认点数量
  size: 5, // 修改点默认大小
  speed: 500, // 修改默认速度
});
```

---
_Source: https://npm.io/package/quadratic-bezier-curve-3d-flow-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._