您现在的位置: 开发 > 地图 JS API v2.0 > 教程 > 覆盖物 > 矢量图形

矢量图形 最后更新时间: 2021年01月22日

本章介绍矢量地图图面覆盖物类型。包括:

  1. 折线覆盖物 Polyline 、 多边形覆盖物 Polygon 、圆形覆盖物 Circle 、矩形覆盖物 Rectangle 、 椭圆形覆盖物 Ellipse
  2. 贝赛尔曲线 BesizerCurve 

折线、面、圆形等覆盖物

本小节介绍在地图图面使用折线、多边形、圆形等覆盖物的方式。


一. 折线 Polyline 

AMap.Polyline 对象为用户提供在地图图面绘制折线的能力。可以为折线设置宽度,描边颜色、线条样式等属性。

  1.  折线的创建与添加
// 折线的节点坐标数组,每个元素为 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 新增。

    var southWest = new AMap.LngLat(116.356449, 39.859008)
    var northEast = new AMap.LngLat(116.417901, 39.893797)

    var bounds = new AMap.Bounds(southWest, northEast)

    var rectangle = new AMap.Rectangle({
        bounds: bounds,
        strokeColor:'red',
        strokeWeight: 6,
        strokeOpacity:0.5,
        strokeDasharray: [30,10],
        // strokeStyle还支持 solid
        strokeStyle: 'dashed',
        fillColor:'blue',
        fillOpacity:0.5,
        cursor:'pointer',
        zIndex:50,
    })

    map.add(rectangle)


查看属性与方法


五. 椭圆形覆盖物 Ellipse 

AMap.Ellipse 对象为用户提供在地图图面绘制椭圆形覆盖物的能力。可以为椭圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。


    var ellipse = new AMap.Ellipse({
        center: [116.433322, 39.900255],
        radius: [ 2000, 1000 ], //半径
        borderWeight: 3,
        strokeColor: "#FF33FF", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10], 
        fillColor: '#1791fc',
        zIndex: 50,
    })

    map.add(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);

查看属性与方法

新用户
福利
示例
中心
常见
问题