什么是@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面图层实现城市建筑扫描，立体墙、可自定义的模型动画等等。
