React, Mapbox, Deck.GL Scatterplot Capa: No actualización de datos

Estoy tratando de crear una aplicación React que utiliza la cubierta. gl en un mapa de Mapbox, y estoy teniendo problemas para actualizar el prop "data" dentro de una cubierta. gl capa Scatterplot. Dejé un código donde estoy volviendo elementos, etc. Estoy inicializando las propulsiones de datos como arrays vacíos, luego utilizando un gancho de usoEffect para obtener los datos de la base de datos, pero los datos de las capas no se actualizan.

Mi suposición es que esto es porque estoy usando listas de variables estatales en mis capas de deck.gl como props de datos.

  1. Cuando comprobé los estados de una matriz en el inspector, veo que los propulsores "datos" todavía están vacíos.
  2. Cuando comprobé los estados de los arrays las capas están atadas, veo que ya no están vacías. Por lo tanto, los arrays que usé en los pros de las capas != los arrays que tengo en estado después de obtener datos de Axios.

¿Hay un método de actualización que necesito para correr en las capas de cubierta.gl?

También he tratado de sacar los datos usando una promesa directamente sobre la inicialización de la capa a ningún beneficio.

Muchas gracias por adelantado...

import React, { useContext, useEffect, useState } from "react";
import ReactMapGL from "react-map-gl";
import { DeckGL, MapController, ScatterplotLayer } from "deck.gl";
import { UserContext } from "../contexts/UserContext";
import { Dropdown, Image, SplitButton } from "react-bootstrap";
import soleTele from "../images/circle.png";
import solePower from "../images/cross.png";
import jointPole from "../images/circlecross.png";
import customer from "../images/triangle.png";
import centralOffice from "../images/CO.png";
import axios from "axios";

const libraries = ["places"];
const MAPBOX_ACCESS_TOKEN =
  "pk.eyJ1IjoianJkdXJhbnQiLCJhIjoiY2tpczNsbzIxMHVtOTMwbHIxdGRpbTJjeSJ9.BBH2615udf6dhFsXcwXFjQ";

const mapContainerStyle = {
  width: "100%",
  height: "100%",
};

const INITIAL_VIEW_STATE = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 10,
  pitch: 5,
  bearing: 0,
};

const data = [{ position: [-122.45, 37.78], message: "Hover over me" }];

