在turf.js，MapBox，react-native-mapbox-gl（react-native代码）中计算bbox？

Question

我正在尝试从turf.js计算bbox，例如下面的链接中给出的

http://turfjs.org/docs#bbox

这是我的代码，也是我尝试从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,
  },

});

这就是我得到的（错误屏幕），这可能是问题所在，我无法从'@turf/bbox'获得bbox函数。我正在将一定数量的坐标提供给

turf.bbox(myCoords)

并将其设置为mapbox中的fitBounds。

Answer 1

可能是导入方式。

尝试

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

bbox(myCoords)

Answer 2

只需使用此函数，它将为您的this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw返回理想的输出this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw函数。

例如：如果var points = [[-1，1]，[5，10]，[-8，13]]

输出：[[-8，1]，[5，13]]

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]
}

Answer 3

导入模块/包

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

现在使用

turf.bbox(myCoords)

它为我工作。 @Charlie Wade的回答