在 React 中实现的 Openlayers 地图在移动设备上不起作用

Question

我在 React 中实现了 OpenLayers 地图，如下所示：

const Map = ({ children }) => {
  const mapRef = useRef();
  const [map, setMap] = useState(null);
  const [mapReady, setMapReady] = useState(false);

  useEffect(() => {
    const zoom = 7;
    const center = [0, 0];
    const options = {
      view: new View({ zoom, center }),
      layers: [],
      controls: [],
      overlays: [],
    };
    const mapObject = new OLMap(options);

    mapObject.setTarget(mapRef.current);
    setMap(mapObject);
    mapObject.on('rendercomplete', () => setMapReady(true));

    return () => mapObject.setTarget(undefined);
  }, []);

  return (
    <MapContext.Provider value={{ map }}>
      <StyledDiv innerRef={mapRef}>
        {mapReady && children}
      </StyledDiv>
    </MapContext.Provider>
  );
};

地图在pc浏览器上运行良好，地图可以拖动，放大/缩小没有任何问题。标记正确显示等等。

问题是它不响应移动设备上的任何触摸事件。因此不能拖动它以正确导航到您想要的位置。它的行为就像它根本无法响应触摸事件。唯一有用的是放大和缩小控件。我认为问题与其在 React 中的实现有关，因为 OpenLayers 地图应该可以在移动设备上正常工作。

有人遇到过类似的问题吗？任何想法都非常有帮助。谢谢。

Answer 1

并非所有浏览器都原生支持指针事件，并且在您的应用程序中移除了 Openlayers Pointer polyfill since v6.4. If you are targeting older browsers (on iPad) that do not support Pointer events, you now need to include a pointer events polyfill (elm-pep or pepjs)。

在 React 中实现的 Openlayers 地图在移动设备上不起作用

Openlayers map implemented in react does not work on mobile

javascript

mobile

openlayers

reactjs