V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mt1992
V2EX  ›  Vue.js

一个高性能的 Vue 高德地图组件库

  •  
  •   mt1992 · 2019-08-11 15:44:47 +08:00 · 6816 次点击
    这是一个创建于 1713 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://txs1992.github.io/fast-amap/

    这个想法来源于之前开发的一个项目,该项目需要在 zoom 16 的级别下渲染 (100 * 100) 的小方格,使用高德地图的多边形覆盖物 Polygon 进行渲染,在 mac 13 寸屏幕下渲染 1k+,在外接 27 寸(不太记得多少寸了)显示屏下需要渲染近 3K 的覆盖物。

    我尝试使用 vue-amap 这个组件库,在 1k 覆盖物的情况下需要渲染 5 秒左右,在 3k 覆盖物的渲染下会渲染 30+ 秒,甚至会让浏览器直接崩溃。我选择自己通过 AMap SDK 封装了一个组件,然而性能比 vue-amap 还要差,1k 覆盖物需要耗费 10+ 秒,如果我拿这个交给产品,他估计会打死我。

    为什么会出现这种情况,事实上,我们在使用 Vue 开发的时候通过 props 将数据传递给组件或是 data,而 Vue 默认会对这些数据进行 deepWatch,而我放在 data 上的 Polygon 实例每次都会被 Vue 绑定,这就是造成性能降低的原因。最后我自己封装了一个 Polygon 的渲染类,1k+ 覆盖物渲染在 1 秒左右,虽然解决了性能问题,但使用却很不方便,因为在业务中有太多关于渲染处理的代码,无法做到只关心数据问题,需要编写很多配置属性。Fast AMap 就是为了这个问题而诞生的库。

    第 1 条附言  ·  2019-08-12 21:21:52 +08:00
    14 条回复    2019-08-14 17:21:13 +08:00
    vvmap
        1
    vvmap  
       2019-08-12 09:08:05 +08:00
    我们也在业务中遇到同样的问题,解决方案跟题主相同。地图上使用的复杂对象如果被 vue 劫持监听,分分钟浏览器就崩了。
    deleteDB
        2
    deleteDB  
       2019-08-12 09:20:52 +08:00
    有点意思 关注一下
    deleteDB
        3
    deleteDB  
       2019-08-12 09:25:36 +08:00
    建议在文档里 加一下 项目 git 的跳转链接...
    rain0002009
        4
    rain0002009  
       2019-08-12 10:23:48 +08:00
    用 Object.freeze 冻结一下不就行了,vue 文档里都写了
    magicdawn
        5
    magicdawn  
       2019-08-12 10:41:48 +08:00
    eluotao
        6
    eluotao  
       2019-08-12 11:53:04 +08:00
    你好 能问下你的文档 是用什么插件吗? 很喜欢. 求告知
    gaigechunfeng
        7
    gaigechunfeng  
       2019-08-12 11:55:27 +08:00
    楼主你主题里面描述的问题,速度和配置都解决了吗?
    我要 mark 一下。
    mt1992
        8
    mt1992  
    OP
       2019-08-12 21:14:06 +08:00
    @eluotao 用的是 vuePress 生成的文档
    mt1992
        9
    mt1992  
    OP
       2019-08-12 21:14:49 +08:00
    @gaigechunfeng 解决了一些,你可以看看,在 1000 个覆盖物量级能做到 1 秒渲染。
    mt1992
        10
    mt1992  
    OP
       2019-08-12 21:16:02 +08:00
    @deleteDB 好的,感谢你的提议,我会在周末加上。
    mt1992
        11
    mt1992  
    OP
       2019-08-12 21:17:31 +08:00
    @eluotao 具体使用你可以看看这篇文章 https://zhuanlan.zhihu.com/p/36116211
    mt1992
        12
    mt1992  
    OP
       2019-08-12 21:21:12 +08:00
    eluotao
        13
    eluotao  
       2019-08-12 22:05:10 +08:00
    @mt1992 多谢 我后面找到了. 还是感谢你让我知道了.
    eluotao
        14
    eluotao  
       2019-08-14 17:21:13 +08:00
    @mt1992 这个能在 Laravel 项目中安装吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1006 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:57 · PVG 02:57 · LAX 11:57 · JFK 14:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.