Vue单张地图图块顺序错误

Question

我只是尝试使用Vue Leaflet并尝试使用此example。但是当我在本地服务器上尝试时，地图顺序错误。

这是我的代码

<template>
  <div class="home">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-polygon v-for="s in shapes"
                   :key="s.id"
                   :color="s.color"
                   :lat-lngs="s.geometry.coordinates"
                   @l-mouseover=change_color(s)
                   >
        </l-polygon>
    </l-map>
  </div>
</template>

<script>
import { LMap, LPolygon, LTileLayer } from 'vue2-leaflet'
export default {
  components: { LMap, LPolygon, LTileLayer },
  name: 'home',
  data () {
    return {
      zoom: 7,
      center: [47.413220, -1.219482],
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      shapes: [
        {
          id: 'my_id',
          color: '#3388ff',
          geometry: {
            coordinates: [
              [[[47, -1], [47, 0], [48, 0], [48, -1], [47, -1]]]
            ]
          }
        }
      ]
    }
  },
  methods: {
    change_color (shape) {
      shape.color = '#ee0000'
    }
  }
}
</script>

我不知道发生了什么。有任何想法吗？谢谢。

Answer 1

通过导入CSS文件解决。