贝塞尔曲线
功能场景
该示例以飞机航线为例,介绍贝塞尔曲线的应用。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/贝塞尔曲线.mp4
贝塞尔曲线应用示例
核心接口
类 | 接口 | 描述 | 参考文档 |
BezierCurve | new BMapGL.BezierCurve(path, controlPoints, opts) | 创建贝塞尔曲线 | 暂无 |
核心代码
// 构造飞机航线的贝塞尔曲线 let pointStart = new BMapGL.Point(117.225859, 36.572198); // 济南 let pointMedium = new BMapGL.Point(117.231132, 38.986181); // 天津 let pointEnd = new BMapGL.Point(116.453173, 39.926851); // 北京 let endP = new BMapGL.Point(116.455183, 39.999881); let path = [ new BMapGL.Point(117.225859, 36.572198), new BMapGL.Point(117.231132, 38.986181), new BMapGL.Point(116.453173, 39.926851) ]; let controlPoints = [ [new BMapGL.Point(116.991968, 38.112096)], [new BMapGL.Point(117.341516, 39.686244)] ]; let bc = new BMapGL.BezierCurve(path, controlPoints, { strokeColor: '#00f', strokeWeight: 5 }); map.addOverlay(bc); // 添加起始点、途经点 let startIcon = new BMapGL.Icon('./images/start.png', new BMapGL.Size(28, 28)); let mediumIcon = new BMapGL.Icon('./images/medium.png', new BMapGL.Size(28, 28)); let endIcon = new BMapGL.Icon('./images/end.png', new BMapGL.Size(28, 28)); map.addOverlay(new BMapGL.Marker(pointStart, { icon: startIcon })); map.addOverlay(new BMapGL.Marker(pointMedium, { icon: mediumIcon })); map.addOverlay(new BMapGL.Marker(endP, { icon: endIcon }));