Thêm vùng

import React, {Component} from 'react';
 
import {StyleSheet, View} from 'react-native';
 
import MapboxGL from '@react-native-mapbox-gl/maps';
 
export default class App extends Component {
 
constructor(props) {
super(props);
this.state = {
coordinates: [109.11,16.34] //Việt Nam
};
}
 
render() {
const geojson = {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[105.78632884134436, 21.031102819612183],
[105.78624301066067, 21.030597104548264],
[105.787970353264, 21.030341742823815],
[105.78832440485662, 21.031808815000026],
[105.7870154868497, 21.032104230516886],
[105.78632884134436, 21.031102819612183]
]
]
}
};
this.setState({json: geojson})
return (
 
<View style={styles.MainContainer}>
 
<View style={styles.SubContainer}>
 
<MapboxGL.MapView style='https://api.ekgis.vn/v2/mapstyles/style/osmplus/bright/style.json?api_key={YOUR_API_KEY}'>
<MapboxGL.Camera
zoomLevel={5}
centerCoordinate={this.state.coordinates}
/>
 
<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />
<MapboxGL.ShapeSource id="routeSource" shape={this.state.json}>
<MapboxGL.FillLayer id="fill" style={{ fillColor: "blue" }} />
<MapboxGL.LineLayer
id="line"
style={{ lineColor: "red", lineWidth: 2 }}
/>
</MapboxGL.ShapeSource>
</MapboxGL.MapView>
 
</View>
 
</View>
 
);
}
}
 
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: '100%',
width: '100%',
backgroundColor: 'white',
},
Mapbox: {
flex: 1,
},
});