¿Cómo puedo acceder a los datos de atributo de un fichero de forma para hacer un cloropleto en la react utilizando folleto?

Tengo una página web de folletos reactrios que estoy juntando donde leo en un fichero de forma. Quiero ser capaz de mapear datos de la tabla de atributos conectada al fichero de forma. En este caso estoy usando el Zona de taxi archivo y vamos a suponer que he añadido número de viajes a la tabla de atributos subyacentes para ese archivo de forma. Así que si los datos en mi perfil se ven como (número de viajes por polígono):

zone  num_trips
1      200
2      265
...

He cargado con éxito un archivo de forma pero no estoy seguro de cómo acceder a los datos subyacentes y producir un mapa de calor:

Shapefile.js

import { useEffect } from 'react';
import { useLeaflet } from "react-leaflet";
import L from "leaflet";
import shp from "shpjs";

export default function Shapefile({ zipUrl }) {
  const { map } = useLeaflet();

  useEffect(() => {
    const geo = L.geoJson(
      { features: [] },
      {
        onEachFeature: function popUp(f, l) {
          var out = [];
          if (f.properties) {
            for (var key in f.properties) {
              out.push(key + ": " + f.properties[key]);
            }
            l.bindPopup(out.join("
"));
          }
        }
      }
    ).addTo(map);

    shp(zipUrl).then(function (data) {
      geo.addData(data);
    });
  }, []);

  return null;
}

Leaf.js

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import HeatmapLayer from 'react-leaflet-heatmap-layer';
import classes from './leaf.module.css'
import Shapefile from './Shapefile'
import zipUrl from "./assets/zones.zip";

class Leaf extends Component {
    render() {

        return (
          
          
          
        
    
    
        );
    }
}

export default Leaf;

Leaf entonces se entrega App.js.

¿Cómo puedo acceder a los datos del componente Shapefile para mapear los valores de num_trips a cada zona? Los valores se están accediendo aquí para el popup:

 {
        onEachFeature: function popUp(f, l) {
          var out = [];
          if (f.properties) {
            for (var key in f.properties) {
              out.push(key + ": " + f.properties[key]);
            }
            l.bindPopup(out.join("
"));
          }

Pregunta hecha hace 3 años, 4 meses, 28 días - Por geekglitcher1735

2 Respuestas:

  • Para acceder a los datos del componente Shapefile y mapear los valores de num_trips a cada zona, primero necesitas asegurarte de que los datos de num_trips estén disponibles en tu archivo de forma y estén siendo cargados correctamente por la librería shpjs.

    Una vez que tienes los datos de num_trips disponibles en el archivo de forma y cargados en tu mapa, puedes modificar la función popUp dentro del componente Shapefile para mostrar los valores de num_trips en el popup. Aquí te muestro un ejemplo de cómo podrías modificar la función popUp para mostrar los valores de num_trips en el popup:

    javascript
import { useEffect } from 'react';
import { useLeaflet } from "react-leaflet";
import L from "leaflet";
import shp from "shpjs";

export default function Shapefile({ zipUrl }) {
  const { map } = useLeaflet();

  useEffect(() => {
    const geo = L.geoJson(
      { features: [] },
      {
        onEachFeature: function popUp(f, l) {
          var out = [];
          if (f.properties) {
            out.push("Zone: " + f.properties.zone);
            out.push("Number of Trips: " + f.properties.num_trips);
            l.bindPopup(out.join("
    "));
          }
        }
      }
    ).addTo(map);

    shp(zipUrl).then(function (data) {
      geo.addData(data);
    });
  }, []);

  return null;
}

    En este ejemplo, se ha agregado una línea para mostrar el valor de num_trips en el popup junto con la zona. Asegúrate de que el nombre de la columna en el archivo de forma coincida con num_trips para que los datos se muestren correctamente en el popup.

    Una vez que hayas realizado estos cambios, al hacer clic en una zona en el mapa podrás ver el número de viajes asociado a esa zona en el popup.

    Respondida el Dec 19, 2020 a las 16:26 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para crear un mapa de calor en React Leaflet utilizando los datos de los atributos de un archivo de forma, puedes seguir estos pasos:

    1. Carga y analiza el archivo de forma:

    En tu componente Shapefile, puedes utilizar la biblioteca shpjs para cargar y analizar el archivo de forma. Esto creará un objeto geoJSON con las geometrías y atributos del archivo de forma.

    javascript
import shp from "shpjs";

const geoJSON = await shp(zoneZipUrl);

    2. Extrae los datos de atributos:

    Una vez que tengas el objeto geoJSON, puedes extraer los datos de atributos utilizando la propiedad features. Cada función representa una geometría en el archivo de forma y tiene una propiedad properties que contiene los datos de atributos.

    javascript
const numTripsData = geoJSON.features.map((feature) => feature.properties.num_trips);

    3. Crea una capa de mapa de calor:

    Utiliza la biblioteca react-leaflet-heatmap-layer para crear una capa de mapa de calor. Esta capa permite visualizar los datos de atributos como un mapa de calor.

    javascript
import HeatmapLayer from "react-leaflet-heatmap-layer";

const heatmapLayer = new HeatmapLayer({
  data: numTripsData,
  max: Math.max(...numTripsData),
  min: 0,
  radius: 15,
});

    4. Añade la capa de mapa de calor al mapa:

    Finalmente, añade la capa de mapa de calor al mapa de folletos utilizando el método addLayer.

    javascript
map.addLayer(heatmapLayer);

    Aquí tienes un ejemplo de código actualizado que implementa estos pasos:

    javascript
import React, { useEffect } from 'react';
import { useLeaflet } from "react-leaflet";
import L from "leaflet";
import shp from "shpjs";
import { HeatmapLayer } from "react-leaflet-heatmap-layer";

export default function Shapefile({ zipUrl }) {
  const { map } = useLeaflet();

  useEffect(() => {
    shp(zipUrl).then(async (data) => {
      const geoJSON = await data;
      const numTripsData = geoJSON.features.map((feature) => feature.properties.num_trips);

      const heatmapLayer = new HeatmapLayer({
        data: numTripsData,
        max: Math.max(...numTripsData),
        min: 0,
        radius: 15,
      });

      map.addLayer(heatmapLayer);
    });
  }, []);

  return null;
}

    Este código cargará el archivo de forma, extraerá los datos de atributos, creará una capa de mapa de calor y la añadirá al mapa. Debería permitirte visualizar los valores de num_trips como un mapa de calor.

    Respondida el Dec 19, 2020 a las 16:38 - por Gemini

    Votos positivos: 0 | Votos negativos: 0