向我的 Deck.GL 库添加多层

Question

出于某种原因，我的 deck.gl 图层中只有一个显示在地图上。 geojson 图层有效，但多边形和散点图图层无效。 API 正在获取，但地图上没有填充任何内容。

我期待散点图和多边形图层根据从 API 收到的数据显示在地图上。目前，只有行数据填充

这是我的代码：

import React, {useEffect, useRef} from "react";
import ReactDOM from "react-dom";
import DeckGL from "deck.gl";
import {
  EditableGeoJsonLayer,
  DrawLineStringMode,
  DrawPolygonMode, 
  DrawPointMode
} from "nebula.gl";
import { StaticMap } from "react-map-gl";
import {GeoJsonLayer, PolygonLayer, ScatterplotLayer} from '@deck.gl/layers';
import Line_Data from "./nordheim_lines.json"
import Geocoder from "react-map-gl-geocoder";
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";

const MAPBOX_ACCESS_TOKEN =
  "Mapbox Token";

const initialViewState = {
  longitude: -122.43,
  latitude: 37.775,
  zoom: 12
};

export default function GeometryEditor() {
  const [features, setFeatures] = React.useState({
    type: "FeatureCollection",
    features: []
  });
  const [mode, setMode] = React.useState(() => DrawPolygonMode);
  const [point, setPoint] = React.useState(() => DrawPointMode);
  const [selectedFeatureIndexes] = React.useState([]);
  // const [lineLayers, setLineLayers] = React.useState(null)
  // const [searchResultLayer, setSearchResultLayer] = React.useState(null)
  // const [scatLayers, setScatLayers] = React.useState(null)
  // const [polyLayers, setPolyLayers] = React.useState(null)
  const [allLayers, setAllLayers] = React.useState({line: null, point: null, poly: null})
  const [viewport, setViewport] = React.useState(
    {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    })
  
  const mapRef = useRef(null)
  const geocoderContainerRef = useRef(null)
  
  
  
  useEffect(()=>{
  getLineData()
  }, [])
  
 
  useEffect(()=>{
    window.addEventListener("resize", resize)
    return ()=>window.removeEventListener("resize", resize)
  }, [])
  
  // const handleOnResult = event => {
  //   setSearchResultLayer(
  //       new GeoJsonLayer({
  //       id: "search-result",
  //       data: event.result.geometry,
  //       getFillColor: [255, 0, 0, 128],
  //       getRadius: 1000,
  //       pointRadiusMinPixels: 10,
  //       pointRadiusMaxPixels: 10
  //     })
  //   )
  // }
  const handleGeocoderViewportChange = updatedViewport => {
    setViewport({...viewport, ...updatedViewport})
  }

  const drawLayer = new EditableGeoJsonLayer({
    // id: "geojson-layer",
    data: features,
    mode,
    selectedFeatureIndexes,

    onEdit: ({ updatedData }) => {
        
      setFeatures(updatedData);
    }
  });
   
  const resize = () => {
    handleGeocoderViewportChange({
      width: window.innerWidth,
      height: window.innerHeight
    })
  }
   
   
   
      
    const getLineData = async() => {
      try{
        const response = await fetch("AWS Lambda API")
      const data = await response.json()
      console.log(data)
      const newLineLayers = new GeoJsonLayer({
      id: "Line_Layer",
      data: data.line,
      pickable: true,
      stroked: false,
      filled: true,
      extruded: true,
      pointType: 'circle',
      lineWidthScale: 20,
      lineWidthMinPixels: 2,
      getFillColor: [160, 160, 180, 200],
      getPointRadius: 100,
      getLineWidth: 1,
      getElevation: 30
  })
  const newScatLayers = new ScatterplotLayer({
        id: 'scatterplot-layer',
        data: data.point,
        pickable: true,
        opacity: 0.8,
        stroked: true,
        filled: true,
        radiusScale: 6,
        radiusMinPixels: 1,
        radiusMaxPixels: 100,
        lineWidthMinPixels: 1,
        getPosition: d => d.coordinates,
        getRadius: d => Math.sqrt(d.exits),
        getFillColor: d => [255, 140, 0],
        getLineColor: d => [0, 0, 0]
        });
        const newPolyLayers = new PolygonLayer({
          id: 'polygon-layer',
          data: data.polygon,
          pickable: true,
          stroked: true,
          filled: true,
          wireframe: true,
          extruded: false,
          lineWidthMinPixels: 1,
          getPolygon: d => d.contour,
          getElevation: d => d.population / d.area / 10,
          getFillColor: d => [d.population / d.area / 60, 140, 0],
          getLineColor: [80, 80, 80],
          getLineWidth: 1
        });
  // setPolyLayers(newPolyLayers)
  // setScatLayers(newScatLayers)
        
  // setLineLayers(newLineLayers)
  setAllLayers({
    line: newLineLayers,
    point: newScatLayers,
    poly: newPolyLayers
  })
        
      }catch(err){
        
      console.error(err)
      }
      
    }
    
    const pointScatLayer = async() => {
      try{
        const response = await fetch("https://t4hkaemgcxpoka57wd4k5x3mzu0ngfym.lambda-url.us-west-2.on.aws/")
      const data = await response.json()
      console.log(data.point)
    
      }catch(err){
        
      console.error(err)
      }
      
    }
    
    const polyLayer = async() => {
      try{
        const response = await fetch("https://t4hkaemgcxpoka57wd4k5x3mzu0ngfym.lambda-url.us-west-2.on.aws/")
      const data = await response.json()
      console.log(data.polygon)
    
        
      }catch(err){
        
      console.error(err)
      }
      
    }
    
  
  

  return (
    <>
   
     <DeckGL
        initialViewState={initialViewState}
        controller={{
          doubleClickZoom: false
        }}
        layers={[ allLayers.line, allLayers.point, allLayers.poly, drawLayer]}
        getCursor={drawLayer.getCursor.bind(drawLayer)}
        ref={geocoderContainerRef}
        getTooltip={({object}) => object && `${object.zipcode}\nPopulation: ${object.population}`}
      >
      
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} 
        ref={mapRef}/>
      </DeckGL>
     
       
      
     
    
      
      <div style={{ position: "absolute", top: 0, right: 0, color: "white" }}>
        <button
          onClick={() => setMode(() => DrawLineStringMode)}
          style={{ background: mode === DrawLineStringMode ? "#3090e0" : null }}
        >
         Line
        </button>
        <button
          onClick={() => setMode(() => DrawPolygonMode)}
          style={{ background: mode === DrawPolygonMode ? "#3090e0" : null }}
        >
          
          Polygon
        </button>
        <pre style={{color:'black'}}></pre>
      </div>
     
      
    </>
  );
}




`