BezierCurve
此类表示一个二阶贝塞尔曲线覆盖物。
构造函数
| 构造函数 | 描述 |
|---|---|
| BezierCurve(points: Array<Point>, controlPoints: Array<Point>, opts: BezierCurveOptions) | 创建二阶贝塞尔曲线覆盖物，构造函数中必须定义坐标点和曲线的控制点 |
BezierCurveOptions
| 属性名 | 类型 | 描述 |
|---|---|---|
| strokeColor | String | 折线颜色 |
| strokeWeight | Number | 折线的宽度，以像素为单位 |
| strokeOpacity | Number | 折线的透明度，取值范围0 - 1 |
| strokeStyle | String | 折线的样式，solid或dashed |
| enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true |
方法
| 方法 | 返回值 | 描述 |
|---|---|---|
| setPath(path: Array<Point>) | none | 设置曲线的路径点 |
| getPath() | Array<Point> | 返回曲线的路径点 |
| setControlPoints(path: Array<Point>) | none | 设置曲线的控制点，每两个路径点之间可以有1或2个控制点，比如路径点有三个点，那个控制点的格式可以是：[ [cp1, cp2], [ cp3 ] ]，其中cp1和cp2为路经点1到2的控制点，cp3为路径点2到3的控制点 |
| getControlPoints() | Array<Point> | 返回曲线的控制点 |
| setStrokeColor(color: String) | none | 设置曲线的颜色 |
| getStrokeColor() | String | 返回曲线的颜色 |
| setStrokeOpacity(opacity: Number) | none | 设置透明度，取值范围0 - 1 |
| getStrokeOpacity() | Number | 返回透明度 |
| setStrokeWeight(weight: Number) | none | 设置线的宽度，范围为大于等于1的整数 |
| getStrokeWeight() | Number | 返回线的宽度 |
| setStrokeStyle(style: String) | none | 设置是为实线或虚线，solid或dashed |
| getStrokeStyle() | String | 返回当前线样式状态，实线或者虚线 |
| getBounds() | Bounds | 返回覆盖物的地理区域范围 |
| enableMassClear() | none | 允许覆盖物在map.clearOverlays方法中被清除 |
| disableMassClear() | none | 禁止覆盖物在map.clearOverlays方法中被清除 |
| getMap() | Map | 返回覆盖物所在的map对象 |
| addEventListener(event: String, handler: Function) | none | 添加事件监听函数 |
| removeEventListener(event: String, handler: Function) | none | 移除事件监听函数 |
事件
| 事件 | 参数 | 描述 |
|---|---|---|
| click | {type: string, target: any, point: [Point](./point.md)} | 点击贝塞尔曲线后会触发此事件 |
| dblclick | {type: string, target: any, point: [Point](./point.md)} | 双击贝塞尔曲线后会触发此事件 |
| mousedown | {type: string, target: any, point: [Point](./point.md)} | 鼠标在贝塞尔曲线上按下触发此事件 |
| mouseup | {type: string, target: any, point: [Point](./point.md)} | 鼠标在贝塞尔曲线释放触发此事件 |
| mouseover | {type: string, target: any, point: [Point](./point.md)} | 鼠标移入贝塞尔曲线时触发此事件 |
| mouseout | {type: string, target: any, point: [Point](./point.md)} | 鼠标移出贝塞尔曲线时触发此事件 |
示例
ts
// 创建路径点
const points = [
new BMapGL.Point(116.380, 39.900),
new BMapGL.Point(116.424, 39.900),
new BMapGL.Point(116.424, 39.920)
];
// 创建控制点
const controlPoints = [
[
new BMapGL.Point(116.402, 39.890), // 第一段曲线的控制点
new BMapGL.Point(116.424, 39.890)
],
[
new BMapGL.Point(116.434, 39.900) // 第二段曲线的控制点
]
];
// 创建贝塞尔曲线
const bezierCurve = new BMapGL.BezierCurve(points, controlPoints, {
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8
});
// 添加到地图
map.addOverlay(bezierCurve);
// 添加事件监听
bezierCurve.addEventListener('click', function(e) {
console.log('曲线被点击', e.point);
});常见用途
路线绘制：
- 平滑的路线轨迹展示
- 车辆行驶路径规划
- 物流配送路线优化
动画效果：
- 物体运动轨迹
- 路径动画展示
- 流向图绘制
注意事项
控制点设置：
- 每两个路径点之间可以有1个或2个控制点
- 控制点数组格式需要与路径点对应
- 合理设置控制点位置可以获得更好的曲线效果
性能优化：
- 避免使用过多的控制点
- 当需要频繁更新时，建议使用较低的描点数量
- 适当调整透明度，避免视觉干扰
使用建议：
- 路径点建议不要过于密集
- 控制点与路径点的距离会影响曲线的弯曲程度
- 建议在开发时显示控制点以便调试