CN104063900B - 基于webGL的三维地球的实现方案 - Google Patents

Abstract

本发明公开一种基于webGL标准实现在浏览器上的三维地球展示的方法，该技术方案实现的大致步骤如下：首先，初始化一个球体并渲染一张全球的底图作为整个三维地图的雏形；然后根据用户的操作(如拖拽，鼠标滚动)的操作改变视点的位置，根据视点位置计算当前视角内所需要的瓦片数据索引；将需要请求的瓦片数据索引集合放入瓦片状态管理器中，瓦片状态管理器管理每一张瓦片数据的生命周期，执行器根据每张瓦片数据的标志状态处理瓦片数据；当瓦片容器被填满时，利用改进LRU算法释放瓦片数据所占用的内存。

Description

基于webGL的三维地球的实现方案

技术领域

本发明涉及数字地球技术领域，具体地说，是一种在浏览器上显示三维地球的方法。

背景技术

webGL是一种3D绘图标准，该绘图标准允许将脚本语言Javascript与着色语言GLSL结合在一起。目前webGL已经在主流浏览器上支持，这其中包括了谷歌浏览器、火狐浏览器，Safari等浏览器。WebGL的出现使得在浏览器上展示三维效果不再需要浏览器插件的支持，其直接利用底层的硬件加速对图形进行渲染，为开发人员提供了与传统三维桌面应用同样高效的图形渲染速度，本发明利用这一技术的特点，提出了一种不同于传统数字地球实现方法的技术方案。

数字地球技术的概念是1998年时任美国副总统的戈尔提出的，其是一个与GIS、网络、虚拟现实、三维技术，意在利用计算机技术、多媒体技术以及存储技术为基础、以网络为枢纽，运用大量的地理数据对地球进行多角度、多分辨率、多尺度、多时空的三维描述及展示，以此来直观地认识人类所居住的星球。近年来，数字地球的发展十分迅速，这一发展与硬件水平的发展、完备的数据支持、用户需求、网络技术的发展息息相关。目前比较成熟的三维数字地球解决方案有谷歌地球、worldwind等。

WMS(Web地球位置服务)利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据可视的表现，地图本身并不是数据。服务器端的地图数据通常以jpg或者png的格式的切片形式存储，这些地图数据的切片被称为瓦片数据。WMS为外部提供地图数据服务，其根据一个来自客户端的请求，响应返回客户端指定范围的地图图像数据。

CORS(跨域资源共享)是一种网络浏览器的技术规范，其允许网页从不同域访问其他资源，以避开浏览器的同源策略，是传统JSONP模式的替代品。

web墨卡托投影将地球的地图数据定义为一张长宽都为40075.0166855784的正方形图像，并对地图数据进行分层。第0层数据为一张256x256的图像，其覆盖范围为全球。第1层数据将全球数据平均分为4块256x256的图像，每块覆盖范围为第0层数据覆盖范围的1/4。第N层的地图数据以此类推，层数越高，数据的分辨率越高，瓦片数据的个数越多。

使用web墨卡托地理坐标算出该地理坐标所对应的瓦片数据索引号，其对应的计算公式如下：

其中tileSize为z层每一张瓦片数据对应的web墨卡托的地理坐标范围，idx，idy为瓦片的索引号，px和py为web墨卡托的地理坐标

使用web墨卡托地理坐标x，y算出所对应的经纬度坐标，其对应公式如下：

其中lon，lat为经纬度，x，y为对应的墨卡托投影地理坐标，radius为对应的球体半径，这里所用的就是地球的半径。

传统的数字地球实现是在服务器/客户端的架构下，开发基于WMS协议的客户端桌面程序，程序运行时向远端提供WMS服务的服务器请求地图数据。基于这种模式下开发的程序需要在每一台使用三维数字地球的终端上进行繁杂的部署安装。由于每一个终端所使用的操作系统不同，需要针对不同的操作系统开发出一套具有相同功能的桌面程序，中间用于移植的工作量大。

