我看了你遇到的问题——自定义瓦片地图只加载有限数量的瓦片，平移后加载的瓦片还显示错乱，结合你的代码和描述，我帮你梳理几个核心问题和对应的解决办法：

一、最关键的问题：未配置匹配自定义瓦片的坐标系（CRS） #

你的瓦片是自定义平面地图（不是标准墨卡托经纬度瓦片），但Leaflet默认用的是EPSG:3857墨卡托坐标系，这会导致Leaflet错误计算瓦片的加载范围和位置，直接引发“只加载少量瓦片”“显示错乱”的问题。

解决办法：改用CRS.Simple（平面坐标系），并配置地图的边界范围，让Leaflet知道你的地图整体尺寸：

修改后的组件代码（Composition API 版本）： #

<template>
  <div class="mapContainer">
    <l-map 
      ref="map" 
      :zoom="zoom" 
      :center="center" 
      :max-zoom="3" 
      :min-zoom="0" 
      :useGlobalLeaflet="false"
      :crs="crsSimple"
      :max-bounds="maxBounds"
      :max-bounds-viscocity="1.0"
    >
      <l-tile-layer 
        :url="getWsUrl()" 
        layer-type="base" 
        name="WorldMap" 
        :no-wrap="true"
        :tms="false" <!-- 瓦片y轴从顶部开始设为false，从底部开始设为true，根据你的瓦片格式调整 -->
        :zoom-offset="0" <!-- 先匹配瓦片层级，后续按需调整 -->
        :tile-size="256" <!-- 你的瓦片实际尺寸，默认256，根据实际修改 -->
      ></l-tile-layer>
    </l-map>
  </div>
</template>

<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { onMounted, ref, nextTick } from 'vue'
import { type PointTuple, CRS, LatLngBounds } from 'leaflet'

// 引入Leaflet的平面坐标系
const crsSimple = CRS.Simple

// 假设最高层级（zoom=3）下，地图总尺寸为2048x2048像素（8*256），根据你的实际地图尺寸调整
const maxBounds = ref(new LatLngBounds([0, 0], [2048, 2048]))

const getWsUrl = (): string => {
  return '/maps/iluambar/{z}/{x}/{y}.png'
}

onMounted(() => {
  nextTick(() => {
    if (map.value?.leafletObject) {
      // 强制刷新地图尺寸，解决挂载时的计算延迟问题
      map.value.leafletObject.invalidateSize()
      // 将地图居中到平面地图的中点
      map.value.leafletObject.setView([1024, 1024], 3)
    }
  })
})

const zoom = ref(3)
// CRS.Simple下，center为平面像素坐标，设为地图中点更合理
const center = ref<PointTuple>([1024, 1024])
const map = ref<typeof LMap>()
</script>

<style>
.mapContainer {
  width: 100%;
  height: 600px;
}
.leaflet-div-icon {
  background: steelblue;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 80%;
  font-weight: bold;
  font-size: large;
  text-align: center;
  line-height: 21px;
}
</style>

二、瓦片层级与Zoom的匹配问题 #

你之前设置了zoomOffset=1，这个选项会让Leaflet请求的瓦片z层级 = 地图zoom值 + 1。如果你的瓦片最高层级是z=3，那当地图zoom=3时，实际请求的是z=4的瓦片（而你没有这个层级的瓦片），这会导致加载异常。

解决步骤：

1. 先把zoomOffset改成0，测试Leaflet的zoom值和瓦片的z层级是否完全对应；
2. 如果你的瓦片z层级是从1开始（比如z1对应地图最小缩放），再把zoomOffset改回1，同时调整地图的minZoom和maxZoom，确保请求的z层级在你的瓦片文件范围内。

三、瓦片Y轴方向的适配 #

如果你的瓦片是TMS格式（y轴从底部开始计数），而Leaflet默认y轴从顶部开始，这会导致瓦片上下颠倒、显示错乱，此时需要给<l-tile-layer>加上:tms="true"属性。

四、关于获取Leaflet原生地图实例的问题 #

你之前疑惑怎么拿到地图的原生实例，在Vue-Leaflet中，组件的leafletObject属性就是原生的Leaflet Map对象，比如：

if (map.value) {
  const nativeMap = map.value.leafletObject
  nativeMap.invalidateSize() // 调用原生Leaflet的方法
}

最后测试建议 #

1. 先确认你最高层级（z=3）下的瓦片x、y范围：比如x从0到7，y从0到7（对应8x8个瓦片，2048x2048像素）；
2. 打开浏览器Network面板，查看请求的瓦片URL是否正确（z、x、y是否在你的瓦片文件范围内）；
3. 如果还有显示错乱，检查瓦片的y轴方向，调整tms选项的值。

按照这些步骤调整后，应该就能解决“只加载少量瓦片”和“显示错乱”的问题了，如果还有细节问题，你可以补充瓦片的具体尺寸和层级范围，我再帮你调整！