Leaflet

您所在的位置:网站首页 leaflt Leaflet

Leaflet

#Leaflet| 来源: 网络整理| 查看: 265

 size变化,地图重新加载

setTimeout(()=>{ map.invalidateSize(true) }, 400)

在一个vue + leaflet的项目中,左侧目录可以进行伸缩,右侧地图自适应大小;

1. 布局

点红色按钮,弹入、弹出左侧目录列表。

整体是flex,设置左侧为一定的宽度,右侧设置flex-grow:1自适应剩余空间

伸缩通过,修改左侧宽度:width:0px 实现;

2. 问题

当地图的容器宽度变化后,地图的图层并未及时加载,拖动地图后仍然有一部分是空白的;

3. 解决

在红色按钮点击时(即:宽度变化后),调用:

setTimeout(()=>{ map.invalidateSize(true) }, 400)

我这里使用一个状态变量,去控制左侧列表的class;所以在Vue的watch当中,判断该状态变化时就去调用上面的代码;

使用this.$nextTick() 可能会不起作用

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3