I am trying to calculate bbox from turf.js like give in the below link

我試圖從turf.js計算bbox,如下面的鏈接給出

http://turfjs.org/docs#bbox

This is my code and how i tried to implement bbox from turf.js But its resulting in an error.

這是我的代碼以及我如何嘗試從turf.js實現bbox但是它導致了一個錯誤。

import React, { Component } from 'react';
import { View, Text,StyleSheet } from 'react-native';
import {Spinner} from 'native-base';
import Mapbox from '@mapbox/react-native-mapbox-gl';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import MapboxClient from '@mapbox/react-native-mapbox-gl';
import { lineString as makeLineString} from '@turf/helpers';
import turf from '@turf/bbox'

Mapbox.setAccessToken('pk.eyJ1IjoiYW1hbHAiLCJhIjoiY2pkdTZ0M3ZpMnFsYzJ2amc0ZnRjZXRhMCJ9.8PFRuAdcjb7OMHAQHiW5fA');

const myCoords = [
  [43.75, -16.875],
  [33.75, -16.875],
  [22.5, -22.5],
]

const line = makeLineString(myCoords)

var bounds = turf.bbox(myCoords);

//var bounds = require('bound-points')(myCoords)

const layerStyles = MapboxGL.StyleSheet.create({
  origin: {
    circleRadius: 5,
    circleColor: 'white',
  },
  destination: {
    circleRadius: 5,
    circleColor: 'white',
  },
  route: {
    lineColor: 'red',
    lineWidth: 10,
    lineOpacity: 0.84,
  },
  progress: {
    lineColor: '#314ccd',
    lineWidth: 3,
  },
});


export default class App extends Component {

  componentDidMount() {

   }

  constructor(props) {
    super(props);

    this.state = {
      latitude: 41.596,
      longitude: 1.542,
      error: null,
      isMapLoaded: true,
      isLoaded: true,
      isTimeout: false,
      route: null,
      currentPoint: null,
      routeSimulator: null,
      visibleBounds: undefined
    };


  }

  getVisibleBounds = async () => {
    const visibleBounds = await this.map.getVisibleBounds();
    this.setState({ visibleBounds });
    console.log(visibleBounds + "amal")
    console.log(visibleBounds[0] + "amal")
    console.log(visibleBounds[1] + "amal")    
    if(visibleBounds != null)
    {
       this.onFitBounds(visibleBounds);
    }
  };

  onFitBounds (visibleBounds) {
    this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw
  }


  render() {
    return (
      <View style={styles.container}>
        {
         this.state.isMapLoaded?this.mapView():null
        }
      </View>
    );
  }

  mapView(){
    return(
      <Mapbox.MapView
        ref={(ref) => this.map = ref}
        styleURL={Mapbox.StyleURL.Street}
        zoomLevel={8}
        centerCoordinate={[47.809532,13.055054]}
        onDidFinishRenderingMapFully={this.getVisibleBounds}
        style={styles.container}
       >
      <MapboxGL.ShapeSource id='line1' shape={line}>
       <MapboxGL.LineLayer style={layerStyles.route} id='linelayer1' />
       </MapboxGL.ShapeSource>
      </Mapbox.MapView>
    )
  }



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

This what i am getting (error screen),what might be the issue,i am not able to get the bbox function from '@turf/bbox'.I am feeding a certain number of co-ordinates to

這是我得到的(錯誤屏幕),可能是什么問題,我無法從'@turf/bbox'獲得bbox功能。我正在提供一定數量的坐標

turf.bbox(myCoords)

And setting it to fitBounds in mapbox.

並將其設置為mapbox中的fitBounds。

2 个解决方案

function findBounds(points) {
  var n = points.length
  if(n === 0) {
    return []
  }
  var d = points[0].length
  var lo = points[0].slice()
  var hi = points[0].slice()
  for(var i=1; i<n; ++i) {
    var p = points[i]
    for(var j=0; j<d; ++j) {
      var x = p[j]
      lo[j] = Math.min(lo[j], x)
      hi[j] = Math.max(hi[j], x)
    }
  }
  return [lo, hi]
}

var bbox = require('@turf/bbox')

bbox(myCoords)