[英]Directions between Two-point location in mapbox-gl - React Native?
我有两点是从数据库中得到的,我想从起点到终点渲染一条线
我得到的是两点的直线,而不考虑地图上的路线和方向
那么我该如何处理以查看地图上的路线和方向?
这是我得到的
这是我期望的
这是我的代码
import MapboxGL from '@react-native-mapbox-gl/maps';
import React, {Component} from 'react';
import {PermissionsAndroid, StyleSheet, View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class Mapbox extends Component {
constructor(props) {
super(props);
this.startPoint = [34.4999, 31.5542];
this.finishedPoint = [34.4979, 31.5512];
this.state = {
center: [],
// initialCoords: undefined,
initialCoords: [-77.034084, 38.9],
acceptedPermations: false,
// Two point state
route: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
this.startPoint, //point A "current" ~ From
this.finishedPoint, //Point B ~ to
],
},
style: {
fill: 'red',
strokeWidth: '10',
fillOpacity: 0.6,
},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8,
},
},
],
},
};
this.onRegionDidChange = this.onRegionDidChange.bind(this);
}
async componentDidMount() {
const isGranted = await MapboxGL.requestAndroidLocationPermissions();
this.setState({isGranted: isGranted});
MapboxGL.setAccessToken(
'....',
);
}
async onRegionDidChange() {
const center = await this._map.getCenter();
this.setState({center}, () =>
console.log('onRegionDidChange', this.state.center),
);
}
renderCurrentPoint = () => {
return (
<>
<MapboxGL.UserLocation
renderMode="normal"
visible={false}
onUpdate={location => {
const currentCoords = [
location.coords.longitude,
location.coords.latitude,
];
// console.log(location); // current location is here
this.setState({
initialCoords: currentCoords,
});
}}
/>
{/* current Provider location */}
<MapboxGL.PointAnnotation
selected={true}
key="key1"
id="id1"
coordinate={this.startPoint}>
<Icon name="ios-pin" size={45} color="#00f" />
<MapboxGL.Callout title="My" />
</MapboxGL.PointAnnotation>
{/* user From DB location */}
<MapboxGL.PointAnnotation
selected={true}
key="key2"
id="id2"
coordinate={this.finishedPoint}>
<Icon name="ios-pin" size={45} color="#0f0" />
<MapboxGL.Callout title="User" />
</MapboxGL.PointAnnotation>
<MapboxGL.ShapeSource id="line1" shape={this.state.route}>
<MapboxGL.LineLayer
id="linelayer1"
style={{
lineColor: 'red',
lineWidth: 10,
lineCap: 'round',
}}
/>
</MapboxGL.ShapeSource>
<MapboxGL.Camera
zoomLevel={16}
centerCoordinate={this.state.initialCoords}
// centerCoordinate={[-5.803457464752711, 35.769940811797404]}
/>
</>
);
};
render() {
if (!this.state.isGranted) {
return null;
}
return (
<View style={styles.page}>
<MapboxGL.MapView
styleURL={MapboxGL.StyleURL.Street}
ref={c => (this._map = c)}
onRegionDidChange={this.onRegionDidChange}
zoomEnabled={true}
style={styles.map}>
{this.renderCurrentPoint()}
</MapboxGL.MapView>
</View>
);
}
}
const styles = StyleSheet.create({
page: {
flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: '#F5FCFF',
},
container: {
height: 500,
width: 500,
backgroundColor: 'tomato',
},
map: {
flex: 1,
},
});
使用Google Maps Direction API ,您将在其中获得编码的折线,并且您可以使用以下函数对该编码的折线进行解码
decode(t, e) { for ( var n, o, u = 0, l = 0, r = 0, d = [], h = 0, i = 0, a = null, c = Math.pow(10, e || 5); u < t.length; ) { (a = null), (h = 0), (i = 0); do (a = t.charCodeAt(u++) - 63), (i |= (31 & a) << h), (h += 5); while (a >= 32); (n = 1 & i ? ~(i >> 1) : i >> 1), (h = i = 0); do (a = t.charCodeAt(u++) - 63), (i |= (31 & a) << h), (h += 5); while (a >= 32); (o = 1 & i ? ~(i >> 1) : i >> 1), (l += n), (r += o), d.push([l / c, r / c]); } return (d = d.map(function (t) { return { latitude: t[0], longitude: t[1] }; })); }
这将返回折线所需的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.