CN106844521A - 基于bs架构的跨终端三维数字地球交互方法 - Google Patents

Abstract

基于BS架构的跨终端三维数字地球交互方法，能够自动检测终端形态和浏览器版本，根据屏幕分辨率进行响应式布局和自适应界面控件生成，并根据终端形态进行自适应交互事件绑定和生成。通过本发明提出的方法，能够实现一套系统在桌面端和移动端浏览器上均能正常显示，便捷操作，从而实现跨终端平台访问，减少系统开发成本，提高用户体验。

Description

基于BS架构的跨终端三维数字地球交互方法

技术领域

本发明涉及地理信息可视化领域，特别是一种基于B S架构的跨终端三维数字地球交互方法。

背景技术

随着遥感探测手段的提高，以及计算机图形学和虚拟仿真技术的发展，由于沉浸度高、真实性强等优势，三维地理信息系统成为地理信息系统的重要发展趋势，是进行全方位、多层次、多要素时空分析的基础。特别是自1998年时任美国副总统戈尔提出“数字地球”的概念以来，通过三维球体形式进行多源海量时空数据的组织和展现成为地理信息系统方向的研究热点。国内外涌现出了像ArcGIS Explore、Google Earth、Virtual Earth、WorldWind、SkyLine、EV Globe、GeoGlobe、GeoBeans等三维地理信息系统和数字地球平台。

另一方面，随着Internet技术的不断发展，特别是万维网的出现和普及，在网络上发布空间数据，为用户提供空间数据浏览、查询和分析等地理信息服务已成为新的客户需要和地理信息系统发展的必然趋势。地理信息系统通过Internet技术使功能得以扩展，从面向个人、部门发展为面向社会和公众，从而真正成为一种大众化的信息服务工具。当前，基于Internet的地理信息系统主要以二维为主，三维数字地球则主要通过Active X或Flash插件技术实现，受限于客户端平台和浏览器类型。

随着无线通信技术的快速发展，使无线通信技术、Internet技术与地理信息技术的结合实现，形成一种新的技术——无线定位技术，随之也衍生出了一种新的服务，即基于位置的服务，是目前移动地理信息系统的主要应用方向。移动地理信息系统目前也仍以二维地图服务为主流，一些三维数字地球主要通过APP的形式进行实现，这种实现方式受限于移动终端。

随着WebGL技术的推出和终端渲染计算能力的提升，近两年，基于浏览器原生渲染能力的三维显示技术被提出，能够实现跨浏览器、跨终端的访问应用，减少多版本带来的开发成本。不同于桌面浏览器主要通过鼠标键盘的交互方式，移动端交互方式主要体现为单点触摸、多点触摸、手势识别、重力感应等。另外，桌面和移动端的显示分辨率也往往不同。而这些差异会给系统开发和用户体验方面带来干扰。因此，在基于B/S架构的跨终端三维数字地球应用中，自适应交互技术是非常重要的。

发明内容

本发明要解决的技术问题是针对上述现有技术的不足，而提供一种基于BS架构的跨终端三维数字地球交互方法，该基于BS架构的跨终端三维数字地球交互方法能屏蔽桌面端和移动端在屏幕分辨率、主要操作方式和浏览器支持WebGL程度等方面差异给系统开发和用户体验方面带来的干扰；能够根据终端形态自适应生成界面布局和交互方式，从而实现一套系统在桌面端和移动端的浏览器上都能正常运行。

为解决上述技术问题，本发明采用的技术方案是：

一种基于BS架构的跨终端三维数字地球交互方法，包括如下步骤。

步骤1，浏览器版本验证：在系统构建时，需先进行浏览器版本验证，浏览器版本验证包括如下步骤。

步骤1a，获得浏览器的UA标识：通过浏览器接口获得UA标识，UA标识是指UserAgent，也即用户代理。

步骤1b，终端型号判断：根据步骤1a获得的UA标识，判断并获得终端型号。

