CN107870795B

CN107870795B - 一种电子地图显示的方法及装置

Info

Publication number: CN107870795B
Application number: CN201610851837.6A
Authority: CN
Inventors: 郝浩; 周栏津
Original assignee: Alibaba China Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2016-09-26
Filing date: 2016-09-26
Publication date: 2020-12-15
Anticipated expiration: 2036-09-26
Also published as: CN107870795A

Abstract

本申请涉及智能终端技术，尤其涉及一种电子地图显示的方法及装置，用于解决现有电子地图显示中由于实时渲染而造成的严重卡顿的问题，该方法为：在路线示意图上方增加透明的虚拟图层，通过虚拟图层捕捉对线路示意图的操作行为，然后基于操作行为在虚拟图层上生成线路示意图的预览图，并按照操作行为对线路示意图进行渲染后呈现，这样，可以避免采用实时渲染方式生成线路示意图，减轻了系统工作负荷，从而避免了严重卡顿的问题，增加了电子地图显示的便利性，进而提升了用户体验。

Description

一种电子地图显示的方法及装置

技术领域

本申请涉及智能终端技术，尤其涉及一种电子地图显示的方法及装置。

背景技术

随着移动互联网技术的发展，智能终端已经成为人们工作生活中不可缺少的一部分，也是人们获取信息的主要工具之一，因此，智能终端的应用服务将会有很大的发展空间，智能终端的地图显示就是日渐火热的应用服务之一。

目前，电子地图显示的某些提示界面(如，地铁示意图)是以浏览器方式呈现的，当用户为了看到更清楚更全面的提示信息时，会对提示界面直接进行缩放或者滚动操作，而上述的每一项用户操作都是直接的作用在提示界面上，因此，无论用户对提示界面进行放大、缩小或者是滚动操作时，都需要进行实时渲染，以满足用户的操作需求。

例如，用户在对提示界面中的某个图像进行放大操作时，需要对上述放大操作进行实时渲染，渲染出放大后的图像。

但是，实时渲染对智能终端的性能要求极高，因此，在进行实时渲染过程中可能会出现严重的卡顿问题。

显然，现有的电子地图显示仍存在不足之处，会影响电子地图显示的便利性，从而降低了用户体验。

发明内容

本申请实施例提供一种电子地图显示的方法及装置，用以解决现有电子地图显示中由于实时渲染而造成的严重卡顿的问题。

本申请实施例提供的具体技术方案如下：

一种电子地图显示的方法，包括：

呈现线路示意图，并在所述线路示意图上方生成透明的虚拟图层；

监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图；

确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现。

可选的，呈现线路示意图，包括：

基于用户指示，呈现相应的线路示意图；或者，

按照预置的服务内容，呈现相应的线路示意图。

可选的，呈现线路示意图，包括：

获取用户设备的屏幕配置参数；

根据所述屏幕配置参数，生成相应像素比例的线路示意图；

在屏幕中呈现所述像素比例的线路示意图。

可选的，监测对所述虚拟图层的操作行为，包括：

监测到接触屏幕时，确定对所述虚拟图层开始实施一个操作行为；

监测到停止接触屏幕时，确定对所述虚拟图层结束实施一个操作行为；

其中，将从接触屏幕到停止接触屏幕之间，执行的所有动作视为一个操作行为。

可选的，监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图，包括：

在对所述虚拟图层实施一个操作行为的过程中，每监测到执行一个动作，在所述虚拟图层中呈现所述一个动作作用于所述线路示意图后的预览图。

可选的，确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现，包括：

确定结束一个操作行为后，按照所述一个操作行为包含的最后一个动作对应的预览图，对所述线路示意图进行渲染后呈现。

一种电子地图显示的装置，包括：

预处理单元，用于呈现线路示意图，并在所述线路示意图上方生成透明的虚拟图层；

第一处理单元，用于监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图；

第二处理单元，用于确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现。

可选的，呈现线路示意图时，所述预处理单元用于：

基于用户指示，呈现相应的线路示意图；或者，

按照预置的服务内容，呈现相应的线路示意图。

可选的，呈现线路示意图时，所述预处理单元用于：

获取用户设备的屏幕配置参数；

根据所述屏幕配置参数，生成相应像素比例的线路示意图；

在屏幕中呈现所述像素比例的线路示意图。

可选的，监测对所述虚拟图层的操作行为时，所述第一处理单元用于：

可选的，监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图时，所述第一处理单元用于：

可选的，确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现时，所述第二处理单元用于：

本申请有益效果如下：

