一种数据展示方法、装置以及电子设备

技术领域

本申请涉及智慧城市技术领域，具体涉及一种数据展示方法、装置以及电子设备。

背景技术

在传统的视频监控中，主要是2D平面图片的展示，但是随着计算机技术的崛起，鱼眼图像在监控行业中的优势越发明显。传统的平面摄像头中只能监控一个方位的场景，但鱼眼摄像头由于拥有更广的视角，能监控到视野更加广阔，这样原本需要多个平面摄像头监控的场地，现在只需要一个鱼眼摄像头就可以解决,大大节约了硬件成本。

由于鱼眼摄像头拥有更广的视角，所拍摄得到的鱼眼图像(图像数据)往往具有很大的畸变，且拍摄得到的鱼眼图像通常通过圆形来展示，不太好理解，需要专业技术人员才能看懂，导致鱼眼图像的应用不能很好的推广开来。

发明内容

本申请实施例提供一种数据展示方法、装置以及电子设备，可提高对图像数据内容的理解效率，且提高用户定位图像数据中所关注区域的速度。

本申请实施例提供了一种数据展示方法，包括：

获取鱼眼摄像头采集的图像数据；

根据第一投影矩阵和第一图像模型将所述图像数据处理为大视角下的第一图像，并在数据展示界面的第一窗口展示所述第一图像；

根据第二投影矩阵和第二图像模型，以及所述图像数据生成小视角下的第二图像，并在所述数据展示界面的第二窗口展示所述第二图像，所述第一投影矩阵和所述第二投影矩阵不相同，所述第一图像模型和所述第二图像模型相同；

根据第二投影矩阵和第一图像模型确定所述第二图像对应所述第一图像模型内的三维导航区域；

通过预设方式处理所述三维导航区域，得到导航图像，以在所述第一窗口突出展示所述导航图像，所述导航图像表示第二图像在第一图像中的位置；

获取用户基于所述导航图像在所述第一窗口上的控制操作；

将所述控制操作转换为三维空间下的角度；

根据所述角度更新所述第二窗口对应的第二投影矩阵；

根据所述第二投影矩阵和所述第二图像模型，以及所述图像数据更新小视角下的第二图像，并在所述第二窗口更新展示所述第二图像；

根据所述第二投影矩阵和所述第一图像模型更新所述第二图像对应所述第一图像模型内的三维导航区域；

通过预设方式处理所述三维导航区域，以更新导航图像，并在第一窗口内突出显示所述导航图像。

本申请实施例还提供了一种数据展示装置，包括：

图像获取模块，用于获取鱼眼摄像头采集的图像数据；

第一处理展示模块，用于根据第一投影矩阵和第一图像模型将所述图像数据处理为大视角下的第一图像，并在数据展示界面的第一窗口展示所述第一图像；

第二处理展示模块，用于根据第二投影矩阵和第二图像模型，以及所述图像数据生成小视角下的第二图像，并在所述数据展示界面的第二窗口展示所述第二图像，所述第一投影矩阵和所述第二投影矩阵不相同，所述第一图像模型和所述第二图像模型相同；

区域确定模块，用于根据所述第二投影矩阵和所述第一图像模型确定所述第二图像对应所述第一图像模型内的三维导航区域；

第三处理展示模块，用于通过预设方式处理所述三维导航区域，得到导航图像，以在所述第一窗口突出展示所述导航图像，所述导航图像表示第二图像在第一图像中的位置；

操作获取模块，用于获取用户基于所述导航图像在所述第一窗口上的控制操作；

角度转换模块，用于将所述控制操作转换为三维空间下的角度；

矩阵更新模块，用于根据所述角度更新所述第二窗口对应的第二投影矩阵；

第二处理展示模块，还用于根据所述第二投影矩阵和所述第二图像模型，以及所述图像数据更新小视角下的第二图像，并在所述第二窗口更新展示所述第二图像；

区域更新模块，用于根据所述第二投影矩阵和所述第一图像模型更新所述第二图像对应所述第一图像模型内的三维导航区域；

第三处理展示模块，还用于通过预设方式处理所述三维导航区域，以更新导航图像，并在第一窗口内突出显示所述导航图像。

本申请实施例还提供了一种电子设备，所述电子设备包括：

一个或多个处理器；存储器；以及一个或多个计算机程序，其中所述处理器和所述存储器相连接，所述一个或多个计算机程序被存储于所述存储器中，并配置为由所述处理器执行上述所述的数据展示方法。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时，实现上述任一种数据展示方法中的步骤。

本申请实施例通过获取鱼眼摄像头采集的图像数据，根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像，并在第一窗口展示第一图像，根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像，并在第二窗口展示第二图像，将第二图像对应第一图像模型内的三维导航区域进行处理，得到导航图像，并在第一窗口展示导航图像，获取用户基于导航图像在第二窗口上的控制操作，将控制操作转换为三维空间下的角度，根据角度更新第二窗口对应的第二投影矩阵，如此，将用户基于导航图像在第一窗口上的控制操作转换为三维空间下的角度，并根据角度生成第二投影矩阵，以通过将第一窗口上的控制操作转换为第二窗口对应的第二投影矩阵；根据第二投影矩阵和第二图像模型，以及图像数据更新小视角下的第二图像，并在第二窗口中更新显示第二图像，如此，一方面通过第一窗口上控制操作得到第二投影矩阵，实现通过第一窗口上的控制操作来控制第二窗口内的第二图像的显示，另一方面，得到的第一图像和第二图像是图像数据在不同视角下的平面图像，可从不同视角来理解图像数据，便于用户对图像数据内容的理解，提高对图像数据内容的理解效率；再根据第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域，通过预设方式处理三维导航区域以更新导航图像，以在第一窗口内突出显示导航图像，如此，根据用户基于导航图像在第一窗口上的控制操作，来实时更新第二投影矩阵，从而实时更新第二图像，既而实时更新导航图像，达到根据用户基于导航图像在第一窗口上的控制操作，实时更新数据展示界面的显示；其中，根据导航图像使得用户可以很清晰的知道第二窗口内显示的第二图像，处于第一窗口内显示的第一图像中的哪个位置，以建立不同视角下的图像之间的关联关系，进一步提高对图像数据内容的理解效率，且便于用户调整所观看的区域，便于引导用户快速找到所关注区域，提高用户定位图像数据中所关注区域的速度，提升用户体验；通过第二窗口显示的小视角下的第二图像，也实现了图像数据的细节展示。本申请实施例中的数据展示方法可应用于更多应用场景。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的数据展示方法的系统场景示意图；

图2是本申请实施例提供的数据展示方法流程示意图；

图3是本申请实施例提供的鱼眼摄像头采集的图像数据的示意图；

图4是本申请实施例提供的顶点坐标和纹理坐标的示意图；

图5是本申请实施例提供的透视投影的成像原理示意图；

图6是本申请实施例提供的数据展示界面的示意图；

图7是本申请实施例提供的确定控制点在第一窗口上所处的角度的示意图；

图8是本申请实施例提供的确定第二虚拟相机朝向的示意图；

图9a和图9b是本申请实施例提供的数据展示方法另一流程示意图；

图10是本申请实施例提供的数据展示装置的示意性框图；

图11是本申请实施例提供的电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供一种数据展示方法、装置、电子设备和存储介质。本申请实施例提供的任一种数据展示装置，可以集成在电子设备中。该电子设备包括但不限于智能手机、平板电脑、笔记本电脑、智能电视、智能机器人、个人计算机(PC，Personal Computer)、可穿戴设备、服务器计算机、车载终端，等等。

请参阅图1，是本申请实施例提供的数据展示系统的场景示意图。该数据展示系统包括鱼眼摄像头和电子设备。鱼眼摄像头的数量可以为一个或多个，电子设备也可以为一个或者多个，鱼眼摄像头与电子设备可以直接连接，也可以通过网络连接。鱼眼摄像头与电子设备可以通过有线的方式连接，也可以通过无线的方式连接等。如图1实施例中的鱼眼摄像头与电子设备通过网络连接，其中，网络中包括路由器、网关等网络实体。

