贝塞尔曲线 BesizerCurve 最后更新时间: 2024年07月15日
本文介绍如何在地图上绘制贝塞尔曲线，并设置宽度，描边颜色、线条样式等属性。
弧线绘制示例
1、绘制贝塞尔曲线
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
您在2021年12月02日以后申请的 key 需要配合您的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
zoom: 14, //地图级别
center: [116.397637, 39.900001], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式
});3
1.3 创建路径
提示
如果不知道如何确认经纬度前往 拾取坐标
//贝塞尔曲线经过的起点，途经点，控制点的二维数组
var startPoint = [[116.37, 39.91]]; //起点
var viaPoint1 = [ //一次贝塞尔曲线
[116.380298, 39.907771], //控制点
[116.38, 39.90] //途径点
];
var viaPoint2 = [ //二次贝塞尔曲线
[116.392872, 39.887391], //控制点1
[116.40772, 39.909252], //控制点2
[116.41, 39.89] //途径点
];
var endPoint = [ //一次贝塞尔曲线
[116.423857, 39.889498], //控制点
[116.422312, 39.899639] //途径点
];
//曲线路径配置
var path = [
startPoint,
viaPoint1,
viaPoint2,
endPoint
]; 注意
描述贝塞尔曲线路径的二维数组规则如下：第一个元素是起点， 之后的元素同时描述控制点和途经点，每个元素可以有0个到2个控制点，控制点在前，途经点在最后。如图所示：
4
1.4 创建贝塞尔曲线实例
var bezierCurve = new AMap.BezierCurve({
path: path, //曲线路径
strokeWeight: 5, //线条宽度
strokeColor: "#fff", //线条颜色
isOutline: true, //是否描边
outlineColor: "red", //描边颜色
borderWeight: 3, //描边宽度
});提示
AMap.BezierCurve支持二次和三次贝塞尔曲线的绘制。
5
1.5 将贝塞尔曲线添加至地图实例
map.add(bezierCurve);