步骤1c，浏览器版本判断：根据步骤1a获得的UA标识，判断并获得浏览器版本。

步骤1d，WebGL兼容程度判断：将步骤1b获得的终端型号和步骤1c获得的浏览器版本，与WebGL中内置的终端型号及浏览器版本对照表，进行比对与判断其与WebGL的兼容程度；

1)当判定结果为完全兼容时，对三维数字地球平台进行完全加载；完全加载的内容主要包括当前显示配置下三维数字地球中全部图层、特效，界面框架中全部界面控件元素。

2)当判定结果为部分兼容时，则加载三维数字地球平台中能够被支持的显示要素，并弹出可能不兼容方面的提示。

3)当判定结果为完全不兼容时，弹出浏览器版本不兼容提示，禁止三维数字地球平台的创建，并给出推荐浏览器版本下载地址。

步骤2，响应式布局：根据屏幕分别率进行响应式布局，自适应生成各类界面控件；响应式布局方法，具体包括如下步骤。

步骤2a，获取终端屏幕分辨率，终端屏幕分辨率包括屏幕宽度信息，当屏幕宽高比大于等于3/4时，视为横屏模式，否则视为竖屏模式。

步骤2b，计算布局位置：根据步骤2a获取的终端屏幕分辨率，计算三维数字地球平台的视图和操作界面控件的布局位置；横屏模式下，采用侧边栏导航布局，竖屏模式下，采用底部导航布局。

步骤2c，计算控件尺寸：根据步骤2a获取的屏幕分辨率，计算三维数字地球凭条的视图和操作界面控件的尺寸大小；横屏模式下，导航条高度为100％，导航条宽度范围为60-160px；竖屏模式下，导航条宽度为100％，导航条高度不超过100px。

步骤2d，计算字体大小：根据步骤2a获取的屏幕分辨率，计算视图内和操作界面控件内的字体大小，字体大小范围在10-24px。

步骤2e，图片/视频优化：根据步骤2a获取的屏幕分辨率，对要显示的图片资源或视频资源进行尺寸和分辨率优化；图片及视频均采用自适应模式，保留原始宽高比的同时，最大宽度及高度均不超过80％。

步骤2f，自适应界面控件生成：根据步骤2b至步骤2e得到的布局位置、控件尺寸、字体大小和优化后的图片/视频，自适应生成各类界面控件。

步骤3，自适应交互：自适应交互的方法，具体包括如下步骤。

步骤3a，终端交互能力判断：根据步骤1b获取的终端型号，对终端支持的交互能力进行判断。交互能力判断的主要内容是其是否支持触屏操作。

步骤3b，生成鼠标键盘事件机制：步骤3a中，当终端支持的交互能力判断为不支持触屏的终端时，则生成鼠标键盘事件机制。

步骤3c，生成触屏事件机制：步骤3a中，当终端支持的交互能力判断为支持触屏的终端时，则生成触屏事件机制。

所述步骤3b中，鼠标键盘事件机制的生产方法，包括如下步骤：

1)生成界面控件事件机制，与鼠标左键单击事件绑定。

2)生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件。

其中：拖动事件机制与鼠标左键拖拽事件绑定；俯仰事件机制与鼠标右键拖拽事件绑定；缩放事件机制与滚轴事件绑定。

所述步骤3c中，触屏事件机制的生成方法包括如下步骤：

1)生成界面控件事件机制，与单点单击事件绑定。

2)生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件。

其中：拖动事件机制与单点移动事件绑定；俯仰事件机制与双点同时上下滑动事件绑定；缩放事件机制与双点同时反向滑动事件绑定。

所述步骤1a中，UA标识指的是一个特殊字符串头，能使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言和浏览器插件信息。

所述步骤1b中，终端型号包括桌面端/移动端类型、移动端的CPU、移动端的操作系统类型以及移动端的操作系统版本。

所述步骤1c中，浏览器版本包括浏览器类型、版本、渲染引擎、语言和插件信息。

