Question

我正在与Leaflet和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>
    )
  }
}

如何 - 为每个折线 - 反应 - 传单使用不同颜色的多条折线

1 个答案: