什么是@vuemap/vue-amap
@vuemap/vue-amap是一个基于vue2和vue3对高德的JSAPI2.0和loca2.0进行封装的组件库,通用对常用功能的组件封装,能够在vue中简单快捷的使用各种地图功能。vue2和vue3版本之间差异性极少,基本可以平滑的从vue2升级到vue3。
为什么要做@vuemap/vue-amap
在整个vue体系中其实已经有几个较出名和下载量较大的组件库,但是在给公司项目做技术选型时我还是选择了自己做一套组件库,下面详细分析下原因。
组件库 | JSAPI版本 | vue版本 | 组件丰富程度 | 可扩展性 | 更新频率 | 备注 |
---|---|---|---|---|---|---|
vue-amap | 1.4.x | vue2 | 仅支持JSAPI | 不支持扩展 | 最后一次更新2019年 | 组件库已直接不维护,文档示例也失效 |
@amap/amap-vue | 1.4.x和2.0 | vue2 | 仅支持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优化等等。
未来设想
对于高德的特性支持将是一个长久的计划,组件库与高德的特性会同步更新,除此之外后续的升级都将围绕数字孪生进行扩展,核心扩展threejs相关的能力,比如配合ThreeJS面图层实现城市建筑扫描,立体墙、可自定义的模型动画等等。