Наложение карты Vue-листовки, повторяющееся бесконечно

#javascript #leaflet #vuejs3

Вопрос:

У меня есть карта, на которую я хочу наложить данные об осадках из MetOffice, но она бесконечно повторяет одно и то же наложение: введите описание изображения здесь

Вот код, который я использую:

 <template>
  <div id="map" style="height: 75vh; width: 50vw;">
    <l-map
        v-model:zoom="zoom"
        :center="[54.5, -4]"
    >
      <l-tile-layer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></l-tile-layer>
      <l-tile-layer :url="rainLayer.url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {
  LMap,
  LTileLayer
} from "@vue-leaflet/vue-leaflet";
import "leaflet/dist/leaflet.css";

export default {
  components: {
    LMap,
    LTileLayer
  },
  data() {
    return {
      zoom: 5.7,
      rainLayer: {
        url: 'http://datapoint.metoffice.gov.uk/public/data/layer/wxfcs/Precipitation_Rate/png?RUN=2021-10-14T09:00:00Zamp;FORECAST=3amp;key={removed}'
      }
    };
  }
};
</script>
 

Вот откуда я получаю данные: https://www.metoffice.gov.uk/services/data/datapoint/inspire-layers-detailed-documentation Может ли это иметь какое-то отношение к проекционной системе?