Javascript 如何使用传单插件（不带vue2包装器）将Vue传单中的地图显示限制为特定边界

我正在开发一个简单的Vue应用程序，作为我国所有corona病毒的存储库。我想显示一个地图使用，但我只想我的国家出现这样，这正是我想要的，但它使用香草使用这是一个传单插件建设

我想基本上复制这个，但是使用

简而言之，这是我的

：

• 添加了

  传单边界画布

  包装
• 在

  map.vue

  中导入了

  “传单”和
  “传单-边界-画布”
  ，并且

…因为

传单边界画布

传单插件没有

vue2-

包装器，我直接在

map.vue的
mounted（）
中的
mapObject
上使用了该插件：

导入“传单”；
输入“传单边界画布”`
....
安装的（）{
这个.$nextTick（（）=>{
const map=this.$refs.map.mapObject；
window.L.tillelayer.boundaryCanvas(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
{边界：this.bwGeoJson.features[0]}
).addTo（地图）；
})
}
...

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

这是，这是，这是，这是一个结果截图：

简而言之：


添加了
传单边界画布
包装
在
map.vue
中导入了
“传单”和
“传单-边界-画布”
，并且


…因为
传单边界画布
传单插件没有
vue2-
包装器，我直接在
map.vue的
mounted（）
中的
mapObject
上使用了该插件：

导入“传单”；
输入“传单边界画布”`
....
安装的（）{
这个.$nextTick（（）=>{
const map=this.$refs.map.mapObject；
window.L.tillelayer.boundaryCanvas(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
{边界：this.bwGeoJson.features[0]}
).addTo（地图）；
})
}
...

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

这是，这是，这是，这是一个结果截图：

@Abel，我又推了一个commit，其中添加了regions的geoJson和一些choropleth的基本示例。您可能需要将真实数据映射到它。@Abel，我又推了一次提交，其中添加了geoJson for regions和一些choropleth的基本示例。您可能需要将真实数据映射到它。