矢量图形 (Vector Graphics)

JSAPI v2.0 支持在地图上绘制各种矢量图形，如折线、多边形、圆和贝塞尔曲线。所有矢量图形均支持 WebGL 渲染。

1. 折线 (Polyline)

用于绘制路径、轨迹或边界线。

const path = [
    [116.368904, 39.913423],
    [116.382122, 39.901176],
    [116.387271, 39.912501],
    [116.398258, 39.904600]
];

const polyline = new AMap.Polyline({
    path: path,
    isOutline: true,         // 是否显示描边
    outlineColor: '#ffeeff', // 描边颜色
    borderWeight: 3,         // 描边宽度
    strokeColor: "#3366FF",  // 线颜色
    strokeOpacity: 1,        // 线透明度
    strokeWeight: 6,         // 线宽
    strokeStyle: "solid",    // 线样式: solid, dashed
    strokeDasharray: [10, 5], // 虚线间隔
    lineJoin: 'round',       // 折线拐点样式
    lineCap: 'round',        // 折线端点样式
    zIndex: 50,
});

map.add(polyline);

Polyline 配置项

参数	类型	默认值	说明
path	Array	-	路径坐标 `[[lng, lat], ...]`
strokeColor	String	'#00D'	线条颜色
strokeOpacity	Number	1	线条透明度 0-1
strokeWeight	Number	1	线条宽度（像素）
strokeStyle	String	'solid'	线条样式：solid / dashed
strokeDasharray	Array	-	虚线间隔，如 `[10, 5]`
isOutline	Boolean	false	是否显示描边
outlineColor	String	'#000'	描边颜色
borderWeight	Number	1	描边宽度
lineJoin	String	'miter'	拐点样式：miter / round / bevel
lineCap	String	'butt'	端点样式：butt / round / square
geodesic	Boolean	false	是否大地线（地球曲面最短路径）
showDir	Boolean	false	是否显示方向箭头
zIndex	Number	10	层叠顺序
extData	Any	-	自定义数据

2. 多边形 (Polygon)

用于绘制区域、围栏或建筑物轮廓。

const polygonPath = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365]
];

const polygon = new AMap.Polygon({
    path: polygonPath,
    fillColor: '#ccebc5',   // 填充颜色
    fillOpacity: 0.5,       // 填充透明度
    strokeColor: '#2b8cbe', // 轮廓线颜色
    strokeWeight: 2,        // 轮廓线宽度
});

map.add(polygon);

Polygon 配置项

参数	类型	默认值	说明
path	Array	-	多边形路径 `[[lng, lat], ...]`，支持带孔 `[外环, 孔1, 孔2]`
fillColor	String	'#00D'	填充颜色
fillOpacity	Number	0.5	填充透明度 0-1
strokeColor	String	'#00D'	边框颜色
strokeOpacity	Number	1	边框透明度 0-1
strokeWeight	Number	1	边框宽度（像素）
strokeStyle	String	'solid'	边框样式：solid / dashed
strokeDasharray	Array	-	虚线间隔
zIndex	Number	10	层叠顺序
extData	Any	-	自定义数据

3. 圆 (Circle)

用于绘制圆形区域，常用于周边搜索范围展示。

const circle = new AMap.Circle({
    center: [116.403322, 39.920255], // 圆心
    radius: 1000,           // 半径 (米)
    fillColor: '#ee2200',
    fillOpacity: 0.5,
    strokeColor: '#F33',
    strokeWeight: 1,
});

map.add(circle);

4. 贝塞尔曲线 (BezierCurve)

绘制平滑曲线，常用于航线或流向图。

const path = [
    // 起点
    [116.39, 39.91, 116.37, 39.91], // 控制点1, 控制点2
    // 途经点
    [116.38, 39.92, 116.38, 39.93, 116.39, 39.93], 
    // ...
];

const bezier = new AMap.BezierCurve({
    path: path,
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 3,
    strokeColor: "#3366FF", 
    strokeWeight: 6,
    strokeOpacity: 0.9,
});

map.add(bezier);

矢量图形编辑器

高德提供了 AMap.PolyEditor, AMap.CircleEditor 等插件，允许用户在地图上交互式编辑矢量图形。

// 需先加载插件 AMap.PolyEditor
const polyEditor = new AMap.PolyEditor(map, polyline);

polyEditor.open(); // 开启编辑
// polyEditor.close(); // 结束编辑

polyEditor.on('end', function(event) {
    console.log('编辑结束，新路径：', event.target.getPath());
});

5. 最佳实践

性能优化

// 大量坐标点时，使用 setPath 而非重新创建
polyline.setPath(newPath);  // 推荐
// map.remove(old); map.add(new);  // 不推荐

// 批量操作使用数组
map.add([polyline1, polyline2, polygon1]);
map.remove([polyline1, polyline2]);

常见问题

Q: 多边形不显示？

检查路径是否闭合（首尾相连），确保至少 3 个点。

Q: 编辑器报错？

确保先加载插件：

AMap.plugin(['AMap.PolyEditor', 'AMap.CircleEditor'], function() {
  // 使用编辑器
});

Q: 如何判断点是否在多边形内？

const isInside = polygon.contains([lng, lat]);

5.0 KiB Raw Permalink Blame History