与传统展示数字地球技术不同的是：本发明利用webGL技术实现了基于浏览器/服务器架构的三维地球，利用webGL标准实现了跨平台跨浏览器的三维数字地球展示。程序使用脚本语言javascript控制显卡、完成地图数据的调用以及用户交互的响应。这种模式下的三维地球实现只需要终端上安装支持webGL标准的浏览器即可，而目前流行的浏览器都已经对webGL提供了支持。相比传统模式，部署更加简单方便，可拓展性高。并且，由于浏览器的跨平台特性，在这一架构下实现的数字地球移植性高。基于浏览器模式下的应用只会在调用时占用硬盘临时空间。基于这种架构下实现的数字地球需要充分利用脚本语言的灵活性，与此同时避免脚本语言在实现上的局限性。本发明基于这样一个扬长避短的原则下提出如下几个方案来解决使用javascript脚本语言开发webGL三维地球中遇到的问题。

发明内容

本发明的目的是提供一种基于webGL的三维地球的实现方法。

本发明的基本思路为：

(1)渲染一个可载入多层瓦片数据的webGL三维球体；

(2)计算并请求当前视角下可见的瓦片数据；

(3)瓦片数据管理，定义一个状态变换机来控制管理一张瓦片数据从被请求、传输、传输完成被渲染以及被释放内存的生命周期过程；

(4)瓦片数据存储，定义了一个瓦片数据容器来存储瓦片数据。

(5)使用CORS异域请求技术令三维数字地球应用与瓦片数据服务器分开，客户端与服务器端的功能分离，保证模块功能的独立性。

进一步，步骤(1)中使用webGL技术，渲染一个可以载入多分辨率地图数据的三维球体，该三维球体可载入基于WMS协议的地图数据。

进一步，步骤(2)中，利用当前视点所在位置计算视窗范围内的经纬度范围，根据该经纬度范围请求对应的瓦片数据。

进一步，步骤(3)中状态变换机使瓦片数据在其生命周期内在针对不同情况被执行器执行不同的操作。配合改进的LRU算法，当瓦片容器满时对不经常使用的瓦片数据进行剔除，释放内存，使程序在运行期间所占用的内存不会因为请求瓦片数量的增多而变大，保证了程序的稳定性和使用的流畅性。

进一步，步骤(4)中瓦片容器存储满时对不经常使用的瓦片数据进行剔除，释放内存。

进一步，步骤(5)中利用异域请求技术将三维数字地球与提供WMS服务的服务器分开，使所有支持WMS服务的服务器的地图数据在三维地球上可视化，使服务器与三维地球二者的功能保证独立性。基于webGL的三维地球的实现方案

附图说明

图1是总技术方案的流程示意图

图2是基础球体的示意图

图3是三维数字地球的启动的初始化展示图

图4和图5是请求瓦片计算的示意图

图6是瓦片状态变换机的示意图

图7是在谷歌浏览器上的三维地球展示图

具体实施方式

(1)基于webGL技术，定义一个球体为基础球体(如说明书附图2所示)，该球体由多块三角形组成，可以调整参数使球体在经纬度两个方向精度更高。基础球体使用底图做渲染，作为程序初始状态的球体形状(如说明书附图3所示)。精度越高三角形的个数就越多，但对于基础球体来说不需要精度过高。

所请求的瓦片数据则是以一个球体上方的扇面的形式渲染到球体上。当瓦片请求并传输完成时，使用瓦片的索引值计算该瓦片起始点的web墨卡托地理坐标(公式1)，利用web墨卡托投影的地理坐标使用来计算该瓦片所对应的球体上的经纬度位置(公式2)，而后在球体的上方渲染一张以该瓦片为纹理的扇面。

(2)对于当前视点下所需要请求的瓦片数据索引计算：利用当前视点和选取的视窗边界点(左上，左下，右上以及右下点)的世界坐标，以视点为顶点做射线与三维地球做拾取(picking)检测。在检测射线与三维地球具有交点时，利用交点的世界坐标计算所在视窗请求影像的地理坐标范围，根据给地理坐标范围计算当前视点所处的位置应该显示的是地图数据的第几层数据以及该层中所对应的瓦片数据索引号，并发出http请求向WMS服务器请求所对应的瓦片数据数据，将传输获得的瓦片数据渲染在三维地球的对应区域。

