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()