显示一个国家

Question

我正在开发一个简单的Vue应用程序，以充当我国冠状病毒的所有存储库。我想显示一个使用Vue2-leaflet的地图，但我只希望出现这样的国家，例如example，这正是我想要的，但是它是使用香草leaflet并使用leaflet-boundary-canvas（这是一个传单插件）构建的。

我想基本上复制此example，但使用vue2-leaflet构建

这是我的repo

Answer 1

以下是为实现您期望的目标我必须进行哪些更改的简短列表：

• 我删除了巴拉圭的地名，并用博茨瓦纳的地名取代了它。从NaturalEarthData.com抓起它，请阅读他们的terms of use并尊重他们。
• 清理了与另一个项目的功能相关的图层，图例和控件，因为它们与您的功能无关，并且看起来不像您在使用它们]
• 清理CSS，调整地图大小并居中
• 添加leaflet-boundary-canvas包

[因为vue2-小叶插件没有leaflet-boundary-canvas包装器，所以我在mapObject中使用了跟随符将其直接添加到map.vue中：

import 'leaflet';
import 'leaflet-boundary-canvas';`
....

  mounted() {
    this.$nextTick(() => {
      const map = this.$refs.map.mapObject;
      window.L.TileLayer.boundaryCanvas(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { boundary: this.bwGeoJson.features[0] }
      ).addTo(map);
    })
  }
...

...，其中this.$refs.map是<l-map>，this.bwGeoJson.features[0]是边界的GeoJSON.Polygon。

这里是PR on your repo，这是list of changes，这是结果的屏幕截图：