如何让OpenLayers释放不再使用的本地矢量瓦片内存？

问题描述 #

开发Android端Ionic/Capacitor/React离线地图应用，通过OpenLayers加载本地存储的PBF格式矢量瓦片，图层可正常显示，但拖动地图时内存持续增长，直至达到1.1-1.2GB后崩溃。注释掉format.readFeatures()与tile.setFeatures()代码后，内存不再增长，已排除Capacitor Filesystem插件、fetch API的问题。

相关代码 #

Map初始化代码 #

export async function initMap(
  mapElement: React.RefObject<HTMLDivElement>,
  uri: string,
  availableTilesPath: Set<string> | null
) {
  const mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(4),
    projection: "EPSG:4326",
  });

  const sourceGWCTMSLocalTiles = new VectorTileSource({
    format: new MVT(),
    url: `${uri}/${vectorArchiveFileName}/{z}/{x}/{-y}.pbf`,
    tileGrid: olTilegrid.createXYZ({ maxZoom: 14, tileSize: 2048 }),
    tileLoadFunction: (tile, url) =>
      customTileLoad(tile as VectorTile, url, availableTilesPath),
  });
  const vectorLayer = new VectorTileLayer({
    renderMode: "vector",
    source: sourceGWCTMSLocalTiles,
  });

  return new Map({
    target: mapElement.current || undefined,
    layers: [
      vectorLayer,
      new WebGLTileLayer({
        source: sourceGeoTIFF,
      }),
    ],
    view: new View({
      projection: "EPSG:3857",
      zoom: 16,
      minZoom: 6,
      maxZoom: 20,
      center: fromLonLat([-52.159, 4.005]),
      constrainResolution: true,
      showFullExtent: true,
    }),
    controls: defaultControls().extend([mousePositionControl]),
  });
}

自定义瓦片加载函数 #

export function customTileLoad(
  tile: VectorTile,
  url: string,
  availableTilesPaths: Set<string> | null
) {
  tile.setLoader(function (extent, resolution, projection) {
    const sliceAt = url.indexOf(vectorArchiveFileName);
    const fileUri = url.substring(sliceAt + vectorArchiveFileName.length);
     
    //prevent unecessary calls to the filesystem
    if (availableTilesPaths?.has(vectorArchiveFileName + fileUri)) {
      Filesystem.readFile({
        directory: Directory.External,
        path: vectorArchiveFileName + fileUri,
      })
        .then((res) => {
          const str = "data:application/octet-stream;base64," + res.data;
          fetch(str)
            .then((res) => res.arrayBuffer())
            .then(function (data) {
              const format = tile.getFormat(); // ol/format/MVT configured as source format

              //no more memory leak if I comment out the following lines
              const features = format.readFeatures(data, {
                extent: extent,
                featureProjection: projection,
              });
              tile.setFeatures(features as Feature<Geometry>[]);
            });
        })
        .catch(() => {
          console.log("error trying to load tile");
        });
    }
  });
}

依赖版本 #

• OpenLayers: 7.4.0
• Ionic: 7.0.12
• Capacitor: 5.0.4
• React: 18.2.0

解决方案 #

1. 手动清理瓦片Feature引用 #

Android WebView环境下，OpenLayers的Feature/Geometry对象可能因引用未被回收导致内存泄漏。在瓦片销毁时手动清空Feature：

export function customTileLoad(
  tile: VectorTile,
  url: string,
  availableTilesPaths: Set<string> | null
) {
  // 监听瓦片销毁事件，清理Feature
  tile.addEventListener('dispose', () => {
    tile.setFeatures([]);
  });

  tile.setLoader(function (extent, resolution, projection) {
    // 原有代码...
  });
}

2. 优化MVT读取逻辑 #

避免创建不必要的对象，减少内存占用：

• 手动将base64转为ArrayBuffer，去掉fetch环节的内存开销
• 限制Feature保留的属性数量

// 新增base64转ArrayBuffer工具函数
function base64ToArrayBuffer(base64: string): ArrayBuffer {
  const binaryString = window.atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

export async function customTileLoad(
  tile: VectorTile,
  url: string,
  availableTilesPaths: Set<string> | null
) {
  tile.addEventListener('dispose', () => {
    tile.setFeatures([]);
  });

  tile.setLoader(async function (extent, resolution, projection) {
    const sliceAt = url.indexOf(vectorArchiveFileName);
    const fileUri = url.substring(sliceAt + vectorArchiveFileName.length);
    const tilePath = vectorArchiveFileName + fileUri;
     
    if (!availableTilesPaths?.has(tilePath)) return;

    try {
      const res = await Filesystem.readFile({
        directory: Directory.External,
        path: tilePath,
      });
      const buffer = base64ToArrayBuffer(res.data);
      const format = tile.getFormat() as MVT;
      
      // 只保留必要属性，减少内存占用
      const features = format.readFeatures(buffer, {
        extent: extent,
        featureProjection: projection,
        filter: (feature) => {
          // 示例：只保留id和geometry属性
          const props = feature.getProperties();
          feature.setProperties({ id: props.id }, true);
          return true;
        }
      });
      tile.setFeatures(features as Feature<Geometry>[]);
    } catch (err) {
      console.log("error trying to load tile", err);
    }
  });
}

3. 调整矢量图层渲染模式 #

将renderMode从vector改为hybrid或image，利用WebGL渲染减少JavaScript层面的内存占用：

const vectorLayer = new VectorTileLayer({
  renderMode: "hybrid", // 或 "image"
  source: sourceGWCTMSLocalTiles,
});

4. 限制瓦片缓存大小 #

自定义LRU缓存，控制最大缓存瓦片数，并在瓦片回收时手动销毁资源：

const sourceGWCTMSLocalTiles = new VectorTileSource({
  format: new MVT(),
  url: `${uri}/${vectorArchiveFileName}/{z}/{x}/{-y}.pbf`,
  tileGrid: olTilegrid.createXYZ({ maxZoom: 14, tileSize: 2048 }),
  tileLoadFunction: (tile, url) =>
    customTileLoad(tile as VectorTile, url, availableTilesPath),
  // 自定义LRU缓存，限制最大缓存数量
  tileCache: new LRUCache({
    maxSize: 50, // 根据设备性能调整
    dispose: (tile) => {
      tile.setFeatures([]);
      tile.dispose();
    }
  })
});

5. 调整WebView内存配置 #

在capacitor.config.ts中优化WebView参数，提升内存上限：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // 其他配置
  android: {
    webView: {
      javaScriptEnabled: true,
      domStorageEnabled: true,
      setAppCacheMaxSize: 100 * 1024 * 1024, // 100MB缓存上限
      setHardwareAccelerationEnabled: true // 启用硬件加速分担内存压力
    }
  }
};

export default config;

验证方法 #

每次修改后，使用Android Studio Memory Profiler：

1. 拖动地图观察内存增长趋势
2. 生成内存快照（Dump Java heap），分析是否存在大量未回收的Feature/Geometry对象
3. 检查闭包引用导致的内存泄漏点

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