Eventos de las herramientas de dibujo
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 ha agregado o cambiado 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 ha terminado de dibujarse o se saca 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 ha cambiado 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. En este ejemplo, puede dibujar formas en el mapa y observarlas a medida que 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. Para modificar y ejecutar el código, haga clic en "EDIT ON CODEPEN" (EDITAR ON CODEPEN) de la esquina superior derecha del marco. 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 de la forma después de que se haya dibujado. 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.
Pasos siguientes
Aprenda a usar otras características del módulo de herramientas de dibujo:
Obtenga más información sobre el módulo de servicios:
Consulte más ejemplos de código: