Question

我无法弄清楚如何在Leaflet地图上调用fitBounds（）。

如果我只是使用香草传单，这个解决方案将完美地运作：Zoom to fit all markers in Mapbox or Leaflet

不幸的是，我正在使用react-leaflet。

如果我只是单独使用传单，这是解决方案。

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

我认为这段代码（我的代码）this.mapRef.current.leafletElement等同于var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();，但是反应传单中的map.fitBounds();等同于什么？

基本上，我试图在地图上显示多个标记，并相应地调整视图（放大，缩小，飞到等）。

这是我的代码。

import React, { createRef, Component } from 'react'
import { Map, TileLayer, Marker, Popup, FeatureGroup } from 'react-leaflet'

export default class MasterLeafletMap extends Component {
  constructor(props) {
    super(props);
    this.markers = this.markers.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.mapRef = createRef()
  }

  handleClick() {
    const leafletMap = this.mapRef.current.leafletElement;
    this.mapRef.current.fitBounds(leafletMap.getBounds()); // Doesn't work
    leafletMap.fitBounds(leafletMap.getBounds()); // Doesn't work (just trying to get the bounds of the markers that are there and adjust the view)
    this.mapRef.current.leafletElement.flyToBounds(leafletMap.getBounds()); // Doesn't work
  }
  markers() {
    if (this.props.search.items instanceof Array) {
      return this.props.search.items.map(function(object, i) {
        const position = [object._geoloc.lat, object._geoloc.lng];
        return <Marker position={position}>
          <Popup>
            <span>
              <h4>{object.title}</h4>
              {object.address}, <br /> {object.city}, {object.state}, {object.zip} <br /> {object._geoloc.lat}, {object._geoloc.lng}
            </span>
          </Popup>
        </Marker>
      })
    }

  }
  render() {
    const hasLoaded = this.props.search.items instanceof Array;
    if (!hasLoaded) {
      return null;
    }

    const position = [this.props.search.items[0]._geoloc.lat, this.props.search.items[0]._geoloc.lng];

    return (
      <div className="leaflet-map-container">
        <div onClick={this.handleClick}>Hello</div>
        <Map center={position} zoom={13} ref={this.mapRef}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <FeatureGroup>
            {this.markers()}
          </FeatureGroup>
        </Map>
      </div>
    )
  }
}

提前致谢。

Answer 1

如果您希望在地图加载时出现此行为，则可以使用onlayeradd事件。

示例：

const fitToCustomLayer = () => {
    if (mapRef.current && customAreaRef.current) { //we will get inside just once when loading
        const map = mapRef.current.leafletElement
        const layer = customAreaRef.current.leafletElement
        map.fitBounds(layer.getBounds().pad(0.5))
    }
}

return (
<Map ref={mapRef} onlayeradd={fitToCustomLayer}>
    <LayersControl position="topright">
        <Overlay checked key="customArea" name="Área de interesse">
            <GeoJSON ref={customAreaRef} data={collection} style={geoJSONStyle} />
        </Overlay>
        <BaseLayer name="Open Street Map">
            <TileLayer attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
        </BaseLayer>            
    </LayersControl>
</Map>
)

* Edit：如果ref层是最后一层，那么这似乎不起作用。将其放在基础层之前不会影响渲染，并且可以正常工作。

如果出于合法目的需要使用onlayeradd，请确保添加另一个标志，以避免进入if并再次触发fitBounds并失去地图的当前位置。< / p>

Ps：我尝试了onload的反应传单方法，但是尝试了it doesn't seems to work。

Answer 2

以下是如何通过react-leaflet

完成此操作的示例

handleClick() {
    const map = this.mapRef.current.leafletElement;  //get native Map instance
    const group = this.groupRef.current.leafletElement; //get native featureGroup instance
    map.fitBounds(group.getBounds());
}

其中

<div>
    <button onClick={this.handleClick}>Zoom</button>
    <Map
      center={this.props.center}
      zoom={this.props.zoom}
      ref={this.mapRef}
    >
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <FeatureGroup ref={this.groupRef}>
        {this.props.locations.map(location => (
          <Marker
            key={location.name}
            position={{ lat: location.lat, lng: location.lng }}
          >
            <Popup>
              <span>
                <h4>{location.name}</h4>
              </span>
            </Popup>
          </Marker>
        ))}
      </FeatureGroup>
    </Map>
 </div>

对应

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

Here is a demo

在使用传单反应时如何调用fitBounds（）？

2 个答案: