Nuxt Leaflet，更改瓷砖层请求不正确的瓷砖

Question

我正在使用 Nuxt Leaflet，但我还没有弄清楚如何更改平铺层。我尝试了多种不同的方法，但结果都是没有为更改的图层请求正确的图块。

这是一个例子：

<l-map
  id="maps-lmap"
  ref="lmap"
  style="width:100%; height:100%"
  :zoom="mapZoom"
  :center="mapCenter"
  :options="mapOptions"
  :min-zoom="minZoom"
  :max-zoom="maxZoom"
  @update:center="mapCenterUpdate"
  @update:zoom="mapZoomUpdate"
  @update:bounds="mapBoundsUpdate"
>
  <l-tile-layer
    :url="mapTileUrl"
    :attribution="mapAttribution"
    :tile-size="512"
    :options="{'zoomOffset':-1}"
  />
</l-map>

如果我将 mapTileUrl 值更改为不同的 url，它会请求以下磁贴 url： https://wc-maps.s3.amazonaws.com/map-tiles-no-ocean/-1/0/0.png

如果我像这样做一个条件切片图层，我会得到相同的结果：

<template v-if="mapType === typeA">
  <l-tile-layer
    :url="tileUrlA"
    ...
  >
  </l-tile-layer>
</template>
<template v-else>
  <l-tile-layer
    :url="tileUrlB"
    ...
  >
  </l-tile-layer>
</template

我也尝试过使用L 对象添加新的平铺层，但仍然得到相同的结果。任何人都知道为什么它没有请求正确的磁贴 url？

Answer 1

您最初的 mapTileUrl 似乎指向具有特定大小和映射的图块，这需要调整 Leaflet Tile Layer 选项 tileSize 和 zoomOffset，如下所述：Street labels in Mapbox Tile Layer too small

但是，您尝试过的新 URL 似乎不需要此特定调整：只需在使用这些 URL 时删除这些选项，或使用它们的默认值（分别为 256 像素和 0 偏移）。否则他们最终会请求不正确的图块，可能不存在。