如何 - 每条折线具有不同颜色的多条折线 - react-leaflet

Question

我正在使用 Leaflet 和 React 构建一个小型 React 应用程序，用于显示维也纳的不同地铁站。

我遇到的问题是如何在 react-leaflet 中编辑各个地铁线路的颜色。 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>
    );
  }
}

泰。留给你时间。

Answer 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>
    )
  }
}