高德智慧交通地图空间可视化SDK设计与实现

一、背景

地图空间可视化作为高德智慧交通前端业务中最重要的功能之一，承担着城市交通大脑、全境智能大屏等业务中大量的地图渲染需求。作为向用户展示交通数据的窗口，我们需要展现省、市、区、商圈、自定义区域多种场景，包括所有交通事件、拥堵指数、辖区等多种维度的数据，呈现着数据量大、元素种类多、逻辑展现重等特点。

JSAPI作为高德地图前端战线的引擎，涵盖着渲染地图、展示覆盖物等底层能力，但对于行业应用领域的开发来说，存在着开发难度大、适配成本高、纯原生JS实现与主流框架结合不紧密，无行业图层能力的问题。

基于以上原因，我们设计了具有适用于垂直行业的、可复用、可扩展、二次开发简单等特点的地图SDK，已经成为智慧交通地图空间可视化能力的首选方案。

二、方案设计

整体框架设计方案

高德智慧交通团队经过大量项目实践和思考，以交通行业为切入点，面向整个前端行业地图设计了一套地图空间可视化开发的SDK，整体功能架构设计如下图所示：

(1) MapContainer是整个SDK的基座，用于承载地图引擎，装载在其上渲染的覆盖物图层，加载所需要的框架模块，在整个架构中起到中流砥柱的作用。

(2) 配置控制器负责传入用户配置，包括地图应用key配置、加载可选功能配置、样式配置等，在用户变更这些配置后，它会把更新后的配置信息传递到流程中的其他模块中。

(3) 接受数据的工作由SourceLoader完成，设计了一套SDK内部使用的标准化的数据格式，Loader负责将用户传入的不同类型的数据(已经支持GeoJSON、WKT、数据列表等形式)转化成专用标准格式数据，分发到地图容器及各图层中。

(4) 为了支持不同的主流应用框架，将框架适配层单独拆分，由它将主要模块封装成Vue、React等框架兼容的组件形式，实现多框架扩展。

(5) 地图API调用有着严格的顺序限制，而封装框架对于图层各个生命周期的触发是异步的，乱序的，存在无法保证流程一致性的问题，为了应对这种情况我们在SDK中引入了事件队列机制。

状态驱动方案的实现

1.生命周期设计

地图JS API的调用逻辑与原生Javascript一样，是命令式调用设计，像下面这样：

// 创建地图
const map = new AMap.Map(options);


// 添加覆盖物
const marker = new AMap.Marker(markerOptions);
map.add(marker);


// 修改覆盖物属性
marker.setContext(newContext);


// 移除覆盖物
map.remove(marker);
map.destroy();

这样的API调用方式，与上层项目的开发框架，如Vue、React等不匹配，如果在一个状态驱动的框架下充斥着大量命令式驱动的代码，会大幅度降低这个项目的可维护性、可扩展性。

为了更好地支撑开发的需要，所有业务图层抽象出了一套完整的生命周期流程。不同的图层，渲染逻辑的步骤不完全相同，各图层的额外能力，如支持交互事件的能力、动画能力也