一种三维立体注记调度显示的方法与流程

1.本发明涉及实景三维可视化技术领域，尤其涉及一种三维立体注记调度显示的方法。


背景技术：

2.实景三维是对人类赖以生存、生产和生活的自然物理空间进行真实、立体、时序化反映和表达的数字虚拟空间。近年来，我国积极推进实景三维中国建设工作，国家的发展需要空间信息从二维走向三维，才能更好实现城市精细化管理。从传统的二维地图转变成三维地图，有许多待解决的难题，其中注记在地图中占据着重要的地位。目前的web三维地图中，立体注记普遍存在以下的问题：
3.(1)二维地图往往固定了正北方向，它不能任意旋转，而三维地图可随意旋转的特性使其在加载具有方向性的地名地址切片服务时，会出现文字倒置显示的现象，如图1所示，这对于三维显示来说不美观，也不符合三维的特性；
4.(2)三维地图的无级缩放也区别于二维地图的有级缩放，如图2所示，当切片的地名地址服务加载到三维地图上时，会显得文字时大时小，不能在任意层级中保持固定的大小；
5.(3)如图3所示，传统的三维地图注记中，地名地址的切片服务以图片的形式贴地渲染，无法在实景三维模型上叠加显示，使得切片的地名地址服务在三维模型上没有太大用武之地；
6.(4)传统的三维地图注记将单个或多个点添加到地图上可以实现注记的立体显示，但是缺少整体的调度方案优化显示，没有避让优化，无法调度显示大范围且大量的注记数据。


技术实现要素：

