矢量图形 最后更新时间: 2023年11月27日
本章介绍矢量地图图面覆盖物类型。包括：
- 折线覆盖物 Polyline 、 多边形覆盖物 Polygon 、圆形覆盖物 Circle 、矩形覆盖物 Rectangle 、 椭圆形覆盖物 Ellipse
- 贝塞尔曲线 BesizerCurve
折线、面、圆形等覆盖物
本小节介绍在地图图面使用折线、多边形、圆形等覆盖物的方式。
一. 折线 Polyline
AMap.Polyline 对象为用户提供在地图图面绘制折线的能力。可以为折线设置宽度，描边颜色、线条样式等属性。
- 折线的创建与添加
// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
// 创建折线实例
var polyline = new AMap.Polyline({
path: path,
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
});
// 将折线添加至地图实例
map.add(polyline);2. 折线的移除
// 移除一条已创建的折线
map.remove(polyline);
// 一次性移除多条已创建的折线
var polylines = [polyline1, polyline2, polyline3];
map.remove(polylines);3. 折线的显示与隐藏
// 显示一条已创建的 polyline
polyline.show();
// 隐藏一条已创建的 polyline
polyline.hide();二. 多边形 Polygon
AMap.Polygon 对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色、描边颜色、轮廓线样式等属性。
// 多边形轮廓线的节点坐标数组
var path = [
new AMap.LngLat(116.368904,39.913423),
new AMap.LngLat(116.382122,39.901176),
new AMap.LngLat(116.387271,39.912501),
new AMap.LngLat(116.398258,39.904600)
];
var polygon = new AMap.Polygon({
path: path,
fillColor: '#fff', // 多边形填充颜色
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
});
map.add(polygon);三. 圆形 Circle
AMap.Circle 对象为用户提供在地图图面绘制圆形覆盖物的能力。可以为圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。
AMap.Circle 类与上一章介绍到的 AMap.CircleMarker 类均为在地图上绘制圆形覆盖物的类。这两种方式的根本不同在于 AMap.Circle 为矢量图形类，随地图的缩放会改变大小；而 AMap.CircleMarker 类则不会随图面缩放而改变。
var circle = new AMap.Circle({
center: new AMap.LngLat(116.39,39.9), // 圆心位置
radius: 1000, // 圆半径
fillColor: 'red', // 圆形填充颜色
strokeColor: '#fff', // 描边颜色
strokeWeight: 2, // 描边宽度
});
map.add(circle);四. 矩形 Rectangle
AMap.Rectangle 对象为用户提供在地图图面绘制矩形覆盖物的能力。此方法可以通过指定矩形的边界（ AMap.Bounds ）来快速绘制一个矩形覆盖物。此类为 v1.4.2 新增。
五. 椭圆形覆盖物 Ellipse
AMap.Ellipse 对象为用户提供在地图图面绘制椭圆形覆盖物的能力。可以为椭圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。
贝塞尔曲线 BesizerCurve
本小节介绍在地图图面绘制贝塞尔曲线的方式。AMap.BezierCurve 为在图面绘制贝塞尔曲线的类。支持二次、三次贝塞尔曲线。具体使用方式如下：
//贝塞尔曲线经过的起点，途经点，控制点，终点的二维数组
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);