贝赛尔曲线 BesizerCurve 最后更新时间: 2023年03月23日

亲手试一试

下载完整代码

AMap.BezierCurve 为在图面绘制贝赛尔曲线的类。

提示

支持二次、三次贝赛尔曲线。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

贝赛尔曲线 BesizerCurve

具体使用方式如下：

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

创建路径

//贝赛尔曲线经过的起点，途经点，控制点，终点的二维数组
var startPoint = [[116.39, 39.9]]; // 起点
var viaPoint1 = [[116.39, 39.9], [106.39, 38.9]]; // 控制点，途经点
var viaPoint2 = [[116.39, 39.9], [106.39, 38.9], [106.39, 38.9]]; // 控制点，控制点，途经点
var endPoint = [[116.39, 39.9], [106.39, 38.9]]; // 控制点，终点

var path = [
  startPoint,
  viaPoint1,
  viaPoint2,
  endPoint
];

创建贝赛尔曲线实例

var bezierCurve = new AMap.BezierCurve({
  path: path,
  strokeWeight: 10, // 线条宽度
  strokeColor: '#fff', // 线条颜色
  isOutline: true,	// 是否描边
  outlineColor: 'red', // 描边颜色
  borderWeight: 5 // 描边宽度
});

将贝赛尔曲线添加至地图实例

map.add(bezierCurve);

查看全部属性和方法