0

我正在尝试将 GeoJSON 图层加载到我的 React Google Map 上。我知道在普通的 JS 中你可以使用 map.data.loadGeoJson()，但这似乎在 google-maps-react 中不受支持。有没有办法使这项工作或至少解决这个问题？

我尝试了这个解决方案，但它对我不起作用：https ://medium.com/@dmw9400/using-geojson-with-google-maps-api-5127f7498a33

在 componentDidMount 中获取 GeoJSON 文件：

    const { feedInfo } = this.props;
    const geojson = await this.props.store.feeds.getGeojson(feedInfo.feed_code);
    const coordinates = geojson.geometry.coordinates;
    await this.setState({ coords: coordinates });
  }

尝试将 GeoJSON 更改为多边形格式：

   const { coords } = this.state;
    let coordArr = [];
    coords.map(coord => coordArr.push({ lat: coord[1], lng: coord[0] }));
      return (
        <Polygon
          paths={coordArr}
          strokeColor={POLYGON_STYLE.BORDER_COLOR}
          strokeOpacity={0.8}
          strokeWeight={2}
          fillColor={POLYGON_STYLE.BACKGROUND_COLOR}
          fillOpacity={0.35}
        />);
  }

渲染图：

    return (

      <Map
        google={this.props.google}
        onReady={this.autoCenterMap}
      >
      {this.loadPolygon()}
      </Map>
    );
  }
4

1 回答 1

1

我使用 onReady 中的 map 参数解决了这个问题，然后使用 map.data.addGeoJson 而不是 loadGeoJson。

     <Map
        google={this.props.google}
        onReady={this.autoCenterMap}
      />

autoCenterMap = ({ google }, map) => {
    this.loadGeoJson(map);
*code continues*
  }

loadGeoJson = async (map) => {
    const geojsonRoutes = await this.getRoutes(feed_code);
    const geojsonEnvelope = await this.getEnvelope(feed_code)
    map.data.addGeoJson(geojsonEnvelope);
    map.data.addGeoJson(geojsonRoutes); // # load geojson layer
}
于 2019-09-11T18:34:38.707 回答