本文介绍了mapbox-gl中两点位置之间的方向-React Native?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两点是从数据库中获取的,我想绘制一条从起点到终点的线
I have two point i get it from database and i want to render a line From start point to end point
我得到的是两点的直线,而没有考虑地图上的路线和方向
what I got is the Straight line in two points without consideration the routes and directions on the maps
那么我如何处理它以便在地图上查找路线和方向?
So how can i handle it to take a look for routes and Directions on the map?
这就是我得到的
这就是我的期望
这是我的代码
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地图Direction API ,您将在其中获取编码的折线,然后可以使用以下函数对该编码的折线进行解码
Use Google Maps Direction API where you will get encoded polyline and you can decode that encoded Polyline using following function
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] };
}));
}
这将返回折线所需的数据.
This Will return required data for polyline.
这篇关于mapbox-gl中两点位置之间的方向-React Native?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!