3

我正在使用 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

我也尝试使用Lobject 添加新的 tile 层，但仍然得到相同的结果。任何人都知道为什么它没有请求正确的磁贴网址？

4

1 回答 1

1

它看起来像您mapTileUrl对具有特定大小和映射的瓷砖的初始点，这需要调整 Leaflet Tile Layer 选项tileSize，zoomOffset如下所述：Mapbox Tile Layer 中的街道标签太小

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

于 2021-02-18T02:25:24.900 回答