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

权利要求书

1.一种基于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树之间的上下文数据共享；

所述基于Context Provider中存储的全部地图标注通过React自定义组件渲染地图真实DOM树中的地图标注的方法包括：

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

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

所述根据所述地图标注的类型加载对应的所述React自定义组件的方法包括：

预先将多种类型的地图标注以React自定义组件的方式进行封装；

根据所述地图标注的类型找到对应的React自定义组件然后进行加载；

所述将所述React自定义组件挂载到所述地图真实DOM树的所述地图标注子节点的方法为：通过ReactDOM.createPortal进行挂载；

所述通过React自定义组件实现React主应用虚拟DOM树和地图真实DOM树之间的上下文数据共享的方法为：

所述React自定义组件通过React.useContext访问所述React主应用虚拟DOM树，然后获取所述地图标注。

2.根据权利要求1所述的一种基于React实现自定义地图标注的方法，其特征在于，所述获取地图的全部地图标注的方法为：发送Ajax请求从服务端获取。

3.根据权利要求1所述的一种基于React实现自定义地图标注的方法，其特征在于，所述React自定义组件通过React.useContext访问所述React主应用虚拟DOM树的方法为：根据所述Context Provider中存储的地图标注生成所述React主应用虚拟DOM树的多个虚拟标注子节点供所述React自定义组件访问，每个虚拟标注子节点对应一个ContextProvider中存储的所述地图标注。