开发指南

您当前的位置：首页> JavaScript API 通用版 > 开发指南

9.1 地图工具概述
9.2 绘制工具使用
9.3 测量工具使用
9.4 矢量图编辑工具使用

工具类

9.1 地图工具概述

API提供了一套交互功能更为丰富的工具。它包括：绘制工具、测量工具、矢量图形编辑工具等。

工具名称	描述	详细说明
DrawTool	绘制工具	绘制点、线、面、圆等矢量图形。
MeasureTool	测量工具	测量距离、面积等。
PolylineEditor	线编辑工具	编辑矢量线图形。
PolygonEditor	多边形编辑工具	编辑矢量多边形图形。
CircleEditor	圆形编辑工具	编辑矢量圆形图形。
EllipseEditor	椭圆形编辑工具	编辑矢量椭圆形图形。
RectangleEditor	矩形编辑工具	编辑矢量矩形图形。

9.2 绘制工具使用

初始化地图绘制工具，并可能设置绘制图形的样式。通过turnOn()方法设置绘制的图形类型

工具	描述	详细说明
KMap.DrawType.POINT	点	绘制点图形。
KMap.DrawType.LINE	线	绘制折线图形。
KMap.DrawType.POLYGON	面	绘制多边形图形。
KMap.DrawType.CIRCLE	圆	绘制圆形图形。
KMap.DrawType.ELLIPSE	椭圆	绘制椭圆形图形。
KMap.DrawType.RECTANGLE	矩形	绘制矩形图形。

如下面为一个切换地图绘制折线工具的例子

let drawTool = new KMap.DrawTool();
map.add(drawTool);
drawTool.turnOn(KMap.DrawType.LINE);

可以监听结束事件获取到结束后的线数据：

let drawTool = new KMap.DrawTool();
map.add(drawTool);
drawTool.on('end',(e) => {
    console.log(e.points);
});

9.3 测量工具使用

初始化地图测量工具，并可能设置测量图形的样式。通过turnOn()方法设置绘制的图形类型。

工具	描述	详细说明
KMap.MeasureType.LINE	线	测量线的长度，距离。
KMap.MeasureType.POLYGON	面	测量多边形的面积。
KMap.MeasureType.CIRCLE	圆	测量圆的面积。
KMap.MeasureType.RECTANGLE	矩形	测量矩形的面积。

如下面为一个地图测距工具的例子

let measureTool = new KMap.MeasureTool();
map.add(measureTool);
measureTool.turnOn(KMap.MeasureType.LINE);

9.4 编辑工具使用

可以编辑已有矢量图形，如线、多边形、面、椭圆、矩形，编辑结束后可以保存编辑结果。
如下面为一个编辑多边形工具的例子

let polygon = new KMap.Polygon({
    path: [
        [116.38521978, 39.91401111],
        [116.3934866, 39.91345315],
        [116.39484697, 39.90571956],
        [116.38090652, 39.90700876],
        [116.37954288, 39.91251311],
        [116.38185812, 39.91505554],
        [116.38521978, 39.91401111]
    ]
})
map.add(polygon);
let polygonEditor = new KMap.PolygonEditor(map, null, {
    //控制点样式
    controlPointStyle: {
        fillColor: "#000FFF"
    }
});
polygonEditor.setTarget(polygon);
polygonEditor.open();

如需要结束编辑则可以：
```
polygonEditor.close();
```