如何根据反应传单中的选定位置飞到然后在位置周围获取边界

Question

当从城市下拉列表列表和该位置周围的 getBounds 动态选择位置时，我如何缩放特定位置或动态飞到该特定位置。我正在尝试引用此但这可以在 flyTo 发生后起作用。那么如何在我的代码中使用 flyTo。

    useEffect(() => {
  const cityFilter = () => {
    let geocodes = JSON.parse(sessionStorage.getItem('geocode'));
    let mapData = props.allEquipData.filter((filtered) => {
      return filtered.city === selectedCity;
    });
    Promise.all(
      mapData.map(async (data) => {
        let selectedLocGeo = geocodes.filter((geo) => geo.zip == data.zipcode);
        if (selectedLocGeo.length > 0) {
          data.coordinates = [selectedLocGeo[0].latitude, selectedLocGeo[0].longitude];
        } else {
          data.coordinates = [0, 0];
        }
        return data;
      })
    )
      .then((response) => {
        let markerData = [];
        let count = 1;
        response.map((resp, index) => {
          if (resp.coordinates[0] !== 0 && resp.coordinates[1] !== 0) {
            let existingPositionIndex = markerData.findIndex(
              (mark) =>
                mark.positions && mark.positions.length && mark.positions[0] === resp.coordinates[0] && mark.positions[1] === resp.coordinates[1]
            );
            if (existingPositionIndex > -1) {
              markerData[existingPositionIndex].devices.push(resp);
            } else {
              let obj = {
                positions: resp.coordinates,
                key: 'marker' + count,
                devices: [resp],
                location: resp.city + ', ' + resp.state,
              };
              markerData.push(obj);
              count++;
            }
          }
        });

        // let group = new L.featureGroup([markerData[0].positions]);
        // mapRef.firBounds(group.getBounds());
        // console.log('oth position : ', markerData[0].positions);

        // const map = mapRef.current;
        // // console.log('map : ',map.leafletElement.flyTo);
        // // var group = new L.featureGroup([L.marker(markerData[0].positions)]);
        // // if (map) map.leafletElement.fitBounds(group.getBounds());

        // if (map) {
        //   map.flyTo(markerData[0].positions, 10);

        setFilteredMarkers(markerData);
      })
      .catch((err) => {
        console.log('Err', err);
      });
  };
  cityFilter();
}, [selectedCity]);

<Map
  center={position}
  zoom={5}
  maxZoom={100}>
  <LayersControl position='topright'>
    <LayersControl.Overlay name='Markers' checked>
      <LayerGroup>
        <MyMarkersList markers={handleMarkers(markerData)} />
      </LayerGroup>
    </LayersControl.Overlay>
  </LayersControl>
</Map>

当从下拉列表中选择城市时，将调用 useEffect，然后它会根据所选城市为您提供标记位置，例如 [lat,log]。从这一点开始，它应该飞到那个位置，并在可能的情况下绕过它。

Answer 1

在setFilteredMarkers(markerData);

之前添加这两行代码

const {latitude, longitude} = geoCodes.find(g => g.city === selectedCity)
 map.flyTo([ longitude,latitude], 12);

您要查找位于 geoCodes Object[] 内的所选城市的坐标。您使用 array.find 使用 th eselectedCity 的值来实现。每次下拉列表中的值更改时都会触发此事件。

已更新Demo

如何根据反应传单中的选定位置飞到然后在位置周围获取边界

How to flyTo and then getBounds around location based on selected location in react-leaflet

javascript

maps

leaflet

reactjs

react-leaflet