地图界面显示范围定位自适应方法、装置、介质及设备与流程

1.本发明涉及电子地图技术领域，特别涉及一种地图界面显示范围定位自适应方法、装置、介质及设备。


背景技术：

2.随着国家城市的发展和国内科技技术的进步，对城市的管理手段也在不断进步，从原来单一的数据表格式展示管理到报表、图表等数据系统管理，近年来，随着互联网和移动端的快速发展，可视化、智能化系统越来越普遍使用，而这些系统很多与地图有关联，它能更直观的展示出结果。用于大屏的电子地图可视化展示系统，现在正常的做法是：采用上下左右功能面板加上中间地图的布局方式，上部系统为名称加模块菜单栏，左右为统计或者其他业务功能面板，中间为电子地图的方式进行系统的展示。
3.电子地图的展示界面上为了更为全面的展示地图信息，会设置位于界面周边的若干菜单栏或者标题栏，一般的，只有中间为地图的方式，四周的面板太古板，不太美观，高级感比较欠缺。对此，会采用半透明悬浮框的方式将菜单栏或者业务栏悬浮于界面上，具有较好的展示效果。但是如图1所示，我国地图的部分区域被信息菜单栏等遮挡，现有的地图显示还是会存在显示区域被遮挡的问题需要解决。
4.综上，现有技术中，对于地图界面显示范围的确定需要改进以解决界面显示信息不够直观的问题。


技术实现要素：

