Style Geo JSON в библиотеке карт реагирования - PullRequest
Новая
       73

Style Geo JSON в библиотеке карт реагирования

0 голосов
/ 23 марта 2020

Я реализовал библиотеку листовок в своем реактивном проекте https://react-leaflet.js.org/en/ и внедрил компонент карты geo json, как показано ниже 

class MapContainer extends React.Component {
  state = {
    greenIcon: {
      lat: 8.3114,
      lng: 80.4037
    },
    zoom: 8
  };

  grenIcon = L.icon({
    iconUrl: leafGreen,
    iconSize: [24, 24], // size of the icon
    //iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
    popupAnchor: [-3, -16]
  });

  render() {

    const positionGreenIcon = [
      this.state.greenIcon.lat,
      this.state.greenIcon.lng
    ];

    return (
      <div className="mapdata-container">
        <Map className="map" style={{height:'100%',width:'100%'}} center={positionGreenIcon} zoom={this.state.zoom}>
          <GeoJSON data={geo}/>
          <Marker position={positionGreenIcon} icon={this.grenIcon}>
            <Popup>I am a green leaf</Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

export default MapContainer;

Это выглядит так

enter image description here

Я хочу покрасить каждую провинцию разными цветами, и в документации о том, как это сделать, не так много.

Это гео json файл, который я использовал. https://raw.githubusercontent.com/thejeshgn/srilanka/master/electoral_districts_map/LKA_electrol_districts.geojson

Как мне fill каждой провинции с разными цветами.

1 Ответ

1 голос
/ 23 марта 2020

Вы можете легко добиться этого, используя style prop на вашей обёртке Geo JSON. Создайте метод стиля, который принимает функцию в качестве аргумента. Затем в свойстве fillColor используйте свойства: {electoralDistrict}, чтобы определить район и вернуть желаемый цвет: Вот пример того, как это может быть: 

class MapContainer extends React.Component {
  state = {
    greenIcon: {
      lat: 8.3114,
      lng: 80.4037
    },
    zoom: 8
  };

  grenIcon = L.icon({
    iconSize: [24, 24], // size of the icon
    //iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
    popupAnchor: [-3, -16],
    iconUrl: leafGreen
  });

  giveColor = district => {
    switch (district) {
      case "Matara":
        return "red";
      case "Polonnaruwa":
        return "brown";
      case "Ampara":
        return "purple";
      default:
        return "white";
    }
  };

  style = feature => {
    const {
      properties: { electoralDistrict }
    } = feature;
    return {
      fillColor: this.giveColor(electoralDistrict),
      weight: 0.3,
      opacity: 1,
      color: "purple",
      dashArray: "3",
      fillOpacity: 0.5
    };
  };

  render() {
    const positionGreenIcon = [
      this.state.greenIcon.lat,
      this.state.greenIcon.lng
    ];

    return (
      <div className='mapdata-container'>
        <Map
          className='map'
          style={{ height: "100vh", width: "100%" }}
          center={positionGreenIcon}
          zoom={this.state.zoom}
        >
          <GeoJSON data={geo} style={this.style} />
          <Marker position={positionGreenIcon} icon={this.grenIcon}>
            <Popup>I am a green leaf</Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}
...