开源地图组件leafletwx功能更新:缓解canvas元素(如polygon)拖动、变更时频繁闪动的问题

leafletwx是基于leaflet,使用微信原生组件开发的一套开源地图组件,可以替代小程序的原生map组件,项目开源地址: leatletwx

频繁闪动原因:

canvas大小与地图大小相等,地图拖动时,canvas会随地图移动,地图拖动结束后,canvas返回屏幕中心,并刷新当前屏幕内的cavas元素。

目前感觉是使用setData接口重置canvas位置后,虽然刷新内容实在setData的渲染结束回调函数中,但是展示效果还是绘图在canvas移动之前,可能是setData的渲染回调并不包含CSS动画时间。可能是此原因造成了移动地图canvas元素会有跳动的表现。为解决跳动问题,在setData的渲染回调内增加了一个延迟,即延迟绘图,造成了闪烁问题。

总的来说就是把位置跳动的问题改为了闪动问题。

当前缓解方法:

1.向各方向扩大canvas大小为n(可在zhgeo/config.js内设置)个地图大小(即屏幕大小),当前屏幕位于canvas的中心。

2.拖动地图,如果拖动后canvas仍然覆盖整个屏幕,则不会重置canvas位置,就没有跳动的问题

3.如果地图拖动后,canvas未完全覆盖当前屏幕,则重置canvas位置,以当前位置为中心,移动n个屏幕大小,不会出现闪动问题

注意事项:

1.目前默认的n值为1.05,及上下左右移动一个屏幕大小会发生一次闪动。

2.如果提高n的大小,会提高内存占用。经测试当n设置为1.5时,iPhone 6(运行内存1G)就无法正常绘制了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卓伙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值