[发明专利]基于地图覆盖物渐变的解决方法

说明书

本发明公开了一种基于地图覆盖物渐变展示的绘制方法。本发明采用覆盖物动态加载渲染技术，给出了一种基于原有覆盖物渲染技术，实现颜色渐变的覆盖物渲染绘制方法。其主要特征在于，通过构建通用颜色渐变预定方式（如：svg渐变、canvas渐变、image渐变、以及自定义渐变等），与原有覆盖物渲染颜色进行渲染、合成、覆盖，实现颜色渐变的覆盖物渲染绘制。

技术领域

本发明涉及数据可视化展示领域，尤其涉及一种基于地图覆盖物渐变展示的绘制方法。

背景技术

因现有地图覆盖物都无法支持覆盖物颜色渐变功能，故本发明提供一种覆盖物区域颜色渐变渲染的方法,利于可视化效果展示。

发明内容

为了解决上述技术问题，本发明通过下述技术方案得以解决：

本发明提供一种覆盖物区域颜色渐变渲染的方法,包括以下步骤：

步骤1：初始化地图以及其所需覆盖物。

步骤2：根据生成覆盖物的标签类型(svg、canvas、image等)判断地图覆盖物的呈现方式。

步骤3：构建通用颜色渐变预定绘制方式(如：svg渐变、canvas渐变、image渐变以及自定义渐变等)。

步骤4：根据生成覆盖物的呈现方式和颜色渐变的预定方式进行匹配，然后进行渲染、合成覆盖物。

其中，svg渐变方式绘制方案为：生成线性或放射渐变svg的DOM；

canvas渐变方式绘制方案为：根据createLinearGradient函数对需要渐变的DOM对象进行线性或径向渐变；

image渐变方式绘制方案为：根据css样式对需要渐变的image对象进行线性或径向渐变；

自定义渐变方式绘制方案为：根据待渐变覆盖物区域创建视图单位，对视图单位进行图像识别过滤进行二次确认待渐变覆盖物区域，对处理好的视图单位进行渐变，还原渐变完成的覆盖物区域。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1 为本发明实施例公开的地图覆盖物渲染颜色渐变展示的方法的步骤流程图。

图2 为待渐变的覆盖物区域效果图。

图3 为已完成渐变的覆盖物区域效果图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例的附图，对本发明实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于所描述的本发明的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

步骤1：初始化地图，如百度地图以及其所需覆盖物，其渲染结果如图2所示。

步骤2：通过标签类型查找方式找出百度地图呈现覆盖物方式为svg方式呈现。

步骤3：构建通用颜色渐变预定绘制方案。

步骤4：根据svg呈现方式，在通用颜色渐变预定绘制方案中进行匹配，匹配结果为svg渐变。其中，svg渐变绘制方式为：创建如线性渐变的DOM，赋予DOM属性x1、x2、y1、y2渐变方向和id标识，在渐变DOM中添加开始抵消颜色，以及结束抵消颜色用于颜色渐变渲染。