0

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

我遇到的问题是如何在 react-leaflet 中编辑各个地铁线路的颜色。不同地铁线路的地图图像。 现在它们都是红色的，我想用圆圈的颜色自定义颜色。

每个地铁站的颜色、名称和坐标都在 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>
    );
  }
}

泰。为了你的时间。

4

1 回答 1

0

似乎您实际上是通过将所有折线的坐标合并在一起来创建一条折线。您应该尝试像这样渲染多条折线：

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>
    )
  }
}
于 2017-09-18T02:48:04.443 回答