[发明专利]基于BS架构的跨终端三维数字地球交互方法

摘要

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

主权项

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中，当终端支持的交互能力判断为支持触屏的终端时，则生成触屏事件机制。