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

问题描述

我正在使用 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 值更改为不同的网址，它会请求以下磁贴网址： 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 对象添加新的图块层，但仍然得到相同的结果。有人知道为什么它没有请求正确的磁贴网址吗？

解决方法

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

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

leaflet nuxt.js vue2leaflet