WPF中仅加载ScrollViewer可视区域内网格容器的图片瓦片懒加载

完全可以实现视口可视区域内的瓦片懒加载，核心思路是监听视口变化、计算所需瓦片范围、动态加载/卸载瓦片，以下是具体实现步骤和代码示例（以WPF为例）：

关键实现步骤 #

• 监听视口变化：绑定ScrollViewer的ScrollChanged事件，该事件会在滚动或缩放时触发，用于感知可视区域的变化。
• 计算可视瓦片范围：根据当前缩放比例、视口的偏移量和尺寸，换算出需要加载的瓦片行列号范围。
• 动态管理瓦片生命周期：维护已加载瓦片的集合，对比当前所需瓦片与已加载瓦片，加载新增瓦片并卸载超出可视区域的瓦片。
• 性能优化：添加防抖逻辑避免滚动时频繁计算，异步加载瓦片防止UI卡顿，可预加载边缘瓦片提升滑动体验。

代码示例 #

基础变量定义 #

private Dictionary<string, Image> _loadedTiles = new Dictionary<string, Image>();
private DispatcherTimer _debounceTimer;
private Grid _gridContainer; // 你的网格容器
private ScrollViewer _scrollViewer; // 你的ScrollViewer

滚动与缩放事件处理 #

private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
    // 防抖处理：滚动停止200ms后再执行瓦片更新，避免频繁计算
    _debounceTimer?.Stop();
    _debounceTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(200) };
    _debounceTimer.Tick += (s, args) =>
    {
        _debounceTimer.Stop();
        UpdateVisibleTiles();
    };
    _debounceTimer.Start();
}

瓦片更新核心逻辑 #

private void UpdateVisibleTiles()
{
    // 获取视口基本参数
    double viewportTop = _scrollViewer.VerticalOffset;
    double viewportLeft = _scrollViewer.HorizontalOffset;
    double viewportWidth = _scrollViewer.ViewportWidth;
    double viewportHeight = _scrollViewer.ViewportHeight;
    
    // 获取当前缩放比例（假设通过ScaleTransform实现缩放）
    var scaleTransform = _gridContainer.RenderTransform as ScaleTransform;
    double scale = scaleTransform?.ScaleX ?? 1.0;
    
    // 瓦片基础尺寸（根据你下载的瓦片实际尺寸调整，通常是256x256）
    const int tileOriginalSize = 256;
    double scaledTileSize = tileOriginalSize * scale;

    // 计算可视区域对应的瓦片行列范围
    int startCol = (int)Math.Floor(viewportLeft / scaledTileSize);
    int endCol = (int)Math.Ceiling((viewportLeft + viewportWidth) / scaledTileSize);
    int startRow = (int)Math.Floor(viewportTop / scaledTileSize);
    int endRow = (int)Math.Ceiling((viewportTop + viewportHeight) / scaledTileSize);

    // 限制行列号在当前缩放级别的有效范围内
    int currentZoom = GetCurrentZoomLevel(); // 自行实现获取当前使用的缩放级别
    int maxTileCount = (int)Math.Pow(2, currentZoom); // 假设瓦片数量为2^zoom，根据实际规则调整
    startCol = Math.Max(0, startCol);
    endCol = Math.Min(maxTileCount - 1, endCol);
    startRow = Math.Max(0, startRow);
    endRow = Math.Min(maxTileCount - 1, endRow);

    // 收集当前需要的瓦片标识（格式：zoom_col_row）
    HashSet<string> neededTiles = new HashSet<string>();
    for (int col = startCol; col <= endCol; col++)
    {
        for (int row = startRow; row <= endRow; row++)
        {
            neededTiles.Add($"{currentZoom}_{col}_{row}");
        }
    }

    // 卸载超出可视区域的瓦片，释放内存
    List<string> tilesToRemove = _loadedTiles.Keys.Where(id => !neededTiles.Contains(id)).ToList();
    foreach (string tileId in tilesToRemove)
    {
        Image tile = _loadedTiles[tileId];
        _gridContainer.Children.Remove(tile);
        tile.Source = null; // 清空图片资源
        _loadedTiles.Remove(tileId);
    }

    // 加载新增的可视区域瓦片
    foreach (string tileId in neededTiles.Where(id => !_loadedTiles.ContainsKey(id)))
    {
        string[] parts = tileId.Split('_');
        int zoom = int.Parse(parts[0]);
        int col = int.Parse(parts[1]);
        int row = int.Parse(parts[2]);

        // 构造本地瓦片路径（根据你的实际存储路径调整）
        string tilePath = $"../MapTiles/{zoom}/{col}/{row}.png";
        if (!File.Exists(tilePath)) continue;

        // 异步加载瓦片，避免阻塞UI
        Task.Run(() =>
        {
            using (FileStream stream = new FileStream(tilePath, FileMode.Open))
            {
                BitmapImage bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.CacheOption = BitmapCacheOption.OnLoad;
                bitmap.StreamSource = stream;
                bitmap.EndInit();
                bitmap.Freeze(); // 冻结BitmapImage以支持跨线程访问

                // 回到UI线程更新界面
                Dispatcher.Invoke(() =>
                {
                    Image tileImage = new Image();
                    tileImage.Source = bitmap;
                    // 设置瓦片在容器中的位置
                    Canvas.SetLeft(tileImage, col * scaledTileSize);
                    Canvas.SetTop(tileImage, row * scaledTileSize);
                    tileImage.Width = scaledTileSize;
                    tileImage.Height = scaledTileSize;

                    _gridContainer.Children.Add(tileImage);
                    _loadedTiles.Add(tileId, tileImage);
                });
            }
        });
    }
}

// 自行实现：获取当前使用的地图缩放级别
private int GetCurrentZoomLevel()
{
    // 根据你的业务逻辑返回当前缩放级别，比如从绑定的变量中读取
    return 10;
}

注意事项 #

• 瓦片编号规则：不同地图瓦片的命名规则可能不同（比如TMS与谷歌地图的行号顺序相反），需要根据你下载的瓦片实际格式调整行列计算逻辑。
• 缩放变换适配：如果你的缩放是通过其他方式实现（比如LayoutTransform），需要重新调整视口参数与瓦片尺寸的换算逻辑。
• 内存优化：卸载瓦片时必须清空Image.Source并从容器中移除，必要时可通过GC.Collect()辅助回收内存（但避免频繁调用）。
• 预加载优化：可以将neededTiles的范围扩展1-2行列，提前加载视口边缘的瓦片，减少滑动时的空白闪烁。

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