一种海量点位地图渲染方法及系统技术方案

本发明专利技术提出了一种海量点位地图渲染方法及系统，涉及地图渲染技术领域，具体方案包括：加载空白地图图层，并获取地图的点位数据，做好渲染准备；根据用户的当前视野，将地图划分为当前视图块和非当前视图块，根据当前视图块的边界框，加载当前视图块的点位数据；将加载的点位数据一次性绘制成一个背景透明的图层，通过与空白地图图层合并完成渲染；监听用户对地图的拖动、缩放或平移事件，实时调整当前视图块，对当前视图块的点位数据进行重新绘制和渲染；本发明专利技术实时加载当前视图块的点位数据，并一次性绘制成一个背景透明的图层，通过与空白地图图层合并，使大量数据一次性展示在地图上，从而快速渲染大量点位，提高渲染效率，解决卡顿问题。卡顿问题。卡顿问题。

【技术实现步骤摘要】
一种海量点位地图渲染方法及系统


[0001]本专利技术属于地图渲染
，尤其涉及一种海量点位地图渲染方法及系统。

技术介绍

[0002]本部分的陈述仅仅是提供了与本专利技术相关的
技术介绍
信息，不必然构成在先技术。
[0003]地图应用场景中，经常会出现“需要在地图上添加1万+条数据”的业务需求，这里的数据是点或线或面；但不管哪种，添加到5000条时，地图操作就会出现渲染时间过长导致的明显卡顿，而渲染时间增加的主要原因是：数据过多，渲染大量dom节点，导致页面渲染卡顿，增加渲染时间。
[0004]解决上述问题的现有思路，是根据用户需求，确定用户的目标数据，通过点聚合等方式，将少量点位在地图上展示；但无法一次性在地图上展示很多的点位数据，一次性展现大量的地图数据，依然会造成页面卡顿的现象。

技术实现思路

