高德地图 JS API的覆盖物—编辑矢量图形

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

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

鼠标工具 MouseTool

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

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

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

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

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

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

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

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

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

JavaScript
//通过插件方式引入 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. 鼠标工具距离量测、面积量测、拉框放大

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

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

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

   //测量
   distanceTool.rule();        
});

矢量图形编辑工具

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

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

1. 添加一条绘制折线：

JavaScript
// 折线的节点坐标数组，每个元素为 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. 构造折线编辑对象，并开启折线的编辑状态

JavaScript
// 引入多边形编辑器插件
map.plugin(["AMap.PolyEditor"],function(){
   // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
   polylineEditor = new AMap.PolyEditor(map, polyline); 

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

0 0 投票数

文章评分