多くのポイント（緯度と経度）を持つ反応するネイティブマップにポリゴンを描画する方法は？

Question

私は地図上にポリゴンを描画するためにこのdocumentationをフォローしています。今度はAPIから緯度と経度の値を取得して描画しようとしました。私はちょうど状態を使ってそれを書いたので、少量の価値のために、それは問題ではありません。以下は

は私の機能

import React, { Component } from 'react'; 
import { View, Text, StyleSheet, Dimensions } from 'react-native'; 
import { Card, Button } from 'react-native-elements'; 
import { MapView } from 'expo'; 
import { connect } from 'react-redux'; 

const window = Dimensions.get('window'); 

class PolygonPage extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      polygon: [ 
      { 
       latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][1], 
       longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][0] 
      }, 
      { 
       latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][1][1], 
       longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][1][0] 
      }, 
      { 
       latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][2][1], 
       longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][2][0] 
      }, 
      { 
       latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][3][1], 
       longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][3][0] 
      } 
     ] 
    }; 
} 

onButtonPressClose =() => { 
    this.props.navigation.navigate('Home'); 
} 

render() { 
    const { polygon } = this.state; 
    return (
     <View style={styles.container}> 
      <MapView 
       provider={this.props.provider} 
       style={styles.map} 
       zoomEnabled 
       initialRegion={{ 
        latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][1], 
        longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][0], 
         latitudeDelta: 0.0922, 
         longitudeDelta: 0.0421, 
        }} 
      > 
       <MapView.Polygon 
        coordinates={polygon} 
        fillColor="rgba(0, 200, 0, 0.5)" 
        strokeColor="rgba(0,0,0,0.5)" 
        strokeWidth={2} 
       /> 
      </MapView> 
      <View style={stylesContainer.topContainer}> 
       <Card title="Route Information"> 
        <View> 
         <Text>Name: {this.props.points.data.name}</Text> 
         <Text>Description: {this.props.routes.data.description}</Text> 
        </View> 
       </Card> 
      </View> 
      <View style={stylesContainer.buttonBottomContainer}> 
        <Button 
         medium 
         title="Back" 
         backgroundColor="#94b8b8" 
         onPress={this.onButtonPressClose} 
        /> 
      </View> 
     </View> 
    ); 
    } 
} 

PolygonPage.propTypes = { 
    provider: MapView.ProviderPropType, 
}; 

const styles = StyleSheet.create({ 
    container: { 
     ...StyleSheet.absoluteFillObject, 
     justifyContent: 'flex-end', 
     alignItems: 'center', 
    }, 
    map: { 
     flex: 1, 
     height: window.height, 
     width: window.width 
    } 
}); 

function mapStateToProps({ points }) { 
    return { points }; 
} 

export default connect(mapStateToProps)(PolygonPage); 

それは私がAPIから得たポイントからポリゴンをレンダリングし、これが私の作品をレンダリングします。

API応答がJSONにあります。私は私が私のレンダリング機能に何をしたかのように入力して、おそらくかもしれないより/座標の点は、10未満の場合これは、例えば

{ 
"timestamp": 000111, 
"verb": "GET", 
"object": "route", 
"data": { 
    "description": "describe", 
    "routeGeoJSON": { 
     "type": "FeatureCollection", 
     "features": [ 
      { 
       "geometry": { 
        "type": "Polygon", 
        "coordinates": [ 
         [ 
          [ 
           122.18919, // this is longitude 
           4.82948294 // this is latitude 
          ], 
          [ 
           124.17318, 
           5.9319319 
          ], 
          [ 
           101.131191, 
           2.92492 
          ], 
          [ 
           106.01010192, 
           4.492472492 
          ] 
         ] 
        ] 
       }, 
       "type": "Feature", 
       "properties": {} 
      } 
     ] 
    }, 
    "id": 1, 
    "routeType": "point", 
    "name": "Test" 
    } 
} 

です。しかし、10ポイント（緯度と経度）以上の場合はどうなりますか？私はmapまたはforのループ機能をthis.state = { polygon: [....]}の中でどのように使うべきかを理解できませんでした。

私はオンラインで検索し、thisとthisのような例を見つけましたが、それを理解できませんでした。

ここに彼の提案や定型文を投稿するのに十分なアイディアや種類があれば、とても感謝しています。

ありがとうございます。

Answer 1

あなたはあなたの応答を通じてmapに持っていると、あなたのAPIの応答がapiResponseに保存されていると仮定すると、documentation

type LatLng { 
    latitude: Number, 
    longitude: Number, 
} 

に与えられたtypeにあなたの座標を変換、これを試してみてください。 オブジェクトにはkeysと配列の位置にアクセスし、座標配列を使用してマッピングします。

const polygon = apiResponse.data.routeGeoJSON[0].geometry.coordinates[0].map(coordsArr => { 
    let coords = { 
     latitude: coordsArr[1], 
     longitude: coordsArr[0], 
     } 
     return coords; 
}); 

const polygonあなたは `リアクトネイティブMap`例から、あなたの

<MapView.Polygon 
    coordinates={polygon} />