所述步骤2e中，图片/视频优化包括将图片/视频分为大、中、小三种尺寸情况进行处理，处理方法包括对图片/视频尺寸进行缩放和对分辨率进行压缩。

本发明采用上述方法后，具有如下有益效果：

1.通过本发明提出的浏览器版本验证操作，能够自动检测终端形态和浏览器版本，从而根据其对WebGL的兼容程度进行选择性加载和友好用户提示。

2.通过本发明中提出的响应式布局和自适应界面控件生成操作，能够根据屏幕分别率自动选择合适的布局位置、控件大小、字体大小、图片和视频资源大小等，实现不同屏幕分辨率下都能正常显示。

3.通过本发明中提出的自适应交互操作，能够根据终端支持的交互方式对界面控件操作和三维数字地球漫游操作自动绑定合适的交互事件，实现桌面端和移动端均能便捷交互。

4.通过本发明提出的一种基于B/S架构的跨终端三维数字地球交互方法，能够实现一套系统在桌面端和移动端浏览器均能正常显示，无缝交互，从而实现跨终端平台访问，减少系统开发成本，提高用户体验。

附图说明

图1显示了本发明一种基于BS架构的跨终端三维数字地球交互方法的结构示意图。

图2显示了本发明步骤1浏览器版本验证操作流程图。

图3显示了本发明步骤2响应式布局操作流程图。

图4显示了本发明步骤3自适应交互操作图。

具体实施方式

下面结合附图和具体较佳实施方式对本发明作进一步详细的说明。

如图1所示，一种基于BS架构的跨终端三维数字地球交互方法，包括如下步骤。

步骤1，浏览器版本验证：在系统构建时，需先进行浏览器版本验证。

如图2所示，浏览器版本验证包括如下步骤。

步骤1a，获得浏览器的UA标识：通过浏览器接口获得UA标识，UA标识是指UserAgent，也即用户代理。UA标识指的是一个特殊字符串头，能使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言和浏览器插件等信息。

步骤1b，终端型号判断：根据步骤1a获得的UA标识，判断并获得终端型号。

上述终端型号主要包括桌面端/移动端类型、移动端的CPU、移动端的操作系统类型以及移动端的操作系统版本等。

步骤1c，浏览器版本判断：根据步骤1a获得的UA标识，判断并获得浏览器版本。

上述浏览器版本主要包括浏览器类型、版本、渲染引擎、语言和插件信息等。

步骤1d，WebGL兼容程度判断：将步骤1b获得的终端型号和步骤1c获得的浏览器版本，与WebGL中内置的终端型号及浏览器版本对照表，进行比对与判断其与WebGL的兼容程度。其中，终端型号及浏览器版本对照表需定期更新，但旧版本的终端型号及浏览器版本对照表依然适用。

1)当判定结果为完全兼容时，对三维数字地球平台进行完全加载；完全加载的内容主要包括当前显示配置下三维数字地球中全部图层、特效，界面框架中全部界面控件元素。

2)当判定结果为部分兼容时，则加载三维数字地球平台中能够被支持的显示要素，并弹出可能不兼容方面的提示。

3)当判定结果为完全不兼容时，弹出浏览器版本不兼容提示，禁止三维数字地球平台的创建，并给出推荐浏览器版本下载地址。

不同终端类型和浏览器版本对WebGL的兼容度情况如下表所示：

步骤2，响应式布局：根据屏幕分别率进行响应式布局，自适应生成各类界面控件。

如图3所示，响应式布局方法，具体包括如下步骤。

步骤2a，获取终端屏幕分辨率，终端屏幕分辨率包括屏幕宽度信息，当屏幕宽高比大于等于3/4时，视为横屏模式，否则视为竖屏模式。

步骤2b，计算布局位置：根据步骤2a获取的终端屏幕分辨率，计算三维数字地球平台的视图和操作界面控件的布局位置。

