我可以使用marker
中的以下代码在地图上创建react-native
(注释)。
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import Mapbox from '@mapbox/react-native-mapbox-gl';
const columbusCircleCoordinates = [
-73.98197650909422, 40.768793007758816
];
Mapbox.setAccessToken('your access key');
export default class App extends Component {
renderAnnotations () {
return (
<Mapbox.PointAnnotation
key='pointAnnotation'
id='pointAnnotation'
coordinate={[11.254, 43.772]}>
<View style={styles.annotationContainer}>
<View style={styles.annotationFill} />
</View>
<Mapbox.Callout title='Look! An annotation!' />
</Mapbox.PointAnnotation>
)
}
render() {
return (
<View style={styles.container}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Street}
zoomLevel={15}
centerCoordinate={[11.256, 43.770]}
showUserLocation={true}
style={styles.container}>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
annotationContainer: {
width: 30,
height: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 15,
},
annotationFill: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'orange',
transform: [{ scale: 0.6 }],
}
});
但是从教程中我发现我们可以使用polylines
在mapbox
上绘制<MapboxGL.LineLayer />
。但是有关于如何做到这一点的正确例子。
有人可以提供一个示例code
如何在line
mapbox
上的两个注释之间绘制react-native
。
答案 0 :(得分:2)
就像我在之前的回答中分享的那样:在你的状态中,有一个变量是一个类型为线串的geojson。这需要两个以上的坐标,这基本上是您通过线的点数。什么&#34;真棒&#34; mapbox文档忽略了它们何时向您展示折线标记,您需要将其包装在MapboxGL标记下的shapeSource标记中。在this.state中,我放了一个名为route的geojson变量。使用下面的代码示例可能会更有意义:
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
MapboxGL.setAccessToken('your access key');
export default class App extends Component {
constructor() {
super();
this.state = {
route:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
11.953125,
39.436192999314095
],
[
18.896484375,
46.37725420510028
]
]
}
}
]
},
}
}
render() {
return (
<View style={styles.container}>
<MapboxGL.MapView
styleURL={MapboxGL.StyleURL.Light}
zoomLevel={15}
centerCoordinate={[11.256, 43.770]}
style={styles.container}>
<MapboxGL.ShapeSource id='line1' shape={this.state.route}>
<MapboxGL.LineLayer id='linelayer1' style={{lineColor:'red'}} />
</MapboxGL.ShapeSource>
</MapboxGL.MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});