在 Gatsby 中使用 React Leaflet 围绕 GeoJson 对象的边界框

如何解决在 Gatsby 中使用 React Leaflet 围绕 GeoJson 对象的边界框

我有一个 GeoJSON 数组，我使用以下方法为其计算了一个边界框：

function bBox(route) {
  var result = [Infinity,Infinity,-Infinity,-Infinity];
  route.geometry.coordinates.forEach(coord => {
      if (result[0] > coord[0]) {
          result[0] = coord[0];
      }
      if (result[1] > coord[1]) {
          result[1] = coord[1];
      }
      if (result[2] < coord[0]) {
          result[2] = coord[0];
      }
      if (result[3] < coord[1]) {
          result[3] = coord[1];
      }
  });
  return result;
}

这将返回以下数组

0: Array [ -1.2434230651706457,52.8960251994431 ]
1: Array [ -1.1970718950033188,52.922518802806735 ]
length: 2

我使用 gatsby-starter-leaflet 项目作为我的模板，并通过以下方式将边界传递给我的地图设置并查看失败：

import React,{ useRef } from "react"
import { graphql } from "gatsby"
import { Marker,GeoJSON,} from 'react-leaflet';
import { Helmet } from "react-helmet"

import Layout from 'components/Layout';
import Map from 'components/Map';

const DEFAULT_ZOOM = 15;

function bBox(route) {
  var result = [[Infinity,Infinity],[-Infinity,-Infinity]];
  route.geometry.coordinates.forEach(coord => {
      if (result[0][0] > coord[0]) {
          result[0][0] = coord[0];
      }
      if (result[0][1] > coord[1]) {
          result[0][1] = coord[1];
      }
      if (result[1][0] < coord[0]) {
          result[1][0] = coord[0];
      }
      if (result[1][1] < coord[1]) {
          result[1][1] = coord[1];
      }
  });
  return result;
}


export default function Template({ data }) {
  const { markdownRemark: post } = data // data.markdownRemark holds your post data
  const { gpx: route } = data // data.gpxFileData holds the GPX information to plot

  const markerRef = useRef();

  var bounds = bBox(route.geojson._0)

  const CENTER = [52.92038678191602,-1.2134187016636133];
  
  const mapSettings = {
    bounds: {bounds},defaultBaseMap: 'OpenStreetMap',};

  return (
    <Layout pageName="home">
    <Helmet>
      <title>Home Page</title>
    </Helmet>

    <h1>{route.geojson._0.geometry.type}</h1>

    <Map {...mapSettings}>
      <Marker ref={markerRef} position={CENTER} />
       <GeoJSON data={route.geojson._0} 
      style={() => ({
        color: '#F72A2A',weight: 2,fillColor: "#F72A2A",fillOpacity: 1,})}/>
    </Map>
    </Layout>
  )
}

export const pageQuery = graphql`
  query BlogPostByPath($path: String!,$gpxFile: String) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD,YYYY")
        path
        title
        gpxFile
      }
    }

    gpx(name: {eq: $gpxFile}) {
      geojson {
        _0 {
          type
          geometry {
            type
            coordinates
          }
  
          properties {
            _gpxType
            coordTimes
            name
            time
            type
          }
        }
      }
    }
  }
`

我调试了leaflet库，发现故障点出现在leaflet-src.js的1123行

  /*
   * @class LatLngBounds
   * @aka L.LatLngBounds
   *
   * Represents a rectangular geographical area on a map.
   *
   * @example
   *
   * ```js
   * var corner1 = L.latLng(40.712,-74.227),* corner2 = L.latLng(40.774,-74.125),* bounds = L.latLngBounds(corner1,corner2);
   * ```
   *
   * All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise),so the bounds example above can be passed like this:
   *
   * ```js
   * map.fitBounds([
   *    [40.712,-74.227],*    [40.774,-74.125]
   * ]);
   * ```
   *
   * Caution: if the area crosses the antimeridian (often confused with the International Date Line),you must specify corners _outside_ the [-180,180] degrees longitude range.
   *
   * Note that `LatLngBounds` does not inherit from Leaflet's `Class` object,* which means new classes can't inherit from it,and new methods
   * can't be added to it with the `include` function.
   */

  function LatLngBounds(corner1,corner2) { // (LatLng,LatLng) or (LatLng[])
    if (!corner1) { return; }

    var latlngs = corner2 ? [corner1,corner2] : corner1;

    for (var i = 0,len = latlngs.length; i < len; i++) {
        this.extend(latlngs[i]);
    }
  }

当我的简单数组传递给 LatLngBounds 时，它会尝试计算长度但未定义，因为边界数组嵌入在对象中？

{…}
bounds: (2) […]
0: Array [ -1.2434230651706457,52.922518802806735 ]
length: 2

我不确定......该函数的注释和传单的所有文档表明，对于 latlngbounds 传递一个简单数组应该是可以接受的，所以我无法弄清楚为什么会失败？

任何帮助将不胜感激。