如何 - 每条折线的多条折线具有不同的颜色 - 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>
    )
  }
}

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

How to - multiple polylines with different colors for each polyline- react-leaflet

leaflet

reactjs

react-leaflet