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

【问题标题】：Calculate bbox in turf.js,MapBox,react-native-mapbox-gl(react-native code)?在 turf.js、MapBox、react-native-mapbox-gl（react-native 代码）中计算 bbox？
【发布时间】：2018-08-16 21:48:53
【问题描述】：

我正在尝试从 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。

【问题讨论】：

标签： android ios react-native polyline react-native-mapbox-gl

【解决方案1】：

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

例如：如果 var 点 = [[-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]
}

【讨论】：

【解决方案2】：

可能是您导入它的方式。

试试

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

bbox(myCoords)

【讨论】：

【解决方案3】：

导入模块/包

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

现在使用

turf.bbox(myCoords)

它对我有用。 @Charlie Wade 的回答

【讨论】：

【解决方案4】：

您可以使用此代码：

import bbox from '@turf/bbox'

const bboxArray = bbox("coordinates or feature");
const boundObject = ({ne:[bboxArray[0],bboxArray[1]],sw:[bboxArray[2],bboxArray[3]]})

【讨论】：