在路线示意图上方增加透明的虚拟图层，通过虚拟图层捕捉对线路示意图的操作行为，然后基于操作行为在虚拟图层上生成线路示意图的预览图，并按照操作行为对线路示意图进行渲染后呈现，这样，可以避免采用实时渲染方式生成线路示意图，减轻了系统工作负荷，从而避免了严重卡顿的问题，增加了电子地图显示的便利性，进而提升了用户体验。

附图说明

图1为现有技术下地图服务初始提示界面示意图；

图2为现有技术下地图服务被进行拖动操作后的提示界面示意图；

图3为本申请实施例中电子地图显示的方法流程图；

图4为本申请实施例中地铁线路示意图初始界面示意图；

图5为本申请实施例中地铁线路示意图被向左拖动后的界面示意图；

图6为本申请实施例中地铁线路示意图被放大后的界面示意图；

图7为本申请实施例中电子地图显示的装置结构示意图。

具体实施方式

为了解决现有电子地图显示中由于实时渲染而造成的严重卡顿的问题，进而增加地图服务的便利性，本申请实施例中，设计了一种全新的电子地图显示的方法，该方法为：在路线示意图上方增加透明的虚拟图层，通过虚拟图层捕捉用户的各个动作，以及在虚拟图层上基于各个动作生成线路示意图的预览图，这样，可以避免采用实时渲染方式生成线路示意图，从而避免了严重卡顿的问题。

下面将结合附图对本申请优选的实施方式作出进一步详细说明。

参阅图1所示，现有技术下，用户使用智能终端上某个地图服务的地铁提示功能时，由于地铁线路示意图的数据量过大，而智能终端的屏幕大小有限，因此，智能终端只能以浏览器方式呈现地铁线路示意图的一部分，呈现的这一部分也称为线路示意图。

用户可以按照自身的使用需求，通过浏览器自带的滚动条或者缩放功能对当前显示的线路示意图进行拖动、缩小或者放大，以查看地铁线路示意图中不同的内容部分，同时，由于用户对地铁线路示意图中的每一个操作都是直接作用在线路示意图上，因此，用户对当前显示的线路示意图的每一个操作都需要被实时渲染后呈现，而受限于智能终端的性能，对地铁线路示意图进行实时渲染会出现严重的卡顿问题。

而本申请实施例中，增加透明的虚拟图层，通过虚拟图层捕捉用户的各个动作时，使得上述地图服务避免采用实时渲染的方式对线路示意图进行显示，能清楚且流畅的被用户使用。

进一步地，现有技术下，因为线路示意图中的功能框是不固定元素，会随着用户的操作在线路示意图中移动，有时甚至会移出线路示意图之外，如，参阅图1和图2所示，假设地铁线路示意图中设置有用于路线查询的“输入起点－输入终点”功能框，那么，用户在当前的线路示意图进行滚动，上述功能框也会随着移动，无法固定在当前线路示意图为用户提供路线查询服务。

而本申请实施例中，按照用户终端的屏幕配置参数生成相应大小的线路示意图，这样，能够在屏幕中呈现完整的线路示意图，从而避免使用滚动条，也避免了图片元素在线路示意图中进行滚动。

具体的，参阅图3所示，本申请实施例中，提供地图服务的方法具体流程如下：

步骤300：用户设备呈现线路示意图。

具体的，用户在使用某类地图服务时，用户设备可以基于用户指示或者按照预置的服务内容呈现相应的线路示意图。

例如，假设用户使用某类地图服务的地铁提示功能，若用户需要查看北京的地铁线路示意图，则用户在对上述地图服务进行操作时，选择“北京地铁”这一服务选项，令用户设备接收到用户指示，从而向用户呈现“北京地铁线路示意图”。

又例如，用户设备可以根据预置的服务内容呈现相应的线路示意图，假设用户使用某类地图服务的地铁提示功能，上述地图服务的地铁提示功能中预置的服务内容可以为“系统定位”、“系统默认”等等，即，用户设备根据用户的指示开启地图服务中的地图提示功能后，用户设备可以按照系统定位的地点为用户呈现相应地点的地铁线路示意图，或者，用户设备可以按照系统默认的地点为用户呈现相应地点的地铁线路示意图。

进一步，用户设备在呈现线路示意图时，可以采用但不限于以下方法：

首先，获取用户设备的屏幕配置参数，如屏幕尺寸、分辨率、像素密度等等。

其次，根据该屏幕配置参数，生成相应像素比例的线路示意图。

例如，假设获取的用户设备的屏幕参数中包括了“屏幕尺寸”、“分辨率”、“像素密度”，若用户设备的屏幕尺寸为4.7英寸，用户设备的分辨率为1280×720，用户设备的像素密度为312ppi(pixels per inch，每英寸所拥有的像素)，则用户设备会基于上述屏幕配置参数，生成满足上述像素比例的线路示意图。