[0005]为克服上述现有技术的不足，本专利技术提供了一种海量点位地图渲染方法及系统，实时加载当前视图块的点位数据，并一次性绘制成一个背景透明的图层，通过与空白地图图层合并，使大量数据一次性展示在地图上，从而快速渲染大量点位，提高渲染效率，解决卡顿问题。
[0006]为实现上述目的，本专利技术的一个或多个实施例提供了如下技术方案：
[0007]本专利技术第一方面提供了一种海量点位地图渲染方法。
[0008]一种海量点位地图渲染方法，包括：
[0009]加载空白地图图层，并获取地图的点位数据，做好渲染准备；
[0010]根据用户的当前视野，将地图划分为当前视图块和非当前视图块，根据当前视图块的边界框，加载当前视图块的点位数据；
[0011]将加载的点位数据一次性绘制成一个背景透明的图层，通过与空白地图图层合并完成渲染；
[0012]监听用户对地图的拖动、缩放或平移事件，实时调整当前视图块，对当前视图块的点位数据进行重新绘制和渲染。
[0013]进一步的，所述加载空白地图图层，使用leaflet加载空白地图图层。
[0014]进一步的，所述点位数据，包括点位的经度和纬度坐标。
[0015]进一步的，所述当前视图块，为用户当前视野所对应的矩形区域；
[0016]所述非当前视图块，为除当前视图块外的其他地图区域。
[0017]进一步的，所述边界框，为矩形区域形成的矩形框，由矩形区域左上角坐标与右下角坐标确定。
[0018]进一步的，所述将加载的点位数据一次性绘制成一个背景透明的图层，是使用
Leaflet.Canvas
‑
Marker插件绘制canvas图层。
[0019]进一步的，所述监听用户对地图的拖动、缩放或平移事件，使用Leaflet的地图事件监听器进行监听。
[0020]本专利技术第二方面提供了一种海量点位地图渲染系统。
[0021]一种海量点位地图渲染系统，包括准备模块、加载模块、绘制模块和监听模块：
[0022]准备模块，被配置为：加载空白地图图层，并获取地图的点位数据，做好渲染准备；
[0023]加载模块，被配置为：根据用户的当前视野，将地图划分为当前视图块和非当前视图块，根据当前视图块的边界框，加载当前视图块的点位数据；
[0024]绘制模块，被配置为：将加载的点位数据一次性绘制成一个背景透明的图层，通过与空白地图图层合并完成渲染；
[0025]监听模块，被配置为：监听用户对地图的拖动、缩放或平移事件，实时调整当前视图块，对当前视图块的点位数据进行重新绘制和渲染。
[0026]本专利技术第三方面提供了计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如本专利技术第一方面所述的一种海量点位地图渲染方法中的步骤。
[0027]本专利技术第四方面提供了电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现如本专利技术第一方面所述的一种海量点位地图渲染方法中的步骤。
[0028]以上一个或多个技术方案存在以下有益效果：
[0029]本专利技术采用分块加载的策略，只加载用户当前视野所对应的视图块内的点位，即实时、按需加载，保证用户体验的前提下，减少加载的数据量，节省时间和资源。
[0030]本专利技术将加载的点位数据一次性绘制成一个背景透明的图层，通过与空白地图图层合并，使大量数据一次性展示在地图上，从而快速渲染大量点位，提高渲染效率，解决卡顿问题。
[0031]本专利技术附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本专利技术的实践了解到。
附图说明
[0032]构成本专利技术的一部分的说明书附图用来提供对本专利技术的进一步理解，本专利技术的示意性实施例及其说明用于解释本专利技术，并不构成对本专利技术的不当限定。
[0033]图1为第一个实施例的方法流程图。
[0034]图2为第一个实施例地图分块示意图。
[0035]图3为第二个实施例的系统结构图。
具体实施方式
[0036]应该指出，以下详细说明都是例示性的，旨在对本申请提供进一步的说明。除非另有指明，本专利技术使用的所有技术和科学术语具有与本申请所属
的普通技术人员通常理解的相同含义。
[0037]需要注意的是，这里所使用的术语仅是为了描述具体实施方式，而非意图限制根据本申请的示例性实施方式。如在这里所使用的，除非上下文另外明确指出，否则单数形式
也意图包括复数形式，此外，还应当理解的是，当在本说明书中使用术语“包含”和/或“包括”时，其指明存在特征、步骤、操作、器件、组件和/或它们的组合。
[0038]实施例一
[0039]在一个或多个实施方式中，公开了一种海量点位地图渲染方法，如图1所示，包括如下步骤：
[0040]步骤S1：加载空白地图图层，并获取地图的点位数据，做好渲染准备。
[0041]具体的，准备地理点位数据源，数据源可以是一个数据库、一个文件(如GeoJSON或CSV)或一个远程API，确保数据源包含必要的地理信息，如点位的经度和纬度坐标。
[0042]在加载数据之前，使用开源插件leaflet先加载一个空白地图图层，这里的空白地图图层，可以这样理解：地图需要至少一个图层来显示地图底图，空白的地图图层就是指地图的底图这一层。
[0043]开源插件Leaflet是一个为建设移动设备友好的互动地图，而开发的现代的、开源的JavaScript库，是由Vladimir Agafonkin带领一个专业贡献者团队开发，虽然代码仅有38KB，但它具有开发人员开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问；支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。
[0044]所以，本实施例基于leaflet，实现大量数据一次展示在地图上。...

【技术保护点】

【技术特征摘要】
1.一种海量点位地图渲染方法，其特征在于，包括：加载空白地图图层，并获取地图的点位数据，做好渲染准备；根据用户的当前视野，将地图划分为当前视图块和非当前视图块，根据当前视图块的边界框，加载当前视图块的点位数据；将加载的点位数据一次性绘制成一个背景透明的图层，通过与空白地图图层合并完成渲染；监听用户对地图的拖动、缩放或平移事件，实时调整当前视图块，对当前视图块的点位数据进行重新绘制和渲染。2.如权利要求1所述的一种海量点位地图渲染方法，其特征在于，所述加载空白地图图层，使用leafl et加载空白地图图层。3.如权利要求1所述的一种海量点位地图渲染方法，其特征在于，所述点位数据，包括点位的经度和纬度坐标。4.如权利要求1所述的一种海量点位地图渲染方法，其特征在于，所述当前视图块，为用户当前视野所对应的矩形区域；所述非当前视图块，为除当前视图块外的其他地图区域。5.如权利要求4所述的一种海量点位地图渲染方法，其特征在于，所述边界框，为矩形区域形成的矩形框，由矩形区域左上角坐标与右下角坐标确定。6.如权利要求1所述的一种海量点位地图渲染方法，其特征在于，所述将加载的点位数据一次性绘制成一个背景透明的图层，是使用Leafl et.Canvas
‑
Marker插...

【专利技术属性】
技术研发人员：何欢，李凡平，王堃，
申请(专利权)人：以萨技术股份有限公司，
类型：发明
国别省市：