| 第1行： | 第1行： | ||
| − | <div id="examples_api_center"><div class="title-hd">贝塞尔曲线</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例以飞机航线为例，介绍贝塞尔曲线的应用。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https:// | + | <div id="examples_api_center"><div class="title-hd">贝塞尔曲线</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例以飞机航线为例，介绍贝塞尔曲线的应用。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://bj.bcebos.com/v1/mapopen/api-demos/video/贝塞尔曲线.mp4</pre> |
</div><div class="video-title1">贝塞尔曲线应用示例</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | </div><div class="video-title1">贝塞尔曲线应用示例</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> | ||
{| width="370" border="1" | {| width="370" border="1" | ||
2020年10月9日 (五) 16:11的版本
贝塞尔曲线
功能场景
该示例以飞机航线为例，介绍贝塞尔曲线的应用。
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
}));
复制
深色
复制成功