Leaflet地图平移时瓦片消失，移动后重新显示的问题求助

问题描述 #

在基于Leaflet的Web应用中，使用自定义CRS渲染地图时，出现平移地图时瓦片消失，仅平移到新区域才重新显示的闪烁问题，预期平移时所有瓦片保持可见。

已尝试操作 #

• 检查瓦片图层设置，确认瓦片加载正常
• 验证地图边界与缩放配置，未发现明显异常
• 排查渲染与瓦片加载逻辑，未找到解决方向

环境信息 #

• Leaflet版本：1.9.4
• 浏览器：Brave、Chrome（表现一致）

问题演示 #

代码示例 #

@Component({
   selector: "app-sa-map",
   standalone: true,
   imports: [],
   templateUrl: "./sa-map.component.html",
   styleUrl: "./sa-map.component.scss",
})
export class SaMapComponent implements OnInit {
   @Input() width: string = "400px";
   @Input() height: string = "400px";

   private static mapExtent = [1022.5, 1022.5, 1022.5, 1022.5];
   private static mapZoom = { min: 0, max: 3 };
   private static mapMaxResolution = 1;
   private static mapMinResolution = Math.pow(2, SaMapComponent.mapZoom.max) * SaMapComponent.mapMaxResolution;

   private crs: L.CRS | undefined;
   private map: L.Map | undefined;
   private layer: L.Layer | undefined;

   initializeMap() {
      this.crs = L.extend({}, L.CRS.Simple, {
         transformation: new L.Transformation(1, 0, 1, 0),

         scale: function(zoom: number) {
            return Math.pow(2, zoom) / SaMapComponent.mapMinResolution;
         },

         zoom: function(scale: number) {
            return Math.log(scale * SaMapComponent.mapMinResolution) / Math.LN2;
         },
      });

      this.map = L.map("map", {
         maxZoom: SaMapComponent.mapZoom.max,
         minZoom: SaMapComponent.mapZoom.min,
         crs: this.crs,
      });

      this.layer = L.tileLayer(`${environment.staticUrl}/images/tiles/sat.{z}.{x}.{y}.png`, {
         minZoom: SaMapComponent.mapZoom.min,
         maxZoom: SaMapComponent.mapZoom.max,
         noWrap: true,
         tms: false,
      }).addTo(this.map);

      const element = document.getElementsByClassName("leaflet-control-attribution");
      (<HTMLElement>element[0]).style.display = "none";

      this.map!.fitBounds([
         this.crs!.unproject(L.point(SaMapComponent.mapExtent[2], SaMapComponent.mapExtent[3])) as unknown as LatLngTuple,
         this.crs!.unproject(L.point(SaMapComponent.mapExtent[0], SaMapComponent.mapExtent[1])) as unknown as LatLngTuple,
      ]);

      // this.map!.fitBounds([
      //    [SaMapComponent.mapExtent[2], SaMapComponent.mapExtent[3]],
      //    [SaMapComponent.mapExtent[0], SaMapComponent.mapExtent[1]]
      // ])
   }

   ngOnInit(): void {
      this.initializeMap();
   }

   mirrorNumbers(min: number, max: number, num: number) {
      let j = (max - num) - (num - min);
      return num + j;
   }

   reverseMirrorNumbers(min: number, max: number, mirroredNum: number) {
      return (max + min - mirroredNum);
   }

   private gameToMapCoords(x: number, y: number) {
      const mapSideLength = 2045.0;
      const topLeftX = -2990.0;
      const topLeftY = 3000.0;

      x = this.mirrorNumbers(0.0, mapSideLength, (x / topLeftX) * mapSideLength) / 2.0;
      y = this.mirrorNumbers(0.0, mapSideLength, (y / topLeftY) * mapSideLength) / 2.0;

      return { x, y };
   }

   mapToGameCoords(mapX: number, mapY: number) {
      const mapSideLength = 2045.0;
      const topLeftX = -2990.0;
      const topLeftY = 3000.0;

      let x = mapX * 2.0;
      let y = mapY * 2.0;

      x = this.reverseMirrorNumbers(0.0, mapSideLength, x);
      y = this.reverseMirrorNumbers(0.0, mapSideLength, y);

      x = (x / mapSideLength) * topLeftX;
      y = (y / mapSideLength) * topLeftY;

      return { x, y };
   }

   addToMap(x: number, y: number) {
      const mapCoords = this.gameToMapCoords(x, y);
      x = mapCoords.x;
      y = mapCoords.y;

      L.marker([y, x]).addTo(this.map!);
   }
}

问题根源与解决方案 #

1. 自定义CRS的Transformation方向错误 #

Leaflet的L.Transformation默认遵循x轴向右为正，y轴向下为正的规则，当前配置未处理y轴翻转，导致瓦片坐标计算混乱，平移时Leaflet无法正确识别已加载瓦片的位置。

修改CRS的Transformation：

transformation: new L.Transformation(1, 0, -1, 0), // 反转y轴方向

2. 自定义scale/zoom函数逻辑偏差 #

当前scale函数的计算逻辑导致缩放级别与瓦片分辨率不匹配，Leaflet无法正确预加载和平移时保留瓦片。调整函数逻辑，使其与CRS.Simple的基础逻辑对齐：

scale: function(zoom: number) {
  return Math.pow(2, zoom) * SaMapComponent.mapMaxResolution;
},
zoom: function(scale: number) {
  return Math.log(scale / SaMapComponent.mapMaxResolution) / Math.LN2;
},

3. 地图边界设置无效 #

mapExtent四个值完全相同，导致fitBounds无法初始化正确的地图范围，Leaflet无法确定瓦片的有效加载区域。根据地图实际范围修正mapExtent（示例为2045x2045尺寸的地图）：

private static mapExtent = [-1022.5, 1022.5, 1022.5, -1022.5]; // [minX, maxY, maxX, minY]

同时修正fitBounds调用，确保坐标转换正确：

this.map!.fitBounds([
  [SaMapComponent.mapExtent[3], SaMapComponent.mapExtent[0]], // [minY, minX]
  [SaMapComponent.mapExtent[1], SaMapComponent.mapExtent[2]]  // [maxY, maxX]
]);

4. 为瓦片图层添加范围限制 #

给tileLayer添加bounds配置，明确瓦片的有效地理范围，避免Leaflet尝试加载不存在的瓦片，同时确保平移时仅在范围内加载瓦片：

this.layer = L.tileLayer(`${environment.staticUrl}/images/tiles/sat.{z}.{x}.{y}.png`, {
  minZoom: SaMapComponent.mapZoom.min,
  maxZoom: SaMapComponent.mapZoom.max,
  noWrap: true,
  tms: false,
  bounds: [
    [SaMapComponent.mapExtent[3], SaMapComponent.mapExtent[0]],
    [SaMapComponent.mapExtent[1], SaMapComponent.mapExtent[2]]
  ]
}).addTo(this.map);

验证修改效果 #

完成上述修改后，重新初始化地图，平移操作时瓦片会保持可见，不会出现闪烁消失的问题。同时需确保瓦片命名规则（sat.{z}.{x}.{y}.png）与CRS计算出的x/y坐标完全匹配，避免瓦片路径错误导致的加载失败。

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