鱼眼摄像头可进行拍摄，以得到鱼眼图像的初始图像数据，并将拍摄的初始图像数据发送至电子设备；电子设备接收鱼眼摄像头拍摄的初始图像数据，在一种情况下，将所接收的初始图像数据直接作为鱼眼摄像头采集的图像数据，在另一种情况下，将所接收的初始图像数据进行校正，以得到鱼眼摄像头采集的图像数据，接着对图像数据进行相应处理并进行数据展示。

图2是本申请实施例提供的数据展示方法的流程示意图。该数据展示方法运行于电子设备中，该数据展示方法包括如下步骤：

101，获取鱼眼摄像头采集的图像数据。

由于鱼眼摄像头的视角更广，所以鱼眼摄像头拍摄得到的图像比平面摄像头拍摄得到的图像包括更多的信息。鱼眼摄像头拍摄角度为类似半球形，得到的图像通过类似圆形等来表示，如若鱼眼摄像头的视角为180度，则拍摄角度刚好为半球，得到的图像以圆形呈现在二维平面上。

图3为本申请实施例提供的鱼眼摄像头直接采集得到的初始图像数据的示意图，中间的圆形区域即为鱼眼摄像头拍摄得到的初始图像。图3中鱼眼摄像头朝向天空，所拍摄得到的图像包括天空以及鱼眼摄像头所处位置周围的建筑物、树木等。

鱼眼摄像头直接采集的初始图像数据可以预先保存在电子设备中，以直接从电子设备中获取鱼眼摄像头采集的初始图像数据；也可以保存在其他电子设备中，通过网络从其他电子设备中获取鱼眼摄像头采集的初始图像数据；还可以通过网络从鱼眼摄像头实时获取所拍摄的初始图像数据，如图1所示。如此，步骤101中的获取鱼眼摄像头采集的图像数据，可理解为获取鱼眼摄像头直接采集的初始图像数据，即图3所示的初始图像数据。

在一些情况下，为了达到更好的展示效果，需要对鱼眼摄像头直接采集的初始图像数据进行进一步的处理。具体地，步骤101，包括：对鱼眼摄像头进行数据标定；获取鱼眼摄像头拍摄得到的初始图像数据；根据数据标定的结果，对所获取的初始图像数据进行校正，将校正后的图像数据作为鱼眼摄像头采集的图像数据。

鱼眼摄像头厂家在鱼眼摄像头量产之前需要先对鱼眼摄像头进行标定，并提供标定接口，用户在购买鱼眼摄像头后，通过标定接口输入标定参数，以对鱼眼摄像头进行标定。数据标定的主要目的是为了得到鱼眼镜头对应的参数，以寻找图3所示的初始图像数据中的圆形区域。由于鱼眼摄像头硬件差异性，每个不同的鱼眼摄像头拍摄得到的初始图像数据中，圆形区域在图像中的位置是不同的。

对鱼眼摄像头进行数据标定后，根据数据标定的结果，对初始图像数据进行校正。如采用经纬法对初始图像数据进行校正，或者采用其他的方法对初始图像数据进行校正，将校正后的图像数据作为鱼眼摄像头采集的图像数据。校正的目的是为了降低或者消除初始图像数据中的畸变。如将图3所示的圆形区域的图像转换为一个2:1的长方形的图像，以降低或消除初始图像数据中的畸变。

进一步地，将校正后的图像数据转换为纹理单元，以便后续进行纹理映射。

102，根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像，并在数据展示界面的第一窗口展示第一图像。

在虚拟场景中，通常需要构建物体坐标系，并在物体坐标系中建立模型(俗称建模)。本申请实施例中建立第一图像模型，该第一图像模型为球形；在其他情况下，可根据具体使用场景对应不同形状的图像模型。

以下将以第一图像模型为球形为例进行说明，可以简单理解为第一图像模型是按照经度分为n个圆，每个圆上分配m个点所形成的球形，如n＝180，m＝30等。需要注意的是，n越大，m越大，所形成的球形越圆。

通过OpenGL所建立的第一图像模型中包括多个点，每个点用[(x,y,z)(u,v)]表示，其中(x,y,z)表示顶点坐标，(u,v)表示纹理坐标。顶点坐标(x,y,z)是三维空间坐标，决定了物体的形状；(u,v)是二维坐标，确定去纹理单元的什么位置去提取纹理。需要注意的是，为了统一度量，顶点坐标和纹理坐标都采用了归一化的方法，如将顶点坐标统一映射到[-1,1]上，将纹理坐标统一映射到[0,1]上。同时需要注意的是，顶点坐标和纹理坐标所采用的坐标系是不同的。

