Nuxt Leaflet，更改图块层请求不正确的图块

Question

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

这是一个例子：

<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 对象来添加新的图块层，但仍然得到相同的结果。任何人都知道为什么它不请求正确的磁贴 urls?

Answer 1

看起来您的初始 mapTileUrl 指向具有特定大小和映射的图块，这需要调整 Leaflet Tile Layer 选项 tileSize 和 zoomOffset，如下所述：

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

Nuxt Leaflet，更改图块层请求不正确的图块

Nuxt Leaflet, change tile layer requests incorrect tiles

leaflet

nuxt.js

vue2leaflet