OpenLayers v6.14.1在iOS 15.4.1系统7代iPad上出现冻结/无响应问题的技术求助

我之前在iOS设备上调试OpenLayers应用时也遇到过类似的冻结问题，结合你提到的旧GitHub Issue和当前v6.14.1的代码，给你几个针对性的解决建议：

1. 修复PointerInteraction的指针追踪逻辑（对应旧Issue的思路） #

你提到的2017年的问题，核心是iOS设备上的pointer事件处理残留导致的内存堆积或事件阻塞。在v6.14.1中，PointerInteraction.prototype.updateTrackedPointers_方法的指针ID处理依然可能存在问题——iOS的pointerId有时会出现非预期的数值，且没有及时清理失效的指针追踪记录。

你可以尝试重写这个方法，添加指针清理逻辑：

import { PointerInteraction } from 'ol/interaction';
import { isPointerDraggingEvent } from 'ol/interaction/Pointer';

// 重写指针追踪更新方法
PointerInteraction.prototype.updateTrackedPointers_ = function(mapBrowserEvent) {
  if (isPointerDraggingEvent(mapBrowserEvent)) {
    const event = mapBrowserEvent.originalEvent;
    const id = String(event.pointerId); // 确保ID转为稳定字符串
    const trackedPointers = this.trackedPointers_ || {};

    // 先清理已失效的指针记录（iOS上容易残留）
    Object.keys(trackedPointers).forEach(key => {
      const pointer = trackedPointers[key];
      if (pointer?.isRemoved) {
        delete trackedPointers[key];
      }
    });

    // 更新当前指针状态
    if (event.type === 'pointerdown' || event.type === 'pointermove') {
      trackedPointers[id] = {
        pointerId: event.pointerId,
        clientX: event.clientX,
        clientY: event.clientY,
        isRemoved: false
      };
    } else if (event.type === 'pointerup' || event.type === 'pointercancel') {
      if (trackedPointers[id]) {
        trackedPointers[id].isRemoved = true;
      }
    }

    this.trackedPointers_ = trackedPointers;
  }
};

这段代码会及时清理失效的指针记录，避免iOS上重复的pointer事件堆积导致地图主线程阻塞。

2. 优化地图交互与视图配置 #

你已经禁用了旋转，但默认的交互集合里可能还存在潜在的冲突。可以明确禁用不需要的交互，同时调整视图参数减少计算负担：

import { defaults as defaultInteractions } from 'ol/interaction';

const map = new Map({
  target: 'map',
  // 明确禁用旋转交互，保留必要的平移、缩放
  interactions: defaultInteractions({
    rotate: false,
    doubleClickZoom: true,
    dragPan: true,
    mouseWheelZoom: true
  }),
  view: new View({
    center: fromLonLat([startLocation.lon, startLocation.lat]),
    zoom: 10,
    constrainResolution: false, // 先关闭强制整数缩放，减少视图计算
    enableRotation: false
  }),
});

constrainResolution: true会强制地图每次缩放到整数级别，频繁缩放时会增加额外的视图计算，暂时关闭可以测试是否是这个因素导致的冻结。

3. 优化瓦片加载策略，避免网络请求阻塞 #

iOS的WebKit对并发网络请求有严格限制，多次缩放旋转会触发大量瓦片请求，可能导致主线程阻塞。可以调整TileLayer的配置：

import { TileState } from 'ol/Tile';

let osm = new TileLayer({
  source: new XYZ({
    url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    attributions: ['&copy; <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'],
    // 自定义瓦片加载函数，优化错误处理和加载逻辑
    tileLoadFunction: function(tile, src) {
      const img = tile.getImage();
      img.crossOrigin = 'anonymous';
      img.onload = () => tile.setImage(img);
      img.onerror = () => tile.setState(TileState.ERROR); // 及时标记错误瓦片，避免重试堆积
      img.src = src;
    },
    maxZoom: 18, // 限制最大缩放级别，减少瓦片请求量
    tilePixelRatio: window.devicePixelRatio // 适配Retina屏幕，避免不必要的高分辨率瓦片
  }),
});

这个配置能减少瓦片加载的错误堆积，同时限制请求数量，降低iOS WebKit的压力。

4. 添加CSS优化，减少浏览器触摸干扰 #

在地图容器的CSS中添加以下规则，优化iOS上的触摸行为：

#map {
  touch-action: pan-x pan-y; /* 明确告诉浏览器只处理平移事件，避免默认触摸行为冲突 */
  -webkit-overflow-scrolling: touch; /* 优化触摸滚动的流畅度 */
  will-change: transform; /* 提示浏览器提前优化地图元素的变换性能 */
}

touch-action能减少浏览器默认触摸事件和OpenLayers交互的冲突，will-change则能让浏览器提前为地图的变换操作分配资源。

内容的提问来源于stack exchange，提问作者minisaurus