Vue2-leaflet LMap/LTileLayer 无法正确呈现

Question

我只是想将地图添加到我当前的 Vue2 学习项目中。查看 google 地图后，我决定 OSM 和 Leaflet 是最好的选择。但是我运行遇到了早期障碍，地图目前只呈现为蓝色方块。

这是我的地图目前的样子。

这是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>

Answer 1

在我看来是预期的行为，因为您指定的坐标 ([33.8688, 151.2093]) 指向远离日本的太平洋：

https://www.openstreetmap.org/#map=4/33.60/151.31

并且由于您指定了较高的初始缩放比例 (12)，因此四处平移仍然会让您看到蓝色的海洋瓷砖。

Vue2-leaflet LMap/LTileLayer 无法正确呈现

Vue2-leaflet LMap/LTileLayer not rendering correctly

vue.js

vuejs2

leaflet

openstreetmap

vue2leaflet