Leaflet, como saben, es un paquete de código abierto y tiene múltiples complementos y te brinda la flexibilidad que necesitas para operar en múltiples tipos de vehículos, drones, autos o barcos o lo que sea. Esa flexibilidad nos ayudó a cubrir la mayor cantidad de casos de uso que podemos. Ahora comencemos con la primera funcionalidad que tenemos. Como saben, necesitamos enviar una meta o ruta al vehículo y si estamos operando con drones, necesitamos definir la zona en la que estamos operando. Para eso, utilizamos el paquete llamado react-leaflet-draw. Es un paquete que viene con una larga lista de herramientas de dibujo, desde, no sé, líneas, círculos, rectángulos, marcadores, que puedes usar. Y viene con múltiples conjuntos de devoluciones de llamada para cada evento, para la creación o incluso cuando borras o editas una de las rutas que dibujaste antes. Y te dará el vector que contiene todos los puntos de ruta dibujados antes y puedes usarlos como quieras según tu caso de uso y tu aplicación. Ahora, ¿qué pasa si queremos reducir la cantidad de internet que estamos usando o qué pasa si estamos operando sin internet? Para eso, decidimos usar un paquete llamado react-leaflet-offline, pero antes de hablar sobre ese paquete, intentemos ver y entender cómo Leaflet está representando los mosaicos, que es el diseño que colocamos en la parte superior del mapa. Y si vemos esto, encontraremos que React no está representando todo el mapa al mismo tiempo, sino que los trae como un conjunto de imágenes rectangulares y las carga. Y esto nos permitirá evitar representar un mapa completo al mismo tiempo. Entonces, si queremos almacenar en caché esas imágenes, un enfoque posible es crear tu propio servidor que enviará esas imágenes basadas en X, Y y Z, que es el nivel de zoom, y enviarlas a tu frontend. Y otro enfoque también es utilizando lo que se llama react-leaflet-offline. Como puedes ver aquí en este ejemplo, al usar react-leaflet-offline, tendrás la opción de guardar un área específica en la que estás haciendo zoom en este momento o eliminar esa área y guardarla nuevamente. El mapa se actualiza, si hay alguna actualización en el mapa, y en azul, esos rectángulos en azul, como vemos aquí, son las áreas que guardamos en diferentes niveles de zoom. Y lo siguiente que nos hizo elegir Leaflet es que en algunos casos de uso, tal vez no estemos operando en la Tierra. Tal vez estemos creando alguna aplicación aeroespacial donde estemos operando en un mapa diferente al mapa que estamos utilizando. Entonces, React-Leaflet nos brinda la capacidad de crear nuestro propio sistema de referencia de coordenadas basado en los requisitos que tenemos. Para esto, también puedes definir cuántos píxeles tendrás por cada metro y colocar tu origen del mapa. Puedes elegir el origen, definirlo como quieras. Incluso el sistema de coordenadas, puedes poner tu propio sistema de coordenadas según tu caso de uso. Lo segundo es que después de definir exactamente tus coordenadas y el sistema de referencia, podemos colocar encima nuestra capa personalizada. Por ejemplo, si estamos operando en un almacén o una habitación o cualquier área interior, tendremos que proporcionar el mapa con nuestro propio mosaico. Para eso, puedes usar lo que se llama en Leaflet, superposición de imágenes. Entonces, la superposición de imágenes es la imagen que colocas encima, que es la capa de tu área interior. Y esta capa incluso puede ser un video, por lo que tendrás una superposición de video. Ahora, si te preguntas qué podemos hacer con una superposición de video, por ejemplo, si estamos en algunos pronósticos del tiempo y queremos mostrar la dirección del viento. Para esto, puedes poner una superposición de video en la que especificarás exactamente los límites, como la esquina superior derecha y la esquina inferior izquierda del video.
Comments