Thêm vùng
Vẽ đối tượng polygon trên bản đồ, sử dụng Mapbox ShapeSource

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.CamerazoomLevel={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.LineLayerid="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,},});