如附说明书图4所示，利用视点V以及视窗口边界点A，B构造两条射线VA和VB于球体相交于A’和B’点。已知视点V到球心o的距离Vo，VA’，VB’以及球体的半径，即可利用三角函数公式计算张角θ就可算出纬度的范围，同理可以算出经度范围。计算瓦片的范围后请求的瓦片为当前视窗内的所有可见瓦片数据及该区域范围对应的上一层瓦片数据。

但是这样的计算方式会消耗大量的时间在范围的计算上，本发明中采用一种更为简单但是有效的方法来计算请求的瓦片数据地理范围。首先做如下的约定：视点的位置始终位于视窗的正中间，视窗的窗口长宽比为1∶1，在操作球体的过程只能旋转球体或者改变视点相对球体的海拔高度。这一约定之后，附说明书图4就可以直接变成说明书图5的结果，这时计算张角就可以利用简单的三角函数公式

而纬度的范围就为2θ，同理由于限定视窗长宽比例为1∶1，所以经度的范围也为2θ。每次做拾取检测时也只要做对于视窗中某个顶点的检测即可，根据对称原则，其他四个点的经纬度范围也会被确定。

(3)对于瓦片数据的管理，分为三个部分：瓦片容器的瓦片管理、对于瓦片状态的监控器以及执行器。

下面对着三个组件做一一说明：

一、瓦片管理：瓦片数据容器具有固定的大小，所以只能用来装填一定数量的瓦片数据，这样的机制保证计算机的内存被高效利用，而不会因为请求太多的瓦片数据导致内存被消耗殆尽。当瓦片数据被填满时，借鉴操作系统中LRU算法(最近最少使用算法)将一些不需要用的瓦片数据从瓦片容器中移出。

本发明在LRU的基础上添加另一种移出瓦片数据的策略：对于每张瓦片都标记使用次数(用来记录某一块瓦片被请求的次数)，当需要将瓦片数据从瓦片容器中移出时，检测容器中末端的瓦片，如果使用次数达不到指定次数的瓦片就全部移出容器。这样的策略与原生的LRU算法不同的是：保证了当瓦片容器被填满的时候，对于新的瓦片请求并不是每次都是移出一张旧的瓦片数据后再添加一张新的瓦片数据，而是当容器被填满时移出一大部分不被经常使用的瓦片后再添加新的瓦片数据，提高了效率。

二、由于瓦片数据在被传输、使用和删除释放的过程中存在很多不确定性因素，所以对于每个瓦片数据的生命周期的管理也是三维地球中的难题。本发明中的瓦片数据状态监控器定义了一个状态变换机，实现了对瓦片请求状态的管理。其规定了展示在瓦片数据容器中的每一张瓦片，都具有“未请求”，“开始”、“正在传输”、“完成”、“传输中断”、“删除”六个状态，下面对这六种状态做一一说明：

①“未请求”，即瓦片数据数据没有被放入瓦片容器中，所有瓦片的初始状态都为“未请求”。

②“开始”，即瓦片数据数据已经被允许请求且数据还未开始传输。

③“正在传输”，瓦片数据数据已经发出传输请求，并正在传输且还未传输结束。

④“传输中断”，瓦片数据数据中断传输，只发生在“正在传输”状态之后。

⑤“完成”，瓦片数据已经传输完成，并被成功渲染在三维球体上。

⑥“删除”，瓦片数据数据被删除

三、执行器是一个定时器，其对瓦片数据容器中的数据进行定时遍历，对如下不同状态进行不同的处理方式(状态变换图如附说明书图6所示)：

①对于“开始”状态的瓦片，向服务器发出瓦片传输请求，并将状态位标记为“正在传输”

②对于“正在传输”状态的瓦片，不做处理

③对于“传输中断”状态瓦片，释放其所对应的资源，并标记其状态为“未请求”状态

④对于“传输完成”，当传输完成时，将瓦片数据渲染在球体上，并标记状态为“完成”

⑤对于“删除”状态的瓦片，释放其对应的内存资源，并标记其状态为“未请求”

⑥对于“未请求”状态的瓦片不做处理

