CN110851626A - 一种基于图层布局的时空数据可视化分析方法与系统 - Google Patents
一种基于图层布局的时空数据可视化分析方法与系统 Download PDFInfo
- Publication number
- CN110851626A CN110851626A CN201911072052.9A CN201911072052A CN110851626A CN 110851626 A CN110851626 A CN 110851626A CN 201911072052 A CN201911072052 A CN 201911072052A CN 110851626 A CN110851626 A CN 110851626A
- Authority
- CN
- China
- Prior art keywords
- view model
- data
- view
- layer
- interface
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
- G06F16/44—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/23—Updating
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/27—Replication, distribution or synchronisation of data between databases or within a distributed database system; Distributed database system architectures therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Computing Systems (AREA)
- Multimedia (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基于图层布局的时空数据可视化分析方法与系统,包括多媒体上传与管理单元、视图模型创建单元、视图模型管理单元、可视化界面管理单元、数据库管理单元。本发明实现了可视化界面与视图解耦,所有视图模型均能够以实例形式在不同可视化界面或同一可视化界面的不同图层进行共享与复用,可视化界面以图层形式进行单个或多个视图模型实例的布局,用户可根据实际需求对各视图模型实例的联动事件进行订阅,自定义多种联动组合效果。将组合交互网络、布局图层管理控制与数据自动更新结合起来进行时空数据可视化分析,为面向不同业务主题的可视化分析提供一种图层级交互分析方式,显著提高时空可视化界面的使用效率与综合呈现能力。
Description
技术领域
本发明属于数据可视化分析技术领域,具体地,涉及到一种基于图层布局的时空数据可视化分析方法与系统。
背景技术
随着物联网、云计算、大数据等技术的发展,遍布城市各角落的传感器网络每时每刻都在获取、传输极其大量的数据,这些数据不仅数量庞大,而且具有多源、多尺度、非线性、变更快速的特点。同时,随着智慧城市建设的推进,数据部门壁垒与行业壁垒逐渐打通,数据共享已成为大势所趋。在这样的背景下,各业务系统数据量的不断增加,传统的文字、电子表格、图表等数据表现形式难以充分表达海量数据隐含的信息及其内在联系,数据可视化分析技术逐渐流行起来。数据可视化分析是将不同表现形式的数据图像经过排布组合形成综合展示界面,通过可视的、交互的展示方式,明确、有效地传达信息,帮助使用者及时发现问题、决策并推进行动。市面上的数据可视化分析系统通常面向特定业务进行主题定制,可视化界面一经完成,就只能面向特定的业务场景,不便于对界面进行重复使用,并且由于交互配置通常基于视图,用户无法对可视化视图间的联动事件进行灵活配置,可视化分析效果受限。具体而言,现有可视化分析系统通常具有以下问题:
1.面向业务定制化开发,视图与可视化界面强耦合关联,不支持将视图在不同的可视化界面进行复用并独立编辑,已完成视图的利用率不高;
2.界面间切换通常采用多界面展示或轮播切换展示方式,不支持界面局部共享或局部切换,已完成界面的利用率不高;
3.联动配置不够灵活,不能基于交互规则网络进行视图与交互事件的自定义组合配置与联动。
发明内容
本发明的目的是为了解决现有技术中存在的问题,而提出的一种基于图层布局的时空数据可视化分析方法与系统,实现了可视化视图复用与共享,能够满足可视化界面局部内容切换与交互组合配置需求,提高了视图与界面的使用率,提升了可视化分析灵活度。
本发明采用的技术方案,提供了一种基于图层布局的时空数据可视化分析方法,包括以下步骤:
一种基于图层布局的时空数据可视化分析方法,其特征在于,包括:
S1.进入视图模型渲染引擎,根据用户与浏览器的交互数据生成视图模型,通过接口将视图模型的元数据保存至视图模型数据库;
S2.进入界面渲染引擎,通过初始化界面选项生成可视化布局界面,通过接口从视图模型数据库获取视图模型信息,形成视图模型列表;
S3.获取用户与图层管理面板的交互数据,在获取图层焦点基础上,进行视图模型的实例生成与布局;
S4.分别获取界面与视图模型实例焦点,通过界面配置面板与视图模型实例配置面板获取定时更新设置数据;
S5.预定义视图模型间的联动事件匹配关系,用户通过交互操作进行基于联动事件的视图模型实例间的联动配置与预览;
S6.通过人机交互方式实现时空数据可视化界面的图层切换与关联分析。
作为优选,所述步骤S1具体包括:
S101.获取用户选择数据源与视图模型类型的交互数据,根据交互数据生成视图模型渲染引擎,其中,视图模型渲染引擎用于对视图模型进行数据配置与编辑、视图可视化效果选择与实例预览、视图样式配置与预览、视图元信息生成;
S102.将配置数据作为输入值导入视图模型,读取样式默认值并生成视图模型预览效果,如果用户与配置界面进行交互,根据样式配置数据进行视图模型预览与更新;
S103.读取截图工具截取的视图模型边界信息,将边界范围内的视图模型效果以base64的方式生成截图图片并预览显示,保存时以最终的截图图片作为视图模型缩略图;
S104.用户触发保存操作时,生成唯一随机数作为视图模型的ID,通过接口将数据信息、模型ID、名称、缩略图与样式信息整合成视图模型元数据保存至视图模型数据库。
作为优选,所述步骤S2具体包括:
S201.从可视化界面数据库获取最新的可视化界面列表,可通过交互方式实现可视化界面增、删、改、查操作,用户触发新建操作时进入可视化界面编辑器,同时初始化界面并创建默认图层,初始化内容包括界面默认分辨率、视图模型实例默认分辨率、母版以及背景等基本信息,所有初始化信息可在初始化完成后通过界面设置选项进行编辑;
S202.从视图模型数据库获取最新的视图模型列表,将视图模型按照类别进行区分,显示内容为视图模型缩略图与视图模型名称的组合,通过拖拽方式复用视图模型,进行视图模型的实例生成与布局。
作为优选,所述步骤S3具体包括:
S301.根据用户在图层面板的交互数据,实现图层新建、删除、显示/隐藏、移动等操作;
S302.获取图层焦点,从视图模型列表选取视图模型进行实例化,对视图模型实例赋予唯一的实例ID,并根据交互数据返回的视图模型实例的位置和尺寸实时调整布局,实例ID用于区分由视图模型生成的不同实例,同一视图模型生成的实例对接入数据信息进行共享,但布局信息、样式信息、联动设置信息、定时更新设置信息互不影响;
S303.获取视图模型实例焦点,配置面板显示视图模型实例内部样式、外部样式、数据以及交互选项,视图模型实例的内部样式为对应视图模型的样式配置数据,视图模型实例的外部样式包括视图模型实例的外边距、边框、背景等数据;
S304.重复步骤S301-S303;
S305.获取可视化界面图层层次信息、各图层的显示/隐藏信息以及各图层上放置的视图模型实例布局信息,每一图层上放置一个或多个视图模型实例,同一绝对位置的视图模型实例可通过图层的顺序层叠形成合成效果。
作为优选,所述步骤S5具体包括:
S501.预定义各类视图模型的可发出联动事件与可接收联动事件以形成联动网络,联动网络的每一条连线的两端连接着联动事件的发出方视图模型类型与接收方视图模型类型;
S502.获取视图模型实例焦点,在配置面板的交互页面渲染联动设置选项,联动设置的内容以当前视图模型实例作为联动发出方视图,根据预定义的联动网络计算出当前视图模型实例的所有可发出联动事件以及各联动事件在当前可视化界面范围内的所有可接收视图模型实例;
S503.实时获取用户与联动选项的交互数据,根据交互数据的返回结果在联动事件列表中对当前联动发出方视图模型实例进行联动事件订阅与取消,已订阅的联动事件可以在可视化界面通过预定义的联动事件触发;
一种基于图层布局的时空数据可视化分析系统,包括:
多媒体上传与管理单元(1):用于上传与管理外部多媒体数据;
视图模型创建单元(2):用于视图模型创建、样式配置与预览;
视图模型管理单元(3):用于管理视图模型;
可视化界面管理单元(4):用于创建与管理可视化界面,进行可视化界面预览及交互分析;
数据库管理单元(5):用于存储与管理多媒体数据、视图模型数据、可视化界面数据。
作为优选,多媒体上传与管理单元(1)包括:
多媒体数据管理模块:从数据库管理单元(5)获取最新的多媒体数据,多媒体数据管理模块(6)对多媒体数据的增加、删除、重命名操作将同步更新至数据库管理单元(5);
多媒体数据上传模块:进行外部多媒体数据上传。
作为优选,所述视图模型创建单元(2)包括数据表导入模块、视图模型渲染引擎,所述视图模型渲染引擎包括:
视图模型数据设置模块:设置视图模型数据;
视图模型类型选择模块:根据基础视图、地图视图、表格视图、无数据源视图四种类型提供不同的模型可视化类型;
视图模型预览模块:预览显示视图效果;
视图模型样式编辑模块:编辑视图模型样式,进行视图模型预览更新;
缩略图截图编辑模块:进行视图模型自定义截图与编辑,将确定的截图预览效果作为视图模型缩略图效果;
视图模型保存模块:生成唯一随机数作为当前视图模型ID,通过接口将视图模型的名称、ID、数据信息、样式信息与缩略图上传至数据库管理单元(5)。
作为优选,所述视图模型管理单元(3)包括:已创建视图模型模块,已创建视图模型模块包括已创建视图模型列表、视图模型搜索与排序模块,其中,已创建视图模型列表通过接口获取存储在数据库管理单元(5)上的最新视图模型数据并将视图模型缩略图展示为列表,视图模型搜索与排序模块包括视图模型名称搜索框与视图模型排序方式选择框,视图模型排序方式包括按创建时间排序、按修改时间排序、按类型排序、按名称排序四个选项。
作为优选,所述可视化界面管理单(4)包括:
已创建界面模块:包括已创建界面列表、界面分组管理模块、界面搜索与排序模块,已创建界面列表与数据库管理单元(5)连接,已创建界面列表通过接口从数据库管理单元(5)请求最新的可视化界面数据,已创建界面列表包括界面新建按钮与以列表形式展示的全部已创建界面,界面分组管理模块通过组结构实现界面分组管理,分组界面包括组内界面新建按钮与以分组形式展示的组内已创建界面,界面搜索与排序模块包括界面名称搜索框与界面排序方式选择框,界面排序方式包括按创建时间排序、按修改时间排序、按类型排序、按名称排序四个选项;
界面编辑器:界面新建按钮与界面编辑器12连接,各已创建界面均配置界面编辑、查看、重命名、删除、分享与发布功能按钮。
本发明的有益效果为:1.将可视化界面与视图解耦,通过独立的视图模型创建单元完成视图模型类型、数据、样式等一系列配置操作,并将视图模型配置信息统一存储至数据库,可通过在不同可视化界面或同一可视化界面的不同图层进行拖拽操作生成同一视图模型的实例,实现视图模型的共享与复用,使视图利用率大大提高。2.提出了一种图层级可视化界面布局方式,将单个或多个视图放置于不同布局图层,便于可视化界面同时对多种业务主题的视图进行布局与管理,其中,图层上下移动操作可用于快速交换可视化界面内图层的顺序,图层显示与隐藏操作可用于快速控制可视化界面的显示图层,将图层管理操作与界面图层对应起来实现可视化界面局部内容的快速切换,提高了面向多业务主题的可视化界面应用能力。3.将各类视图模型的可发出联动事件和可接收事件抽取出来,将联动事件与视图模型实例分步骤进行交互订阅,提出一种基于视图模型-事件联动关系网的组合式交互订阅方式,便于用户在面向不同使用需求时灵活地定义多种组合交互效果,并且将各视图的具体联动事件展示出来进行配置能够让用户更直观的选择交互触发方式,配置过程中用户甚至可以通过联想提前预知界面交互的过程与效果,交互配置的效果变得更易感知。
附图说明
图1为本申请实施例的方法示意图。
图2为本申请实施例的系统连接示意图。
图3为本申请实施例的图层布局流程图。
图4为本申请实施例的联动事件订阅流程图。
图2中:1-多媒体上传与管理单元,2-视图模型创建单元,3-视图模型管理单元,4-可视化界面管理单元,5-数据库管理单元,6-多媒体数据管理模块,7-多媒体数据上传模块,8-数据表导入模块,9-视图模型渲染引擎,10-已创建视图模型模块,11-已创建界面模块,12-界面编辑器。
具体实施方式
下面将结合本发明实施例中的附图,首先从系统角度对本发明实施例中的技术方案进行清楚、完整的描述。所描述的实施例仅仅是本发明的一部分实施例,而不是全部实施例。
参照图1,标示出了本发明实施例提供了一种基于图层布局的时空数据可视化分析方法的流程示意图,在本实施例中,该方法包括:
S101.获取用户选择数据源与视图模型类型的交互数据,根据交互数据生成视图模型渲染引擎,其中,视图模型渲染引擎用于对视图模型进行数据配置与编辑、可视化效果选择、样式配置与预览、模型元信息生成;
S102.将配置数据作为输入值导入视图模型,读取样式默认值并生成视图模型预览效果,如果用户与配置界面进行交互,将读取的样式配置内容进行视图模型预览更新;
S103.读取截图工具截取的视图模型边界信息,将边界范围内的视图模型效果以base64的方式生成截图图片并预览显示,保存时以最终的截图图片作为视图模型缩略图;
S104.用户触发保存操作时,生成唯一随机数作为视图模型的ID,通过接口将数据信息、模型ID、名称、缩略图与样式信息整合成视图模型元数据保存至视图模型数据库。
S201.从可视化界面数据库获取最新的可视化界面列表,可通过交互方式实现可视化界面增、删、改、查操作,用户触发新建操作时进入可视化界面编辑器,同时初始化界面并创建默认图层,初始化内容包括界面默认分辨率、视图模型实例默认分辨率、母版以及背景等基本信息,所有初始化信息可通过界面设置进行编辑;
S202.从视图模型数据库获取最新的视图模型列表,将视图模型按照类别进行区分,显示内容为视图模型缩略图与视图模型名称的组合,通过拖拽方式复用视图模型,进行视图模型的实例生成与布局。
S301.根据用户在图层面板的交互数据,实现图层新建、删除、显示/隐藏、移动等操作。
S302.获取图层焦点,从视图模型列表选取视图模型进行实例化,对视图模型实例赋予唯一的实例ID,并根据交互数据返回的视图模型实例的位置和尺寸实时调整布局,实例ID用于区分由视图模型生成的不同实例,同一视图模型生成的实例对接入数据信息进行共享,但布局信息、样式信息、联动设置、定时更新设置互不影响;
S303.获取视图模型实例焦点,配置面板显示视图模型实例内部样式、外部样式、数据以及交互选项,视图模型实例的内部样式为对应视图模型的样式配置数据,视图模型实例的外部样式包括视图模型实例的外边距、边框颜色、边框宽度、背景颜色、背景图片URL地址、背景透明度等数据,实时获取修改后的配置数据并进行保存;
S304.重复步骤S301-S303;
S305.获取可视化界面图层层次信息、各图层的显示/隐藏信息以及各图层上放置的视图模型实例布局信息,每一图层上放置一个或多个视图模型实例,同一绝对位置的视图模型实例可通过图层的顺序层叠形成合成效果,在可视化界面保存时所有图层状态信息同步保存并用于复现。
S401.获取可视化界面焦点,获取用户对界面配置面板数据页定时更新选项的交互数据,如果交互数据返回界面定时更新开启状态,对可视化界面上的所有数据视图模型实例开启定时更新,反之,如果交互数据返回界面定时更新关闭状态,对可视化界面上的所有数据视图模型实例关闭定时更新,更新间隔通过更新时间间隔选项进行配置;
S402.获取视图模型实例焦点,从视图模型实例配置面板数据页面获取用户对当前实例定时更新选项的交互数据,如果交互数据返回实例定时更新为开启状态,对当前视图模型实例单独开启定时更新,反之,如果交互数据返回实例定时更新为关闭状态,对当前视图模型实例单独关闭定时更新,当前视图模型实例的更新间隔通过更新时间间隔选项进行配置;
S403.可视化界面定时更新与视图模型实例定时更新互为补充,当界面定时更新为关闭状态时,可通过视图模型实例的定时更新选项单独开启,反之,当界面定时更新为开启状态时,可通过视图模型实例的定时更新选项单独关闭,在更新时间间隔配置上视图模型实例具有更高的优先级。
S501.预定义各类视图模型的可发出联动事件与可接收联动事件以形成联动网络,联动网络的每一条连线的两端连接着联动事件的发出方视图模型类型与接收方视图模型类型;
S502.获取视图模型实例焦点,在配置面板的交互页面渲染联动设置选项,联动设置的内容以当前视图模型实例作为联动发出方视图,根据预定义的联动网络计算出当前视图模型实例的所有可发出联动事件以及各联动事件在当前可视化界面范围内的所有可接收视图模型实例;
S503.实时获取用户与联动选项的交互数据,根据交互数据的返回结果在联动事件列表中对当前联动发出方视图模型实例进行联动事件订阅与取消,已订阅的联动事件可以在可视化界面通过预定义的联动事件触发并预览;
S504.设置当前可视化界面名称并执行保存操作,生成唯一随机数作为当前可视化界面ID,并进行界面缩略图截图,将当前可视化界面的名称、ID、缩略图与其他基本信息保存至可视化界面数据库。
S505.从可视化界面数据库获取最新的已创建可视化界面列表并刷新页面;
S601.用户查看已创建可视化界面的同时读取图层状态信息,通过预定义方式调取图层管理面板进行可视化界面图层状态切换,进而实现界面各图层视图模型实例的切换显示效果;
S602.用户在图层布局画布执行交互操作后,所触发的系统事件会从画布最上层图层开始一层一层往下传递,找到视图模型实例同时立即停止,视图模型实例将系统事件的类型与已订阅的联动事件进行匹配,如果系统事件已被订阅,向联动接收方视图模型实例发送联动事件类型与交互数据,联动接收方视图模型实例根据联动事件类型与数据进行可视化效果响应;
S603.所有视图模型实例根据定时更新设置按时间间隔获取数据最新状态,当数据变化时重新拉取数据并渲染视图模型实例。
本发明实施例还公开了一种基于图层布局的时空数据可视化分析系统,具体如下:
参照图2,一种基于图层布局的时空数据交互分析系统,包括多媒体上传与管理单元1、视图模型创建单元2、视图模型管理单元3、可视化界面管理单元4、数据库管理单元5。
多媒体上传与管理单元1包括多媒体数据管理模块6、多媒体数据上传模块7,多媒体数据管理模块6从数据库管理单元5获取最新的多媒体数据,多媒体数据管理模块6对多媒体数据的增加、删除、重命名操作将同步更新至数据库管理单元5,多媒体数据上传模块7用于外部多媒体数据上传,多媒体数据类型包括图片、音频、视频,传入的多媒体数据被集中存储在数据库管理单元5。
视图模型创建单元2包括数据表导入模块8、视图模型渲染引擎9,视图模型创建单元2支持的视图模型类型包括基础视图、地图视图、表格视图、无数据源视图四大类并支持扩展,数据表导入模块8根据四种类型进行分别设置,除无数据源视图以外,其他各类型选定后通过接口从数据库管理单元5请求原表数据,并将返回的原表数据显示为列表,用户选择数据表作为导入数据传入视图模型渲染引擎9。视图模型渲染引擎9的界面功能包括视图模型数据设置模块、视图模型类型选择模块、视图模型预览模块、视图模型样式编辑模块、缩略图截图编辑模块、视图模型保存模块。视图模型类型选择模块根据基础视图、地图视图、表格视图、无数据源视图四种类型提供不同的模型可视化类型,基础视图的模型可视化类型包括柱状图、折线图、散点图、饼状图、百分比堆积图、雷达图、时间轴、词云、跑马灯、文字、时钟、翻牌器、图片、音频、视频与脚本,地图视图以图层为单位进行渲染,地图视图包括二维地图与三维地图,地图视图的图层可视化类型包括符号图层、热力图层、散点图层、文字图层、方格图层、蜂窝图层、路线图层、迁徙图层、弧形图层、专题图层、立体专题图层。视图模型渲染引擎对各子视图模型类型进行封装,各视图模型类型设置有样式缺省值,在完成数据导入与模型可视化类型选择后,视图模型渲染引擎将数据作为输入值传入模型可视化类型,并将输出的视图效果显示在视图模型预览模块。在视图模型样式编辑模块编辑的视图模型样式,根据各视图模型的可视化类型,通过对应视图模型渲染方法完成配置项更新与视图模型预览更新。缩略图截图编辑模块进行视图模型自定义截图与编辑,将确定的截图预览效果作为视图模型缩略图效果。视图模型保存模块生成唯一随机数作为当前视图模型ID,通过接口将视图模型的名称、ID、数据信息、样式信息与缩略图上传至数据库管理单元5。
视图模型管理单元3包括已创建视图模块10,已创建视图模块10包括已创建视图模型列表、视图模型搜索与排序模块,其中,已创建视图模型列表通过接口获取存储在数据库管理单元5上的最新视图模型数据并将视图模型缩略图展示为列表,视图模型搜索与排序模块包括视图模型名称搜索框与视图模型排序方式选择框,视图模型排序方式包括按创建时间排序、按修改时间排序、按类型排序、按名称排序四个选项。
可视化界面管理单元4包括已创建界面模块11、界面编辑器12,其中,已创建界面模块11包括已创建界面列表、界面分组管理模块、界面搜索与排序模块,已创建界面列表与数据库管理单元5连接,已创建界面列表通过接口从数据库管理单元5请求最新的可视化界面数据,已创建界面列表包括界面新建按钮与以列表形式展示的全部已创建界面,界面分组管理模块通过层次结构实现界面分组管理,分组界面包括组内界面新建按钮与以分组形式展示的组内已创建界面。界面新建按钮与界面编辑器12连接,各已创建界面均配置界面编辑、查看、重命名、删除、分享与发布功能按钮,界面搜索与排序模块包括界面名称搜索框与界面排序方式选择框,界面排序方式包括按创建时间排序、按修改时间排序、按类型排序、按名称排序四个选项。
界面编辑器模块12用于可视化界面新建与编辑,包括视图模型缩略图列表、图层布局画布、图层管理面板、配置面板、保存与预览部分。视图模型缩略图列表根据视图模型类型进行切换显示,每种视图模型类型通过接口请求数据库管理单元5上对应类型的视图模型数据,并将返回的视图模型缩略图以列表的形式展示。图层布局画布用于以图层形式进行可视化界面布局,图层布局画布与图层管理面板相连接,图层管理面板包括图层创建、拖拽式上下移动、显示/隐藏、重命名、删除。参照图3,在图层布局画布初始化时通过选项设定画布背景、画布高度与宽度像素以及网格的高度与宽度像素并形成基础图层,基础图层为画布固有图层不可删除,用户可以在图层管理面板点击创建生成新图层,新创建图层与基础图层尺寸相同,不同图层相当于在一张张透明画布上添加不同的视图模型实例,通过顺序叠加进行遮盖与组合,最终覆盖在画布背景上形成合成效果,新图层在创建同时显示在图层布局画布与图层管理面板最上层,各图层均能通过拖拽方式放置一个或多个视图模型实例,每次进行布局操作前需要通过鼠标选中目标图层以获取焦点。图层布局画布中的图层与图层管理面板中的图层选项顺序对应,通过对图层管理面板各个图层选项进行上下拖拽可以调整画布图层间的覆盖顺序,通过各个图层选项的显示/隐藏按钮可以显示与隐藏对应图层,通过各个图层选项的重命名与删除按钮可以重命名或删除对应图层。
配置面板包括界面样式配置、视图模型实例样式配置、视图模型实例数据配置、视图模型实例与联动事件自定义组合配置,界面样式配置在获得布局画布焦点时触发显示,界面样式配置项包括画布高宽、画布背景色、画布背景图片URL地址配置及上传功能,视图模型实例的样式配置、定时更新配置、联动事件配置面板在获得视图模型实例焦点时触发显示。视图模型实例样式配置项包括视图模型实例内部样式与外部样式,视图模型实例内部样式为各视图模型类型预定义的样式选项,视图模型实例外部样式包括视图模型实例的外边距、边框颜色、边框宽度、背景颜色、背景图片URL地址、背景透明度。视图模型实例的数据配置包括定时更新配置项与数据编辑框,定时更新配置项包括定时更新开启与关闭、定时更新的时间间隔等。
视图模型实例与联动事件自定义组合配置用于给可视化界面的视图配置联动信息,在视图模型类型封装阶段会抽取出各视图模型类型的可发出联动事件与可接收联动事件,将一个视图模型的可发出联动事件与另一视图模型的可接收联动事件能够匹配上作为判断两个视图模型能否发生交互的初步判断条件,用户可以根据实际需求组合定义联动事件与视图,实现由不同操作触发不同关联视图响应效果。联动事件支持扩展,可订阅的事件类型包括图表点击事件、图表悬停事件、点击切换地图图层显示、地图数据集选择事件、地图点击事件、地图缩放同步事件、地图漫游同步事件、地图视图旋转同步事件、时间轴点击事件、时间轴拖放事件、时间轴区间选择事件。参照图4,联动事件订阅通过获取焦点将选中的视图模型实例作为交互发出方视图,同时将该发出方视图的可发出联动事件类型显示为事件名称列表,在事件名称下方,会根据该可发出事件类型获取当前可视化界面上其他所有的可接收该联动事件的视图模型实例选项,由于地图类型的视图模型实例以图层为单位进行渲染,各地图图层可能有不同的数据源,因此在联动事件的可接收视图模型实例列表中选择地图类型的视图模型实例时还需多选选择图层,而其他类型视图模型实例可以直接选择。对视图模型实例选项进行选择或取消选择操作时系统内部同步订阅或取消订阅该联动事件,操作结束后可以立即在图层布局画布进行操作与预览。用户在图层布局画布执行交互操作后,所触发的系统事件会从画布最上层图层开始一层一层往下传递,找到视图模型实例同时立即停止,视图模型实例将系统事件的类型与已订阅的联动事件进行匹配,如果系统事件已被订阅,向联动接收方视图模型实例发送联动事件类型与交互数据,联动接收方视图模型实例根据联动事件类型与数据进行可视化效果响应。
保存与预览部分提供界面确认保存按钮、界面预览按钮,确认保存按钮点击后触发弹出层,弹出层用于配置界面名称、选择界面分组、确认与取消保存,完成所有配置并执行保存操作后生成唯一随机数作为当前可视化界面ID,并进行界面缩略图截图,将当前可视化界面的名称、ID、样式数据、缩略图、各图层视图模型数据、图层管理状态数据通过接口保存至数据库管理单元5的可视化界面数据库。
通过已创建界面模块11列表中的查看按钮,可全屏查看对应的可视化界面,可视化界面以最近一次保存的图层状态进行组合展示,可以通过人机交互控制预定义的键盘按钮或右键图层管理菜单进行界面对应图层显示或隐藏、界面局部内容快速切换显示,也可通过人机交互触发预定义的联动事件实现时空可视化视图间的交互式分析。
数据库管理单元5与多媒体上传与管理单元1、视图模型创建单元2、视图模型管理单元3、可视化界面管理单元4连接,数据库管理单元5用于存储与管理原表数据库、多媒体数据库、视图模型数据库与可视化界面数据库。视图模型创建单元2通过接口从数据库管理单元5获取原表数据,多媒体上传与管理单元1、视图模型创建单元2、视图模型管理单元3、可视化界面管理单元4对数据的增加、删除、编辑、删除操作将同步更新至数据库管理单元5上的对应数据库。
以上所述,仅为本发明较佳的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,根据本发明的技术方案及其发明构思加以等同替换或改变,都应涵盖在本发明的保护范围之内。
应当理解的是,本说明书未详细阐述的部分均属于现有技术。
应当理解的是,上述针对较佳实施例的描述较为详细,并不能因此而认为是对本发明专利保护范围的限制,本领域的普通技术人员在本发明的启示下,在不脱离本发明权利要求所保护的范围情况下,还可以做出替换或变形,均落入本发明的保护范围之内,本发明的请求保护范围应以所附权利要求为准。
Claims (8)
1.一种基于图层布局的时空数据可视化分析方法,其特征在于,包括:
S1.进入视图模型渲染引擎,根据用户与浏览器的交互数据生成视图模型,通过接口将视图模型的元数据保存至视图模型数据库;
S2.进入界面渲染引擎,通过初始化界面选项生成可视化布局界面,通过接口从视图模型数据库获取视图模型信息,形成视图模型列表;
S3.获取用户与图层管理面板的交互数据,在获取图层焦点基础上,进行视图模型的实例生成与布局;
S4.分别获取界面与视图模型实例焦点,通过界面配置面板与视图模型实例配置面板获取定时更新设置数据;
S5.预定义视图模型间的联动事件匹配关系,用户通过交互操作进行基于联动事件的视图模型实例间的联动配置与预览;
S6.通过人机交互方式实现时空数据可视化界面的图层切换与关联分析。
2.根据权利要求1所述的一种基于图层布局的时空数据可视化分析方法,其特征在于,所述步骤S1具体包括:
S101.获取用户选择数据源与视图模型类型的交互数据,根据交互数据生成视图模型渲染引擎,其中,视图模型渲染引擎用于对视图模型进行数据配置与编辑、可视化效果选择、样式配置与预览、模型元信息生成;
S102.将配置数据作为输入值导入视图模型,读取样式默认值并生成视图模型预览效果,如果用户与配置界面进行交互,根据样式配置数据进行视图预览更新;
S103.读取截图工具截取的视图模型边界信息,将边界范围内的视图模型效果以base64的方式生成截图图片并预览显示,保存时以最终的截图图片作为视图模型缩略图;
S104.用户触发保存操作时,生成唯一随机数作为视图模型的ID,通过接口将数据信息、模型ID、名称、缩略图与样式信息整合成视图模型元数据保存至视图模型数据库。
3.根据权利要求1所述的一种基于图层布局的时空数据可视化分析方法,其特征在于,所述步骤S2具体包括:
S201.用户触发新建操作时进入可视化界面编辑器,同时初始化界面并创建默认图层,初始化内容包括界面默认分辨率、视图模型实例默认分辨率、母版以及背景等基本信息,所有初始化信息可通过界面设置进行编辑;
S202.从视图模型数据库获取最新的视图模型列表,将视图模型按照类别进行区分,显示内容为视图模型缩略图与视图模型名称的组合,通过拖拽方式复用视图模型,进行视图模型的实例生成与布局。
4.根据权利要求1所述的一种基于图层布局的时空数据可视化分析方法,其特征在于,所述步骤S3具体包括:
S301.根据用户在图层面板的交互数据,实现图层新建、删除、显示/隐藏、移动等操作;
S302.获取图层焦点,从视图模型列表选取视图模型进行实例化,对视图模型实例赋予唯一的实例ID,并根据交互数据返回的视图模型实例的位置和尺寸实时调整布局,实例ID用于区分由视图模型生成的不同实例,同一视图模型生成的实例对接入数据信息进行共享,但布局信息、样式信息、联动设置信息、定时更新设置信息互不影响;
S303.获取视图模型实例焦点,配置面板显示视图模型实例内部样式、外部样式、数据以及交互选项,视图模型实例的内部样式为对应视图模型的样式配置数据,视图模型实例的外部样式包括视图模型实例的外边距、边框、背景等数据;
S304.重复步骤S301-S303;
S305.获取可视化界面图层层次信息、各图层的显示/隐藏信息以及各图层上放置的视图模型实例布局信息,每一图层上放置一个或多个视图模型实例,同一绝对位置的视图模型实例可通过图层的顺序层叠形成合成效果,在可视化界面保存时所有图层状态信息同步保存并用于复现。
5.根据权利要求1所述的一种基于图层布局的时空数据可视化分析方法,其特征在于,所述步骤S5具体包括:
S501.预定义各类视图模型的可发出联动事件与可接收联动事件以形成联动网络,联动网络的每一条连线的两端连接着联动事件的发出方视图模型类型与接收方视图模型类型;
S502.获取视图模型实例焦点,在配置面板的交互页面渲染联动设置选项,联动设置的内容以当前视图模型实例作为联动发出方视图,根据预定义的联动网络计算出当前视图模型实例的所有可发出联动事件以及各联动事件在当前可视化界面范围内的所有可接收视图模型实例;
S503.实时获取用户与联动选项的交互数据,根据交互数据的返回结果在联动事件列表中对当前联动发出方视图模型实例进行联动事件订阅与取消,已订阅的联动事件可以在可视化界面通过预定义的联动事件触发并预览。
6.根据权利要求1所述的一种基于图层布局的时空数据可视化分析方法,其特征在于,所述步骤S6具体包括:
S601.用户查看已创建可视化界面的同时读取图层状态信息,通过预定义方式调取图层管理面板进行可视化界面图层状态切换,进而实现界面各图层视图模型实例的切换显示效果;
S602.用户在图层布局画布执行交互操作后,所触发的系统事件会从画布最上层图层开始一层一层往下传递,找到视图模型实例同时立即停止,视图模型实例将系统事件的类型与已订阅的联动事件进行匹配,如果系统事件已被订阅,向联动接收方视图模型实例发送联动事件类型与交互数据,联动接收方视图模型实例根据联动事件类型与数据进行可视化效果响应;
S603.所有视图模型实例根据定时更新设置按时间间隔获取数据最新状态,当数据变化时重新拉取数据并渲染视图模型实例。
7.一种基于图层布局的时空数据可视化分析系统,包括:
多媒体上传与管理单元(1):用于上传与管理外部多媒体数据;
视图模型创建单元(2):用于视图模型创建、样式配置与预览;
视图模型管理单元(3):用于管理视图模型;
可视化界面管理单元(4):用于创建与管理可视化界面,进行可视化界面预览及交互分析;
数据库管理单元(5):用于存储与管理多媒体数据、视图模型数据、可视化界面数据。
8.根据权利要求7所述的一种基于图层布局的时空数据可视化分析系统,其特征在于,所述视图模型创建单元(2)包括数据表导入模块、视图模型渲染引擎,所述视图模型渲染引擎包括:
视图模型数据设置模块:设置视图模型数据;
视图模型类型选择模块:根据基础视图、地图视图、表格视图、无数据源视图四种类型提供不同的模型可视化类型;
视图模型预览模块:预览显示视图效果;
视图模型样式编辑模块:编辑视图模型样式,进行视图模型预览更新;
缩略图截图编辑模块:进行视图模型自定义截图与编辑,将确定的截图预览效果作为视图模型缩略图效果;
视图模型保存模块:生成唯一随机数作为当前视图模型ID,通过接口将视图模型的名称、ID、数据信息、样式信息与缩略图上传至数据库管理单元(5)。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911072052.9A CN110851626B (zh) | 2019-11-05 | 2019-11-05 | 一种基于图层布局的时空数据可视化分析方法与系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911072052.9A CN110851626B (zh) | 2019-11-05 | 2019-11-05 | 一种基于图层布局的时空数据可视化分析方法与系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110851626A true CN110851626A (zh) | 2020-02-28 |
CN110851626B CN110851626B (zh) | 2022-08-26 |
Family
ID=69598748
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911072052.9A Active CN110851626B (zh) | 2019-11-05 | 2019-11-05 | 一种基于图层布局的时空数据可视化分析方法与系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110851626B (zh) |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111583370A (zh) * | 2020-04-29 | 2020-08-25 | 贝壳技术有限公司 | 画面更新方法、装置、计算机可读存储介质及电子设备 |
CN112748923A (zh) * | 2021-01-18 | 2021-05-04 | 恒安嘉新(北京)科技股份公司 | 一种可视化看板的创建方法、装置、电子设备和存储介质 |
CN112860961A (zh) * | 2021-01-29 | 2021-05-28 | 支付宝(杭州)信息技术有限公司 | 一种可视化数据的处理方法、装置和电子设备 |
CN115129553A (zh) * | 2022-07-04 | 2022-09-30 | 北京百度网讯科技有限公司 | 图可视化方法、装置、设备、介质及产品 |
CN115661603A (zh) * | 2022-12-15 | 2023-01-31 | 浙江大学 | 一种基于非模态布局补全的图像生成方法 |
CN115857909A (zh) * | 2023-02-27 | 2023-03-28 | 长威信息科技发展股份有限公司 | 一种图交互应用渲染方法、装置、设备和介质 |
CN116541115A (zh) * | 2023-05-04 | 2023-08-04 | 山东山大华天软件有限公司 | 一种基于智能生产线可视化案例的交互式演示系统及方法 |
CN116755588A (zh) * | 2023-08-18 | 2023-09-15 | 成都建工第三建筑工程有限公司 | 一种基于抹灰机器人的数据可视化与交互系统及方法 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102609507A (zh) * | 2012-02-03 | 2012-07-25 | 浙江工业大学 | 基于Web的数据可视化系统 |
CN107590198A (zh) * | 2017-08-16 | 2018-01-16 | 浙江力太科技有限公司 | 一种工业物联网的数据可视化管理方法 |
CN109471900A (zh) * | 2018-11-15 | 2019-03-15 | 中译语通科技股份有限公司 | 图表类数据自定义动作数据交互方法及系统、计算机程序 |
CN109597613A (zh) * | 2017-12-21 | 2019-04-09 | 南京数睿数据科技有限公司 | 一种拖拽式组合报表的大屏展示系统及方法 |
US10447546B1 (en) * | 2015-06-24 | 2019-10-15 | EMC IP Holding Company LLC | Customized visualizations for data centers |
-
2019
- 2019-11-05 CN CN201911072052.9A patent/CN110851626B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102609507A (zh) * | 2012-02-03 | 2012-07-25 | 浙江工业大学 | 基于Web的数据可视化系统 |
US10447546B1 (en) * | 2015-06-24 | 2019-10-15 | EMC IP Holding Company LLC | Customized visualizations for data centers |
CN107590198A (zh) * | 2017-08-16 | 2018-01-16 | 浙江力太科技有限公司 | 一种工业物联网的数据可视化管理方法 |
CN109597613A (zh) * | 2017-12-21 | 2019-04-09 | 南京数睿数据科技有限公司 | 一种拖拽式组合报表的大屏展示系统及方法 |
CN109471900A (zh) * | 2018-11-15 | 2019-03-15 | 中译语通科技股份有限公司 | 图表类数据自定义动作数据交互方法及系统、计算机程序 |
Non-Patent Citations (1)
Title |
---|
宋美娜,崔丹阳,鄂海红,欧中洪: "一种通用的数据可视化模型设计与实现", 《计算机应用与软件》 * |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111583370A (zh) * | 2020-04-29 | 2020-08-25 | 贝壳技术有限公司 | 画面更新方法、装置、计算机可读存储介质及电子设备 |
CN112748923A (zh) * | 2021-01-18 | 2021-05-04 | 恒安嘉新(北京)科技股份公司 | 一种可视化看板的创建方法、装置、电子设备和存储介质 |
CN112860961A (zh) * | 2021-01-29 | 2021-05-28 | 支付宝(杭州)信息技术有限公司 | 一种可视化数据的处理方法、装置和电子设备 |
CN115129553A (zh) * | 2022-07-04 | 2022-09-30 | 北京百度网讯科技有限公司 | 图可视化方法、装置、设备、介质及产品 |
CN115661603A (zh) * | 2022-12-15 | 2023-01-31 | 浙江大学 | 一种基于非模态布局补全的图像生成方法 |
CN115661603B (zh) * | 2022-12-15 | 2023-04-25 | 浙江大学 | 一种基于非模态布局补全的图像生成方法 |
CN115857909A (zh) * | 2023-02-27 | 2023-03-28 | 长威信息科技发展股份有限公司 | 一种图交互应用渲染方法、装置、设备和介质 |
CN116541115A (zh) * | 2023-05-04 | 2023-08-04 | 山东山大华天软件有限公司 | 一种基于智能生产线可视化案例的交互式演示系统及方法 |
CN116541115B (zh) * | 2023-05-04 | 2024-02-27 | 山东山大华天软件有限公司 | 一种基于智能生产线可视化案例的交互式演示系统及方法 |
CN116755588A (zh) * | 2023-08-18 | 2023-09-15 | 成都建工第三建筑工程有限公司 | 一种基于抹灰机器人的数据可视化与交互系统及方法 |
CN116755588B (zh) * | 2023-08-18 | 2023-11-07 | 成都建工第三建筑工程有限公司 | 一种基于抹灰机器人的数据可视化与交互系统及方法 |
Also Published As
Publication number | Publication date |
---|---|
CN110851626B (zh) | 2022-08-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110851626B (zh) | 一种基于图层布局的时空数据可视化分析方法与系统 | |
US10628021B2 (en) | Modular responsive screen grid, authoring and displaying system | |
CN102473277B (zh) | 图像数据显示系统及图像数据显示程序 | |
US8756510B2 (en) | Method and system for displaying photos, videos, RSS and other media content in full-screen immersive view and grid-view using a browser feature | |
US6636246B1 (en) | Three dimensional spatial user interface | |
US20070162953A1 (en) | Media package and a system and method for managing a media package | |
US8726153B2 (en) | Multi-user networked digital photo display with automatic intelligent organization by time and subject matter | |
CN104221356A (zh) | 用于创建相册的应用程序 | |
US20100005139A1 (en) | System and method for facilitating presentations over a network | |
US20080034284A1 (en) | Method and system for displaying multimedia content | |
JP2009508274A (ja) | 3次元グラフィカル・ユーザ・インターフェースを提供するシステム及び方法 | |
KR20060052116A (ko) | 콘텐츠 매니지먼트 시스템 및 콘텐츠 매니지먼트 방법과,컴퓨터 프로그램 | |
CN113111195A (zh) | 多媒体信息编辑方法及相关装置 | |
CN101657814A (zh) | 为媒体资产管理指定精确帧图像的系统和方法 | |
CN103814368A (zh) | 用于媒体广播的自动的动态布局设计的系统和方法 | |
WO2014201841A1 (en) | Editing method of the three-dimensional shopping platform display interface for users | |
US20200186869A1 (en) | Method and apparatus for referencing, filtering, and combining content | |
US20090019370A1 (en) | System for controlling objects in a recursive browser system: forcefield | |
CN106062741A (zh) | 在社交网络系统中进行信息处理的方法和系统 | |
US20030088874A1 (en) | Interactive digital television network | |
CN116974431A (zh) | 一种文档的显示控制方法、装置、电子设备和存储介质 | |
US20190075208A1 (en) | Cloud storage for image data, image product designs, and image projects | |
CN112416239B (zh) | 媒体库中的媒体对象交互方法、装置和电子设备 | |
EP2816521A1 (en) | Editing method of the three-dimensional shopping platform display interface for users | |
WO2018187534A1 (en) | Method and apparatus for referencing, filtering, and combining content |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant | ||
TR01 | Transfer of patent right | ||
TR01 | Transfer of patent right |
Effective date of registration: 20221104 Address after: 100038 No. 21 Yangfangdian East Road, Haidian District, Beijing Patentee after: STATE GRID ELECTRIC POWER ECONOMIC RESEARCH INSTITUTE IN NORTHERN HEBEI TECHNOLOGY Co.,Ltd. Address before: Room 4121, 4th Floor, Dongke Building, No. 312, Luoyu Road, Hongshan District, Wuhan City, Hubei Province 430070 Patentee before: WUHAN LIANTU SHIKONG INFORMATION TECHNOLOGY CO.,LTD. |