React-Leafet(geocercas)

 

Este blog tiene como finalidad de compartir conocimientos y aportar un granito más de información. Comparto mis apuntes e información que he encontrado por Internet, teniendo en cuenta que muchas ideas escritas no son propias, en la parte inferior coloco la url de los sitios donde esta la idea original ... espero que les sea de utilidad. 

Geocerca

Una geocerca (o "geofence" en inglés) es una tecnología que permite definir un área geográfica virtual y reaccionar a eventos cuando un dispositivo o persona entra o sale de esa área. Se utiliza comúnmente en aplicaciones móviles, sistemas de monitoreo y seguridad, y sistemas de seguimiento de activos para activar acciones específicas según la ubicación de un objeto o usuario.

¿Cómo Funciona una Geocerca?

Una geocerca se define mediante coordenadas geográficas, creando un perímetro virtual en un mapa. Este perímetro puede tener diferentes formas, como círculos, polígonos, o incluso rutas específicas. Los dispositivos equipados con sistemas de posicionamiento global (GPS) o tecnologías de ubicación como Bluetooth o Wi-Fi pueden interactuar con las geocercas.

Aplicaciones Comunes de las Geocercas

Las geocercas se utilizan en una amplia gama de aplicaciones y sectores:

Aplicaciones Móviles y Notificaciones: Las aplicaciones móviles pueden usar geocercas para enviar notificaciones a los usuarios cuando entran o salen de un área específica. Por ejemplo, una aplicación de compras puede enviar cupones o promociones cuando un usuario entra en la zona de una tienda.

Monitoreo y Seguridad: Las geocercas se utilizan en sistemas de seguridad para monitorear áreas restringidas. Si un dispositivo o persona no autorizada entra en una geocerca, se puede activar una alarma o enviar una alerta.

Gestión de Activos y Logística: En la industria de la logística, las geocercas pueden usarse para rastrear el movimiento de vehículos y mercancías. Si un camión sale de una geocerca designada, el sistema puede alertar a los operadores.

Control de Acceso y Automatización: En entornos empresariales, las geocercas pueden usarse para controlar el acceso a instalaciones o activar acciones automáticas, como abrir puertas o encender luces cuando un empleado se acerca.

Tecnologías Utilizadas en las Geocercas

GPS: El GPS es la tecnología más común para rastrear la ubicación y es utilizada por la mayoría de los dispositivos móviles.

Wi-Fi y Bluetooth: Se pueden usar para detectar la proximidad a puntos de acceso específicos o dispositivos cercanos.

Sensores de Proximidad: Utilizados para geocercas más pequeñas o en entornos cerrados.

Ventajas de las Geocercas

Automatización: Permiten automatizar acciones basadas en la ubicación.

Seguridad y Control: Pueden mejorar la seguridad y el control de acceso a ciertas áreas.

Experiencia del Usuario Personalizada: Las aplicaciones pueden personalizar experiencias y ofertas según la ubicación del usuario.

Desafíos y Consideraciones

Privacidad: Las geocercas pueden levantar preocupaciones sobre privacidad, ya que implican el seguimiento de la ubicación de las personas.

Precisión y Consumo de Batería: El uso continuo del GPS puede agotar la batería y la precisión puede variar según el entorno.

Configuración y Mantenimiento: Crear y mantener geocercas precisas puede requerir esfuerzo y recursos.

Crear un nuevo proyecto React

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto React:

npx create-react-app inicio_cerca

Este comando creará un nuevo directorio llamado inicio con la estructura básica de un proyecto React, posteriormente ingresar al directorio del proyecto

cd inicio

En seguida ya estando en el directorio del proyecto se instalar las dependencias de Leaflet y react-leaflet junto con las de react.

npm install react react-dom leaflet react-leaflet

Esto instalará las dependencias necesarias para trabajar con Leaflet y react-leaflet en tu proyecto y para finalizar, ejecuta el siguiente comando para iniciar tu aplicación React:

npm start

Esto iniciará la aplicación y abrirá automáticamente tu navegador predeterminado en http://localhost:3000. Deberías ver un mapa interactivo.

Desarrollo

En el archivo  App.js se debera ver de la siguiente manera.

Codigo App.js 

import MapViewPolygon from './componentsPolygon/MapViewPolygon';

function App() {

  return (

    <div>

      <p>mapa geocerca poligono</p>

      <MapViewPolygon />

    </div>

  );

}

export default App;

Creamos una carpeta denominada "componentsPolygon" para almacenar nuestros modulos. 

Creamos nuestro modulo "MapViewPolygon" para desplegar nuestromapa.

Codigo MapViewPolygon.js

import React from 'react';

import { MapContainer, TileLayer} from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

import { Monitoreo } from "./monitoreo";

function MapViewPolygon() {

 

  return (

    <div className="App">

      <MapContainer center={[19.295110, -99.116862]}

      zoom={12} style={{ height: '100vh', width: '100vw' }}>

        <TileLayer

          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

          attribution='&copy; <a href="https://www.openstreetmap.org/

          copyright">OpenStreetMap</a> contributors'

        />

        <Monitoreo />

      </MapContainer>

    </div>

  );

}

export default MapViewPolygon;

en seguida creamos nuestro modulo "monitoreo"

Codigo monitoreo.js

