本发明涉及一种浏览器矢量图形渲染方法及装置,尤其是指一种基于canvas与r树空间的浏览器矢量图形渲染方法及装置。
背景技术:
在传统的网络地理信息系统应用中,如果要在浏览器中展现各种地图要素信息,需要将地图的要素发布为图层切片服务,然后在前端以服务形式进行调用展现。这种做法有两个弊端,一是当地图数据发生变化时,需要重新配置地图服务,如果地图服务是缓存的瓦片服务,那之前缓存的所有瓦片数据需要重新预生成,当服务数量特别大,瓦片级数较多时,需要耗费大量时间;二是客户端中,地图的展现效果是在地图服务配置的时候就已经确定了,用户无法在使用过程中根据自己的喜好来配置展现方式。
随着个人电脑性能不断提高,以及web2.0时代的到来,越来越关注用户的交互体验,网络地理信息系统也不例外。因此,出现了用前端展现方式替代或混合传统地图服务方式的解决方案。地图要素中的基本形状点、线、面都是以div、svg、canvas来进行渲染,用户在使用过程中可以通过改变样式来改变地图的展现方式,但是目前的解决方案在大数据量的情况下,存在性能和交互不能兼顾的问题。
技术实现要素:
本发明所要解决的技术问题是:提供一种基于canvas与r树空间的浏览器矢量图形渲染方法及装置。
为了解决上述技术问题,本发明采用的技术方案为:一种基于canvas与r树空间的浏览器矢量图形渲染方法,包括步骤,
s10、计算画布中每个图元的最小外接矩形;
s20、通过r树空间索引算法对画布中的最小外接矩形建立层级索引关系;
s30、根据层级索引关系查找图元的最小外接矩形;
s40、查找到图元的最小外接矩形后,利用canvas重新设置图元的样式。
优选地,所述步骤s20具体包括,
s21、对画布中每个图元的最小外接矩形进行分组;
s22、计算出一个最小区域,所述最小区域能够包含一个组内的每个图元的最小外接矩形;
s23、对最小区域进行分组,直到计算出一个能够包含所有图元的最小区域;
s24、将每组的最小外接矩形与最小区域建立层级索引关系,形成树状结构。
优选地,所述步骤s30具体包括,
s31、获取鼠标事件的位置坐标;
s32、根据层级索引关系查找包含所述位置坐标的最小外接矩形。
为了解决上述技术问题,本发明采用的另一个技术方案为:一种基于canvas与r树空间的浏览器矢量图形渲染装置,其特征在于:包括,
最小外接矩形计算模块,用于计算画布中每个图元的最小外接矩形;
层级索引建立模块,用于通过r树空间索引算法对画布中的最小外接矩形建立层级索引关系;
最小外接矩形索引模块,用于根据层级索引关系查找图元的最小外接矩形;
图元样式设置模块,用于查找到图元的最小外接矩形后,利用canvas重新设置图元的样式。
优选地,所述层级索引建立模块包括,
最小外接矩形分组单元,用于对画布中每个图元的最小外接矩形进行分组;
最小区域计算单元,用于计算出一个最小区域,所述最小区域能够包含一个组内的每个图元的最小外接矩形;
最小区域分组单元,对最小区域进行分组,直到计算出一个能够包含所有图元的最小区域;
树状结构形成单元,用于将每组的最小外接矩形与最小区域建立层级索引关系,形成树状结构。
优选地,所述最小外接矩形索引模块包括,
鼠标位置获取单元,用于获取鼠标事件的位置坐标;
最小外接矩形查找单元,用于根据层级索引关系查找包含所述位置坐标的最小外接矩形。
本发明通过r树空间索引,让包含图元的最小外接矩形建立层级索引关系,根据层级索引关系能够快速查找到鼠标位置的最小外接矩形,使用canvas设置图元样式重新设置最小外接矩形内的图元的样式,canvas与r树的结合,解决了大数据量图形渲染的交互以及性能问题。
附图说明
下面结合附图详述本发明的具体结构。
图1为本发明的图形渲染方法流程图;
图2为本发明的层级索引关系流程图;
图3为本发明的图形渲染装置框图;
图4为本发明的层级索引关系模块框图。
具体实施方式
为详细说明本发明的技术内容、构造特征、所实现目的及效果,以下结合实施方式并配合附图详予说明。
请参阅图1,一种基于canvas与r树空间的浏览器矢量图形渲染方法,包括步骤,
s10、计算画布中每个图元的最小外接矩形;
s20、通过r树空间索引算法对画布中的最小外接矩形建立层级索引关系;
s30、根据层级索引关系查找图元的最小外接矩形;
s40、查找到图元的最小外接矩形后,利用canvas重新设置图元的样式。
本技术方案通过r树空间索引,让包含图元的最小外接矩形建立层级索引关系,根据层级索引关系能够快速查找到鼠标位置的最小外接矩形,使用canvas设置图元样式重新设置最小外接矩形内的图元的样式,canvas与r树的结合,解决了大数据量图形渲染的交互以及性能问题。
实施例一
请参阅图2,在一具体实施例中,所述步骤s20具体包括,
s21、对画布中每个图元的最小外接矩形进行分组;
s22、计算出一个最小区域,所述最小区域能够包含一个组内的每个图元的最小外接矩形;
s23、对最小区域进行分组,直到计算出一个能够包含所有图元的最小区域;
s24、将每组的最小外接矩形与最小区域建立层级索引关系,形成树状结构。
本实施例中,将图元的最小外接矩形分组,计算每组中包含的最小外接矩形的最小区域,图元的最小外接矩形的节点为叶子节点,叶子节点引用存入在最小区域中,通过对最小区域进行分组划分,直到计算出一个能够包含所有图元的最小区域,形成树状结构,对最小区域进行层级划分,能够有效提高交互的速率。
实施例二
在一具体实施例中,所述步骤s30具体包括,
s31、获取鼠标事件的位置坐标;
s32、根据层级索引关系查找包含所述位置坐标的最小外接矩形。
本实施例中,获取到鼠标事件的位置坐标,根据层级索引关系,从能够包含所有图元的最小外接区域开始一层一层搜索,能够快速搜索到坐标位置所在的最小外接矩形,提高交互效率。
请参阅图3,一种基于canvas与r树空间的浏览器矢量图形渲染装置,其特征在于:包括,
最小外接矩形计算模块,用于计算画布中每个图元的最小外接矩形;
层级索引建立模块,用于通过r树空间索引算法对画布中的最小外接矩形建立层级索引关系;
最小外接矩形索引模块,用于根据层级索引关系查找图元的最小外接矩形;
图元样式设置模块,用于查找到图元的最小外接矩形后,利用canvas重新设置图元的样式。
本技术方案通过r树空间索引,让包含图元的最小外接矩形建立层级索引关系,根据层级索引关系能够快速查找到鼠标位置的最小外接矩形,使用canvas设置图元样式重新设置最小外接矩形内的图元的样式,canvas与r树的结合,解决了大数据量图形渲染的交互以及性能问题。
实施例三
请参阅图4,在一具体实施例中,所述层级索引建立模块包括,
最小外接矩形分组单元,用于对画布中每个图元的最小外接矩形进行分组;
最小区域计算单元,用于计算出一个最小区域,所述最小区域能够包含一个组内的每个图元的最小外接矩形;
最小区域分组单元,对最小区域进行分组,直到计算出一个能够包含所有图元的最小区域;
树状结构形成单元,用于将每组的最小外接矩形与最小区域建立层级索引关系,形成树状结构。
本实施例中,最小外接矩形分组单元将图元的最小外接矩形分组,最小区域计算单元计算每组中包含的最小外接矩形的最小区域,图元的最小外接矩形的节点为叶子节点,叶子节点引用存入在最小区域中,通过对最小区域进行分组划分,直到计算出一个能够包含所有图元的最小区域,形成树状结构,对最小区域进行层级划分,能够有效提高交互的速率。
实施例四
在一具体实施例中,所述最小外接矩形索引模块包括,
鼠标位置获取单元,用于获取鼠标事件的位置坐标;
最小外接矩形查找单元,用于根据层级索引关系查找包含所述位置坐标的最小外接矩形。
本实施例中,鼠标位置获取单元获取到鼠标事件的位置坐标,最小外接矩形查找单元根据层级索引关系,从能够包含所有图元的最小外接区域开始一层一层搜索,能够快速搜索到坐标位置所在的最小外接矩形,提高交互效率。
综上所述,本发明通过r树空间索引,让包含图元的最小外接矩形建立层级索引关系,从能够包含所有图元的最小外接区域开始一层一层搜索,能够快速查找到鼠标位置的最小外接矩形,使用canvas设置图元样式重新设置最小外接矩形内的图元的样式,canvas与r树的结合,解决了大数据量图形渲染的交互以及性能问题。
以上所述仅为本发明的实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。