flyto功能无法与动态位置一起工作

Question

我会猜测，您添加的按钮将变为静态，将位置固定到初始值。对于我需要使用USEMAP的大多数功能，我创建了一个返回null的组件，但是可以将组件放置在MapContainer中，从而使其可以访问MAP CONTECT。

我的飞行组件是：

import React, { useEffect } from "react";
import { useMap } from "react-leaflet";

export interface FlyToProps {
  latitude?: number;
  longitude?: number;
  zoom?: number;
  onFlyToComplete?: () => void;
}

const FlyTo: React.FC<FlyToProps> = ({
  latitude,
  longitude,
  zoom,
  onFlyToComplete,
}) => {
  const map = useMap();

  useEffect(() => {
    if (latitude && longitude) {
      const handleMoveEnd = () => {
        if (onFlyToComplete) {
          onFlyToComplete();
        }
        map.off("moveend", handleMoveEnd);
      };

      map.on("moveend", handleMoveEnd);
      map.flyTo([latitude, longitude], zoom ?? map.getZoom());
    }
  }, [latitude, longitude, map, zoom, onFlyToComplete]);

  return null;
};

export default FlyTo;

Answer 1

{flyTo && (
        <FlyTo
          latitude={flyTo.lat}
          longitude={flyTo.lng}
          onFlyToComplete={() => {
            clearFlyTo();
          }}
        />
      )}

在另一个注释中，我建议您只添加自定义控件，因为常规的React组件您只需要使用正确的classNames将它们放置。我还使用自定义组件类为此：

import L from "leaflet";
import React, { useEffect, useRef } from "react";

const ControlClasses = {
  bottomleft: "leaflet-bottom leaflet-left",
  bottomright: "leaflet-bottom leaflet-right",
  topleft: "leaflet-top leaflet-left",
  topright: "leaflet-top leaflet-right",
};

type ControlPosition = keyof typeof ControlClasses;
export interface LeafLetControlProps {
  position?: ControlPosition;
  children?: React.ReactNode;
  offset?: [number, number];
}

const LeafletControl: React.FC<LeafLetControlProps> = ({
  position,
  children,
  offset = [0, 0],
}) => {
  const divRef = useRef(null);

  useEffect(() => {
    if (divRef.current) {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
      L.DomEvent.disableClickPropagation(divRef.current);
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
      L.DomEvent.disableScrollPropagation(divRef.current);
    }
  });

  return (
    <div
      style={{
        marginLeft: offset[0],
        marginTop: offset[1],
      }}
      ref={divRef}
      className={position && ControlClasses[position]}
    >
      <div className={"leaflet-control"}>{children}</div>
    </div>
  );
};

export default LeafletControl;