# ol-dynamic-curves

**Repository Path**: li_zuo_hong/ol-dynamic-curves

## Basic Information

- **Project Name**: ol-dynamic-curves
- **Description**: 一个在openlayers地图上根据经纬度生成的、以圆形渐变上色的动态曲线插件包。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-29
- **Last Updated**: 2025-08-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ol-dynamic-curves

#### 介绍
一个在openlayers地图上根据经纬度生成的、以圆形渐变上色的动态曲线插件包。

### 安装
npm install ol-dynamic-curves --save

### 使用示例
将map 实例传递进去即可渲染一个默认配置的动态曲线
```javascript
let curves = new CurvesLayer({
  map: this.map,
});
```

### 默认配置
```javascript
const defaultOptions = {
    pointPositions: [[[140.80, 15.90], [143.60, 33.00]], [[140.80, 15.90], [154.216463, 42.895035]], [[140.80, 15.90], [105.941956, 47.07053]], [[140.80, 15.90], [100.718274, 0.95006]]],
    splitLength: 180,
    oneFrameLimitTime: 0,
    radialColor: {
        0: '#BBFFFF',
        0.2: '#AEEEEE',
        0.4: '#96CDCD',
        0.6: '#668B8B',
        0.8: '#98F5FF',
        1: '#8EE5EE'
    },
    controlRatio: 1.0,
}
```

### 参数说明
| 参数名称          |                                                                                                     意义 |
| ----------------- | -------------------------------------------------------------------------------------------------------: |
| pointPositions    | 起始结束坐标点的集合：[ [ 经纬度数组,经纬度数组] , [ 经纬度数组,经纬度数组] ] => [ [ 点,点], [ 点,点]  ] |
| splitLength       |                                                                             分段间隔即整个曲线分为多少段 |
| oneFrameLimitTime |                                           隔多少ms渲染一次（不是完全准确的控制时间,跟当前fps有一定关系） |
| radialColor       |                                                                                           渐变色描述数组 |
| controlRatio      |                                                                                         控制点的位置比例 |

### 相关API

#### addCurves
> 添加任意条曲线. 接收一个pointPositions 模样的数组

```javascript
curves.addCurves([[[140.80, 15.90],[151.498262,-18.690718]]])
```
### refreshCurvesCoords
> 刷新曲线速率，作者本意是想提供配置选项在添加之后同步曲线的进度，最终还是决定作为API 由个人选择使用

```javascript
// 通常搭配addCurves 使用 在添加后 初始化所有的曲线
curves.refreshCurvesCoords()
```

### removeFeatureByIndex
> 这个index 指的是pointPositions 的index

```javascript
curves.removeFeatureByIndex(0) // 表示删除 pointPositions 索引下标为 0 的相关feature
```

### destroy
> 删除相关图层即事件

```javascript
curves.destroy()
```