[发明专利]一种基于React实现自定义地图标注的方法

说明书

本发明公开了一种基于React实现自定义地图标注的方法，涉及地图标注技术领域，解决现有技术无法通过React渲染地图标注且地图标注无法共享应用的上下文数据的问题，包括：通过ReactDOM.render创建React主应用虚拟DOM树；获取和存储地图的全部地图标注；创建地图真实DOM树，将所述地图真实DOM树的根节点挂载到React主应用的一个地图虚拟DOM子节点上；遍历所述地图标注，创建所述地图真实DOM树的所述地图标注子节点；渲染所述地图标注，实现所述地图真实DOM树共享所述React主应用虚拟DOM树的上下文数据共享；本发明具有地图标注可以共享上下文信息的优点。

技术领域

本发明涉及地图标注技术领域，更具体的是涉及一种基于React实现自定义地图标注的方法技术领域。

背景技术

随着互联网用户消费内容和交互方式的升级，Web 地图技术的使用日趋广泛，地图展示的个性化要求也日益提升。目前各种地图 API，例如 Mapbox、百度地图、高德地图、Arcgis 等，都支持在地图上绘制标注，且这些标注都支持自定义图案形状、文字的组合，其方案大都是通过指定图片URL或者HTML代码片段实现的。现有的方案在可维护性、数据清晰性、开发和调试效率高方面均有待提升，引入组件化方式可以提升这些方面的性能。另一方面，地图标注无法共享应用的上下文数据。

目前的Web开发的主流是采用组件化的开发模式主要是基于以React、Vue为代表的框架来开发，引入组件化方式，其基本思想是通过搭建虚拟DOM，但地图API原生并不支持直接通过组件化的方式渲染地图标注。

综上所述，基于现有的技术方案不能通过React组件化方式渲染地图标注且地图标注无法共享应用的上下文数据。因此，本发明希望研究一种方法可以引入组件化的方式渲染地图标注且实现地图标注的上下文共享。

发明内容

本发明的目的在于：解决现有技术无法通过React渲染地图标注且地图标注无法共享应用的上下文数据的问题。为了解决上述技术问题，本发明提供一种基于React实现自定义地图标注的方法。

本发明为了实现上述目的具体采用以下技术方案：

一种基于React实现自定义地图标注的方法，包括以下步骤：

通过ReactDOM.render创建React主应用虚拟DOM树，所述React主应用虚拟DOM树包括虚拟DOM根节点和其附属的多个子节点，子节点中包括至少一个地图虚拟DOM子节点；

获取地图的全部地图标注，将全部地图标注存储到React主应用虚拟DOM树的虚拟DOM根节点的Context Provider中；

通过地图API创建地图真实DOM树，将所述地图真实DOM树的根节点挂载到React主应用的一个地图虚拟DOM子节点上，所述地图真实DOM树的根节点为地图主体；

地图真实DOM树的子节点包括多个地图标注子节点、图例子节点、比例尺子节点和指北针子节点，所述地图标注子节点通过遍历所述地图标注而创建，每个地图标注构成一个地图标注子节点；

基于Context Provider中存储的全部地图标注通过React自定义组件渲染地图真实DOM树中的地图标注， 通过React自定义组件实现React主应用虚拟DOM树和地图真实DOM树之间的上下文数据共享。

优选地，所述获取地图的全部地图标注的方法为：发送Ajax请求从服务端获取。

优选地，所述渲染地图真实DOM树中的地图标注的方法包括：

根据所述地图标注的类型加载对应的所述React自定义组件；

将所述React自定义组件挂载到所述地图真实DOM树的所述地图标注子节点。