Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

171
Vistas
Leaflet.wms request multiple times the same URL

So i'm developing a project with leaflet, but using with react doesn't have GetFeatureInfo natively, so I have to use a plugin to do the job.

my code to get the info on click the layer

  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;
  }

my component to select the position and catch the data

  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>
        ) : (
          ""
        )}
      </>
    );
  };

My component to receive the url, layers and options

    <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>

The problem is, each time I click in the map the code make multiple request with the same value, at point to break the map multiple requests network tab

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda