Перейдите к загруженному объекту geo json на листовой карте

Question

Как перейти пользователя к загруженному гео json в карте листовки? Когда приложение загружено, я получаю центр карты из реквизита, которые жестко закодированы. У меня есть флажок, и когда он нажимает, он загружает многоугольник на карте, и когда он загружается, я хочу автоматически перейти к нему, а не искать с помощью мыши на карте ....

render() {
    const position = [this.state.lat, this.state.lng];
    const { profile } = this.props;
    if (profile.role === "User" || profile.role === "Admin") {
      console.log("User role", profile.role);
      console.log("URL", this.state.url);
      const basemapsDict = {
        osm: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        hot: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
        dark: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
        cycle: "https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
        sentinel:
          "http://services.sentinel-hub.com/ogc/wms/bb1c8a2f-5b11-42bb-8ce4-dbf7f5300663?REQUEST=GetMap&BBOX=3238005,5039853,3244050,5045897&LAYERS=TRUE_COLOR&MAXCC=20&WIDTH=320&HEIGHT=320&FORMAT=image/jpeg&TIME=2018-03-29/2018-05-29",
      };
      return (
        <div id="map" className="dashboard container">
          <br />
          <HorizontalLinearStepper />
          <br />
          <hr />
          <Map
            style={{ height: "50vh" }}
            center={position}
            zoom={13}
            onClick={this.handleClick}
            onCreate={this.onCreate}
            onLocationfound={this.handleLocationFound}
          >
            <Search />
            <div className="geojson-toggle">
              <label>Show Geojson </label>
              <input
                style={{ opacity: 1, pointerEvents: "auto" }}
                type="checkbox"
                name="layertoggle"
                id="layertoggle"
                value={this.state.geojsonvisible}
                onChange={this.onGeojsonToggle}
              />
            </div>
            {this.state.geojsonvisible && (
              <GeoJSON
                data={geojson}
                style={this.geoJSONStyle}
                value={this.state.geojsonvisible}
              />
            )}
            {/* /////////////////////////////////////// */}


            <GeoJSON
              data={london_postcodes}
              style={this.geoJSONStyle}
              onEachFeature={this.onEachFeature}
            />
          </Map>
          <br />

      );

Answer 1

Вам нужно получить справку map и справку geojson, и, как только вы это сделаете, вы поместите границы карты вокруг geojson границ:

export default class LeafletMap extends Component {
  state = {
    lat: 51.505,
    lng: -0.09,
    zoom: 13
  };

  mapRef = React.createRef();
  geojsonRef = React.createRef();

  pointToLayer = (feature, latlng) => {
    return L.marker(latlng, { icon }); // Change the icon to a custom icon
  };

  bindGeoJson = geojsonRef => {
    const map = this.mapRef.current;
    if (map && geojsonRef) {
      map.leafletElement.fitBounds(geojsonRef.leafletElement.getBounds());
    }
  };

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map
        ref={this.mapRef}
        center={position}
        zoom={this.state.zoom}
        style={{ height: "90vh" }}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <GeoJSON
          ref={this.bindGeoJson}
          data={dataJson}
          pointToLayer={this.pointToLayer}
        />
      </Map>
    );
  }
}

Демо