Импорт геойсона для реакции-листовки-розыгрыша

Question

Я пытаюсь импортировать некоторый GeoJSON в обработчик событий FeatureGroup in _onFeatureGroupReady, но он не отображается на карте.Код в основном основан на примере из библиотеки react-leaflet-draw здесь .Как ни странно, меню редактирования становится пригодным для использования, указывая на то, что данные, возможно, есть, но просто не отображаются.

Я не уверен, что происходит, так как я новичок в картах в целом.Соответствующий код находится в блоке else if(this.props.data) {.Все операторы console.log() показывают данные, находящиеся там и в правильном формате.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              37.79,
              -122.45
            ],
            [
              37.79,
              -122.42999999999999
            ],
            [
              37.77,
              -122.42999999999999
            ],
            [
              37.77,
              -122.45
            ],
            [
              37.79,
              -122.45
            ]
          ]
        ]
      }
    }
  ]
}

Вот код, в который я пытаюсь импортировать эти данные в FeatureGroup:

_onFeatureGroupReady = (ref) => {
    console.log('_onFeatureGroupReady');
    console.log(ref);
    if(ref===null) {
        return;//bug???
    }
    this._editableFG = ref; 
    // populate the leaflet FeatureGroup with the geoJson layers
    if(this.state.data) {
        console.log('importing service area from state');
        let leafletGeoJSON = new L.GeoJSON(this.state.data);
        let leafletFG = this._editableFG.leafletElement;
        leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
    }else if(this.props.data) {
        console.log('importing service area from props');
        this.setState({data:this.props.data},()=>{
            console.log(this.state.data);
            let leafletGeoJSON = new L.GeoJSON(this.state.data);
            console.log(leafletGeoJSON);
            let leafletFG = this._editableFG.leafletElement;
            console.log(leafletFG);
            leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
        })
    }

}

Что я могу делать не так (или даже лучше, каким-то образом я могу этого достичь)?

Answer 1

Надеюсь, что это вам поможет. Во-первых, не рекомендуется использовать this.setState в _onFeatureGroupReady, это приведет к многократному рендерингу на карте. Можно передать его в componentDidMount, который вызывается до рендеринга карты._onFeatureGroupReady, это не совсем ошибка, но она вернет неопределенное значение.

_onFeatureGroupReady = (ref) => {
    console.log('_onFeatureGroupReady');
    console.log(ref);
    if(ref===null) {
        return;
    }
    this._editableFG = ref; 
    // populate the leaflet FeatureGroup with the geoJson layers
    if(this.state.data) {
        console.log('importing service area from state');
        let leafletGeoJSON = new L.GeoJSON(this.state.data);
        let leafletFG = this._editableFG.leafletElement;
        leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
    }else if(this.props.data) {
        console.log('importing service area from props');
        console.log(this.state.data);
        let leafletGeoJSON = new L.GeoJSON(this.state.data);
        console.log(leafletGeoJSON);
        let leafletFG = this._editableFG.leafletElement;
        console.log(leafletFG);
        leafletGeoJSON.eachLayer( layer =>leafletFG.addLayer(layer));
    }
}

Затем о карте. Широта и долгота в координатах центра и координат противоположны. Так что, возможно, координаты, которые вы установили вgetGeoJson () не так.

<Map center={[37.79,-122.45]} zoom={13} zoomControl={false}>
        <FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
            ...
        </FeatureGroup>
      </Map>

функция getGeoJson ():

  {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [
              -122.45,
              37.79
            ],
            [
              -122.42999999999999,
              37.79,
            ],
            [
             -122.42999999999999, 
             37.77
            ],
            [
              -122.45,
              37.77
            ],
            [
              -122.45,
              37.79    
            ]
        ]
      ]
    }
}

И вот мой результат.