繪圖工具事件

發行項
07/30/2024

在地圖上使用繪圖工具可方便使用者在地圖上繪製時回應某些事件。此表列出 DrawingManager 類別支援的所有事件。

事件	描述
`drawingchanged`	圖形中新增座標或有任何座標變更時引發。
`drawingchanging`	顯示圖形的任何預覽座標時引發。例如，當拖曳某個座標時，就會多次引發這個事件。
`drawingcomplete`	當圖形完成繪製或離開編輯模式時引發。
`drawingerased`	在 `erase-geometry` 模式中時，從繪圖管理員清除圖形時引發。
`drawingmodechanged`	繪製模式發生變更後引發。新的繪圖模式會傳遞至事件處理常式。
`drawingstarted`	當使用者開始繪製圖形或將圖形置於編輯模式時引發。

如需完整工作範例，示範如何在地圖上顯示向量圖格來源的資料，請參閱 Azure 地圖服務範例中的繪圖工具事件。在此範例中，您可以在地圖上繪製圖形，並監看事件的引發過程。如需此範例的原始程式碼，請參閱繪圖工具事件範例程式碼。

下圖顯示完整工作範例的螢幕擷取畫面，此範例示範繪圖工具模組中的事件運作方式。

顯示地圖展示來自向量磚來源之資料的螢幕擷取畫面。

範例

讓我們看看一些使用繪圖工具事件的常見案例。

選取多邊形區域中的點

這段程式碼會示範如何監視使用者繪製圖形的事件。此範例中的程式碼會監視多邊形、矩形和圓形。然後，會判斷地圖上哪些資料點是在繪製的區域內。 drawingcomplete 事件用以觸發選取邏輯。在選取邏輯中，程式碼會迴圈地圖上的所有資料點。檢查點和繪圖區域是否有交集。這個範例會使用開放原始碼的 Turf.js 程式庫來執行空間交集計算。

如需完整工作範例，示範如何使用繪圖工具在地圖上繪製多邊形區域且其中包含可選取的點，請參閱 Azure 地圖服務範例中的選取已繪製多邊形區域中的資料。如需此範例的原始程式碼，請參閱選取已繪製多邊形區域中的資料範例程式碼。

顯示地圖展示多邊形區域內點的螢幕擷取畫面。

在多邊形區域中繪圖與搜尋

這段程式碼會在使用者完成圖形繪製之後，搜尋繪圖區域內感興趣的點。 drawingcomplete 事件用以觸發搜尋邏輯。如果使用者繪製矩形或多邊形，即會在幾何圖形內執行搜尋。如果繪製的是圓形，則使用半徑和圓心搜尋感興趣的點。 drawingmodechanged 事件用以判斷使用者何時切換至繪圖模式，且會清除繪圖的畫布。

如需完整的工作範例，示範如何使用繪圖工具來搜尋繪圖區域內的興趣點，請參閱 Azure 地圖服務範例中的繪製和搜尋多邊形區域。如需此範例的原始程式碼，請參閱 [繪製和搜尋多邊形區域範例程式碼]。

建立測量工具

下列程式碼顯示如何利用繪圖事件建立測量工具。 drawingchanging 用以監視圖形的繪製過程。當使用者移動滑鼠時，就會計算圖形的維度。 drawingcomplete 事件用以在圖形繪製完成後，對圖形執行最後的計算。 drawingmodechanged 事件用以判斷使用者何時切換成繪圖模式。而且，drawingmodechanged 事件也會清除繪圖畫布，並清除舊的度量資訊。

如需完整工作範例，示範如何使用繪圖工具來測量距離和區域，請參閱 Azure 地圖服務範例中的建立測量工具。如需此範例的原始程式碼，請參閱建立測量工具範例程式碼。

顯示地圖展示測量工具範例的螢幕擷取畫面。