开发 地图 JS API 2.0 进阶教程 线 贝塞尔曲线

贝塞尔曲线 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);

2、本章涉及的属性及方法说明

2.1 AMap.BezierCurve

参数/方法

说明

类型 

默认值

path

贝塞尔曲线的路径

Array

-

strokeWeight

轮廓线宽度

Number

2

strokeColor

轮廓线颜色,使用16进制颜色代码赋值

String

'#00D3FC'

isOutline

是否显示描边

Boolean

false

outlineColor

线条描边颜色,此项仅在isOutlinetrue时有效

String

'#00B2D5'

borderWeight

描边的宽度

Number

1

map.add(bezierCurve)

将曲线添加到地图上的方法

Function

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码