上述布局位置主要由各控件相对于屏幕边界的绝对位置、彼此之间的相对位置等因素决定，通常，横屏模式下，采用侧边栏导航布局，竖屏模式下，采用底部导航布局。

步骤2c，计算控件尺寸：根据步骤2a获取的屏幕分辨率，计算三维数字地球凭条的视图和操作界面控件的尺寸大小。

上述视图和操作界面控件大小主要由屏幕尺寸和各控件相对比例等因素决定。横屏模式下，导航条高度为100％，导航条宽度范围为60-160px，导航条最优宽度为120px；竖屏模式下，导航条宽度为100％，导航条高度不超过100px；导航条最优高度为60px。

步骤2d，计算字体大小：根据步骤2a获取的屏幕分辨率，计算视图内和操作界面控件内的字体大小。

字体大小主要由控件大小和屏幕分辨率本身决定，字体大小范围在10-24px，最优字体大小为16px。

步骤2e，图片/视频优化：根据步骤2a获取的屏幕分辨率，对要显示的图片资源或视频资源进行尺寸和分辨率优化。

图片及视频均采用自适应模式，优化包括将图片/视频分为大、中、小三种尺寸情况进行处理，处理方法主要包括对图片/视频尺寸进行缩放和对分辨率进行压缩等。在保留原始宽高比的同时，最大宽度及高度均不超过80％，宽度及高度均优选为原始宽度及高度的60％。

步骤2f，自适应界面控件生成：根据步骤2b至步骤2e得到的布局位置、控件尺寸、字体大小和优化后的图片/视频等，自适应生成各类界面控件。

步骤3，自适应交互。

如图4所示，自适应交互的方法，具体包括如下步骤。

步骤3a，终端交互能力判断：根据步骤1b获取的终端型号，对终端支持的交互能力进行判断。

步骤3b，生成鼠标键盘事件机制：步骤3a中，当终端支持的交互能力判断为不支持触屏的终端时，则生成鼠标键盘事件机制。

上述鼠标键盘事件机制的生产方法，包括如下步骤：

1)生成界面控件事件机制，与鼠标左键单击事件绑定。

2)生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件。

其中：拖动事件机制与鼠标左键拖拽事件绑定；俯仰事件机制与鼠标右键拖拽事件绑定；缩放事件机制与滚轴事件绑定。

对不支持触屏的终端，生成鼠标键盘事件机制，并实现平台操作与交互事件的绑定，具体如下表所示：

步骤3c，生成触屏事件机制：步骤3a中，当终端支持的交互能力判断为支持触屏的终端时，则生成触屏事件机制。

上述触屏事件机制的生成方法包括如下步骤：

1)生成界面控件事件机制，与单点单击事件绑定。

2)生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件。

其中：拖动事件机制与单点移动事件绑定；俯仰事件机制与双点同时上下滑动事件绑定；缩放事件机制与双点同时反向滑动事件绑定。

对支持触屏的终端，生成触屏事件机制，并实现平台操作与交互事件的绑定，具体如下表所示：

以上详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种等同变换，这些等同变换均属于本发明的保护范围。

Claims (7)

1.一种基于BS架构的跨终端三维数字地球交互方法，其特征在于：包括如下步骤：

步骤1，浏览器版本验证：在系统构建时，需先进行浏览器版本验证，浏览器版本验证包括如下步骤：

步骤1a，获得浏览器的UA标识：通过浏览器接口获得UA标识，UA标识是指User Agent，也即用户代理；

步骤1b，终端型号判断：根据步骤1a获得的UA标识，判断并获得终端型号；

步骤1c，浏览器版本判断：根据步骤1a获得的UA标识，判断并获得浏览器版本；

步骤1d，WebGL兼容程度判断：将步骤1b获得的终端型号和步骤1c获得的浏览器版本，与WebGL中内置的终端型号及浏览器版本对照表，进行比对与判断其与WebGL的兼容程度；

