本发明专利技术涉及电子地图技术领域，特别涉及一种地图界面显示范围定位自适应方法、装置、介质及设备。与现有技术相比，本发明专利技术首先在地图显示界面上设置地图可视范围区域，地图可视范围区域用于显示地图上的目标区域；接着确定目标区域的显示范围；根据地图可视范围区域以及显示范围对显示界面相对于地图进行定位，以使得目标区域的显示范围位于地图可视范围区域内。通过在在显示界面上设置地图可视范围区域用以目标主体，根据该可视范围区域预与目标区域的显示范围对显示界面进行定位，以避免现有技术中直接使用显示界面全屏对目标区域进行定位导致目标区域被界面上其他业务信息区域的框体等遮盖，影响用户观察目标区域。影响用户观察目标区域。影响用户观察目标区域。
【技术实现步骤摘要】
地图界面显示范围定位自适应方法、装置、介质及设备
[0001]本专利技术涉及电子地图
，特别涉及一种地图界面显示范围定位自适应方法、装置、介质及设备。
技术介绍
[0002]随着国家城市的发展和国内科技技术的进步，对城市的管理手段也在不断进步，从原来单一的数据表格式展示管理到报表、图表等数据系统管理，近年来，随着互联网和移动端的快速发展，可视化、智能化系统越来越普遍使用，而这些系统很多与地图有关联，它能更直观的展示出结果。用于大屏的电子地图可视化展示系统，现在正常的做法是：采用上下左右功能面板加上中间地图的布局方式，上部系统为名称加模块菜单栏，左右为统计或者其他业务功能面板，中间为电子地图的方式进行系统的展示。
[0003]电子地图的展示界面上为了更为全面的展示地图信息，会设置位于界面周边的若干菜单栏或者标题栏，一般的，只有中间为地图的方式，四周的面板太古板，不太美观，高级感比较欠缺。对此，会采用半透明悬浮框的方式将菜单栏或者业务栏悬浮于界面上，具有较好的展示效果。但是如图1所示，我国地图的部分区域被信息菜单栏等遮挡，现有的地图显示还是会存在显示区域被遮挡的问题需要解决。
[0004]综上，现有技术中，对于地图界面显示范围的确定需要改进以解决界面显示信息不够直观的问题。
技术实现思路
[0005]为解决上述现有技术中的不足，本专利技术提供一种地图界面显示范围定位自适应方法，包括以下步骤：
[0006]S10：在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
[0007]S20：确定所述目标区域的显示范围；
[0008]S30：根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
[0009]在一些实施例中，步骤S10包括以下步骤：
[0010]创建地图div，将所述地图div的宽高设为100％；
[0011]设置所述地图div的position为fixed以将所述地图的定位方式设置为固定定位；
[0012]将所述地图div的pointer
‑
events设为auto，以使得所述地图div被其他div覆盖时能够进行事件交互；
[0013]创建悬浮div，所述悬浮div的宽高设为100％；
[0014]将所述悬浮div的position为absolute以将所述悬浮框的定位方式设置为绝对定位。
[0015]在一些实施例中，所述悬浮div的display设置为flex，flex
‑
direction设置为
column，以使得所述悬浮框具有纵向弹性盒布局；
[0016]所述悬浮div具有头部div、中部div和底部div三个子节点。
[0017]在一些实施例中，所述中部div的display设置为flex，flex
‑
direction设置为row以使得所述中部div具有横向弹性盒布局；
[0018]所述中部div具有横向依次布置的第一区域div、第二区域div和第三区域div三个子节点，其中所述第二区域div的范围设置为所述地图可视范围区域，设置所述第二区域div的pointer
‑
events为none以使得所述地图可视范围区域不进行事件交互。
[0019]在一些实施例中，步骤S20中所述目标区域的所述显示范围包括第一四至范围，所述第一四至范围根据所述目标区域在全屏显示时的四至范围确定，或者根据所述目标区域本身的四至经纬度确定；
[0020]所述第一四至范围包括第一经度最小值xmin，第一经度最大值xmax，第一纬度最小值ymin和第一纬度最大值ymax。
[0021]在一些实施例中，所述步骤S30包括：
[0022]获取所述显示界面的第一宽度widthFull和第一高度heightFull，单位为像素；
[0023]获取所述地图可视范围区域的第二宽度width和第二高度height，以及所述地图可视范围区域的原点相对所述显示界面的原点横向偏移量xOffset和纵向偏移量yOffset，单位为像素；
[0024]计算所述地图在所述显示界面全屏显示的第二四至范围以对所述显示界面相对地图进行定位，以使得所述目标区域显示在所述地图可视范围区域内，并使得所述目标区域在所述地图可视范围区域内具有最大显示范围，所述第二四至范围包括第二经度最小值xminNew，第一经度最大值xmaxNew，第一纬度最小值yminNew和第一纬度最大值ymaxNew。
[0025]在一些实施例中，所述第二四至范围的算法包括：
[0026]xminNew＝xmin
‑
(xOffset/width)*(xmax
‑
xmin)；
[0027]yminNew＝ymin
‑
((heightFull
‑
yOffset
‑
height)/height)*(ymax
‑
ymin)；
[0028]xmaxNew＝xmax+((widthFull
‑
xOffset
‑
width)/width)*(xmax
‑
xmin)；
[0029]ymaxNew＝ymax+(yOffset/height)*(ymax
‑
ymin)。
[0030]本专利技术还提供一种地图界面显示范围定位自适应装置，包括：
[0031]可视范围确定单元，用于所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；
[0032]显示范围确定单元，用于确定所述目标区域的显示范围；
[0033]显示界面定位单元，用于根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。
[0034]本专利技术还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机被处理器执行时实现如上任一项所述的一种地图界面显示范围定位自适应方法。
[0035]本专利技术还提供一种计算机设备，包括至少一个处理器、及与所述处理器通信连接的存储器，其中所述存储器存储可被至少一个处理器执行的指令，所述指令被至少一个处理器执行，以使所述处理器执行如上任一项所述的一种地图界面显示范围定位自适应方法。
[0036]基于上述，与现有技术相比，本专利技术提供的一种地图界面显示范围定位自适应方法，首先在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；接着确定所述目标区域的显示范围；根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种地图界面显示范围定位自适应方法，其特征在于，包括以下步骤：S10：在所述地图显示界面上设置地图可视范围区域，所述地图可视范围区域用于显示地图上的目标区域；S20：确定所述目标区域的显示范围；S30：根据所述地图可视范围区域以及所述显示范围对显示界面相对于地图进行定位，以使得所述目标区域的显示范围位于所述地图可视范围区域内。2.根据权利要求1所述的地图界面显示范围定位自适应方法，其特征在于：步骤S10包括以下步骤：创建地图div，将所述地图div的宽高设为100％；设置所述地图div的position为fixed以将所述地图的定位方式设置为固定定位；将所述地图div的pointer
‑
events设为auto，以使得所述地图div被其他div覆盖时能够进行事件交互；创建悬浮div，所述悬浮div的宽高设为100％；将所述悬浮div的position为absolute以将所述悬浮框的定位方式设置为绝对定位。3.根据权利要求2所述的地图界面显示范围定位自适应方法，其特征在于：所述悬浮div的display设置为flex，flex
‑
direction设置为column，以使得所述悬浮框具有纵向弹性盒布局；所述悬浮div具有头部div、中部div和底部div三个子节点。4.根据权利要求3所述的地图界面显示范围定位自适应方法，其特征在于：所述中部div的display设置为flex，flex
‑
direction设置为row以使得所述中部div具有横向弹性盒布局；所述中部div具有横向依次布置的第一区域div、第二区域div和第三区域div三个子节点，其中所述第二区域div的范围设置为所述地图可视范围区域，设置所述第二区域div的pointer
‑
events为none以使得所述地图可视范围区域不进行事件交互。5.根据权利要求1所述的地图界面显示范围定位自适应方法，其特征在于：步骤S20中所述目标区域的所述显示范围包括第一四至范围，所述第一四至范围根据所述目标区域在全屏显示时的四至范围确定，或者根据所述目标区域本身的四至经纬度确定；所述第一四至范围包括第一经度最小值xmin，第一经度最大值xmax，第一纬度最小值ymin和第一纬度最大值ymax。6.根据权利要求5所述的地图界面显示范围定位自适应方法，其特征在于：所述步骤S30包括：获取所述显示界面的第一宽度widthFull和第一高度heightFull，单位为像素；获取...
【专利技术属性】
技术研发人员：乔志勇，陈庆聪，欧阳波，蔡剑英，
申请(专利权)人：厦门精图信息技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。