5.为解决上述现有技术中的不足，本发明提供一种地图界面显示范围定位自适应方法，包括以下步骤：
6.s10：在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
7.s20：确定所述目标区域的显示范围；
8.s30：根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
9.在一些实施例中，步骤s10包括以下步骤：
10.创建地图div，将所述地图div的宽高设为100％；
11.设置所述地图div的position为fixed以将所述地图的定位方式设置为固定定位；
12.将所述地图div的pointer-events设为auto，以使得所述地图div被其他div覆盖时能够进行事件交互；
13.创建悬浮div，所述悬浮div的宽高设为100％；
14.将所述悬浮div的position为absolute以将所述悬浮框的定位方式设置为绝对定位。
15.在一些实施例中，所述悬浮div的display设置为flex，flex-direction设置为
column，以使得所述悬浮框具有纵向弹性盒布局；
16.所述悬浮div具有头部div、中部div和底部div三个子节点。
17.在一些实施例中，所述中部div的display设置为flex，flex-direction设置为row以使得所述中部div具有横向弹性盒布局；
18.所述中部div具有横向依次布置的第一区域div、第二区域div和第三区域div三个子节点，其中所述第二区域div的范围设置为所述地图可视范围区域，设置所述第二区域div的pointer-events为none以使得所述地图可视范围区域不进行事件交互。
19.在一些实施例中，步骤s20中所述目标区域的所述显示范围包括第一四至范围，所述第一四至范围根据所述目标区域在全屏显示时的四至范围确定，或者根据所述目标区域本身的四至经纬度确定；
20.所述第一四至范围包括第一经度最小值xmin，第一经度最大值xmax，第一纬度最小值ymin和第一纬度最大值ymax。
21.在一些实施例中，所述步骤s30包括：
22.获取所述显示界面的第一宽度widthfull和第一高度heightfull，单位为像素；
23.获取所述地图可视范围区域的第二宽度width和第二高度height，以及所述地图可视范围区域的原点相对所述显示界面的原点横向偏移量xoffset和纵向偏移量yoffset，单位为像素；
24.计算所述地图在所述显示界面全屏显示的第二四至范围以对所述显示界面相对地图进行定位，以使得所述目标区域显示在所述地图可视范围区域内，并使得所述目标区域在所述地图可视范围区域内具有最大显示范围，所述第二四至范围包括第二经度最小值xminnew，第一经度最大值xmaxnew，第一纬度最小值yminnew和第一纬度最大值ymaxnew。
25.在一些实施例中，所述第二四至范围的算法包括：
26.xminnew＝xmin-(xoffset/width)*(xmax-xmin)；
27.yminnew＝ymin-((heightfull-yoffset-height)/height)*(ymax-ymin)；
28.xmaxnew＝xmax+((widthfull-xoffset-width)/width)*(xmax-xmin)；
29.ymaxnew＝ymax+(yoffset/height)*(ymax-ymin)。
30.本发明还提供一种地图界面显示范围定位自适应装置，包括：
31.可视范围确定单元，用于所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
32.显示范围确定单元，用于确定所述目标区域的显示范围；
33.显示界面定位单元，用于根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
34.本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机被处理器执行时实现如上任一项所述的一种地图界面显示范围定位自适应方法。
35.本发明还提供一种计算机设备，包括至少一个处理器、及与所述处理器通信连接的存储器，其中所述存储器存储可被至少一个处理器执行的指令，所述指令被至少一个处理器执行，以使所述处理器执行如上任一项所述的一种地图界面显示范围定位自适应方法。
36.基于上述，与现有技术相比，本发明提供的一种地图界面显示范围定位自适应方法，首先在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；接着确定所述目标区域的显示范围；根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。通过在在显示界面上设置地图可视范围区域用以目标主体，根据该可视范围区域预与目标区域的显示范围对显示界面进行定位，以避免现有技术中直接使用显示界面全屏对目标区域进行定位导致目标区域被界面上其他业务信息区域的框体等遮盖，影响用户观察目标区域。
37.本发明的其它特征和有益效果将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他有益效果可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
附图说明
38.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图；在下面描述中附图所述的位置关系，若无特别指明，皆是图示中组件绘示的方向为基准。
39.图1为现有地图显示界面效果图；
40.图2为本发明地图界面显示范围定位自适应方法流程图；
41.图3为本发明实施例对图1所示实例调整之后的效果图。
具体实施方式
42.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例；下面所描述的本发明不同实施方式中所设计的技术特征只要彼此之间未构成冲突就可以相互结合；基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
43.在本发明的描述中，需要理解的是，术语“中心”、“横向”、“上”、“下”、“左”、“右”、“垂直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或组件必须具有特定的方位、或以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。另外，术语“包括”及其任何变形，皆为“至少包含”的意思。
44.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸的连接，或一体成型的
连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个组件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
45.这里所使用的术语仅仅是为了描述具体实施例而不意图限制示例性实施例。除非上下文明确地另有所指，否则这里所使用的单数形式“一个”、“一项”还意图包括复数。还应当理解的是，这里所使用的术语“包括”和/或“包含”规定所陈述的特征、整数、步骤、操作、单元和/或组件的存在，而不排除存在或添加一个或更多其他特征、整数、步骤、操作、单元、组件和/或其组合。
46.为达优点至少其中之一或其他优点，如图2所示，本发明提供一种地图界面显示范围定位自适应方法，包括以下步骤：
47.s10：在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
48.s20：确定所述目标区域的显示范围；
49.s30：根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
50.在一些实施例中，步骤s10包括以下步骤：
51.创建地图div，将所述地图div的宽高设为100％；
52.设置所述地图div的position为fixed以将所述地图的定位方式设置为固定定位；也即地图的画面是固定的，而显示屏的范围会在地图上移动以显示固定的范围。
53.将所述地图div的pointer-events设为auto，以使得所述地图div被其他div覆盖时能够进行事件交互。
54.创建悬浮div，所述悬浮div的宽高设为100％；
55.将所述悬浮div的position为absolute以将所述悬浮框的定位方式设置为绝对定位。绝对定位也即将悬浮框定位在显示界面的范围的确定位置，当显示屏的范围在地图上移动时显示不同的区域时，悬浮框的区域永远在显示界面的固定位置，例如上、下、左或右侧的设置的标题栏、菜单栏或者信息显示框等。悬浮框可以是半透明状或者不透明状，本发明对此不做限定。
56.在一些实施例中，所述悬浮div的display设置为flex，flex-direction设置为column，以使得所述悬浮框具有纵向弹性盒布局；
57.所述悬浮div具有头部div、中部div和底部div三个子节点。
58.在一些实施例中，所述中部div的display设置为flex，flex-direction设置为row以使得所述中部div具有横向弹性盒布局；
59.所述中部div具有横向依次布置的第一区域div、第二区域div和第三区域div三个子节点，其中所述第二区域div的范围设置为所述地图可视范围区域，设置所述第二区域div的pointer-events为none以使得所述地图可视范围区域不进行事件交互。
60.悬浮框div的其他子节点放置如图1或图3所示的位于左右的信息显示悬浮框，这些悬浮框子节点的范围上用户可以进行点击选择、搜索等事件交互，而于中间的第二区域div的范围则被确定为地图可视范围区域，此部分将智能与地图进行交互而不可进行其他悬浮框的事件交互。
61.通过上述设置，地图在全屏都有显示，但是主要的显示区域是实施例中的第二区域div的范围也即地图可视范围区域，而其他业务信息菜单框体之下还可以部分看到地图，使得显示界面具有较为高级感的显示效果。
62.在一些实施例中，步骤s20中所述目标区域的所述显示范围包括第一四至范围，所述第一四至范围根据所述目标区域在全屏显示时的四至范围确定，或者根据所述目标区域本身的四至经纬度确定；在本实施例中，第一四至范围来源于如图1所示的全屏显示的中国地图的四至范围。所述第一四至范围包括第一经度最小值xmin，第一经度最大值xmax，第一纬度最小值ymin和第一纬度最大值ymax。
63.在一些实施例中，所述步骤s40包括：
64.获取所述目标区域的所述初始四至范围，所述初始四至范围包括所述目标区域于全屏显示时的第一经度最小值xmin，第一经度最大值xmax，第一纬度最小值ymin和第一纬度最大值ymax；如图1所示，中国主体地图作为目标区域在全屏显示时的状态，几乎恰好容纳在全屏的显示范围内，此时的全屏显示的四个边对应所处的经纬度作为初始四至范围，但是此时目标区域的一部分被两侧的悬浮框所遮挡，不利于观察。
65.获取全屏显示范围的第一宽度widthfull和第一高度heightfull，单位为像素；也即显示界面范围在水平和竖直方向上的像素长宽表示。
66.获取所述地图可视范围区域的第二宽度width和第二高度height，以及所述地图可视范围区域的原点横向偏移量xoffset和纵向偏移量yoffset，单位为像素；也即地图可视范围区域在水平和竖直方向上的像素长宽表示，以及以左上角作为各自范围原点情况下，可视范围区域的原点偏移量。但不限于此，还可以根据实际需求确定偏移量的定义。
67.计算所述地图在所述显示界面全屏显示的第二四至范围以对所述显示界面相对地图进行定位，以使得所述目标区域显示在所述地图可视范围区域内，并使得所述目标区域在所述地图可视范围区域内具有最大显示范围，本发明的目的在于将目标区域定位至地图可视范围区域之内，但要尽可能的放大目标区域的显示范围以便于用户观察该区域，换言之，定位后的目标区域的显示范围刚好被地图可视范围区域包含，但目标区域的显示范围也达到了足够大的程度，即目标区域的显示范围若继续扩大则会超出地图可视范围区域。
68.所述第二四至范围包括第二经度最小值xminnew，第一经度最大值xmaxnew，第一纬度最小值yminnew和第一纬度最大值ymaxnew。
69.在一些实施例中，所述第二四至范围的算法包括：
70.xminnew＝xmin-(xoffset/width)*(xmax-xmin)；
71.yminnew＝ymin-((heightfull-yoffset-height)/height)*(ymax-ymin)；
72.xmaxnew＝xmax+((widthfull-xoffset-width)/width)*(xmax-xmin)；
73.ymaxnew＝ymax+(yoffset/height)*(ymax-ymin)。
74.通过上述算法可以得出根据将初始四至范围分别在水平或者竖直方向上充满于地图可视范围区域定位得到的第二四至范围，以根据该结果对地图显示进行重定位。重定位之后实际上对于例如图1所示的效果进行了放缩，结果使得目标区域完整显示在了地图可视范围区域之内，而在地图可视范围区域之外的悬浮框之下则依然显示地图的其他部分，具有较好的显示效果。
75.在重定位过程中，由于地图可视范围区域与全屏显示范围的长宽比例可能不同，按照上述第二四至范围进行定位时以将该四至范围所表示的区域全部显示为原则进行定位，否则，还是会出现目标区域在某个方向上显示不全的问题。
76.本发明还提供一种地图界面显示范围定位自适应装置，包括：
77.可视范围确定单元，用于所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
78.显示范围确定单元，用于确定所述目标区域的显示范围；
79.显示界面定位单元，用于根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
80.本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机被处理器执行时实现如上任一项所述的一种地图界面显示范围定位自适应方法。
81.本发明还提供一种计算机设备，包括至少一个处理器、及与所述处理器通信连接的存储器，其中所述存储器存储可被至少一个处理器执行的指令，所述指令被至少一个处理器执行，以使所述处理器执行如上任一项所述的一种地图界面显示范围定位自适应方法。
82.基于上述，与现有技术相比，本发明提供的一种地图界面显示范围定位自适应方法，首先在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；接着确定所述目标区域的显示范围；根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。通过在在显示界面上设置地图可视范围区域用以目标主体，根据该可视范围区域预与目标区域的显示范围对显示界面进行定位，以避免现有技术中直接使用显示界面全屏对目标区域进行定位导致目标区域被界面上其他业务信息区域的框体等遮盖，影响用户观察目标区域。
83.另外，本领域技术人员应当理解，尽管现有技术中存在许多问题，但是，本发明的每个实施例或技术方案可以仅在一个或几个方面进行改进，而不必同时解决现有技术中或者背景技术中列出的全部技术问题。本领域技术人员应当理解，对于一个权利要求中没有提到的内容不应当作为对于该权利要求的限制。
84.尽管本文中较多的使用了诸如悬浮框、固定定位、绝对定位、子节点、地图可视范围区域和目标区域，但并不排除使用其它术语的可能性。使用这些术语仅仅是为了更方便地描述和解释本发明的本质；把它们解释成任何一种附加的限制都是与本发明精神相违背的。
85.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。