在 React-Mapbox-GL 中实现自定义缩放

Question

我正在尝试在React-Mapbox-GL 中实现自定义缩放行为。如果用户滚动，地图不会缩放，只有网页在滚动。只有当用户“双指缩放”时，地图才能缩放。

我使用scrollZoom: false，它禁用两个操作的缩放（滚动和“双指缩放”）。然后，我添加了react-quick-pinch-zoom库及其onUpdate事件，这有助于我为“pinch-to-zoom”事件添加侦听器。

缩放体验不好，我不知道如何实现与 React-Mapbox-GL 类似的缩放体验。

代码沙盒

import React, { useState, useCallback } from "react";
import QuickPinchZoom from "react-quick-pinch-zoom";
import ReactDOM from "react-dom";
import ReactMapboxGL from "react-mapbox-gl";

const Map = ReactMapboxGL({
  accessToken:
    "pk.eyJ1IjoiZG9ubm5lLWdyaSIsImEiOiJjanF5eHB1aDMwOG83NDVxcTd4aG0xbTcxIn0.sZBpmFCnFBApzXGsIFXh4A",
  maxZoom: 18,
  scrollZoom: false
});

const MapContainer = () => {
  const [mapZoom, setMapZoom] = useState(8);

  const onUpdate = useCallback(
    ({ scale }) => {
      if (scale === 1) {
        return;
      }
      const scaleDiff = (scale - 1) / 12;
      setMapZoom(scaleDiff + mapZoom);
    },
    [mapZoom]
  );

  return (
    <QuickPinchZoom onUpdate={onUpdate}>
      <Map
        style="mapbox://styles/mapbox/streets-v9"
        zoom={[mapZoom]}
        center={[-0.109970527, 51.52916347]}
        containerStyle={{
          position: "absolute",
          top: 0,
          left: 0,
          height: "100%",
          width: "100%"
        }}
      ></Map>
    </QuickPinchZoom>
  );
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <MapContainer />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);