添加方法從 postgres / node 從 geojson 提取數據以顯示在我的反應 leaflet map

Question

我正在嘗試設置一個 map 組件來顯示我存儲在我的 postgres / 節點后端的地理坐標標記。 我可以將 geojson 插入到我的 postgres / postgis 數據庫中，因為我在后端設置了可以正常工作的 CRUD 方法，但我不知道在 go 到組件選項卡時要添加到 map 組件以加載 geojson 文件的代碼.

我將如何 go 關於將方法添加到 go 到我的 map 組件中以從我的數據庫中提取 geojson？ 我認為我的操作和服務文件設置正確，我認為我的操作文件中的 pullScubaSchools class 應該導入到 map 容器中。

map.component.js

import React, { Component, useState } from 'react';
import { MapContainer, TileLayer, Layer, Marker, Popup, useMapEvents, Map, GeoJSON } from 'react-leaflet';
import "leaflet/dist/leaflet.css";
//import mapData from "../test/mapData.json";
import { pullScubaSchools } from '../actions/scubaSchool.action'


//Layer.geoJSON(pullScubaSchools).addTo(ScubaDivingMap);


export class ScubaDivingMap extends Component {

    //componentDidMount() {
    //    console.log(mapData);
    //}

    render() {

        return(

            <div>
                <MapContainer
                    center={{ lat: 41.505, lng: -0.09 }}
                    zoom={3}
                    scrollWheelZoom={false}>
                    <GeoJSON
                        //style={this.countryStyle}
                        data={pullScubaSchools.diveSchoolGeo}
                        //onEachFeature={this.onEachCountry}
                    />
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={[pullScubaSchools]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
                </MapContainer>
            </div>
        );
    }
}

export default ScubaDivingMap;

潛水學校服務

import axios from 'axios';

const API_URL = "http://localhost:5002/api/diveschool/";

// posts register details to backend
class diveSchoolService {

    scubaSchoolLocations = (diveSchoolName, diveSchoolLocation, diveCertificatesOfferedID, diveSchoolGeo) => {
        return axios.get(API_URL + "diveschoollist", {
            diveSchoolName,
            diveSchoolLocation,
            diveCertificatesOfferedID,
            diveSchoolGeo
        });
    };

export default new diveSchoolService();

scubaSchool.action.js

import { diveSchoolService } from "../services/diveSchool.service";
import { failed_data_load, set_message, data_load_successful } from "./types.action";

export const pullScubaSchools = (dispatch) => {
    return diveSchoolService.scubaSchoolLocations.then(
        (data) => {
            dispatch({
                type: data_load_successful,
                payload: { scubaSchools: data },
            });

            return Promise.resolve();
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
};

我的錯誤 output 如下：

TypeError: latlng is null
project
C:/Users/James Greene/WebstormProjects/softwaredevproject/SustainableScuba/WebApp/src/geo/projection/Projection.SphericalMercator.js:22

  19 | MAX_LATITUDE: 85.0511287798,
  20 | 
  21 | project: function (latlng) {
> 22 |  var d = Math.PI / 180,
     | ^  23 |      max = this.MAX_LATITUDE,
  24 |      lat = Math.max(Math.min(max, latlng.lat), -max),
  25 |      sin = Math.sin(lat * d);