如图4所示，为顶点坐标和纹理坐标的示意图。其中，A、B、C、D为模型上的四个点，该四个点的顶点坐标和纹理坐标分别为A[(-1,-1,0)(0,0.5)]，B[(1,-1,0)(0.5,0.5)]，C[(-1,0,0)(0,1)]，D[(1,0,0)(0.5,1]。

建立好模型后，可构建投影矩阵。在虚拟场景中，物体(或者模型，在模型上进行纹理贴图后即显示为物体)所在的坐标系称为物体坐标系，相机坐标系是以相机的聚焦中心为原点建立的三维坐标系，还对应有一个世界坐标系。虚拟相机、物体等都处于世界坐标系下。世界坐标系里面的虚拟相机、物体、模型，虚拟相机的广角、仰角、镜头到近平面和远平面的距离等的关系都体现在投影矩阵中。

其中，第一投影矩阵包括对第一图像模型进行控制的信息、第一虚拟相机的信息、第一虚拟相机透视投影的信息。

第一投影矩阵可通过如下方式确定：获取设置的第一虚拟相机的初始参数，该初始参数包括第一虚拟相机的位置(第一虚拟相机的信息)，欧拉角、第一虚拟相机的镜头到投影面(也可称为近平面)的距离、第一虚拟相机的镜头到远平面的距离(第一虚拟相机透视投影的信息)等；根据第一虚拟相机的初始参数确定第一投影矩阵。如根据第一虚拟相机的初始参数，利用数学库来确定第一投影矩阵，如将第一虚拟相机的初始参数，输入至GLM(OpenGL Mathematics)数据库的对应函数中，利用该函数计算第一投影矩阵。需要注意的是，根据所设置的第一虚拟相机的初始参数确定的第一投影矩阵，也可以理解为初始第一投影矩阵。在本申请实施例中，由于没有对第一图像模型进行旋转控制，也没有改变第二虚拟相机的信息，因此初始第一投影矩阵一直都没有改变，因此第一投影矩阵即为初始第一投影矩阵。

如图5所示，为本申请实施例提供的透视投影的成像原理图。其中，镜头到近平面11的距离，即点0和点1之间的距离，镜头到远平面12的距离，即点0和点2之间的距离。虚拟相机的位置包括0点在世界坐标系中的坐标、虚拟相机的镜头朝向等信息。

上述所述的第一图像模型和第一投影矩阵可预先进行确定。在步骤102时，可直接利用中央处理器(central processing unit，CPU)获取第一图像模型和第一投影矩阵，并根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像。也可以是在执行步骤102过程中，先利用CPU确定第一图像模型和第一投影矩阵，再根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像。

其中，步骤102，包括：通过CPU将第一投影矩阵、图像数据和第一图像模型拷贝至图形处理器(Graphics Processing Unit，GPU)中，以根据第一投影矩阵、第一图像模型和图像数据，利用图形处理器将图像数据处理为大视角下的第一图像。具体地，通过CPU将第一图像模型中的顶点传输至顶点着色器中，将第一图像模型中的纹理坐标拷贝至片元着色器中，并根据图像数据确定纹理坐标所对应的纹理单元，利用GPU进行渲染，得到大视角下的第一图像。

其中，大视角本质上就是把第一图像模型放入至第一虚拟相机的视锥体内所对应的视角。如图5所示，视锥体即为近平面11和远平面12之间的梯形区域。可以理解地，在大视角下，第一图像模型整体都在第一虚拟相机的视锥体内。由于第一图像模型是个球形，视角内可以看到该球形的一半，将图像数据作为纹理单元，整个贴在该一半的球形上，即得到大视角下的第一图像。或者可以简单理解，大视角是将第一虚拟相机放置于第一图像模型外侧的较远处，从而视野内所看到的第一图像模型所对应的完整平面图像的视角。该步骤中得到大视角下的第一图像，以便于用户从整体上对图像数据的内容进行理解。

得到第一图像后，在数据展示界面的第一窗口展示第一图像。数据展示界面中包括至少一个第一窗口和至少一个第二窗口。请参看图6，图6为本申请实施例提供的数据展示界面的示意图。数据展示界面20上包括位于数据展示界面左侧的一个第一窗口21和位于第一窗口21右侧的两个第二窗口22。在第一窗口21中的底层展示的是第一图像。由图6可知，得到的第一图像与图像数据相对应/一致。其中，第一窗口和/或第二窗口可以是以显示控件的形式存在于数据展示界面20上，如第一窗口中包括至少一个显示控件，第二窗口包括一个显示控件；第一窗口和/或第二窗口还可以以其他的形成存在数据展示界面20上。

103，根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像，并在数据展示界面的第二窗口展示第二图像，其中，第一投影矩阵和第二投影矩阵不相同，第一图像模型和第二图像模型相同。

需要注意的是，与初始第一投影矩阵一样，也存在初始第二投影矩阵。初始第二投影矩阵和初始第一投影矩阵可理解为打开/刷新数据展示界面时，所对应的默认投影矩阵。利用该初始第二投影矩阵和第二图像模型、初始第一投影矩阵和第一图像模型可确定初始第二图像和初始第一图像，即打开数据展示界面后，未进行任何控制操作前所对应的初始第一图像和初始第二图像。初始第一图像和初始第二图像即为默认对应投影矩阵所对应的默认视角下的图像。

其中，第二投影矩阵包括对第二图像模型进行控制的信息、第二虚拟相机的信息、第二虚拟相机透视投影的信息。

初始第二投影矩阵可通过如下方式确定：获取设置的第二虚拟相机的初始参数，该初始参数包括第二虚拟相机的位置(第二虚拟相机的信息)，欧拉角、第二虚拟相机的镜头到近平面的距离、第二虚拟相机的镜头到远平面的距离(第二虚拟相机透视投影的信息)等；根据第二虚拟相机的初始参数确定初始第二投影矩阵。该初始第二投影矩阵可预先进行设定。需要注意的是，初始第一投影矩阵和初始第二投影矩阵不相同，对应的，第一投影矩阵和第二投影矩阵不相同。将初始第二投影矩阵更新后的投影矩阵作为第二投影矩阵，可通过在第二窗口上的控制操作来更新第二投影矩阵，还可以通过第一窗口上的控制操作来更新第二投影矩阵。其中，在第一窗口或者第二窗口上的控制操作会更新对第二图像模型旋转控制的信息和第二虚拟相机的信息。

在本申请实施例中，第二图像模型和第一图像模型相同，可直接获取第一图像模型。在根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像的步骤中，可直接利用CPU获取预先计算出的第二投影矩阵和第二图像模型，并根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像。

其中，根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像的步骤，包括：通过CPU将第二投影矩阵、图像数据和第二图像模型拷贝至GPU中，以利用GPU根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像。具体地，通过CPU将第二图像模型中的顶点传输至顶点着色器中，将第二图像模型中的纹理坐标拷贝至片元着色器中，确定第二图像模型中可投影至更新后的第二投影矩阵的顶点所对应的纹理坐标，并根据图像数据确定纹理坐标所对应的纹理单元，利用GPU进行渲染，生成小视角下的第二图像。

其中，小视角指的是进行渲染后，视野内可以看到局部的图像数据的视角。可以简单理解，小视角是将第二虚拟相机放置于第二图像模型内部，从而视野内所看到的第二图像模型投影后所对应的局部平面图像的视角。该步骤中得到小视角下的第二图像，以便于用户从局部上(小视角上)对图像数据的内容进行理解，提高对图像数据内容的理解效率。

得到第二图像内，在数据展示界面的第二窗口展示第二图像。如图6所示，若在数据展示界面上，第二窗口22只有一个，那么在该第二窗口内展示第二图像。若在数据展示界面上，第二窗口22有多个，则在控制操作所对应的第二窗口上展示第二图像。多个第二窗口中，每个第二窗口所对应的小视角不同，所展示的第二图像也显示为不同的图像。

以上步骤中，实现在数据展示界面上的第一窗口展示大视角下的第一图像，在第二窗口展示小视角下的第二图像，如此以得到图像数据在不同视角下的平面图像，可从不同视角来理解图像数据，便于用户对图像数据内容的理解，提高对图像数据内容的理解效率。

由于第一图像和第二图像是通过同一个图像模型(第一图像模型和第二图像模型相同)投影在大视角、小视角下，且使用相同的纹理(图像数据)贴图得到的。通过大视角下的第一图像从整体上理解图像数据，通过小视角下的第二图像从局部上理解图像数据，实现图像数据的细节展示。在对数据展示界面的窗口(包括第一窗口和第二窗口)进行控制操作时，小视角下的第二图像一直在不停的变化。且第二图像模型是球形，360度，没有边界，因此，在对第二窗口进行控制操作的过程中，所看到的第二图像很容易出现重复，即出现转圈圈的情况。因此，用户在对窗口进行控制时，需要知道当前第二窗口上显示的第二图像对应于第一图像中的哪个部分，以提高用户定位所关注区域的速度。

104，根据第二投影矩阵和第一图像模型确定第二图像对应第一图像模型内的三维导航区域。

上述根据投影矩阵(分别为第一投影矩阵和第二投影矩阵)和图像模型(分别为第一图像模型和第二图像模型)来确定的第一图像或者第二图像，是通过透视投影的成像原理所得到的图像。如图5所示，图像模型中在近平面11和远平面12之间的点投影，可以在我们视野内被看到。

根据透视投影的成像原理，我们视野可以看到的部分，其实就是图像模型上的顶点乘以投影矩阵后，落在近平面上的顶点，经过归一化、裁剪、以及纹理贴图最终展现出来的效果。因此，若想确定第二图像对应第一图像模型内的三维导航区域，则可通过逆向思维将问题转换为：确定第一图像模型上的哪些顶点可投影至第二投影矩阵的近平面上，确定这些顶点后，将这些顶点所对应的区域作为三维导航区域，对三维导航区域对应的纹理坐标突出指定显示。进一步的，若想确定第一图像模型上的哪些顶点可投影至第二投影矩阵的近平面上，可通过第二投影矩阵和第一图像模型来确定。

具体地，根据第二投影矩阵和第一图像模型确定第二图像对应第一图像模型内的三维导航区域的步骤，包括：根据第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点；将导航顶点所对应的区域作为第二图像对应第一图像模型内的三维导航区域。导航顶点所对应的区域理解为导航顶点所在的区域。

导航顶点理解为第一图像模型中的，可以投影至第二投影矩阵的近平面中的顶点。具体地，根据第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点的步骤，可通过CPU来执行，具体包括以下步骤：遍历第一图像模型中的每个顶点；从每个顶点(多个顶点)中确定投影至所述第二投影矩阵对应近平面中的导航顶点。

其中，从每个顶点中确定投影至所述第二投影矩阵对应近平面中的导航顶点的步骤，包括：根据第二投影矩阵，确定每个顶点投影后的坐标，如将第一图像模型中的顶点乘以第二投影矩阵后，得到每个顶点投影后的坐标；检测坐标是否在第二投影矩阵对应近平面的范围内；若是，则将该顶点确定为导航顶点；若否，则将该顶点确定为非导航顶点。其中，导航顶点投影到第二投影矩阵的近平面之后可被用户看到，而非导航顶点投用后不可被用户看到。

具体地，若第一图像模型按照经度分为180个圆，每个圆上分配30个点，则CPU遍历第一图像转换模型中的每个顶点，即遍历的顶点数量为180*30，每遍历一个顶点时，根据第二投影矩阵和该顶点，确定该顶点是否为导航顶点。具体地，利用第二投影矩阵和该顶点的顶点坐标进行相乘，以确定该顶点投影后的坐标，若投影后的坐标在第二投影矩阵对应的近平面的范围内，则确定为导航顶点，否则，确定该顶点为非导航顶点。可以理解地，第二投影矩阵确定后，第二投影矩阵所对应的近平面的范围也是确定的。若投影后坐标(x

可以理解地，第一投影矩阵与第一图像模型的顶点相乘，可确定投影至第一投影矩阵的近平面上的顶点，经过裁剪渲染等后即为第一图像；第二投影矩阵与第二图像模型的顶点相乘，可确定投影至第二投影矩阵的近平面上的顶点，经过渲染等后即为第二图像；因此，利用第二投影矩阵与第一图像模型相乘了之后，所确定的导航顶点，即为第二图像在第一图像模型中的对应顶点(该对应顶点投影至第二投影矩阵后可得到第二图像)。

或者也可以简单理解，在第一图像模型外侧，利用第一投影矩阵与第一图像模型的顶点相乘，经过裁剪渲染等后为第一图像；在第二图像模型内部，利用第二投影矩阵与第二图像模型的顶点相乘，经过裁剪渲染等后为第二图像；那么利用内部的第二投影矩阵和第一图像模型相乘之后，就可以得出第一图像模型中的哪些顶点可投影至第二投影矩阵的近平面上，将所得到的顶点作为导航顶点。

105，通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。

根据第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点的步骤，通过CPU来执行，具体地，通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤，包括：确定导航顶点所对应的纹理坐标；将纹理坐标拷贝至GPU中，以使GPU根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。导航图像表示第二图像在第一图像内的位置。

需要注意的是，若采用CPU来处理三维导航区域，则CPU确定了导航顶点和导航顶点所对应的纹理坐标后，还需将纹理坐标拷贝至GPU中，以使GPU根据所述纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。

其中，上述所述的根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤，包括：获取三维导航区域预设纹理，该三维导航区域预设纹理包括预设颜色或者预设图片；利用GPU根据三维导航区域预设纹理、纹理坐标渲染三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。具体地，将纹理坐标所对应的纹理设置为三维导航区域预设纹理，利用GPU根据所设置的纹理(即三维导航区域预设纹理)渲染三维导航区域。如此，通过预设颜色或者预设图片渲染三维导航区域，达到突出显示导航图像的目的。

进一步地，根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤，包括：获取三维导航区域预设纹理和第一预设透明度，该三维导航区域预设纹理包括预设颜色或者预设图片；利用GPU根据三维导航区域预设纹理、第一预设透明度、纹理坐标渲染三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。具体地，将纹理坐标所对应的纹理设置为三维导航区域预设纹理，并设置纹理坐标所对应的纹理的透明度为第一预设透明度；利用GPU根据所设置的纹理渲染三维导航区域。如此，将三维导航区域渲染为三维导航区域预设纹理，且显示的透明度为第一预设透明度，达到突出显示导航图像的目的。

进一步地，将三维导航区域之外的区域作为非三维导航区域，具体地，根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤，包括：

获取三维导航区域预设纹理、第一预设透明度，以及第二预设透明度，其中，第二预设透明度小于第一预设透明度，三维导航区域预设纹理为预设颜色或者预设图片；GPU根据三维导航区域预设纹理、第一预设透明度和纹理坐标渲染三维导航区域，以得到导航图像，并在第一窗口内突出显示渲染后的三维导航区域；利用GPU将非三维导航区域渲染为第二预设透明度。其中，利用GPU根据三维导航区域预设纹理、第一预设透明度和纹理坐标渲染三维导航区域，具体包括：将纹理坐标所对应的纹理设置为三维导航区域预设纹理，并设置纹理坐标所对应的纹理的透明度为第一预设透明度，利用GPU根据所设置的纹理渲染三维导航区域，以将三维导航区域渲染为三维导航区域预设纹理，且显示的透明度为第一预设透明度。

可以理解地，若三维导航区域在第一图像之后渲染，则渲染后得到的导航图像会显示于第一图像之上。为了不遮挡第一图像中非三维导航区域所对应的区域，以提高显示效果，将第二预设透明度设置为0.8以下，如可设置第二预设透明度为0。为了突出显示导航图像，可将第一预设透明度设置为(0,1)之间，为了不会将第一图像中导航图像所对应的区域完全覆盖，以提高用户体验，可设置第一预设透明度为0.8。其中，预设颜色可以设置为红色，以突出显示导航图像。

如图6中的左图所示，渲染后得到的导航图像23和渲染后的非三维导航区域位于第一图像之上，且当前第一预设透明度不为1，通过导航图像23还可以看到位于导航图像23之下的第一图像对应的部分区域。位于导航图像23之下的第一图像对应的部分区域，与第二图像一致。由于第二预设透明度为0，因此，渲染后的非三维导航区域是透明的，并不能被人眼看到。

在其他的一些情况下，将三维导航区域之外的区域作为非三维导航区域，具体地，根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤，包括：

获取三维导航区域预设纹理、第一预设透明度，以及非三维导航区域预设纹理、第二预设透明度，其中，第二预设透明度小于第一预设透明度，三维导航区域预设纹理为第一预设颜色或者第一预设图片，非三维导航区域预设纹理为第二预设颜色或者第二预设图片；利用GPU根据三维导航区域预设纹理、第一预设透明度、纹理坐标渲染三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像；在第一窗口内利用GPU根据非三维导航区域预设纹理、第二预设透明度渲染非三维导航区域。

其中，利用GPU根据三维导航区域预设纹理、第一预设透明度、纹理坐标渲染三维导航区域，包括：将纹理坐标所对应的纹理设置为三维导航区域预设纹理，并设置纹理坐标所对应的纹理的透明度为第一预设透明度；根据所设置的纹理渲染三维导航区域，以将三维导航区域渲染为三维导航区域预设纹理，且显示的透明度为第一预设透明度。利用GPU根据非三维导航区域预设纹理、第二预设透明度渲染非三维导航区域，包括：将非三维导航区域所对应的纹理设置为非三维导航区域预设纹理，并设置非三维导航区域所对应的纹理的透明度为第二预设透明度；根据所设置的纹理渲染非三维导航区域，以将非三维导航区域渲染为非三维导航区域预设纹理，且显示的透明度为第二预设透明度。其中，第一预设透明度、第二预设透明度的设置可参看上文中的描述；三维导航区域预设纹理和非三维导航区域预设纹理可相同，也可不同。将导航图像突出显示，将非三维导航区域也利用非三维导航区域预设纹理进行渲染，并设置为第二预设透明度。

上述实施例中区分三维导航区域和非三维导航区域，进一步突出显示导航图像，提高用户体验。

需要注意的是，利用GPU根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤的实现场景可以有多个。

如一个实现场景为，在第一窗口中只存在一个显示控件，通过该显示控件既可以显示导航图像(和渲染后的非三维导航区域)，也可以显示第一图像。如该显示控件中包括两个纹理单元：第一纹理单元和第二纹理单元。其中，第一纹理单元用来显示第一图像，第二纹理单元用来显示导航图像(和渲染后的非三维导航区域)，第二纹理单元位于第一纹理单元之上。具体地，在数据展示界面的第一窗口展示第一图像的步骤之前，还包括：获取第一窗口的显示控件中的第一纹理单元和第二纹理单元；将第二纹理单元设置于第一纹理单元之上。如此，在数据展示界面第一窗口展示第一图像的步骤，包括：在第一窗口的显示控件中的第一纹理单元内展示第一图像。在第一窗口内突出显示导航图像的步骤，包括：在第一窗口的显示控件中的第二纹理单元内突出显示导航图像(和渲染后的非三维导航区域)。需要注意的是，在该种情况下，在执行通过预设方式处理所述三维导航区域，得到导航图像，并在第一窗口显示控件中的第二纹理单元内突出展示导航图像的步骤的同时，还会同步执行根据第一投影矩阵和第一图像模型将所述第一图像数据渲染为大视角下的第一图像，并在第一窗口显示控件中的第一纹理单元内展示第一图像的步骤。可以理解地，因为第一图像和导航图像是在一个显示控件中进行显示的，因此第一图像和导航图像(和非三维导航区域)需要同时被渲染出来，如果仅仅渲染导航图像(和非三维导航区域)，那么在第一窗口中将不会显示第一图像，如此达不到本申请的目的。如此，在通过预设方式处理三维导航区域时，既渲染第二纹理单元中的三维导航区域(和非三维导航区域)，又渲染第一纹理单元对应的第一图像等。

如另一种实现场景为，在第一窗口中存在两个显示控件，第一显示控件用于显示第一图像，第二显示控件用于显示导航图像(和处理后的非三维导航区域)。具体地，在数据展示界面的第一窗口展示第一图像的步骤之前，还包括：获取第一窗口中的第一显示控件和第二显示控件；将第二显示控件设置于第一显示控件之上。如此，在数据展示界面第一窗口展示第一图像的步骤，包括：在数据展示界面第一窗口的第一显示控件中展示第一图像。在第一窗口内突出显示导航图像的步骤，包括：在第一窗口的第二显示控件中突出显示导航图像(和渲染后的非三维导航区域)。如此，通过两个显示控件分别来显示第一图像以及导航图像(和渲染后的非三维导航区域)，分开处理，提高处理效率。如在处理三维导航区域时，只需要渲染第二显示控件上显示的内容即可，无需渲染第一显示控件上显示的内容，减少了电子设备的消耗，提高了处理效率和速度。

如此，通过将导航图像进行突出显示，根据导航图像使得用户可以很清晰的知道第二窗口内显示的第二图像，处于第一窗口内显示的第一图像中的哪个位置，以建立不同视角下的图像之间的关联关系，进一步提高对图像数据内容的理解效率，且便于用户调整所观看的区域，便于引导用户快速找到所关注区域，提高用户定位图像数据中所关注区域的速度，提升用户体验。此外，通过第二窗口显示的第二图像，也实现了图像数据的细节展示。

至此，数据展示界面的第一窗口中展示了第一图像、导航图像，数据展示界面的第二窗口中展示了第二图像。其中，导航图像表示的是第二图像对应于第一图像中的位置。

106，获取用户基于导航图像在第一窗口上的控制操作。

由于导航图像表示第二图像对应于第一图像中的位置，用户可以在数据展示界面的第一窗口中，基于导航图像进行控制操作。该控制操作可以通过用户在第一窗口的导航图像上进行滑动触摸操作来实现，还可以通过其他的方式来实现。在此，先简单描述一下控制操作所带来的效果：用户在第一窗口的导航图像上触摸滑动后，会导致第二窗口的第二图像发生变化，从而导致第一窗口的导航图像也发生变化。所以看起来好像是直接控制第一窗口上的导航图像。

本申请实施例中以通过滑动触摸操作来实现控制操作为例进行说明。

其中，第一窗口的滑动触摸操作所对应的控制操作的事件包括滑动事件、单击事件等。点击事件用来停止通过第二窗口的控制操作所引入的加速器，可以理解地，在第一窗口上的控制操作不涉及加速器的相关处理。滑动事件用于控制在手指滑动过程中的各种情况。滑动事件包括BeginDrag、DragMove、EndDrag、DragCancle等事件。BeginDrag与touchesBegan对应，理解为手指按下事件；DragMove与touchesMoved对应，理解为手指移动事件；EndDrag与touchesEnded对应，理解为手指抬起事件；DragCancle与touchesCancelled对应，理解为意外中断事件，比如打电话引起的意外中断。

107，将控制操作转换为三维空间下的角度。

对于电子设备来说，屏幕对应有一个坐标轴，高度方向(竖直方向)对应y轴，宽度方向(水平方向)对应x轴。因此，在滑动触摸操作时所对应的位置坐标一般包括x轴坐标和y轴坐标，屏幕上的x轴坐标和y轴坐标是物理坐标。(0，0)在屏幕的左上角，电子设备屏幕的坐标轴中不包括z轴。

在图像模型中，因为openGL中模型的旋转只能绕基轴进行，基轴包括第一基轴、第二基轴、第三基轴，在本申请实施例中，分别对应三维坐标系中的x轴、y轴和z轴。即在openGL中引入z轴，(0，0，0)对应第一窗口的第一图像的正中央或者第二窗口的正中央。物体旋转围绕物体坐标系的基轴旋转，在本申请实施例中，以物体坐标系为右手坐标系，物体坐标系的基轴和世界坐标系的基轴重合为例进行说明。

通过用户基于导航图像在第一窗口上的控制操作如何来确定第二投影矩阵呢，这是本申请实施例中确定第二投影矩阵的一个核心所在，即是把用户在电子设备屏幕上的手势滑动的控制操作转换为对应的角度。角度包括第二图像模型在第三基轴z轴上的旋转角度和第二投影矩阵对应的第二虚拟相机在第一基轴x轴上的俯仰角度。

具体地，步骤107，包括：获取第一窗口中第一图像的中心点的中心坐标；获取控制操作所对应的控制点的控制坐标；根据中心坐标和控制坐标将控制操作转换为三维空间下的角度。

根据图6和上文中的描述可知，第一图像是将图像数据作为纹理单元，整个贴到一半的球体上所得到的大视角下的图像，该第一图像从视觉上看也是通过圆形展示在二维平面上。由于在openGL中将第一图像的正中央对应作为三维坐标轴的原点，为了方便将控制操作转换为角度，在屏幕所对应的二维坐标系中以第一图像的中心作为中心点。可以理解地，一般情况下，第一图像的中心点即为第一窗口的中心点，但也会存在并非是第一窗口的中心点的情况，因此该处并不是获取第一窗口的中心点，而是获取第一图像的中心点。

中心坐标和控制坐标都是在屏幕所对应的二维坐标系下的以左上角为原点的坐标。中心坐标可预先计算出来，设第一窗口对应的宽度为windows_width，第一窗口对应的高度为windows_height，若第一图像的中心点为第一窗口的中心点，则中心坐标为(windows_width/2,windows_height/2)；若第一图像的中心点不为第一窗口的中心点，中心坐标还需根据第一图像的像素值确定，或者根据其他方式计算出来。

根据中心坐标和控制坐标将控制操作转换为三维空间下的角度，即实现将二维坐标系下的坐标转换为三维空间下的角度，以实现通过控制操作来控制第二图像和导航图像的显示。

如何根据手势滑动的控制点的控制坐标和中心点的中心坐标来确定对应的角度呢，这是本申请实施例中将控制操作转换为三维空间下的角度的核心所在。

对于第二图像模型在第三基轴z轴上的旋转角度来说，具体地，根据中心坐标和控制坐标将控制操作转换为三维空间下的角度的步骤，包括：根据中心坐标和控制坐标确定控制点与中心点所形成的直线在第一窗口上所处的角度；将该角度作为控制操作对应于第二图像模型中的旋转角度。

如图7所示，为本申请实施例提供的确定控制点在第一窗口上所处的角度的示意图。图中的A点为中心点，A点的坐标为(x

控制点与中心点所形成的直线在第一窗口上所处的角度，理解为，在第一图像中，控制点与中心点所形成的直线与0点方向(或者0度方向)所对应的直线之间的角度。具体地，根据中心坐标和控制坐标确定控制点与中心点所形成的直线在第一窗口上所处的角度的步骤，包括：根据中心坐标和控制坐标确定控制点所在的象限；根据象限、中心坐标和控制坐标确定控制点与中心点所形成的直线在第一窗口上所处的角度。其中，象限是以A点为中心所形成的象限，本申请实施例中的象限是为了计算控制点与中心点所形成的直线在第一窗口上所处的角度。

其中，0到90度为第一象限，90度到180度为第二象限，180到270度为第三象限，270度到360度为第四象限。根据中心坐标和控制坐标确定控制点所在的象限。例如，若x>x

如图7所示，控制点在第二象限，则控制点与中心点所形成的直线在第一窗口的角度为控制点与中心点所形成的直线与3点方向(90度方向)之间的角度，和3点方向(90度方向)所对应的直线与0点方向所对应的直线之间的角度之和，即arctan(x-x

将控制点与中心点所形成的直线在第一窗口上所处的角度作为控制操作对应于第二图像模型中的旋转角度。控制点与中心点所形成的直线在第一窗口上所处的角度为绝对角度；roll、yaw以及pitch等都表示绝对角度，因此本申请实施例中采用roll、yaw以及pitch来表示对应的绝对角度。pitch表示围绕y轴旋转，也叫做偏航角；yaw表示围绕x轴旋转，也叫俯仰角；roll表示围绕z轴旋转，也叫翻滚角。用户在第二窗口上的控制操作本质上改变了翻滚角roll、俯仰角yaw，而偏航角pitch一直是固定的，没有变动，默认偏航角pitch为90度，保证第二虚拟相机一直面向z轴所指的方向。其中，控制操作对应于第二图像模型中的旋转角度用roll来表示。

可以理解地，第二图像模型是球形，球形旋转一圈对应的是360度，而第一图像也是圆形，控制操作绕着第一图像的中心点滑动一圈，也刚好为360度。另一方面，物体坐标系采用的是右手坐标系，控制操作绕着第一图像的中心点滑动一圈，即相当于绕着物体坐标系三维空间中的z轴旋转一圈。因此，将控制点与中心点所形成的直线在第一窗口上所处的角度作为控制操作对应于第二图像模型中的旋转角度，以将用户基于二维平面上的控制操作转换为对应于第二图像模型中的旋转角度，也即第二图像模型在第三基轴z轴上的旋转角度。

对于第二投影矩阵对应的第二虚拟相机在第一基轴x轴上的俯仰角度来说，具体地，根据中心坐标和控制坐标将控制操作转换为三维空间下的角度的步骤，包括：获取第二图像所对应的半径，以及第二虚拟相机所对应的最大俯仰角度；根据中心坐标和控制坐标确定控制点到中心点的控制距离；根据半径和最大俯仰角度确定控制操作的控制距离对应于第二虚拟相机的俯仰角度。

其中，第二图像所对应的半径即为第一图像模型或第二图像模型所对应的球形的半径，用r表示。俯仰角度包括仰角和俯角，仰角即是把第二虚拟相机向上偏移，俯角即是把第二虚拟相机向下偏移。其中，仰角的最大值为90°-δ/2，最小值为0。欧拉角一般预设为30度，欧拉角为视锥体上表面与第二虚拟相机的镜头之间的直线，和视锥体下表面与第二虚拟相机的镜头之间的直线组成的夹角。俯角的最大值和最小值与仰角的最大值和最小值一致，只是方向不同。即俯仰角的最大俯仰角度max为90°-δ/2，最小俯仰角度min为0。

根据中心点的中心坐标和控制点的控制坐标确定控制点到中心点的控制距离，已知中心点的中心坐标为(x

根据半径和最大俯仰角度确定控制操作的控制距离对应于第二虚拟相机的俯仰角度的步骤，包括：最大俯仰角度乘以控制距离，再除以半径，以得到控制操作的控制距离对应于第二虚拟相机的俯仰角度。具体地，如公式(1)所示。

其中，a表示控制距离m对应于第二虚拟相机的俯仰角度，即第二虚拟相机在第一基轴x轴上的俯仰角度，max为最大俯仰角度，r为半径，δ为欧拉角。计算出来的控制距离m对应于第二虚拟相机的俯仰角度a是一个绝对角度。

确定了控制距离对应于第二虚拟相机的俯仰角度后，还需要确定俯仰角度的方向。可根据控制坐标和中心坐标来确定第二虚拟相机的俯仰角度的方向。若(x-x

需要注意的是，上述计算出来的角度，包括第二图像模型在第三基轴z轴上的旋转角度和第二投影矩阵对应的第二虚拟相机在第一基轴x轴上的俯仰角度，是基于导航图像的控制操作所得，是在第一窗口上得到的。然而第二投影矩阵对应的是第二窗口的投影矩阵。因此，需要将计算出来的角度，发送至第二窗口，以使得第二窗口根据角度更新对应的第二投影矩阵。

108，根据角度更新第二窗口对应的第二投影矩阵。

其中，投影矩阵(包括第一投影矩阵和第二投影矩阵)对应为MVP矩阵，其中，MVP＝prespective*view*model。model矩阵(也称为模型矩阵)对应的是第二图像模型的操作矩阵，主要操作第二图像模型在x、y、z轴上的旋转，该model矩阵中包括对第二图像模型进行控制的信息。view矩阵(也称为视角矩阵)主要对应的是第二虚拟相机的位置点、朝向(第二虚拟相机的位置)等，prespective矩阵(也称为透视矩阵)对应的是第二虚拟相机的欧拉角、近平面、远平面等信息，理解为第二虚拟相机的透视投影的信息。

如何将角度对应到第二投影矩阵呢，这也是本申请实施例中确定第二投影矩阵的核心所在：当用户基于导航图像在第一窗口上进行控制操作时，控制操作对应于第二图像模型在第三基轴z轴上的旋转角度，对应调整的是model矩阵；第二虚拟相机在第一基轴x轴上的俯仰角度，对应调整的是view矩阵。

具体地，步骤108，包括：根据控制操作对应于第二图像模型中的旋转角度更新model矩阵；根据控制操作对应于第二虚拟相机的俯仰角度更新view矩阵；根据model矩阵、view矩阵和prespective矩阵更新第二窗口对应的第二投影矩阵。其中，prespective矩阵没有发生变化。

那么如何根据控制操作对应于第二图像模型中的旋转角度更新模型矩阵呢。通过上文中的描述，控制操作对应于第二图像模型中的旋转角度用roll来表示，该控制操作对应于第二图像模型中的旋转角度是个绝对角度。因此，可将旋转角度roll转换为弧度，再调用rotate函数进行旋转，以得到model矩阵。如model＝glm::rotate(glm::radians(roll),glm::vec3(0.0f,0.0f,1.0f))*model，其中，glm::radians表示弧度计算函数。

那么如何根据控制操作对应于第二虚拟相机的俯仰角度更新view矩阵呢。通常一个虚拟相机的位置由以下三个参数确定：camera_pos：虚拟相机的位置点；camera_front：虚拟相机的朝向；camera_up：垂直于虚拟相机的朝向。在数据展示界面上初始化后，未在第二窗口上进行控制操作之前，camera_pos、camera_front、camera_up都对应有一个初始值。其中，camera_pos保持初始值不改变，如将camera_pos设置于第二图像模型内部的正中心。当用户基于导航图像在第一窗口上进行控制操作后，会导致camera_front发生改变，camera_front发生改变，camera_up也会改变，则view矩阵发生改变。

具体地，根据控制操作对应于第二虚拟相机的俯仰角度更新view矩阵的步骤，包括：将控制操作对应于第二虚拟相机的俯仰角度作为第二虚拟相机的俯仰角，并获取第二虚拟相机的偏航角；根据偏航角和俯仰角更新第二虚拟相机的朝向向量；根据朝向向量更新view矩阵。

如图8所示，为本申请实施例提供的确定第二虚拟相机朝向的示意图。其中，C点为第二虚拟相机的位置camera_pos，CD为第二虚拟相机的朝向camera_front，其中，D点的坐标为(x，y，z)。需要注意是，第二虚拟相机的朝向camera_front在CD这条射线上，CD的长度可以是任意值。为方便计算，假设CD长度为1，且已知偏航角pitch、俯仰角yaw。可按照公式(2)、公式(3)、公式(4)来计算D点的坐标，从而得到第二虚拟相机的朝向camera_front的值。

x＝CD×cos(yaw)×cos(pitch) (2)

y＝CD×sin(yaw) (3)

z＝CD×cos(yaw)×sin(pitch) (4)

计算出第二虚拟相机的朝向camera_front后，可进一步计算camera_up的值。

由于camera_front和camera_up可确定一个平面，而控制操作对应绕y轴上下仰，因此(0,1,0)的点一定在camera_front和camera_up确定的平面上。可设置一个过度向量up_help以来帮助计算camera_up的值。设up_help为(0,1,0)。

利用过度向量up_help和计算出的第二虚拟相机的朝向camera_front，以得到第二虚拟相机的右向量right，具体地，将过度向量up_help和计算出的第二虚拟相机的朝向向量camera_front进行叉乘，再进行归一化，以得到右向量right，根据叉乘的原理，得到的右向量right垂直于第二虚拟相机的朝向camera_front。如glm::vec3 right＝glm::normalize(glm::cross(up_help,camera_front))，其中，glm::cross表示叉乘。再利用右向量right和计算出的第二虚拟相机的朝向向量camera_front来得到camera_up的值，具体地，将第二虚拟相机的朝向向量camera_front和右向量right进行叉乘，再进行归一化，以得到camera_up的值。如camera_up＝glm::normalize(glm::cross(camera_front,right))。根据叉乘的原理，得到的camera_up垂直于第二虚拟相机的朝向camera_front。

得到camera_pos、camera_front、camera_up之后，利用camera_pos、camera_front、camera_up来确定view矩阵。具体地，调用lookAt函数来实现，view＝glm::lookAt(camera_pos,camera_front,camera_up)，即可得到view矩阵。

至此，得到了更新后的view矩阵、更新后的model矩阵，根据更新后的view矩阵、更新后的model矩阵和prespective矩阵生成第二投影矩阵，以更新第二窗口对应的第二投影矩阵。如此，将用户基于导航图像在第一窗口上的控制操作转换为角度，并根据角度更新第二窗口对应的第二投影矩阵，以通过控制操作更新第二投影矩阵。

上述根据用户在第一窗口上的控制操作更新第二窗口对应的第二投影矩阵的过程中，分别对应有两个线程，第一线程和第二线程。其中，第一线程是主线程ui线程，以用于捕捉手势，如捕捉BeginDrag、DragMove、EndDrag、DragCancle等滑动事件，并根据手势滑动确定所对应的角度。第二线程线程是gl线程，刷新频率为一秒60帧。gl线程根据角度生成第二投影矩阵，以更新第二窗口所对应的第二投影矩阵。利用第一线程和第二线程分开进行处理，提高数据处理的效率。

109，根据更新后的第二投影矩阵和第二图像模型，以及图像数据更新小视角下的第二图像，并在第二窗口更新展示第二图像。

具体，步骤109包括：通过CPU将更新后的第二投影矩阵、图像数据和第二图像模型拷贝至GPU中，以利用GPU根据更新后的第二投影矩阵和第二图像模型，以及图像数据更新小视角下的第二图像。具体地，通过CPU将第二图像模型中的顶点传输至顶点着色器中，将第二图像模型中的纹理坐标传输至片元着色器中，确定第二图像模型中可投影至更新后的第二投影矩阵的顶点所对应的纹理坐标，并根据图像数据确定纹理坐标所对应的纹理单元，再利用GPU进行渲染，更新小视角下的第二图像。

具体地，请参看上文中的根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像的步骤对应的描述，在此不再赘述。

110，根据更新后的第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域。

具体地，步骤110包括：根据更新后的第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点；将导航顶点所对应的区域作为第二图像对应第一图像模型内的三维导航区域。导航顶点所对应的区域理解为导航顶点所在的区域。

导航顶点理解为第一图像模型中的，可以投影至第二投影矩阵的近平面中的顶点。具体地，根据第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点的步骤，可通过CPU来执行，具体包括以下步骤：遍历第一图像模型中的每个顶点；从每个顶点(多个顶点)中确定投影至所述第二投影矩阵对应近平面中的导航顶点。

其中，从每个顶点中确定投影至所述第二投影矩阵对应近平面中的导航顶点的步骤，包括：根据第二投影矩阵，确定每个顶点投影后的坐标，如将第一图像模型中的顶点乘以第二投影矩阵后，得到每个顶点投影后的坐标；检测坐标是否在第二投影矩阵对应近平面的范围内；若是，则将该顶点确定为导航顶点；若否，则将该顶点确定为非导航顶点。其中，导航顶点投影到第二投影矩阵的近平面之后可被用户看到，而非导航顶点投用后不可被用户看到。

具体实现原理请参看上文中的根据第二投影矩阵和第一图像模型确定第二图像对应第一图像模型内的三维导航区域步骤对应的描述，在此不再赘述。

111，通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像。

具体地，步骤111包括：确定导航顶点所对应的纹理坐标；将纹理坐标拷贝至GPU中，以使GPU根据纹理坐标通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像。导航图像表示第二图像在第一图像内的位置。

其中，上述所述的根据纹理坐标通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像的步骤，以参看上文中的根据纹理坐标通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像的步骤对应的描述，在此不再赘述。

上述实施例通过获取鱼眼摄像头采集的图像数据，根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像，并在第一窗口展示第一图像，根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像，并在第二窗口展示第二图像，将第二图像对应第一图像模型内的三维导航区域进行处理，得到导航图像，并在第一窗口展示导航图像，获取用户基于导航图像在第二窗口上的控制操作，将控制操作转换为三维空间下的角度，根据角度更新第二窗口对应的第二投影矩阵，如此，将用户基于导航图像在第一窗口上的控制操作转换为三维空间下的角度，并根据角度生成第二投影矩阵，以通过将第一窗口上的控制操作转换为第二窗口对应的第二投影矩阵；根据第二投影矩阵和第二图像模型，以及图像数据更新小视角下的第二图像，并在第二窗口中更新显示第二图像，如此，一方面通过第一窗口上控制操作得到第二投影矩阵，实现通过第一窗口上的控制操作来控制第二窗口内的第二图像的显示，另一方面，得到的第一图像和第二图像是图像数据在不同视角下的平面图像，可从不同视角来理解图像数据，便于用户对图像数据内容的理解，提高对图像数据内容的理解效率；再根据第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域，通过预设方式处理三维导航区域以更新导航图像，以在第一窗口内突出显示导航图像，如此，根据导航图像使得用户可以很清晰的知道第二窗口内显示的第二图像，处于第一窗口内显示的第一图像中的哪个位置，以建立不同视角下的图像之间的关联关系，进一步提高对图像数据内容的理解效率，且便于用户调整所观看的区域，便于引导用户快速找到所关注区域，提高用户定位图像数据中所关注区域的速度，提升用户体验；通过第二窗口显示的小视角下的第二图像，也实现了图像数据的细节展示。本申请实施例中的数据展示方法可应用于更多应用场景。

图9a和图9b是本申请实施例提供的数据展示方法的流程示意图。请结合图9a和图9b参看本申请实施例的数据展示方法。

如图9a所示，在打开/刷新数据展示界面时，获取所设置的第一虚拟相机的初始参数和所设置的第二虚拟相机的初始参数、第一图像模型和第二图像模型，以及鱼眼摄像头采集的图像数据；根据第一虚拟相机的初始参数确定初始第一投影矩阵，根据第二虚拟相机的初始参数确定初始第二投影矩阵；根据初始第一投影矩阵、第一图像模型和所述图像数据确定大视角下的初始第一图像，并在数据展示界面的第一窗口内展示初始第一图像；根据初始第二投影矩阵、第二图像模型和图像数据生成小视角下的初始第二图像，并在数据展示界面的第二窗口内展示初始第二图像；根据初始第二投影矩阵以及第一图像模型确定初始第二图像对应第一图像模型内的三维导航区域，并通过预设方式处理三维导航区域，以得到导航图像，并在第一窗口内突出显示导航图像。以上是在打开/刷新数据展示界面所对应的步骤。

之后，如图9b所示，当检测到用户基于导航图像在数据展示界面的第一窗口上的控制操作时，将控制操作转换为三维空间下的角度，根据角度更新第二投影矩阵。根据更新后的第二投影矩阵和第二图像模型以及图像数据更新小视角下的第二图像，并在第二窗口展示第二图像，该第二图像是更新后的图像。根据更新后的第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域，并通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像。可以理解地，在数据展示界面打开后，后续当检测到基于导航图像在第一窗口内的控制操作，根据该控制操作更新第二投影矩阵，以更新第二窗口内展示的第二图像，并更新导航图像。

需要注意的是，图9a和图9b一起展示的数据展示方法的整个流程。其中，每个步骤的详细内容，请参看上文中对应步骤的描述，在此不再赘述。

根据上述实施例所描述的方法，本实施例将从数据展示装置的角度进一步进行描述，该数据展示装置具体可以作为独立的实体来实现，也可以集成在电子设备中来实现。

如图10所示，是本申请实施例提供的数据展示装置的结构示意图。该装置可以包括图像获取模块201、第一处理展示模块202、第二处理展示模块203、区域确定模块204、第三处理展示模块205、操作获取模块206、角度转换模块207、矩阵更新模块208以及区域更新模块209。

图像获取模块201，用于获取鱼眼摄像头采集的图像数据。

图像获取模块201，具体用于对鱼眼摄像头进行数据标定；获取鱼眼摄像头拍摄得到的初始图像数据；根据数据标定的结果，对初始图像数据进行校正，以得到鱼眼摄像头采集的图像数据。

第一处理展示模块202，用于根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像，并在数据展示界面的第一窗口展示第一图像。

其中，第一处理展示模块202，在执行根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像的步骤时，具体执行：通过CPU将第一投影矩阵、图像数据和第一图像模型拷贝至GPU中，以根据第一投影矩阵、第一图像模型和图像数据，利用图形处理器将图像数据处理为大视角下的第一图像。

第二处理展示模块203，用于根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像，并在数据展示界面的第二窗口展示第二图像，第一投影矩阵和第二投影矩阵不相同，第一图像模型和第二图像模型相同。

第二处理展示模块203，在执行根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像的步骤时，具体执行：通过CPU将第二投影矩阵、图像数据和第二图像模型拷贝至GPU中，以根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像。

区域确定模块204，用于根据第二投影矩阵和第一图像模型确定第二图像对应第一图像模型内的三维导航区域。

区域确定模块204，具体用于根据第二投影矩阵和第一图像模型，从第一图像模型的顶点中，确定投影至第二投影矩阵对应近平面中的导航顶点；将导航顶点所对应的区域作为第二图像对应第一图像模型内的三维导航区域。导航顶点所对应的区域理解为导航顶点所在的区域。

第三处理展示模块205，用于通过预设方式处理三维导航区域，得到导航图像，以在第一窗口突出展示导航图像，导航图像表示第二图像在第一图像中的位置。

操作获取模块206，用于获取用户基于导航图像在第一窗口上的控制操作。具体地，操作获取模块206，具体用于通过第一线程来获取用户基于导航图像在第一窗口上的控制操作。

角度转换模块207，用于将控制操作转换为三维空间下的角度。

具体地，角度转换模块207，具体用于通过第一线程来将控制操作转换为三维空间下的角度。

角度转换模块207，具体包括坐标获取单元、角度转换单元。其中，坐标获取单元，用于获取第一窗口中第一图像的中心点的中心坐标；获取控制操作所对应的控制点的控制坐标。角度转换单元，用于根据中心坐标和控制坐标将控制操作转换为三维空间下的角度。

角度包括第二投影矩阵对应的第二虚拟相机的俯仰角度，角度转换单元，具体用于：获取第二图像所对应的半径，以及第二虚拟相机所对应的最大俯仰角度；根据中心坐标和控制坐标确定控制点到中心点的控制距离；根据半径和最大俯仰角度确定控制操作的控制距离对应于第二虚拟相机的俯仰角度。

角度包括第二图像模型的旋转角度，角度转换单元，具体用于：根据中心坐标和控制坐标确定控制点所在的象限；根据象限、根据中心坐标和控制坐标确定控制点与中心点所形成的直线在第一窗口上所处的角度；将角度作为控制操作对应于第二图像模型中的旋转角度。

矩阵更新模块208，用于角度更新第二窗口对应的第二投影矩阵。

具体地，矩阵更新模块208，具体用于通过第二线程来根据角度更新第二窗口对应的第二投影矩阵。

矩阵更新模块208，具体包括模型更新单元、视角更新单元、以及矩阵更新单元。其中，模型更新单元，用于根据控制操作对应于第二图像模型中的旋转角度更新模型矩阵。视角更新单元，用于根据控制操作对应于第二虚拟相机的俯仰角度更新视角矩阵。矩阵更新单元，用于根据模型矩阵、视角矩阵和透视矩阵更新第二窗口对应的第二投影矩阵。

其中，视角更新单元，具体用于：将控制操作对应于第二虚拟相机的俯仰角度作为第二虚拟相机的俯仰角，并获取第二虚拟相机的偏航角；根据偏航角和俯仰角更新第二虚拟相机的朝向向量；根据朝向向量更新视角矩阵。

区域更新模块209，用于根据第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域。

第三处理展示模块205，通过通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像。

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现。以上装置和各单元的具体实现过程，以及所达到的有益效果，可以参考前述应用于区块链的节点中的方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。

本申请实施例还提供一种电子设备，如图11所示，其示出了本申请实施例所涉及的电子设备的结构示意图，具体来讲：

该电子设备可以包括一个或者一个以上处理核心的处理器901、一个或一个以上计算机可读存储介质的存储器902、射频(Radio Frequency，RF)电路903、电源904、输入单元905、以及显示单元906等部件。本领域技术人员可以理解，图中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器901是该电子设备的控制中心，包括中央处理器和图形处理器，中央处理器和图形处理器相连接。其中，中央处理器利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器902内的软件程序和/或模块，以及调用存储在存储器902内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。可选的，中央处理器可包括一个或多个处理核心；优选的，中央处理器可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解地是，上述调制解调处理器也可以不集成到中央处理器中。图形处理器，主要实现对中央处理器传递过来的数据进行处理，如渲染等。

存储器902可用于存储软件程序(计算机程序)以及模块，处理器901通过运行存储在存储器902的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器902可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器902可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器902还可以包括存储器控制器，以提供处理器901对存储器902的访问。

RF电路903可用于收发信息过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器901处理；另外，将涉及上行的数据发送给基站。通常，RF电路903包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、低噪声放大器(LNA，Low Noise Amplifier)、双工器等。此外，RF电路903还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(GSM，Global System of Mobilecommunication)、通用分组无线服务(GPRS，General Packet Radio Service)、码分多址(CDMA，Code Division Multiple Access)、宽带码分多址(WCDMA，Wideband CodeDivision Multiple Access)、长期演进(LTE，Long Term Evolution)、电子邮件、短消息服务(SMS，Short Messaging Service)等。

电子设备还包括给各个部件供电的电源904(比如电池)，优选的，电源904可以通过电源管理系统与处理器901逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源904还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该电子设备还可包括输入单元905，该输入单元905可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，在一个具体地实施例中，输入单元905可包括触敏表面以及其他输入设备。触敏表面，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面上或在触敏表面附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器901，并能接收处理器901发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面。除了触敏表面，输入单元905还可以包括其他输入设备。具体地，其他输入设备可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

该电子设备还可包括显示单元906，该显示单元906可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元906可包括显示面板，可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-Emitting Diode)等形式来配置显示面板。进一步的，触敏表面可覆盖显示面板，当触敏表面检测到在其上或附近的触摸操作后，传送给处理器901以确定触摸事件的类型，随后处理器901根据触摸事件的类型在显示面板上提供相应的视觉输出。虽然在图中，触敏表面与显示面板是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面与显示面板集成而实现输入和输出功能。

尽管未示出，电子设备还可以包括摄像头(需要注意的是，该处的摄像头与上述所述的虚拟相机不同，该处的摄像头指的是硬件)、蓝牙模块等，在此不再赘述。具体在本实施例中，电子设备中的处理器901会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器902中，并由处理器901来运行存储在存储器902中的应用程序，从而实现各种功能，如下：

获取鱼眼摄像头采集的图像数据；根据第一投影矩阵和第一图像模型将图像数据处理为大视角下的第一图像，并在数据展示界面的第一窗口展示第一图像；根据第二投影矩阵和第二图像模型，以及图像数据生成小视角下的第二图像，并在数据展示界面的第二窗口展示第二图像，第一投影矩阵和第二投影矩阵不相同，第一图像模型和第二图像模型相同；根据第二投影矩阵和第一图像模型确定第二图像对应第一图像模型内的三维导航区域，通过预设方式处理三维导航区域，得到导航图像，以在第一窗口突出展示导航图像，该导航图像表示第二图像在第一图像中的位置；获取用户基于导航图像在第一窗口上的控制操作；将控制操作转换为三维空间下的角度；根据角度更新第二窗口对应的第二投影矩阵；根据第二投影矩阵和第二图像模型，以及图像数据更新小视角下的第二图像，并在第二窗口更新展示第二图像；根据第二投影矩阵和第一图像模型更新第二图像对应第一图像模型内的三维导航区域；通过预设方式处理三维导航区域，以更新导航图像，并在第一窗口内突出显示导航图像。

该电子设备可以实现本申请实施例所提供的数据展示方法任一实施例中的步骤，因此，可以实现本申请实施例所提供的任一数据展示方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令(计算机程序)来完成，或通过指令(计算机程序)控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。为此，本申请实施例提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本申请实施例所提供的数据展示方法中任一实施例的步骤。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的指令，可以执行本申请实施例所提供的任一数据展示方法实施例中的步骤，因此，可以实现本申请实施例所提供的任一数据展示方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种数据展示方法、装置、电子设备以及存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。