export default function HomeMap() {
  const [hoverInfo, setHoverInfo] = useState();
  const [user, setUser] = useContext(UserContext);
  const [mode, setMode] = useState("Telephone Pole");
  const [soleTeles, setsoleTeles] = useState([]);
  const [solePowers, setsolePowers] = useState([]);
  const [jointPoles, setjointPoles] = useState([]);
  const [COs, setCOs] = useState([]);
  const [customers, setcustomers] = useState([]);
  const [viewport, setViewport] = useState({
    latitude: 32.7555,
    longitude: -97.3308,
    zoom: 10,
    width: "100%",
    height: "100%",
  });

  const request = {
    networkID: user.networkID,
  };

  const [demoLayer, setdemoLayer] = useState(
    new ScatterplotLayer({
      id: "demo",
      data,
      getPosition: (d) => d.position,
      getRadius: 1000,
      getFillColor: [255, 0, 0],
      // Enable picking
      pickable: true,
      visible: true,
      // Update app state
      onHover: (info) => setHoverInfo(info),
      // onClick: (event) => console.log("HELP"), WORKS
    })
  );

  const [soleTeleLayer, setsoleTeleLayer] = useState(
    new ScatterplotLayer({
      id: "soleTele",
      data: soleTeles,
      getPosition: (d) => [d.long, d.lat],
      getRadius: 1000,
      visible: true,
      getFillColor: [255, 0, 0],
      // Enable picking
      pickable: true,
      // Update app state
      onHover: (info) => setHoverInfo(info),
      // onClick: (event) => console.log("HELP"), WORKS
    })
  );

OTHER LAYERS LEFT OUT...

  useEffect(() => {
    // Update the document title using the browser API
    axios
      .post("http://localhost:5000/poles/network", request)
      .then((res) => {
        console.log(res.data);
        res.data.forEach((pole) => {
          const newPole = {
            type: pole.type,
            id: pole._id,
            position: [pole.long, pole.lat],
          };
          console.log(newPole);
          if (pole.type === "Telephone Pole") {
            setsoleTeles((oldArray) => [...oldArray, newPole]);
          } else if (pole.type === "Power Pole") {
            setsolePowers([...solePowers, newPole]);
          } else if (pole.type === "Central Office") {
            setCOs([...COs, newPole]);
          } else if (pole.type === "Customer") {
            setcustomers([...customers, newPole]);
          } else if (pole.type === "Joint Pole") {
            setjointPoles([...jointPoles, newPole]);
          }
        });
        soleTeleLayer._finalize();
      })
      .catch((err) => console.log(err));
  }, []);

  const layers = [
    demoLayer,
    soleTeleLayer,
    // solePowerLayer,
    // jointLayer,
    // centralOfficeLayer,
    // customerLayer,
  ];

Pregunta hecha hace 3 años, 4 meses, 26 días - Por logicluminary3c42

2 Respuestas:

  • El problema que estás teniendo es que las capas de deck.gl no se actualizan automáticamente cuando se actualiza el estado de los datos en tu aplicación. Para solucionar esto, necesitas manejar manualmente la actualización de las capas de deck.gl cada vez que cambian los datos. Puedes hacer esto utilizando el método setXXXLayer para actualizar las capas con los nuevos datos.

    Aquí te dejo un ejemplo de cómo podrías hacerlo en tu código:

    jsx
useEffect(() => {
  axios
    .post("http://localhost:5000/poles/network", request)
    .then((res) => {
      console.log(res.data);
      const newSoleTeles = [];
      const newSolePowers = [];
      const newJointPoles = [];
      const newCOs = [];
      const newCustomers = [];

      res.data.forEach((pole) => {
        const newPole = {
          type: pole.type,
          id: pole._id,
          position: [pole.long, pole.lat],
        };
        console.log(newPole);
        switch (pole.type) {
          case "Telephone Pole":
            newSoleTeles.push(newPole);
            break;
          case "Power Pole":
            newSolePowers.push(newPole);
            break;
          case "Central Office":
            newCOs.push(newPole);
            break;
          case "Customer":
            newCustomers.push(newPole);
            break;
          case "Joint Pole":
            newJointPoles.push(newPole);
            break;
          default:
            break;
        }
      });

      setsoleTeles(newSoleTeles);
      setsolePowers(newSolePowers);
      setjointPoles(newJointPoles);
      setCOs(newCOs);
      setcustomers(newCustomers);
    })
    .catch((err) => console.log(err));
}, []);

useEffect(() => {
  setsoleTeleLayer(
    new ScatterplotLayer({
      id: "soleTele",
      data: soleTeles,
      getPosition: (d) => [d.position[0], d.position[1]],
      getRadius: 1000,
      visible: true,
      getFillColor: [255, 0, 0],
      pickable: true,
      onHover: (info) => setHoverInfo(info),
    })
  );
}, [soleTeles]);

    En este ejemplo, he agregado un nuevo useEffect que se ejecuta cuando soleTeles se actualiza. En este efecto, creamos una nueva capa de ScatterplotLayer con los datos actualizados y la establecemos como la capa soleTeleLayer.

    De esta forma, cada vez que se actualicen los datos de soleTeles, la capa soleTeleLayer se actualizará automáticamente con los nuevos datos. Puedes aplicar el mismo enfoque para las otras capas que necesiten actualizarse cuando los datos cambien.

    Espero que esto te ayude a solucionar el problema de actualización de datos en tus capas de deck.gl. ¡Déjame saber si tienes alguna otra pregunta o si necesitas más ayuda!

    Respondida el Dec 22, 2020 a las 00:19 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El Problema:

    El problema es que estás creando nuevas instancias de layers de deck.gl con nuevos conjuntos de datos cada vez que se actualiza el estado de soleTeles, solePowers, etc. Esto no actualiza los datos de las capas existentes, sino que crea nuevas capas.

    Solución:

    Para actualizar los datos de las capas existentes, debes utilizar el método setProps() de la capa. Este método te permite actualizar las props específicas de la capa, en este caso, la prop data.

    Código Actualizado:

    javascript
useEffect(() => {
  // Update the document title using the browser API
  axios
    .post("http://localhost:5000/network", request)
    .then((res) => {
      console.log(res.data);
      res.data.forEach((pole) => {
        const newPole = {
          type: pole.type,
          id: pole._id,
          position: [pole.long, pole.lat],
        };
        console.log(newPole);
        if (pole.type === "Telephone Pole") {
          setsoleTeles((oldArray) => [...oldArray, newPole]);
          // Aquí, en lugar de crear una nueva capa, actualiza la capa existente con el nuevo conjunto de datos.
          soleTeleLayer.setProps({ data: soleTeles });
        } else if (pole.type === "Power Pole") {
          setsolePowers([...solePowers, newPole]);
          // ...
        }
        // ...
      });
    })
    .catch((err) => console.log(err));
}, []);

    Al actualizar las props de la capa existente en lugar de crear nuevas capas, los datos de las capas se actualizarán correctamente cuando cambie el estado de soleTeles, solePowers, etc.

    Respondida el Dec 22, 2020 a las 00:28 - por Gemini

    Votos positivos: 0 | Votos negativos: 0