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

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

更新时间:2018年05月28日


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

  1. 折线覆盖物 Polyline 、 多边形覆盖物 Polygon 、圆形覆盖物 Circle 、矩形覆盖物 Rectangle 、 椭圆形覆盖物 Ellipse
  2. 贝赛尔曲线 BesizerCurve 
  3. 鼠标工具 MouseTool 和矢量图形编辑工具

折线、面、圆形等覆盖物

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

一. 折线 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.Polyline({
    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);

查看全部属性和方法 



鼠标工具和矢量图形编辑工具

本小节介绍图面覆盖物的鼠标工具和图形编辑工具。除了可以在地图图面上添加点、线、面等多种覆盖物以外,我们还可以使用一系列地图工具对覆盖物进行编辑。下面介绍几种常用编辑工具的使用。

一.  鼠标工具 MouseTool 

AMap.MouseTool 插件主要通过用户在地图图面的鼠标操作,绘制相应的点、线、面覆盖物;或者进行图面的距离测量、面积量测、拉框放大、拉框缩小等。

1. 通过鼠标点击绘制覆盖物。

通过 AMap.MouseTool 工具,在图面添加默认样式的 Marker 点:

map.plugin(["AMap.MouseTool"],function(){ 
    var mouseTool = new AMap.MouseTool(map); 

    //使用鼠标工具,在地图上画标记点
    mouseTool.marker(); 
});



如果想通过鼠标点击,在图面添加自定义样式 Marker 点,只需要在 marker 方法中添加点样式 MarkerOptions,具体配置参考「点覆盖物」。

线,面的添加方式同上。只要将 marker 方法替换成相应的线 mousetool.polyline();  或者 面 mousetool. polygon();  方法即可。


2. 获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径。

使用鼠标工具绘制的点、折线、多边形、圆形、矩形等覆盖物,都可以通过多边形覆盖物自身的方法,获取到位置/范围/路径。此处以多边形为例,阐述获取相应信息的方式:

//通过插件方式引入 AMap.MouseTool 工具
map.plugin(["AMap.MouseTool"],function(){ 
   //在地图中添加MouseTool插件
    var mouseTool = new AMap.MouseTool(map);

    //用鼠标工具画多边形
    var drawPolygon = mouseTool.polygon(); 

    //添加事件
    AMap.event.addListener( mouseTool,'draw',function(e){
        console.log(e.obj.getPath());//获取路径/范围
    });
});


3. 鼠标工具距离量测、面积量测、拉框放大

鼠标工具除可以绘制多种覆盖物以外,还可以进行距离量测、面积量测、拉框放大、拉框缩小等。

以下以距离量测模式为例介绍。鼠标在地图上单击绘制量测节点,并计算显示两两节点之间的距离,鼠标左键双击或右键单击结束当前量测操作。距离测量方式:

//通过插件方式引入 AMap.MouseTool 工具
map.plugin(["AMap.MouseTool"], function() {
    //在地图中添加MouseTool插件
   var distanceTool = new AMap. AMap.MouseTool(map);

   //todo: 增加细节
   distanceTool.rule();        
});

查看更多属性和方法


二. 矢量图形编辑工具

本小节介绍各类矢量图形的编辑工具。除了可以在图面绘制各种覆盖物以外,我们还可以借助矢量图形编辑工具对各种已经绘制好的图形进行编辑工作。现已支持的图形的编辑工具包括折线、多边形编辑工具 PolyEditor, 贝塞尔曲线编辑插件 BezierCurveEditor,椭圆编辑插件 EllipseEditor,矩形编辑插件RectangleEditor,这些插件均可以在引入后,对每种类型覆盖物的多种属性进行编辑。

下面以折线、多边形编辑工具 PolyEditor 为例进行介绍。

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.plugin(["AMap.PolyEditor"],function(){
    // 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
   polylineEditor = new AMap.PolyEditor(map, polyline); 

   // 开启编辑模式
   polylineEditor.open(); 
});    

查看更多属性和方法


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