ol-dynamic-curves

介绍

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

gitee

https://gitee.com/li_zuo_hong/ol-dynamic-curves

安装

npm install ol-dynamic-curves --save

使用示例

将map 实例传递进去即可渲染一个默认配置的动态曲线

let curves = new CurvesLayer({
  map: this.map,
});

默认配置

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 模样的数组

curves.addCurves([[[140.80, 15.90],[151.498262,-18.690718]]])

refreshCurvesCoords

刷新曲线速率，作者本意是想提供配置选项在添加之后同步曲线的进度，最终还是决定作为API 由个人选择使用

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

removeFeatureByIndex

这个index 指的是pointPositions 的index

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

destroy

删除相关图层即事件

curves.destroy()