Vue.js Vue2传单LMap/LTileLayer未正确渲染

我只是想给我当前的Vue2学习项目添加一个地图。 看过谷歌地图后，我决定OSM和传单是最好的选择。 但我遇到了一个早期的障碍，地图目前只是渲染为蓝色正方形

这就是我的地图现在的样子

下面是Vue组件。

url

和

url2

都显示了相同的内容，我不确定这是访问令牌的问题还是OSM使用了错误的url

<template>
  <v-container>
    <h1>Hello</h1>
    <l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
      <l-tile-layer :url="url" :attribution="attribution"/>
    </l-map>
  </v-container>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet';

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      url2: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      // eslint-disable-line
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      center: [33.8688, 151.2093],
      zoom: 12,
    };
  },
  components: {
    LMap,
    LTileLayer,
  },
};
</script>

你好
从“vue2传单”导入{LMap，LTileLayer}；
导出默认值{
数据（）{
返回{
url:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
url2:'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，
//eslint禁用线
属性：“映射数据&复制；贡献者，”，
中间：[33.8688151.2093]，
缩放：12，
};
},
组成部分：{
LMap，
第三层，
},
};

鉴于您指定的坐标（[33.8688151.2093]）指向远离日本的太平洋，我认为这是预期的行为：

由于您指定了较高的初始缩放（12），所以四处平移仍然可以得到蓝色海洋瓷砖