Tengo un mapa en el que quiero superponer los datos de precipitación de MetOffice, pero repite la misma superposición infinitamente:

Aquí está el código que estoy usando:

 <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:00Z&FORECAST=3&key={removed}' } }; } }; </script>

Aquí es donde obtengo los datos: https://www.metoffice.gov.uk/services/data/datapoint/inspire-layers-detailed-documentation ¿Podría tener algo que ver con el sistema de proyección?