import React from "react";

import { gGPS } from "./geoGPS";

import { Cerca } from "./geoCerca";

import { DataCerca } from "./dataCerca";

export const Monitoreo = () => {

    return (

        <>

            <Cerca punto={gGPS()} cercaActiva={DataCerca.CERCA_UNO} />

            <Cerca punto={gGPS()} cercaActiva={DataCerca.CERCA_DOS} />

        </>

    );

};

En este modulo uniremos los demas componente, crearemos el modulo geoGPS con el componente gGPS para generar cordenadas aleatorias, el modulo geoCerca para la utilizacion de diferentes geocercas, el modulo dataCerca indicamos las cordenadas de las geocercas.

Creamos el modulo geoGPS con el componente gGPS.

    Codigo geoGPS.js

export const gGPS = () => {

    let maxlat = 9999;

    let minlat = -9999;

    let maxlong = 9999;

    let minlong = -9999;

    let latitudAleatoria =

        (Math.floor(Math.random() * (maxlat - minlat + 1)) + minlat) * 0.000001 + 19.283602;

    let longitudAleatoria =

        (Math.floor(Math.random() * (maxlong - minlong + 1)) + minlong) * 0.000001 - 99.140800;

    return ({ lat: latitudAleatoria, lng: longitudAleatoria });

}

Creamos el modulo geoCerca con el componente Cerca. instalamos npm i @turf/turf 

@turf/turf es un conjunto modular de funciones de geoprocesamiento que permite manipular, analizar y realizar cálculos sobre datos geoespaciales. Con @turf/turf, puedes hacer cosas como crear, transformar y analizar formas geográficas, medir distancias y áreas, y realizar cálculos geométricos complejos.

Codigo geoCerca.js

import React from "react";

import icon from "./icon";

import { Marker, Popup, Polygon, Polyline } from "react-leaflet";

import L from "leaflet"

import {

    point,

    polygon,

    booleanPointInPolygon,

    centroid,

    distance

} from '@turf/turf';

export const Cerca = ({ punto, cercaActiva }) => {

    const pointObj = point([punto.lat, punto.lng]);

    const polygonObj = polygon(cercaActiva.COORDENADAS);

    const isPointInsidePolygon = booleanPointInPolygon(pointObj, polygonObj);

    const polygonn = L.polygon(cercaActiva.COORDENADAS);

    const polygonGeoJSON = polygonn.toGeoJSON();

    const centroidPoint = centroid(polygonGeoJSON);

    const distancia = distance([punto.lat, punto.lng],

        [centroidPoint.geometry.coordinates[1],

        centroidPoint.geometry.coordinates[0]],

        { units: 'kilometers' });

    const dis = distancia / 1000;

    return (

        <>

            <Marker position={punto} icon={icon}>

                <Popup>

                    <p>

                        <b>¿El item esta en la cerca {cercaActiva.NOM_CER}? :

                        </b>{isPointInsidePolygon ? 'Sí' : 'No'}                    

                        <br></br>

                        <b>Distancia:</b>{distancia} km.

                        <br></br>

                        <b>Dato:</b> {JSON.stringify(punto)}

                        <br></br>

                    </p>

                </Popup>

            </Marker>

            <Polyline pathOptions={{ color: 'red' }}

            positions={[[punto.lat, punto.lng],

            [centroidPoint.geometry.coordinates[1],

            centroidPoint.geometry.coordinates[0]]]}></Polyline>

            <Polygon pathOptions={{ color: cercaActiva.COLOR }}

            positions={cercaActiva.COORDENADAS} >

                <Popup>

                    <b>Geocerca:</b>{cercaActiva.NOM_CER}

                </Popup>

            </Polygon>

        </>

    );

}

Creamos nuestro archivo que contenga las coordenadas de geocerca denominada "dataCerca"

Codigo dataCerca.js

export const DataCerca = {

    "CERCA_UNO": {

        "ID": 1,

        "TIPO": "Poligono",

        "NOM_CER": "Xochimilco",

        "COLOR": "#48C9B0",

        "COORDENADAS": [[

            [19.29627829, -99.10125711],

            [19.29662771, -99.10122255],

            [19.315015, -99.149012],

            [19.293174, -99.170757],

            [19.284835, -99.175666],

            [19.267505, -99.124822],

            [19.29627829, -99.10125711],

        ]],

    },

    "CERCA_DOS": {

        "ID": 1,

        "TIPO": "Poligono",

        "NOM_CER": "Tlalpan",

        "COLOR": "#D35400",

        "COORDENADAS": [[

            [19.3000194, -99.10102595],

            [19.30002074, -99.10094705],

            [19.296174, -99.146560],

            [19.254104, -99.113261],

            [19.3000194, -99.10102595],

        ]],

    },

};

creamos el archivo icon para estableser nuestro icono del marcador en el mapa .

Codigo icon.js

import L from "leaflet"

const icon = L.icon({

  iconSize: [25, 41],

  iconAnchor: [10, 41],

  popupAnchor: [2, -40],

  iconUrl: "https://unpkg.com/leaflet@1.7/dist/images/marker-icon.png",

  shadowUrl: "https://unpkg.com/leaflet@1.7/dist/images/marker-shadow.png"

});

export default icon;

El App se visualizara de la siguiente forma