你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

绘图工具事件

项目
06/27/2023

在地图上使用绘图工具时，在用户在地图上进行绘制时对特定事件做出响应很有用。下表列出了 DrawingManager 类支持的所有事件。

事件	说明
`drawingchanged`	在添加或更改形状中的任何坐标时触发。
`drawingchanging`	在显示形状的任何预览坐标时触发。例如，此事件在拖动坐标时多次触发。
`drawingcomplete`	在形状完成绘制或退出编辑模式时触发。
`drawingerased`	当在 `erase-geometry` 模式下从绘图管理器中擦除形状时触发。
`drawingmodechanged`	在更改绘制模式时触发。新绘制模式会传入事件处理程序。
`drawingstarted`	在用户开始绘制形状或将形状置于编辑模式时触发。

有关如何在地图上显示矢量图块源数据的完整有效示例，请参阅 Azure Maps 示例中的绘图工具事件。在此示例中，你可以在地图上绘制形状，并在事件触发时进行观察。有关此示例的源代码，请参阅绘图工具事件示例代码。

下图显示了完整有效示例的屏幕截图，该示例演示了绘图工具模块中的事件的工作原理。

屏幕截图显示一个地图，地图显示矢量图块源数据。

示例

让我们看看一些使用绘图工具事件的常见方案。

在多边形区域中选择点

此代码演示如何监视用户绘制形状的事件。对于此示例，代码监视多边形、矩形和圆形的形状。然后，它确定地图上的哪些数据点在绘制区域内。 drawingcomplete 事件用于触发选择逻辑。在选择逻辑中，代码循环访问地图上的所有数据点。它检查点和绘制形状所在的区域是否有交集。此示例利用 Turf.js 开放源代码库执行空间相交计算。

有关如何使用绘图工具在地图上绘制具有可选择点的多边形区域的完整有效示例，请参阅 Azure Maps 示例中的在绘制的多边形区域中选择数据。有关此示例的源代码，请参阅“在绘制的多边形区域中选择数据”示例代码。

显示多边形区域内的显示点的地图的屏幕截图。

在多边形区域中绘制和搜索

用户完成绘制形状后，此代码将在形状区域内搜索兴趣点。可以通过单击框架右上角的“编辑 CodePen”来修改和执行代码。 drawingcomplete 事件用于触发搜索逻辑。如果用户绘制矩形或多边形，则会在几何图形内部进行搜索。如果绘制圆形，则使用半径和中心位置执行兴趣点搜索。 drawingmodechanged 事件用于确定用户何时切换到绘制模式，并且此事件会清除绘图画布。

有关如何使用绘图工具在绘制区域内搜索兴趣点的完整有效示例，请参阅 Azure Maps 示例中的的绘制和搜索多边形区域。有关此示例的源代码，请参阅 [“绘制和搜索多边形区域”示例代码]。

创建测量工具

下面的代码演示了如何使用绘图事件来创建测量工具。 drawingchanging 用于在绘制形状时对其进行监视。当用户移动鼠标时，将计算形状的尺寸。 drawingcomplete 事件用于在绘制形状后对其进行最终计算。 drawingmodechanged 事件用于确定用户何时切换到绘制模式。此外，drawingmodechanged 事件还会清除绘图画布并清除旧的测量信息。

有关如何使用绘图工具测量距离和面积的完整有效示例，请参阅 Azure Maps 示例中的创建测量工具。有关此示例的源代码，请参阅“创建测量工具”示例代码。

显示测量工具示例的地图的屏幕截图。