es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo eliminar el componente geojson del contenedor de mapa.

10 Jun, 2023 Programación

const MyData = () => {
// crear variable de estado para contener los datos cuando sean recogidos

const [data, setData] = React.useState();

// useEffect para obtener los datos al cargar
useEffect(() => {

// función asíncrona!
const getData = async () => {
// ‘esperar’ los datos
const response = await axios.get(“url”);
// guardar los datos en la variable de estado
setData(response.data);
};
getData();
}, []);

// representación de react-leaflet GeoJSON cuando los datos están listos
if (data) {
   return <geojson data="{data}"></geojson>;
} else {
  return null;

}
};

// Utilice su componente en un MapContainer
const Map = (props) => {
return (

 );
};

/* Hola, quisiera agregar un menú desplegable select a la función ‘Map’ tal que, cuando cambie su valor, la capa del componente MyData sea eliminada/removida y una nueva capa sea representada en su lugar. ¿Es eso posible? */

/* Enlace al código fuente https://codesandbox.io/s/async-esri-leaflet-yxrtr */

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible agregar un menú desplegable de selección a la función de mapa que permita cambiar la capa renderizada por el componente MyData. Para lograr esto, puede crear una variable de estado en el componente Map para mantener el valor de la capa seleccionada, y pasarla como una propiedad al componente MyData para renderizar condicionalmente la capa apropiada según el valor seleccionado.

    Aquí hay un ejemplo de implementación:

    const Map = (props) => {
  const [selectedLayer, setSelectedLayer] = React.useState("layer1"); // valor inicial de la capa seleccionada

  const handleLayerChange = (event) => {
    setSelectedLayer(event.target.value);
  };

  return (
    <mapcontainer {...mapcontainerprops}="">
      <div>
        <select value="{selectedLayer}" onchange="{handleLayerChange}">
          <option value="layer1">Capa 1</option>
          <option value="layer2">Capa 2</option>
        </select>
      </div>
      <mydata layer="{selectedLayer}"></mydata>
    </mapcontainer>
  );
};

    En esta implementación, el valor de la capa seleccionada se establece inicialmente en “layer1” y se agrega un menú desplegable de selección a la función de mapa que permite al usuario elegir entre las opciones “Capa 1” y “Capa 2”. Cuando cambia el valor del menú desplegable de selección, la función handleLayerChange actualiza la variable de estado selectedLayer con el valor recién seleccionado.

    El valor selectedLayer se pasa como una propiedad al componente MyData, que lo utiliza para determinar qué capa debe renderizarse. Aquí hay una implementación actualizada del componente MyData que utiliza la propiedad layer pasada para renderizar condicionalmente la capa apropiada:

    const MyData = ({ layer }) => {
  const [data, setData] = React.useState();

  useEffect(() => {
    const getData = async () => {
      const response = await axios.get(`url/${layer}`);
      setData(response.data);
    };
    getData();
  }, [layer]); // vigilancia de los cambios en el valor de la propiedad de capa

  if (data) {
    // renderizado condicional de la capa según el valor seleccionado
    if (layer === "layer1") {
      return <geojson data="{data.layer1}"></geojson>;
    } else if (layer === "layer2") {
      return <geojson data="{data.layer2}"></geojson>;
    }
  }
  return null;
};

    En esta implementación, el componente MyData ahora acepta la propiedad layer, que se utiliza en el useEffect hook para obtener los datos de la capa apropiada según el valor seleccionado. El bloque if (data) ahora verifica el valor de capa seleccionado y renderiza condicionalmente la capa apropiada utilizando la variable de estado data.

    Con estos cambios, al seleccionar una nueva opción de capa en el menú desplegable de selección se activará una nueva renderización del componente MyData, que buscará y renderizará la capa apropiada según el valor seleccionado.

Comments are closed.