遥感数据可视化界面交互方法、装置及电子设备制造方法及图纸

本申请提供一种遥感数据可视化界面交互方法、装置及电子设备，用于改善对网页进行布局的空间利用率较低的问题。该方法包括：判断网页页面的窗口中是否出现靠近堆叠区域的滑动操作，窗口包括堆叠区域；若是，则控制展示区域向靠近堆叠区域进行移动，控制展示区域中的多个数据模块跟随展示区域向靠近堆叠区域进行移动，并将展示区域中的多个数据模块依次移动到堆叠区域，且停留在堆叠区域；数据模块用于展示文字、图片和/或视频的数据信息；若窗口中出现远离堆叠区域的滑动操作，则控制展示区域向远离堆叠区域进行移动，并控制堆叠区域中的多个数据模块依次跟随展示区域向远离堆叠区域进行移动。区域进行移动。区域进行移动。

【技术实现步骤摘要】
遥感数据可视化界面交互方法、装置及电子设备


[0001]本申请涉及人机交互、图形用户界面（Graphical User Interface，GUI）交互和数据可视化的
，具体而言，涉及一种遥感数据可视化界面交互方法、装置及电子设备。

技术介绍

[0002]遥感影像（Remote Sensing Image）是指记录各种地物电磁波大小的胶片或照片，主要分为航空像片和卫星相片。
[0003]超文本标记语言（Hyper Text Markup Language，HTML），是一种标准通用标记语言，包括一系列标签。HTML通过标签将网络上的文档格式统一，使分散的因特网（Internet）资源连接为一个逻辑整体，HTML通过标记符号来标记要显示的网页中的各个部分。
[0004]目前的横向布局、纵向布局、流式布局、瀑布流布局等等自动布局方法存在很多问题，其中，横向布局是依赖于HTML中的行内元素标签实现的自动布局，此处的行内元素标签例如：img标签和span标签等；纵向布局是依赖于HTML中的块级元素标签实现的自动布局，此处的块级元素标签例如：div标签和li标签等，而流式布局和瀑布流布局是依赖于层叠样式表（Cascading Style Sheets，CSS）的浮动样式实现的自动布局。上述的这些自动布局方法大都依赖于浏览器提供的某些特定的层叠样式表样式来实现自动布局，存在滚动后超出范围将被切割导致不美观、布局对象不够紧凑或者存在空白位置等等问题，也就是说，使用目前的自动布局方法对网页进行布局的空间利用率较低。

技术实现思路

