我正在尝试从turf.js计算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。
答案 0 :(得分:0)
只需使用此功能,它将返回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]
}
答案 1 :(得分:0)
导入模块/软件包
var turf = require('@turf/turf');
现在使用
turf.bbox(myCoords)
它正在为我工作。 @Charlie Wade回答
答案 2 :(得分:-1)
可能是你导入它的方式。
尝试
var bbox = require('@turf/bbox')
bbox(myCoords)