@vuemap/vue-amap的来源

508 阅读3分钟

什么是@vuemap/vue-amap

    @vuemap/vue-amap是一个基于vue2和vue3对高德的JSAPI2.0和loca2.0进行封装的组件库,通用对常用功能的组件封装,能够在vue中简单快捷的使用各种地图功能。vue2和vue3版本之间差异性极少,基本可以平滑的从vue2升级到vue3。

为什么要做@vuemap/vue-amap

    在整个vue体系中其实已经有几个较出名和下载量较大的组件库,但是在给公司项目做技术选型时我还是选择了自己做一套组件库,下面详细分析下原因。

组件库JSAPI版本vue版本组件丰富程度可扩展性更新频率备注
vue-amap1.4.xvue2仅支持JSAPI不支持扩展最后一次更新2019年组件库已直接不维护,文档示例也失效
@amap/amap-vue1.4.x和2.0vue2仅支持JSAPI可以使用mixin自定义组件最后一次更新2021年高德内部开发人员发布,不开源

    从上面的表格对比可以直接看出不管是名声在外的饿了么开源的vue-amap还是高德内部人员发布的@amap/amap-vue都不再继续更新,不支持vue3,不支持Loca,不支持基础的GLTF模型加载和操作,因此在项目中实现数字孪生的话就需要大量的原生代码实现,即使是基于@amap/amap-vue,也会因为未开源导致实现自定义组件时需要花费很大功夫去实现,因此这时候必须去做一个属于自己的组件库。

初期实现

    @vuemap/vue-amap的初始代码来源于vue-amap,为了保证从vue-amap切换到@vuemap/vue-amap时可以较平滑升级,保留了所有组件的名称,所有新的组件也全部以el-amap开头,但去除了vue-amap中使用不合理的部分,如事件使用events属性,调整为使用v-on。在基础组件基础上扩展了Loca相关可视化组件和ThreeJS相关的GLTF组件,用于大屏可视化时的效果展示。

中期优化

    在项目发布一段时间稳定运行后迎来了新的需求,需要讲组件进行封装使用,比如地图上叠加高精地图,我们需要将Loca的线和面图层封装到一个组件中,在不同的地图组件里使用,因此我对项目整体架构进行了调整使用了vue的provide和inject特性,将上一级的vue示例注入到子组件中,这样可以实现组件的包装和对象的穿透。 上级组件:

provide() {
    return {
      parentInstance: this
    };
  }

子组件:

inject: {
    parentInstance: {
      default: null
    }
  }

Vue3的升级

    Vue3的正式发布让Vue变得不太一样,也驱动着组件的升级和重心迁移,在Vue3版本中加上了IDE提示、Typescript支持、组件v-model支持、threejs扩展等等一系列变化,也由于Vue3变成了vue的默认版本,后期@vuemap/vue-amap的Vue2版本只做BUG修复和高德新特性的支持,所有新的可视化相关组件能力都会在Vue3中增加,比如视频图层、Threejs面图层、Gltf优化等等。

1_threejs面图层.png

1_模型加载.gif

未来设想

    对于高德的特性支持将是一个长久的计划,组件库与高德的特性会同步更新,除此之外后续的升级都将围绕数字孪生进行扩展,核心扩展threejs相关的能力,比如配合ThreeJS面图层实现城市建筑扫描,立体墙、可自定义的模型动画等等。

项目地址
文档地址