Entonces, estoy desarrollando un proyecto con un folleto, pero el uso con reaccionar no tiene GetFeatureInfo de forma nativa, por lo que tengo que usar un complemento para hacer el trabajo.

mi código para obtener la información al hacer clic en la capa

 function GetFeatureInfoWms(props) { const { url, options, layers } = props; const map = useMap(); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); var MySource = WMS.Source.extend({ ajax: function (url, callback) { $.ajax(url, { context: this, success: function (result) { callback.call(this, result); }, }); }, showFeatureInfo: function (latlng, info) { setGetInfo(JSON.parse(info)); map.openPopup(latlng); }, }); new MySource(url, options).getLayer(layers).addTo(map); return null; }

mi componente para seleccionar la posición y capturar los datos

 const LocationMarker = ({ position }) => { const map = useMapEvents({ click(e) { setNewPosition(e.latlng); }, }); return ( <> {newPosition !== startPosition ? ( <Popup position={position}> <span onClick={() => { alert(`Inscrição: ${getInfo.features[0].properties.inscricao}`); }} > Get data </span> </Popup> ) : ( "" )} </> ); };

Mi componente para recibir la url, capas y opciones

 <MapContainer className="map-container" center={newPosition} zoom={16} scrollWheelZoom={true} > <GetFeatureInfoWms url={urlBase} layers={layerName} options={{ version: 2.0, format: "image/png", opacity: "1.0", crossOrigin: "application/json", transparent: true, isBaseLayer: false, visibility: true, tiled: true, buffer: 0, info_format: "application/json", }} /> <LocationMarker position={newPosition}></LocationMarker> </MapContainer>

El problema es que, cada vez que hago clic en el mapa, el código hace una solicitud múltiple con el mismo valor, en el punto para romper la pestaña de red de solicitudes múltiples del mapa