最后，在屏幕中呈现按照用户终端的屏幕配置参数生成的相应像素比例的线路示意图。

这样，由于已经限制了上述线路示意图的像素比例，浏览器不会出现滚动条，所以不会出现功能框移动的问题，同时，由于生成的线路示意图的大小与屏幕显示尺寸相匹配，因此，用户无需对线路示意图进行过多的操作，即可以将线路示意图调整为自身所需的使用状态(如，拖动，放大，缩小等)，因此，减小了用户的操作复杂度，提高了操作的流畅度。

又例如，可以利用SVG绘图工具，在上述线路示意图的浏览器上，通过视口(Viewport)将“meta”属性设置为禁止使用缩放功能，这样，上述线路示意图对应的浏览器就不会出现滚动条，也不会出现功能框移动的问题。

步骤301：用户设备在上述线路示意图上方生成透明的虚拟图层。

用户设备根据用户指示或者预置的服务内容呈现出线路示意图后，在上述线路示意图上方生成透明的虚拟图层，如，拖拽控制器(dragHandle)，其中，上述虚拟图层覆盖在上述线路示意图上方，用户对线路示意图进行的“缩放”和“拖动”等等操作仅仅作用在虚拟图层上，因此，在上述线路示意图的上方增加一个透明的虚拟图层，令用户设备能捕捉用户对上述线路示意图的操作。

步骤302：用户设备监测用户对上述虚拟图层的操作行为，并呈现上述操作行为作用于上述线路示意图后的预览图。

用户设备完成线路示意图的呈现，以及完成在上述线路示意图上方的透明的虚拟图层的建立后，会一直监测用户对上述虚拟图层的操作行为，并呈现上述操作行为作用于上述线路示意图后的预览图。

具体的，用户设备在监测用户对虚拟图层的操作行为的过程中，将用户从接触屏幕到停止接触屏幕之间执行的所有动作均视为同一操作行为，即，若监测到用户接触屏幕，则确定用户对上述虚拟图层开始实施一个操作行为，若监测到用户停止接触屏幕，则确定用户对上述虚拟图层结束实施一个操作行为。

例如，假设用户使用某类地图服务的地铁提示功能，需要查询某条地铁线路，仍以“北京地铁”为例，用户需要查询“地铁1号线中的军事博物馆站”，由于地铁线路示意图是按照屏幕配置参数呈现的，当地铁线路的数据量过大时，用户在上述地铁线路示意图的初始界面无法清楚识别出具体地铁线路，因此，需要对地铁线路示意图的虚拟图层实施“放大”、“拖动”或者“双击”操作，以完成对目标站点“军事博物馆站”的查询。

用户在开始接触屏幕实施“放大”、“拖动”或者“双击”操作时，用户设备将确定用户对上述地铁线路示意图的虚拟图层开始实施一个操作行为，而当用户通过实施“放大”、“拖动”或者“双击”等动作完成对目标站点“军事博物馆站”的查询时，用户会停止接触屏幕，此时，用户设备会确定用户对上述地铁线路示意图的虚拟图层结束实施一个操作行为，即，只要用户不停止接触屏幕，那么用户从接触屏幕开始实施的所有动作均被用户设备视为一次操作行为。

相应的，在用户对上述地铁线路示意图的虚拟图层实施“放大”、“拖动”或者“双击”操作的过程中，用户设备每监测到用户执行一个动作，则会在上述虚拟图层中呈现上述一个动作作用于上述地铁线路示意图后的预览图。

同样的，若用户对上述地铁线路示意图的虚拟图层实施连续的操作，如，连续的来回“缩放”、连续的来回“拖动”等等，只要用户未停止接触屏幕，那么，用户从接触屏幕开始实施的所有连续动作均被用户设备视为一次操作行为。

例如，用户对上述地铁线路示意图的虚拟图层实施连续的操作，如，针对地铁线路示意图的初始界面，参阅图4所示，先向左拖动，参阅图5所示，再放大，参阅图6所示，上述连续的操作是指用户从开始实施向左拖动至放大结束，这一操作行为中的所有动作均为连续性的，且用户未停止触摸屏幕，而这一系列连续动作均被用户设备视为一次操作行为，而用户设备监测到用户执行的连续操作中的每一个动作，也会在上述虚拟图层中呈现上述一个动作作用于上述地铁线路示意图后的预览图。

