どのようにポリラインごとに異なる色の複数のポリライン - 反応リーフレット

Question

ウィーンの異なる地下鉄駅を表示するためにリーフレットとリアクションを使用して小さな反応アプリを構築しています。

私が問題になったのは、反応リーフレットの個々のメトロラインの色を編集する方法でした。 Image of the map with different metro lines. ここではすべて赤で、サークルの色で色をカスタマイズしたいと思います。

各地下鉄駅の色、名前、および座標は、GeoJSONファイルで編集されます。

にGeoJSONファイル（vienna_metro_lines_byLines.geojson）

{ 
    "type": "FeatureCollection",  

    "features": [ 
    { "type": "Feature", "id": "01", "properties": { "name": "U1", "color": "red" }, 
     "geometry": { "type": "MultiLineString", "coordinates": 
     [ 
      [ 48.1423652, 16.3999045 ], [ 48.1458145, 16.3856390 ], [ 48.1537071, 16.3824464 ], 
     ] 
     } 
    }, 
    { "type": "Feature", "id": "02", "properties": { "name": "U2", "color": "#9933ff" }, 
     "geometry": { "type": "MultiLineString", "coordinates": 
     [ 
      [ 48.2262470, 16.5084951 ], [ 48.2345713, 16.5044830 ], [ 48.2334553, 16.4854766 ], 
     ] 
} 

コンポーネントファイル

//data 
import geojsonDataByLines from './vienna_metro_lines_byLines.geojson'; 

//main component 
class ViennaPoliLynes extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     geojsonDataByLines: geojsonDataByLines 

    }; 
    } 

    polylineLineMaker() { 
    const geojsonDataByLines = this.state.geojsonDataByLines; 

    const testMe = geojsonDataByLines.features.map((cord) => { 
     return cord.geometry.coordinates; 
    }); 
    return testMe; 
    } 

    polylineLineColor() { 
    //The color for the polylines shoud go here 
    const geojsonDataByLines = this.state.geojsonDataByLines; 

    const testMe = geojsonDataByLines.features.map((cord) => { 
     return cord.properties.color; 
    }); 
    console.log(testMe) 
    return testMe;  
    } 

    render() { 
    return (
     <Polyline positions={this.polylineLineMaker()} color={this.polylineLineColor()}> 

     </Polyline> 
    ); 
    } 
} 

のTy。お時間を頂きまして。

Answer 1

実際には、すべてのポリラインの座標をまとめて1つのポリラインを作成しているようです。次のように複数のポリラインをレンダリングする必要があります。

import {Map, Polyline} from 'react-leaflet' 

//data 
import geojsonDataByLines from './vienna_metro_lines_byLines.geojson'; 

//main component 
class ViennaPoliLynes extends Component { 
    render() { 
    return (
     <Map> 
     {geojsonDataByLines.features.map((feature) => (
      <Polyline 
      positions={feature.geometry.coordinates} 
      color={feature.properties.color} 
      /> 
     )} 
     </Map> 
    ) 
    } 
}