示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 覆盖物 > 矢量图形 >

高德 开发 地图 JS API 教程 覆盖物 矢量图形

更新时间:2018年09月20日


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

  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(polyline);


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 circleMarker = new AMap.CircleMarker({
    center: new AMap.LngLat(116.39,39.9),  // 圆心位置
    radius: 10, // 圆半径
    fillColor: 'red',   // 圆形填充颜色
    strokeColor: '#fff', // 描边颜色
    strokeWeight: 2, // 描边宽度
});

map.add(circleMarker);

查看全部属性和方法


四. 矩形 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);

查看全部属性和方法 


示例中心 功能
在线体验
常见问题