在反应中实现的 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>
  );
};

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

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

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

Answer 1

并非所有浏览器都本机支持指针事件，并且 Openlayers 已删除 Pointer polyfill since v6.4。如果您的目标是不支持指针事件的旧版浏览器（在 iPad 上），您现在需要在您的应用程序中包含一个指针事件 polyfill（elm-pep 或 pepjs）。