步骤303：用户设备确定用户结束上述操作行为后，按照上述操作行为对上述线路示意图进行渲染后呈现。

具体的，用户设备在监测用户对上述虚拟图层的操作行为的过程中，若用户设备确定用户结束对上述虚拟图层的操作行为后，会按照用户在上述操作行为执行的最后一个动作对应的预览图，对上述线路示意图进行渲染后呈现，其中，所谓渲染即是根据预览图的相关属性(如，预览图呈现的区域长宽、具体内容等等)，将上述预览图对应的抽象的线路示意图变成可以显示的线路示意图。

例如，仍以步骤302中的示例进行说明，若此时用户对上述地铁线路示意图的虚拟图层实施的一个操作行为为“放大”时，则用户设备会将上述“放大”操作行为的最后一个动作，视为用户结束对上述虚拟图层的操作行为，并按照上述“放大”操作行为中的最后一个动作对应的预览图，对上述地铁线路示意图进行渲染后呈现，即按照上述预览图将上述地铁线路示意图的模型变成可以显示的地铁线路示意图，然后将上述地铁线路示意图清晰的呈现给用户。

若此时用户实施了“放大”操作行为，上述“放大”操作行为的最后一个动作对应的预览图已显示了用户需要的目标站点“军事博物馆站”相关信息时，当用户停止接触屏幕后，按照上述预览图对上述地铁线路示意图进行渲染后呈现，即，用户设备会为用户提供清晰的目标站点“军事博物馆站”相关信息的地图服务。

参阅图7所示，本申请实施例中，电子地图显示的装置至少包括预处理单元700、第一处理单元701和第二处理单元702，其中，

预处理单元700，用于呈现线路示意图，并在所述线路示意图上方生成透明的虚拟图层；

第一处理单元701，用于监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图；

第二处理单元702，用于确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现。

可选的，呈现线路示意图时，所述预处理单元700用于：

基于用户指示，呈现相应的线路示意图；或者，

按照预置的服务内容，呈现相应的线路示意图。

可选的，呈现线路示意图时，所述预处理单元700用于：

获取用户设备的屏幕配置参数；

根据所述屏幕配置参数，生成相应像素比例的线路示意图；

在屏幕中呈现所述像素比例的线路示意图。

可选的，监测对所述虚拟图层的操作行为时，所述第一处理单元701用于：

可选的，监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图时，所述第一处理单元701用于：

可选的，确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现时，所述第二处理单元702用于：

综上所述，本申请实施例中，在路线示意图上方增加透明的虚拟图层，通过虚拟图层捕捉对线路示意图的操作行为，然后基于操作行为在虚拟图层上生成线路示意图的预览图，并按照操作行为对线路示意图进行渲染后呈现，这样，可以避免采用实时渲染方式生成线路示意图，减轻了系统工作负荷，从而避免了严重卡顿的问题，增加了电子地图显示的便利性，进而提升了用户体验。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请实施例进行各种改动和变型而不脱离本申请实施例的精神和范围。这样，倘若本申请实施例的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims

1.一种电子地图显示的方法，其特征在于，包括：

确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现；其中，

监测对所述虚拟图层的操作行为，并呈现所述操作行为作用于所述线路示意图后的预览图，包括：

其中，将从接触屏幕到停止接触屏幕之间，执行的所有动作视为一个操作行为；

2.如权利要求1所述的方法，其特征在于，呈现线路示意图，包括：

基于用户指示，呈现相应的线路示意图；或者，

按照预置的服务内容，呈现相应的线路示意图。

3.如权利要求1所述的方法，其特征在于，呈现线路示意图，包括：

获取用户设备的屏幕配置参数；

根据所述屏幕配置参数，生成相应像素比例的线路示意图；

在屏幕中呈现所述像素比例的线路示意图。

4.如权利要求1所述的方法，其特征在于，确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现，包括：

5.一种电子地图显示的装置，其特征在于，包括：

第二处理单元，用于确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现；

其中，所述第一处理单元具体用于：

6.如权利要求5所述的装置，其特征在于，呈现线路示意图时，所述预处理单元用于：

基于用户指示，呈现相应的线路示意图；或者，

按照预置的服务内容，呈现相应的线路示意图。

7.如权利要求5所述的装置，其特征在于，呈现线路示意图时，所述预处理单元用于：

获取用户设备的屏幕配置参数；

根据所述屏幕配置参数，生成相应像素比例的线路示意图；

在屏幕中呈现所述像素比例的线路示意图。

8.如权利要求5所述的装置，其特征在于，确定结束所述操作行为后，按照所述操作行为对所述线路示意图进行渲染后呈现时，所述第二处理单元用于：