1）当判定结果为完全兼容时，对三维数字地球平台进行完全加载；完全加载的内容包括当前显示配置下三维数字地球中全部图层、特效，界面框架中全部界面控件元素；

2）当判定结果为部分兼容时，则加载三维数字地球平台中能够被支持的显示要素，并弹出可能不兼容方面的提示；

3）当判定结果为完全不兼容时，弹出浏览器版本不兼容提示，禁止三维数字地球平台的创建，并给出推荐浏览器版本下载地址；

步骤2，响应式布局：根据屏幕分别率进行响应式布局，自适应生成各类界面控件；响应式布局方法，具体包括如下步骤：

步骤2a，获取终端屏幕分辨率，终端屏幕分辨率包括屏幕宽度信息，当屏幕宽高比大于等于3/4时，视为横屏模式，否则视为竖屏模式；

步骤2b，计算布局位置：根据步骤2a获取的终端屏幕分辨率，计算三维数字地球平台的视图和操作界面控件的布局位置；横屏模式下，采用侧边栏导航布局，竖屏模式下，采用底部导航布局；

步骤2c，计算控件尺寸：根据步骤2a获取的屏幕分辨率，计算三维数字地球凭条的视图和操作界面控件的尺寸大小；横屏模式下，导航条高度为100%，导航条宽度范围为60-160px；竖屏模式下，导航条宽度为100%，导航条高度不超过100px；

步骤2d，计算字体大小：根据步骤2a获取的屏幕分辨率，计算视图内和操作界面控件内的字体大小，字体大小范围在10-24px；

步骤2e，图片/视频优化：根据步骤2a获取的屏幕分辨率，对要显示的图片资源或视频资源进行尺寸和分辨率优化；图片及视频均采用自适应模式，保留原始宽高比的同时，最大宽度及高度均不超过80%；

步骤2f，自适应界面控件生成：根据步骤2b至步骤2e得到的布局位置、控件尺寸、字体大小和优化后的图片/视频，自适应生成各类界面控件；

步骤3，自适应交互：自适应交互的方法，具体包括如下步骤：

步骤3a，终端交互能力判断：根据步骤1b获取的终端型号，对终端支持的交互能力进行判断；

步骤3b，生成鼠标键盘事件机制：步骤3a中，当终端支持的交互能力判断为不支持触屏的终端时，则生成鼠标键盘事件机制；

步骤3c，生成触屏事件机制：步骤3a中，当终端支持的交互能力判断为支持触屏的终端时，则生成触屏事件机制。

2.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤3b中，鼠标键盘事件机制的生产方法，包括如下步骤：

1）生成界面控件事件机制，与鼠标左键单击事件绑定；

2）生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件；

其中：拖动事件机制与鼠标左键拖拽事件绑定；俯仰事件机制与鼠标右键拖拽事件绑定；缩放事件机制与滚轴事件绑定。

3.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤3c中，触屏事件机制的生成方法包括如下步骤：

1）生成界面控件事件机制，与单点单击事件绑定；

2）生成三维漫游事件，三维漫游事件包括拖动事件、俯仰事件和缩放事件；

其中：拖动事件机制与单点移动事件绑定；俯仰事件机制与双点同时上下滑动事件绑定；缩放事件机制与双点同时反向滑动事件绑定。

4.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤1a中，UA标识指的是一个特殊字符串头，能使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言和浏览器插件信息。

5.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤1b中，终端型号包括桌面端/移动端类型、移动端的CPU、移动端的操作系统类型以及移动端的操作系统版本。

6.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤1c中，浏览器版本包括浏览器类型、版本、渲染引擎、语言和插件信息。

7.根据权利要求1所述的基于BS架构的跨终端三维数字地球交互方法，其特征在于：所述步骤2e中，图片/视频优化包括将图片/视频分为大、中、小三种尺寸情况进行处理，处理方法包括对图片/视频尺寸进行缩放和对分辨率进行压缩。