Vue单张地图图块顺序错误 [英] Vue Leaflet map tiles in wrong order

问题描述

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

I just trying Vue Leaflet and trying to use this example. But when I try it in my local server, the map has wrong order.

这是我的代码

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

我不知道发生了什么事.有任何想法吗?谢谢.

I can't figure out what happened. Any ideas? Thank you.

推荐答案

通过导入CSS文件解决.

Solved by import the CSS files.

这篇关于Vue单张地图图块顺序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！