Eventos de las herramientas de dibujo

Artigo
10/14/2024

Cuando se usan herramientas de dibujo en un mapa, suele ser útil reaccionar ante ciertos eventos a medida que el usuario dibuja en el mapa. Esta tabla enumera todos los eventos que admite la clase DrawingManager.

Evento	Descripción
`drawingchanged`	Se activa cuando se agrega o cambia alguna coordenada de una forma.
`drawingchanging`	Se activa cuando se muestra alguna coordenada de vista previa de una forma. Por ejemplo, este evento se activa varias veces mientras se arrastra una coordenada.
`drawingcomplete`	Se activa cuando una forma termina de dibujarse o sale del modo de edición.
`drawingerased`	Se activa cuando se borra una forma del administrador de dibujos cuando está en modo `erase-geometry`.
`drawingmodechanged`	Se activa cuando cambia el modo de dibujo. El nuevo modo de dibujo se pasa al controlador de eventos.
`drawingstarted`	Se activa cuando el usuario comienza a dibujar una forma o coloca una forma en modo de edición.

Para obtener una muestra completa de trabajo sobre cómo se muestran los datos de un origen de mosaico vectorial en el mapa, consulte Eventos de las herramientas de dibujo en Muestras de Azure Maps. Este ejemplo le permite dibujar formas en el mapa y observar cómo se activan los eventos. Para obtener el código fuente de este ejemplo, consulte Código de ejemplo de eventos de las herramientas de dibujo.

En la imagen siguiente, se muestra una captura de pantalla del ejemplo funcional completo que señala cómo funcionan los eventos del módulo Herramientas de dibujo.

Ejemplos

Veamos algunos escenarios comunes donde se usan los eventos de las herramientas de dibujo.

Selección de puntos en el área de polígono

Este código muestra cómo supervisar un evento de formas de dibujo de un usuario. En este ejemplo, el código supervisa formas de los polígonos, los rectángulos y los círculos. A continuación, determina qué puntos de datos del mapa se encuentran dentro del área dibujada. El evento drawingcomplete se usa para desencadenar la lógica de selección. En la lógica de selección, el código recorre en bucle todos los puntos de datos del mapa. Comprueba si existe intersección entre el punto y el área de la forma dibujada. En este ejemplo se usa la biblioteca de código abierto Turf.js para realizar un cálculo de intersección espacial.

Para obtener una muestra funcional completa sobre cómo usar las herramientas de dibujo para dibujar áreas de polígono en el mapa con puntos dentro de ellos que se pueden seleccionar, consulte Seleccionar datos en el área de polígono dibujada en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, consulte Selección de datos en el código de ejemplo del área del polígono dibujada.

Dibujo y búsqueda en el área de polígono

Este código busca puntos de interés dentro del área de una forma después de que el usuario haya terminado de dibujar la forma. El evento drawingcomplete se usa para desencadenar la lógica de búsqueda. Si el usuario dibuja un rectángulo o polígono, se realiza una búsqueda dentro de la geometría. Si se dibuja un círculo, se usa el radio y la posición central para realizar la búsqueda de un punto de interés. El evento drawingmodechanged se usa para determinar cuándo el usuario cambia al modo de dibujo y borra el lienzo de dibujo.

Para obtener una muestra de trabajo completa sobre cómo usar las herramientas de dibujo para buscar puntos de interés dentro de áreas dibujadas, consulte Dibujar y buscar el área de polígono en las muestras de Azure Maps. Para obtener el código fuente de este ejemplo, consulte [Código de ejemplo del área del polígono de dibujo y búsqueda].

Creación de una herramienta de medición

En el código siguiente se muestra cómo se pueden usar los eventos de dibujo para crear una herramienta de medición. El elemento drawingchanging se usa para supervisar la forma a medida que se dibuja. A medida que el usuario mueve el mouse, se calculan las dimensiones de la forma. El evento drawingcomplete se usa para realizar un cálculo final sobre la forma una vez que se ha completado el dibujo. El evento drawingmodechanged se usa para determinar cuándo el usuario cambia a un modo de dibujo. Por otra parte, el evento drawingmodechanged borra el lienzo de dibujo y la información de medición antigua.

Para obtener una muestra funcional completa sobre cómo usar las herramientas de dibujo para medir distancias y áreas, consulte Creación de una herramienta de medición en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, consulte Creación de un código de ejemplo de la herramienta de medición.