本发明涉及一种浏览器矢量图形渲染方法及装置，尤其是指一种基于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树的结合，解决了大数据量图形渲染的交互以及性能问题。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。