[0005]本申请实施例的目的在于提供一种遥感数据可视化界面交互方法、装置及电子设备，用于改善对网页进行布局的空间利用率较低的问题。
[0006]本申请实施例提供了一种遥感数据可视化界面交互方法，包括：判断网页页面的窗口中是否出现靠近堆叠区域的滑动操作，窗口包括堆叠区域；若是，则控制展示区域向靠近堆叠区域进行移动，控制展示区域中的多个数据模块跟随展示区域向靠近堆叠区域进行移动，并将展示区域中的多个数据模块依次移动到堆叠区域，且停留在堆叠区域；数据模块用于展示文字、图片和/或视频的数据信息；若窗口中出现远离堆叠区域的滑动操作，则控制展示区域向远离堆叠区域进行移动，并控制堆叠区域中的多个数据模块依次跟随展示区域向远离堆叠区域进行移动。在上述的实现过程中，通过网页页面的窗口中出现靠近堆叠区域的滑动操作时，就控制展示区域中的多个数据模块跟随展示区域向靠近堆叠区域进行移动，并依次移动到堆叠区域，且停留在堆叠区域；其中，在控制展示区域中的多个数据模块依次移动到堆叠区域和/或控制堆叠区域中的多个数据模块依次跟随展示区域向远离堆叠区域进行移动的过程中，同时逐渐改变数据模块的尺寸和/或不透明度。也就是说，因为窗口的尺寸限制，在窗口范围可展示的数据模块数量有限，从而当需要查看未被展示的数据模块时，可通过滑动操作直接将展示区域中的数据模块依次移动到堆叠区域，从而使得
展示区域中之前未在窗口中展示的数据模块在窗口的可视范围内进行展示，且展示区域中的多个数据模块在滚动展示之后停留在堆叠区域，而不是被切割，有效地提高了对网页进行布局的空间利用率。
[0007]可选地，在本申请实施例中，还包括：获取展示区域的原始位置，以及展示区域中的当前数据模块与堆叠区域的原始距离Y
i
，Y
i
大于或等于0；其中，展示区域的原始位置是未出现任何滑动操作前的位置，展示区域中的当前数据模块与堆叠区域的原始距离是未出现任何滑动操作前的距离；确定滑动操作过程展示区域相对展示区域的原始位置所移动的相对距离变量S，S大于或等于0，展示区域的原始位置是未出现任何滑动操作前的位置；根据相对距离变量S与原始距离Y
i
之间的关系，改变当前数据模块的尺寸和/或不透明度。在上述的实现过程中，通过根据相对距离变量S与原始距离Y
i
之间的关系，改变当前数据模块的尺寸和/或不透明度，从而动态地表示出当前数据模块正在变化的过程，有效地避免了滚动后超出范围将被切割导致不美观的问题。
[0008]可选地，在本申请实施例中，还包括：当S=Y
i
时，若窗口中出现靠近堆叠区域的滑动操作，则控制当前数据模块停留在堆叠区域，不再跟随展示区域继续移动；当S=Y
i
时，若窗口中出现远离堆叠区域的滑动操作，则控制堆叠区域中的当前数据模块跟随展示区域向远离堆叠区域进行移动。在上述的实现过程中，通过S=Y
i
且窗口中出现靠近堆叠区域的滑动操作来判断是否让堆叠区域中的当前数据模块是否继续移动，有效地避免了滚动后超出范围将被切割导致不美观的问题。
[0009]可选地，在本申请实施例中，根据相对距离变量S与原始距离Y
i
之间的关系，改变当前数据模块的尺寸和/或不透明度，包括：若S<Y
i
时，则控制当前数据模块的不透明度变为100%；若Y
i
≤S≤(Y
i
+H)时，则根据预设不透明度调整方式改变当前数据模块的不透明度；若S>(Y
i
+H)时，则控制当前数据模块的不透明度变为0；其中，H表示当前数据模块的移动方向上所占尺寸，H大于0。
[0010]可选地，在本申请实施例中，根据预设不透明度调整方式改变当前数据模块的不透明度，包括：根据公式anime1=（H+Y
i
‑
S）/H计算当前数据模块随着滑动操作变化的不透明度动态比例参数；其中，anime1表示当前数据模块随着滑动操作变化的不透明度动态比例参数；根据不透明度动态比例参数改变当前数据模块的不透明度，其中，改变后的当前数据模块的不透明度等于当前数据模块的原始不透明度乘以当前数据模块的不透明度动态比例参数，当前数据模块的原始不透明度为100%。
[0011]可选地，在本申请实施例中，根据相对距离变量S与原始距离Y
i
之间的关系，改变当前数据模块的尺寸和/或不透明度，包括：若S＜Y
i
时，则控制当前数据模块的尺寸为原始预设尺寸；若Y
i
≤S≤(Y
i
+H)时，则根据预设尺寸调整方式改变当前数据模块的尺寸；若S>(Y
i
+H)时，则控制当前数据模块的尺寸与当S=(Y
i
+H)时改变后的当前数据模块的尺寸一致；其中，H表示当前数据模块的移动方向上所占尺寸，H大于0。
[0012]可选地，在本申请实施例中，根据预设尺寸调整方式改变当前数据模块的尺寸，包括：根据公式anime2=（H+Y
i
‑
S）/H计算当前数据模块随着滑动操作变化的尺寸动态比例参数；其中，anime2表示当前数据模块随着滑动操作变化的尺寸动态比例参数；根据当前数据模块随着滑动操作变化的尺寸动态比例参数改变当前数据模块的尺寸，其本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种遥感数据可视化界面交互方法，其特征在于，包括：判断网页页面的窗口中是否出现靠近堆叠区域的滑动操作，所述窗口包括所述堆叠区域；若是，则控制展示区域向靠近所述堆叠区域进行移动，控制所述展示区域中的多个数据模块跟随所述展示区域向靠近所述堆叠区域进行移动，并将所述展示区域中的多个数据模块依次移动到所述堆叠区域，且停留在所述堆叠区域；所述数据模块用于展示文字、图片和/或视频的数据信息；若所述窗口中出现远离所述堆叠区域的滑动操作，则控制所述展示区域向远离所述堆叠区域进行移动，并控制所述堆叠区域中的多个数据模块依次跟随所述展示区域向远离所述堆叠区域进行移动；其中，在控制所述展示区域中的多个数据模块依次移动到所述堆叠区域和/或控制所述堆叠区域中的多个数据模块依次跟随所述展示区域向远离所述堆叠区域进行移动的过程中，同时逐渐改变所述数据模块的尺寸和/或不透明度。2.根据权利要求1所述的遥感数据可视化界面交互方法，其特征在于，还包括：获取所述展示区域的原始位置，以及所述展示区域中的当前数据模块与所述堆叠区域的原始距离Y
i
，Y
i
大于或等于0；其中，所述展示区域的原始位置是未出现任何滑动操作前的位置，所述展示区域中的当前数据模块与所述堆叠区域的原始距离是未出现任何滑动操作前的距离；确定所述滑动操作过程所述展示区域相对所述展示区域的原始位置所移动的相对距离变量S，S大于或等于0，所述展示区域的原始位置是未出现任何滑动操作前的位置；根据所述相对距离变量S与所述原始距离Y
i
之间的关系，改变所述当前数据模块的尺寸和/或不透明度。3.根据权利要求2所述的遥感数据可视化界面交互方法，其特征在于，还包括：当S=Y
i
时，若所述窗口中出现靠近所述堆叠区域的滑动操作，则控制所述当前数据模块停留在所述堆叠区域，不再跟随所述展示区域继续移动；当S=Y
i
时，若所述窗口中出现远离所述堆叠区域的滑动操作，则控制所述堆叠区域中的当前数据模块跟随所述展示区域向远离所述堆叠区域进行移动。4.根据权利要求2所述的遥感数据可视化界面交互方法，其特征在于，所述根据所述相对距离变量S与所述原始距离Y
i
之间的关系，改变所述当前数据模块的尺寸和/或不透明度，包括：若S<Y
i
时，则控制所述当前数据模块的不透明度变为100%；若Y
i
≤S≤(Y
i
+H)时，则根据预设不透明度调整方式改变所述当前数据模块的不透明度；若S>(Y
i
+H)时，则控制所述当前数据模块的不透明度变为0；其中，H表示所述当前数据模块的移动方向上所占尺寸，H大于0。5.根据权利要求4所述的遥感数据可视化界面交互方法，其特征在于，所述根据预设不透明度调整方式改变所述当前数据模块的不透明度，包括：根据公式anime1=（H+Y
i
‑
S）/H计算所述当前数据模块随着滑动操作变化的不透明度动态比例参数；其中，anime1表示所述当前数据模块随着滑动操作变化的不透明度动态比例
参数；根据所述不透明度动态比例参数改变所述当前数据模块的不透明度，其中，改变后的所述当前数据模块的不透明度等于所述当前数据模块的原始不透明度乘以所述当前数据模块的不透明度动态比例参数，所述当前...

【专利技术属性】
技术研发人员：郑博，熊文轩，冉续，
申请(专利权)人：成都国星宇航科技有限公司，
类型：发明
国别省市：