(4)瓦片数据的存储：瓦片数据数据被载入后如果被增加，删除以及修改，这是三维地图应用中需要解决的问题。由于webGL技术采用的是javascript脚本语言，所以对于瓦片的管理如果直接采用普通数组的形式来管理，会降低效率，所以本发明中对瓦片数据的管理是基于哈希数组，对于每一个瓦片数据都有一个特定的标识符，利用该标识符做为该数据在瓦片容器中的键(key)，对应的(value)值即为瓦片数据。键值方式的存储有利于地图数据的索引和插入，提高了数据存储的效率。脚本语言javascript中的数组的索引可以直接使用字符串作为索引，利用这一特点，可以直接实现对瓦片数据数据的哈希存储，保证每个瓦片数据都有特定的键与其的值一一对应。举例来说，请求的索引号为x＝100，y＝798，z＝3的瓦片数据已经传输到达，这时为了把这个数据加入，就将瓦片数组索引为“100_798_3”的数值赋值为瓦片数据。瓦片数据容器不存储重复的数据，当添加新的数据时，根据索引编号判断瓦片数据是否存在，若存在就添加，不存在就不添加并把使用次数加一。删除瓦片时根据索引找到瓦片对象，并释放内存。

(5)传统的javascript技术只能请求在同域下的资源，而对于其他域下的资源，需要通过JSON的形式请求，而后再把JSON请求转化为图像数据。本发明中请求瓦片数据数据使用CORS异域请求技术让三维地球请求的地图数据可以与其在不同的域下，这样就可以使三维地球应用与实际的服务器完全分离开。这一技术保证了，本发明的三维地球能够对于提供WMS服务的服务器所提供的地图数据做展示，保证了服务器端和客户端的功能独立性

应当指出，以上所述具体实施方式可以使本领域的技术人员更全面地理解本发明，但不以任何方式限制本发明。因此，本领域技术人员应当理解，仍然可以对本发明进行修改或者等同替换；而一切不脱离本发明的精神和技术实质的技术方案及其改进，其均应涵盖在本发明专利的保护范围当中。

Claims (6)

1.一种基于webGL的三维地球的实现方法，利用webGL技术可以在支持webGL的浏览器上使用三维数字地球，实现跨平台跨浏览器的三维地球展示，其特征在于包括以下步骤：

(1)渲染一个可载入多层瓦片数据的webGL三维球体；

(2)计算并请求当前视角下可见的瓦片数据；

(3)瓦片数据管理，定义一个状态变换机来控制管理一张瓦片数据从被请求、传输、传输完成被渲染以及被释放内存的生命周期过程；

(4)瓦片数据存储，定义了一个瓦片容器来存储瓦片数据；

(5)使用CORS异域请求技术令三维数字地球应用与瓦片数据服务器分开，客户端与服务器端的功能分离，保证模块功能的独立性。

2.根据权利要求1中所述的方法，其特征在于：

步骤(1)中使用webGL技术，渲染一个可以载入多分辨率地图数据的三维球体，该三维球体可载入基于WMS协议的地图数据。

3.根据权利要求1中所述的方法，其特征在于：

步骤(2)中，利用当前视点所在位置计算视窗范围内的经纬度范围，根据该经纬度范围请求对应的瓦片数据。

4.根据权利要求1中所述的方法，其特征在于：

步骤(3)中状态变换机使瓦片数据在其生命周期内在针对不同情况被执行器执行不同的操作；配合改进的LRU算法，当瓦片容器满时对不经常使用的瓦片数据进行剔除，释放内存，使程序在运行期间所占用的内存不会因为请求瓦片数量的增多而变大，保证了程序的稳定性和使用的流畅性。

5.根据权利要求1中所述的方法，其特征在于：步骤(4)中瓦片容器存储满时对不经常使用的瓦片数据进行剔除，释放内存。

6.根据权利要求1中所述的方法，其特征在于：

步骤(5)中利用异域请求技术将三维数字地球与提供WMS服务的服务器分开，使所有支持WMS服务的服务器的地图数据在三维地球上可视化，使服务器与三维地球二者的功能保证独立性。