7.本发明旨在至少解决上述所提及的技术问题之一，提供一种三维立体注记调度显示的方法，以解决现有三维地图中无法调度显示大范围且大量的注记数据，容易出现注记重叠、倒置，以及不能实现注记无级缩放的问题。
8.为了实现上述目的，本发明采用的技术方案为：一种三维立体注记调度显示的方法，包括如下步骤：
9.步骤1、使用地图服务器发布wfs服务，为浏览器端提供支持空间几何关系查询以及属性域查询的数据服务；
10.步骤2、采用无层级固定网格的方法，将地图划分为固定数量、固定大小的网格。在地图比例尺大于1:30000之后，求出与地图可视范围相交的网格，并以一个网格为单位向服务器请求geojson数据；
11.步骤3、构造浏览器端的数据存储结构，使用r-tree从服务器接收geojson的点状数据，在接收数据后，将数据根据不同比例尺下的相同两点屏幕像素差值与经纬度差值的
关系进行数据初始化避让，并将避让结果分不同比例尺存储在不同的数据结构中；
12.步骤4、地图视角发生变化时，计算地图可视范围，并计算当前比例尺下地图不同的两点之间屏幕像素差值与经纬度差值的关系，根据r-tree算法检索存储在浏览器的数据，若与该范围相交的网格未从服务器获取数据，将以一个网格为单位向服务器请求数据并存储在浏览器缓存中；
13.步骤5、在web worker多线程中，通过地图当前比例尺下不同的两点之间屏幕像素差值与经纬度差值的关系，得出1度经纬度代表的像素值，以获取注记点的像素宽度和像素高度，通过注记点的经度、纬度、像素宽度和像素高度，计算注记的避让关系，将重叠的数据在多线程中初步过滤掉；
14.步骤6、将步骤5中的结果数据在ui主线程中进一步的进行精细化避让，使用经纬度坐标与屏幕像素坐标转换得出在当前视角下注记显示的屏幕像素位置，与其他显示的注记进行避让计算；
15.步骤7、将矢量文字栅格化处理，通过使用offscreencanvas，在多线程中绘制文字并转换成栅格图片；
16.步骤8、将需要显示的注记通过经纬度坐标及文字的栅格化图片添加到地图上，已经显示过的注记缓存在浏览器内存，当前视角不需要显示的注记暂时隐藏。
17.优选的，所述步骤2中，在地图经度-180度至180度和纬度-90度至90度每隔0.2度划分一条线，将地图划分成长宽为0.2度*0.2度的固定网格，然后，在地图视角发生改变的时候，使用地图视角范围与地图网格进行相交计算，与视角范围相交的网格向服务器请求数据并缓存在浏览器中。
18.优选的，所述步骤3中，通过文字显示的样式、文字的内容以及文字的换行次数，初步计算文字的长度与宽度，根据不同地图层级“1经度代表的像素值”进行数据初始化避让，将每个地图层级初始化避让的结果数据分为不同的数据结构来存储，最大的层级则全量存储所有数据。
19.优选的，所述步骤4中，数据为树形结构，且层级固定，树上的每个节点都表示一个矩形，所有的叶子节点都表示一条数据，每个父节点都代表所有儿子节点集合的最小外接矩形，通过不同两点之间的屏幕像素差值与经纬度差值来检索存储在浏览器中对应的数据结构，然后以可视范围的外接矩形为搜索条件，首先搜索根节点，若与根节点相交，则继续检索它的子节点，依此类推，直到检索叶子节点，得到所有在可视范围内的数据。
20.优选的，所述步骤5中，将1度经纬度代表的像素值命名为a，并将地图的可视范围命名为c，将a和c传入web worker多线程中，通过a找到对应存储的数据结构，通过c搜索在a中的数据，通过搜索得到注记点的经纬度、注记宽度及高度，计算注记的避让关系，初步过滤掉重叠的数据。
21.优选的，所述步骤6中，根据注记的经纬度求出注记点所在的屏幕像素位置，当得到的像素位置大于屏幕的实际值或者小于0，代表注记当前不显示在屏幕内，构造一个rbush数据结构b，根据注记的像素坐标、长度和宽度，在b中检索该注记的范围内是否与已显示的注记范围相交，不相交则添加至b中，代表需要被显示。
22.优选的，所述步骤7中，将文字内容、文字的描边宽度、描边颜色、文字大小、文字字体、文字填充颜色和换行符号以参数传入web worker多线程中，计算文字转换为图片需要
的长度与宽度，使用offscreencanvas创建图片，并按照文字样式绘制，最后栅格化为图片，最后将栅格化的图片返回至主线程中，显示到webgl地图中。
23.与现有技术相比，本发明的一种三维立体注记调度显示的方法具有如下有益效果：
24.1、注记采用无层级固定网格的方法，不再以切片的方式加载到三维地图上，从而有效避免了三维地图中出现注记文字倒置的问题，同时可调度加载大范围的标注数据；
25.2、注记可以保持无级缩放，在任意范围的三维地图中始终保持固定的大小，提高地图的美观感；
26.3、注记可实时避让显示，以避免注记重叠显示；
27.4、在web三维平台上高效的显示大量注记。
附图说明
28.以下结合附图对本发明的具体实施方式作进一步的详细说明，其中：
29.图1是采用现有技术进行标注的三维地图中出现文字倒置情况的示意图；
30.图2是采用现有技术进行标注的三维地图中注记不能实现无极缩放情况的示意图；
31.图3是采用现有技术进行标注的三维地图中注记不能实现叠加显示的示意图；
32.图4是本发明中将三维地图分为固定网格的示意图；
33.图5是本发明中利用可视范围获取显示网格的示意图；
34.图6是本发明中数据存储结构的示意图；
35.图7是本发明中判断两个矩形相交方式的示意图；
36.图8是本发明中搜索数据方式的示意图；
37.图9是本发明中三维地图可视范围的经纬度差计算方式的示意图；
38.图10是本发明中三维地图可视范围的像素差计算方式的示意图；
39.图11是本发明中多线程计算注记避让流程的示意图；
40.图12是本发明中多线程中绘制图片渲染流程的示意图；
41.图13是使用本发明注记方法的其中一种三维地图显示效果的示意图；
42.图14是使用本发明注记方法的另一种三维地图显示效果的示意图。
具体实施方式
43.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
44.需要说明的是，当组件被称为“固定于”另一个组件，它可以直接在另一个组件上或者也可以存在居中的组件。当一个组件被认为是“连接”另一个组件，它可以是直接连接到另一个组件或者可能同时存在居中组件。当一个组件被认为是“设置于”另一个组件，它可以是直接设置在另一个组件上或者可能同时存在居中组件，当部件被称为“设置在中部”，不仅仅是设置在正中间位置，只要不是设置在两端部都属于中部所限定的范围内。本
文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的。
45.除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。
46.如图1所示，一种三维立体注记调度显示的方法，包括如下步骤：
47.步骤1、使用地图服务器，如postgresql、geoserver等发布wfs服务，为浏览器端提供支持空间几何关系查询以及属性域查询的数据服务；
48.步骤2、采用无层级固定网格的方法，将地图划分为固定数量、固定大小的网格。在地图比例尺大于1:30000之后，求出与地图可视范围相交的网格，并以一个网格为单位向服务器请求geojson数据；
49.步骤3、构造浏览器端的数据存储结构，使用r-tree从服务器接收geojson的点状数据，在接收数据后，将数据根据不同比例尺下的相同两点屏幕像素差值与经纬度差值的关系进行数据初始化避让，并将避让结果分不同比例尺存储在不同的数据结构中；
50.步骤4、地图视角发生变化时，计算地图可视范围，并计算当前比例尺下地图不同的两点之间屏幕像素差值与经纬度差值的关系，根据r-tree算法检索存储在浏览器的数据，若与该范围相交的网格未从服务器获取数据，将以一个网格为单位向服务器请求数据并存储在浏览器缓存中；
51.步骤5、在web worker多线程中，通过地图当前比例尺下不同的两点之间屏幕像素差值与经纬度差值的关系，得出1度经纬度代表的像素值，以获取注记点的像素宽度和像素高度，通过注记点的经度、纬度、像素宽度和像素高度，计算注记的避让关系，将重叠的数据在多线程中初步过滤掉；
52.步骤6、将步骤5中的结果数据在ui主线程中进一步的进行精细化避让，使用经纬度坐标与屏幕像素坐标转换得出在当前视角下注记显示的屏幕像素位置，与其他显示的注记进行避让计算；
53.步骤7、将矢量文字栅格化处理，通过使用offscreencanvas，在多线程中绘制文字并转换成栅格图片；
54.步骤8、将需要显示的注记通过经纬度坐标及文字的栅格化图片添加到地图上，已经显示过的注记缓存在浏览器内存，当前视角不需要显示的注记暂时隐藏。
55.具体的，使用wfs做为数据提供服务，wfs通过ogc filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，还包括基于空间关系和属性域的共同查询，利用wfs服务的特点，将服务端的数据以下述方式进行构造返回，其包括一下几个方面：
56.1、将数据存储在关系型数据库中，并使用地图服务器将数据表发布为wfs服务。
57.2、在http中通过url请求服务端，通过构造cql filter参数过滤需要显示的数据。
58.3、返回包含属性的geojson格式的点状数据。
59.在其中一实施方式中，对于所述步骤2，可以在地图经度-180度至180度和纬度-90度至90度每隔0.2度划分一条线，将地图划分成长宽为0.2度*0.2度的固定网格，然后，在地图视角发生改变的时候，使用地图视角范围与地图网格进行相交计算，与视角范围相交的网格向服务器请求数据并缓存在浏览器中。
60.具体的，数据调度的方式可以分为两种，考虑到不同的数据量，一种是数据量非常庞大无法一次性全量加载，另一种是数据量较小可以全量加载。
61.对于数据量比较庞大的数据，无法一次性全量加载。传统的瓦片调度是将地图按照不同的层级分割为相同大小的瓦片，并以行列号的方式分层加载需要显示的瓦片，随着层级越大，清晰度越高，此方式运用在栅格影像的切片地图服务中效果很好，但如果以地图切片这样的思路来做立体注记的调度，会造成每个层级都要加载新的注记，即使在上一层级已经加载过相同的注记，在当前层级依然需要重复加载一次，每个层级的切片过于细碎，无疑增加了http请求的次数，增加了浏览器端数据处理量，减缓了显示速度，增加了数据冗余度并且加重了服务器计算的负担。
62.因此本技术中采用无层级固定网格的方法进行数据的调度，浏览器将地图划分为固定大小的网格，如在经度-180度至180度和纬度-90度至90度每0.2度划分一条线，将全球划分成长宽为0.2度*0.2度的固定网格，固定的计算方式使得浏览器端得以缓存服务器的数据，减少请求次数和数据传输量，加载方式如图4所示。
63.在地图比例尺大于1:30000之后，计算地图的可视范围，与可视范围相交的网格，则需要向服务器请求数据，如图5所示。
64.依次将需要加载数据的网格通过空间范围bbox构造cqlfilter请求wfs服务，得到该片网格需要显示的数据，其网格以固定的方式生成，使得每一片只需要请求服务器一次，因而不会产生多余的请求和数据冗余。
65.在另一实施方式中，对于所述步骤3，可以通过文字显示的样式、文字的内容以及文字的换行次数，初步计算文字的长度与宽度，根据不同地图层级“1经度代表的像素值”进行数据初始化避让，将每个地图层级初始化避让的结果数据分为不同的数据结构来存储，最大的层级则全量存储所有数据。
66.具体的，可以使用r-tree的实现rbush存储点状数据，该数据树形结构，其每个节点都表示为一个矩形，每一个节点的父节点都是所有子节点合集的最小外接矩形，该树层级固定，查询与插入数据的性能稳定。使用该数据结构得以在浏览器端可以快速地插入数据和搜索数据，如图6所示。
67.从服务器接收数据后，将数据粗糙地根据不同比例尺下的相同两点屏幕像素差值与经纬度差值的关系进行数据初始化避让，将数据根据不同的像素值存储在对应的数据结构中，如下表所示：
68.[0069][0070]
所述步骤4中，可以通过不同两点之间的屏幕像素差值与经纬度差值来检索存储在浏览器中对应的数据结构，然后以可视范围的外接矩形为搜索条件，首先搜索根节点，若与根节点相交，则继续检索它的子节点，依此类推，直到检索叶子节点，得到所有在可视范围内的数据。
[0071]
具体的，当地图移至一个范围时，计算出地图可视范围，并计算出当前比例尺下1
经纬度代表的像素值，通过地图可视范围和1经纬度代表的像素值搜索指定的数据结构。
[0072]
下面提供一种在r-tree算法中快速检索数据的方法。
[0073]
首先，需要用到矩形与矩形相交判断，如图7所示。
[0074]
然后，在r-tree的数据结构中，想查询在一个矩形内所有的点，将需要查询的矩形命名为s。首先判断矩形e1和e2和s是否相交，发现与e1相交，于是通过e1到达子节点，再判断e3与e4与s是否相交，发现e3与s相交，最后找到e3的叶子节点，判断每个叶子节点是否在矩形s内即可，最后此查询得出结果为点a、点b和点c，如图8。
[0075]
我们利用r树的一个开源工具rbush，来存储注记的点状数据，创建rbush数据结构：
[0076]
const tree＝new rbush(9)；
[0077]
插入一个数据，item为该数据的最小外接矩形，minx,miny为矩形的最小点的xy，maxx,maxy为矩形的最大点的xy：
[0078][0079]
tree.insert(item)；
[0080]
例如，搜索所有在矩形[40,20,80,70]内的数据：
[0081]
varresult＝tree.search({
[0082]
minx:40,
[0083]
miny:20,
[0084]
maxx:80,
[0085]
maxy:70
[0086]
})；
[0087]
根据地图可视范围矩形s，使用
[0088]
tree.search(s)；
[0089]
搜索出在地图可视范围所有的点。
[0090]
在其中一优选的实施方式中，对于所述步骤5，可以将1度经纬度代表的像素值命名为a，并将地图的可视范围命名为c，将a和c传入web worker多线程中，通过a找到对应存储的数据结构，通过c搜索在a中的数据，通过搜索得到注记点的经纬度、注记宽度及高度，计算注记的避让关系，初步过滤掉重叠的数据。
[0091]
具体的，计算注记的平面坐标需要占用到ui主线程，为了不过多占用ui显示的线程导致卡顿，需要先大致粗略地计算注记的避让，从大量数据中筛选得出可能需要显示的注记，减轻数据筛选的性能压力。
[0092]
计算当前可视范围内的最左边的点和最右边的点之间的经纬度差值，假设a点经纬度为a(x1,y1)，b点的经纬度为b(x2,y2)，两点间的经纬度相差为ab，如图9所示。
[0093]
计算当前可视范围内的最左边的点和最右边的一点之间的平面坐标差值，假设c点屏幕坐标为c(x1,y1)，b点的屏幕坐标为d(x2,y2)，两点间的像素差为cd，如图10所示。
[0094]
则1度经纬度，代表像素值为(两点像素差值cd/两点经纬度差值ab)。
[0095]
得出1度经纬度对应的像素值(命名为f)，就可以通过点的经纬度计算其粗略的碰撞：
[0096]
variscollides＝collisionrree.collides({
[0097]
minx:注记的经度*f-(注记的像素宽度/2),
[0098]
miny:注记的纬度*f-(注记的像素高度/2),
[0099]
maxx:注记的经度*f+(注记的像素宽度/2),
[0100]
maxy:注记的纬度*f+(注记的像素高度/2)
[0101]
})；
[0102]
如果iscollides为false,代表该范围暂无注记显示，则将注记的范围添加至r树中：
[0103]
collisionrree.add({
[0104]
minx:注记的经度*f-(注记的像素宽度/2),
[0105]
miny:注记的纬度*f-(注记的像素高度/2),
[0106]
maxx:注记的经度*f+(注记的像素宽度/2),
[0107]
maxy:注记的纬度*f+(注记的像素高度/2)
[0108]
})；
[0109]
以此方式计算所有可视范围内的点，得出所有可能需要显示的注记。
[0110]
javascript是单线程的语言，单线程意味着程序会按照指定的顺序按部就班的执行下去，遇到堵塞也无法越过，并且ui和计算的线程是同一个，意味着在javascript上实现大量的运算会导致整个网页有很强的卡顿感，降低用户的使用体验。而javascript的web worker多线程技术局限性在于不能直接操作dom节点。
[0111]
当数据量比较大时，步骤五的算法会消耗很大的计算能力，意味着在单线程的网页中，会有一段时间的卡顿，而结合javascript的web worker特性与步骤五算法的特点，可以将耗时的避让计算放到web worker中运行，将避让的结果返回给主线程，如图11所示。
[0112]
在另一优选的实施方式中，对于所述步骤6，根据注记的经纬度求出注记点所在的屏幕像素位置，当得到的像素位置大于屏幕的实际值或者小于0，代表注记当前不显示在屏幕内，构造一个rbush数据结构b，根据注记的像素坐标、长度和宽度，在b中检索该注记的范围内是否与已显示的注记范围相交，不相交则添加至b中，代表需要被显示。
[0113]
具体的，区别于步骤五中粗略的注记避让计算，该步骤是获取注记精确的像素坐标以及注记实际的宽高来精确计算其是否应该显示在地图上，步骤6是为减轻此步骤的计算量而设置的，因为该步骤的计算需要使用到dom元素，将占用大量的ui线程，因而只能在
ui线程中计算，步骤六的初步筛选则减轻了ui线程的压力。
[0114]
得到粗略的显示数据后，再在主线程中再度精确计算避让关系，重新构造一个rbush数据结构，用于判断避让关系，避让关系的计算使用了点的平面像素坐标(屏幕从左上角为坐标(0，0)，右下角为(屏幕最大高度，屏幕最大宽度))和注记占用的屏幕像素宽高。
[0115]
该方式需要计算点的经纬度所在屏幕的像素坐标，得出一个经纬度点的像素坐标：
[0116]
得到注记点所在的屏幕像素坐标pxposition。
[0117]
variscollides＝collisionrree.collides
[0118]
({
[0119]
minx:pxposition.x-(注记的宽度/2),
[0120]
miny:pxposition.y-(注记的高度/2),
[0121]
maxx:pxposition.x+(注记的宽度/2),
[0122]
maxy:pxposition.y+(注记的高度/2)
[0123]
})；
[0124]
如果iscollides为false,代表其位置并没有其他注记占用，可以显示在地图上：
[0125]
collisionrree.add({
[0126]
minx:pxposition.x-(注记的宽度/2),
[0127]
miny:pxposition.y-(注记的高度/2),
[0128]
maxx:pxposition.x+(注记的宽度/2),
[0129]
maxy:pxposition.y+(注记的高度/2)
[0130]
})；
[0131]
以此方式计算所有在步骤五中得到可视范围内的注记点，最终得到所有需要被显示的点
[0132]
在另一实施方式中，对于所述步骤7，可以将文字内容、文字的描边宽度、描边颜色、文字大小、文字字体、文字填充颜色和换行符号以参数传入web worker多线程中，计算文字转换为图片需要的长度与宽度，使用offscreencanvas创建图片，并按照文字样式绘制，最后栅格化为图片，最后将栅格化的图片返回至主线程中，显示到webgl地图中。
[0133]
具体的，矢量的文字，在渲染过程中会比栅格化的数据耗费更多的性能，因此将文字栅格化以提高渲染性能，其中文字的样式包含文字填充颜色，文字描边颜色、文字描边宽度、文字大小等样式。以下方式为使用javascript语言的canvas对象来绘制文字，并将绘制的文字转变成图片，以此方式将注记进行栅格化。
[0134]
var canvas＝document.createelement("canvas")；
[0135]
var ctx＝canvas.getcontext("2d")；
[0136]
ctx.font＝"20px georgia"；
[0137]
ctx.strokestyle＝"#000"；
[0138]
ctx.stroketext("hello world！",10,50)；
[0139]
ctx.fillstyle＝"#fff"；
[0140]
ctx.filltext("hello world！",10,50)；
[0141]
varimage＝new image()；
[0142]
image.src＝canvas.todataurl("image/png")；
[0143]
offscreencanvas和canvas都是html中渲染图形的对象。不同的是canvas只能在网页主线程中的window环境下使用，而offscreencanvas即可以在window环境下使用，也可以在多线程web worker中使用，这让不影响浏览器主线程的离屏渲染成为可能。步骤8中的文字栅格化可以通过多线程绘制图片的方式进行，又极大减轻了ui线程的计算压力，如图12所示。
[0144]
根据注记的经纬度和文字栅格化后的图片添加到地图中显示，将注记添加到地图上：
[0145]
map3d.addlabel({
[0146]
position:[108.0,22.0],
[0147]
image:image
[0148]
})；。
[0149]
如图13和图14所示，与现有技术相比，本发明的一种三维立体注记调度显示的方法具有如下有益效果：
[0150]
1、通过步骤2，注记采用无层级固定网格的方法加载，不再以切片的方式加载，从而有效避免了三维地图中出现注记文字倒置的问题，同时可调度加载大范围的标注数据；
[0151]
2、通过步骤8，利用经纬度与栅格化标注的方式添加至地图，区别于使用瓦片加载，注记可以保持无级缩放，在任意范围的三维地图中始终保持固定的大小，提高地图的美观感；
[0152]
3、通过步骤3至步骤6的注记避让算法，注记可实时高效避让显示，以避免注记重叠显示；
[0153]
4、通过本发明的数据调度方法、数据存储方法、避让算法和注记显示方法，使得可以在三维平台上高效的显示大量注记。
[0154]
以上实施例仅用以说明本发明的技术方案而并非对其进行限制，凡未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明技术方案的范围内。