Map interface display range positioning adaptive method, device, medium and equipment

Abstract

The present application relates to the technical field of electronic map, and particularly relates to a map interface display range positioning adaptive method, device, medium and equipment. Compared with the prior art, the present application firstly sets a map visible range area on a map display interface, the map visible range area is used for displaying a target area on the map; then the display range of the target area is determined; the display interface is positioned relative to the map according to the map visible range area and the display range, so that the display range of the target area is located in the map visible range area. By setting the map visible range area on the display interface for the target subject, the display interface is positioned according to the display range of the target area and the visible range area, so as to avoid that the target area is covered by the frame of other business information areas on the interface and the like when the display interface full screen is directly used to position the target area in the prior art, thereby affecting the user to observe the target area.

Description

Technical Field

[0001] This invention relates to the field of electronic map technology, and in particular to a method, apparatus, medium, and device for adaptive positioning of map interface display range. Background Technology

[0002] With the development of cities and the advancement of domestic science and technology, urban management methods are also constantly evolving. From the original simple data table format to data systems using reports and charts, in recent years, with the rapid development of the internet and mobile devices, visualization and intelligent systems have become increasingly common. Many of these systems are related to maps, allowing for a more intuitive display of results. The standard practice for large-screen electronic map visualization systems is to use a layout with top, bottom, left, and right functional panels and a central map. The top panel displays the system name and module menus, the left and right panels display statistical or other business functions, and the center panel displays the electronic map.

[0003] To display map information more comprehensively, electronic map interfaces often include several menu bars or title bars around the perimeter. Typically, only the map is displayed in the center, while the surrounding panels are often considered outdated, aesthetically unappealing, and lack a premium feel. To address this, semi-transparent floating frames are used to suspend the menu bars or service panels above the interface, providing a better display effect. However, if... Figure 1 As shown, some areas of my country's map are obscured by information menus and other elements, and the existing map display still has the problem of obscured display areas that needs to be addressed.

[0004] In summary, the determination of the map interface display range in the existing technology needs to be improved to solve the problem that the displayed information is not intuitive enough. Summary of the Invention

[0005] To address the shortcomings of the existing technology, this invention provides a map interface display range positioning adaptive method, comprising the following steps:

[0006] S10: Set a map visibility area on the map display interface, the map visibility area being used to display target areas on the map;

[0007] S20: Determine the display range of the target area;

[0008] S30: Position the display interface relative to the map based on the map's visible area and the display range, so that the display range of the target area is located within the map's visible area.

[0009] In some embodiments, step S10 includes the following steps:

[0010] Create a map div and set its width and height to 100%.

[0011] Set the position of the map div to fixed to set the map's positioning method to fixed positioning;

[0012] Set the pointer-events property of the map div to auto so that the map div can perform event interactions when it is covered by other divs;

[0013] Create a floating div, and set the width and height of the floating div to 100%;

[0014] Set the position of the floating div to absolute to set the positioning method of the floating box to absolute positioning.

[0015] In some embodiments, the display of the floating div is set to flex, and the flex-direction is set to column, so that the floating box has a vertical flex box layout;

[0016] The floating div has three child nodes: a header div, a middle div, and a bottom div.

[0017] In some embodiments, the display of the middle div is set to flex, and the flex-direction is set to row so that the middle div has a horizontal flex box layout;

[0018] The central div has three child nodes arranged horizontally in sequence: a first area div, a second area div, and a third area div. The range of the second area div is set to the visible area of ​​the map, and the pointer-events of the second area div is set to none so that the visible area of ​​the map does not perform event interactions.

[0019] In some embodiments, the display range of the target area in step S20 includes a first boundary range, which is determined based on the boundary range of the target area when it is displayed in full screen, or based on the latitude and longitude of the target area itself.

[0020] The first four boundaries include the first longitude minimum value xmin, the first longitude maximum value xmax, the first latitude minimum value ymin, and the first latitude maximum value ymax.

[0021] In some embodiments, step S30 includes:

[0022] Obtain the first width (widthFull) and first height (heightFull) of the display interface, in pixels;

[0023] Obtain the second width and second height of the map's visible area, as well as the horizontal offset xOffset and vertical offset yOffset of the origin of the map's visible area relative to the origin of the display interface, in pixels;

[0024] The second and fourth boundaries of the map are calculated to position the display interface relative to the map so that the target area is displayed within the visible range of the map and has the maximum display range within the visible range of the map. The second and fourth boundaries include the second minimum longitude xminNew, the first maximum longitude xmaxNew, the first minimum latitude yminNew, and the first maximum latitude ymaxNew.

[0025] In some embodiments, the algorithm for the second fourth range includes:

[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] The present invention also provides a map interface display range positioning adaptive device, comprising:

[0031] A visible range determination unit is used to set a visible range area on the map display interface, wherein the visible range area is used to display a target area on the map;

[0032] Display range determination unit, used to determine the display range of the target area;

[0033] The display interface positioning unit is used to position the display interface relative to the map based on the map's visible range and the display range, so that the display range of the target area is located within the map's visible range.

[0034] The present invention also provides a computer-readable storage medium storing computer instructions, which, when executed by a processor, implement a map interface display range positioning adaptive method as described in any of the preceding claims.

[0035] The present invention also provides a computer device, including at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to cause the processor to perform a map interface display range positioning adaptive method as described in any of the preceding claims.

[0036] Based on the above, compared with the prior art, the present invention provides a map interface display range positioning adaptive method. First, a map visibility area is set on the map display interface, which is used to display a target area on the map. Then, the display range of the target area is determined. The display interface is positioned relative to the map based on the map visibility area and the display range, so that the display range of the target area is located within the map visibility area. By setting a map visibility area on the display interface for the target subject, and positioning the display interface based on this visibility area and the display range of the target area, the present invention avoids the situation in the prior art where directly using the full screen of the display interface to position the target area results in the target area being obscured by frames or other business information areas on the interface, affecting the user's observation of the target area.

[0037] Other features and beneficial effects of the invention will be set forth in the following description, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other beneficial effects of the invention can be realized and obtained by means of the structures particularly pointed out in the description, claims and drawings. Attached Figure Description

[0038] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. Unless otherwise specified, the positional relationships shown in the drawings in the following description are based on the direction in which the components are drawn in the figure.

[0039] Figure 1 This is a screenshot of the existing map display interface.

[0040] Figure 2 This is a flowchart of the map interface display range positioning adaptive method of the present invention;

[0041] Figure 3 For the purposes of this embodiment of the invention Figure 1 The example shown is the result after adjustment. Detailed Implementation

[0042] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. The technical features designed in the different embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0043] In the description of this invention, it should be understood that the terms "center," "lateral," "upper," "lower," "left," "right," "vertical," "horizontal," "top," "bottom," "inner," and "outer," etc., indicating orientation or positional relationships based on the orientation or positional relationships shown in the accompanying drawings, are only for the convenience of describing the invention and simplifying the description, and do not indicate or imply that the device or component referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of the invention. Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this invention, unless otherwise stated, "a plurality of" means two or more. Additionally, the term "comprising" and any variations thereof mean "at least comprising."

[0044] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integrally formed connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection between two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0045] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the exemplary embodiments. Unless the context clearly indicates otherwise, the singular forms “a” and “an” as used herein are also intended to include the plural. It should also be understood that the terms “comprising” and / or “including” as used herein specify the presence of the stated features, integers, steps, operations, units, and / or components, without excluding the presence or addition of one or more other features, integers, steps, operations, units, components, and / or combinations thereof.

[0046] To achieve at least one or more advantages, such as Figure 2 As shown, the present invention provides a map interface display range positioning adaptive method, including the following steps:

[0047] S10: Set a map visibility area on the map display interface, the map visibility area being used to display target areas on the map;

[0048] S20: Determine the display range of the target area;

[0049] S30: Position the display interface relative to the map based on the map's visible area and the display range, so that the display range of the target area is located within the map's visible area.

[0050] In some embodiments, step S10 includes the following steps:

[0051] Create a map div and set its width and height to 100%.

[0052] Setting the position of the map div to fixed will set the map's positioning method to fixed positioning; that is, the map image is fixed, while the display screen will move on the map to display a fixed area.

[0053] Set the pointer-events property of the map div to auto so that the map div can perform event interactions when it is covered by other divs.

[0054] Create a floating div, and set the width and height of the floating div to 100%;

[0055] Setting the position of the floating div to absolute will set the floating frame's positioning method to absolute positioning. Absolute positioning means positioning the floating frame at a specific location within the display interface. When the display area moves across the map to show different regions, the floating frame's area remains in a fixed position on the display interface, such as a title bar, menu bar, or information display box on the top, bottom, left, or right side. The floating frame can be semi-transparent or opaque; this invention does not limit its transparency.

[0056] In some embodiments, the display of the floating div is set to flex, and the flex-direction is set to column, so that the floating box has a vertical flex box layout;

[0057] The floating div has three child nodes: a header div, a middle div, and a bottom div.

[0058] In some embodiments, the display of the middle div is set to flex, and the flex-direction is set to row so that the middle div has a horizontal flex box layout;

[0059] The central div has three child nodes arranged horizontally in sequence: a first area div, a second area div, and a third area div. The range of the second area div is set to the visible area of ​​the map, and the pointer-events of the second area div is set to none so that the visible area of ​​the map does not perform event interactions.

[0060] Other child nodes of the floating box div are placed as follows Figure 1 or Figure 3 The information display pop-ups shown on the left and right can be clicked, selected, searched, and interacted with by the user within the child nodes of these pop-ups. The area of ​​the second div in the middle is defined as the map's visible area, and this part will only interact with the map and cannot interact with other pop-ups.

[0061] With the above settings, the map is displayed in full screen, but the main display area is the range of the second div in the embodiment, which is the visible area of ​​the map. The map can also be partially seen below the other business information menu box, giving the display interface a more sophisticated display effect.

[0062] In some embodiments, the display range of the target area in step S20 includes a first boundary range, which is determined based on the boundary range of the target area when displayed in full screen, or based on the latitude and longitude of the target area itself; in this embodiment, the first boundary range is derived from, for example... Figure 1 The map of China shown in full-screen display has the following boundaries. The first boundary includes the first minimum longitude xmin, the first maximum longitude xmax, the first minimum latitude ymin, and the first maximum latitude ymax.

[0063] In some embodiments, step S40 includes:

[0064] Obtain the initial four-boundary range of the target area, which includes the first minimum longitude xmin, the first maximum longitude xmax, the first minimum latitude ymin, and the first maximum latitude ymax of the target area when displayed in full screen; for example Figure 1 As shown, when the main map of China is displayed in full screen, it is almost perfectly contained within the full screen display area. At this time, the four sides of the full screen display correspond to the latitude and longitude of the location as the initial four boundaries. However, part of the target area is obscured by the floating frames on both sides, which is not conducive to observation.

[0065] Get the first width (widthFull) and first height (heightFull) of the full-screen display area, in pixels; that is, the pixel dimensions of the display interface in the horizontal and vertical directions.

[0066] Obtain the second width and second height of the map's visible area, as well as the horizontal offset (xOffset) and vertical offset (yOffset) of the map's visible area, in pixels; that is, the pixel dimensions of the map's visible area in the horizontal and vertical directions, and the offset of the visible area from its origin with the top left corner as the origin. However, this is not a limitation; the definition of the offset can be determined according to actual needs.

[0067] The second and fourth boundaries of the map are calculated to position the display interface relative to the map, so that the target area is displayed within the map's visible range and has the maximum display range within the map's visible range. The purpose of this invention is to position the target area within the map's visible range, but to maximize the display range of the target area so that the user can observe the area. In other words, the display range of the positioned target area is just contained within the map's visible range, but the display range of the target area is also large enough that if the display range of the target area continues to expand, it will exceed the map's visible range.

[0068] The second quaternary range includes the second longitude minimum value xminNew, the first longitude maximum value xmaxNew, the first latitude minimum value yminNew, and the first latitude maximum value ymaxNew.

[0069] In some embodiments, the algorithm for the second fourth range includes:

[0070] xminNew=xmin-(xOffset / width)*(xmax-xmin);

[0071] yminNew=ymin-((heightFull-yOffset-height) / height)*(ymax-ymin);

[0072] xmaxNew=xmax+((widthFull-xOffset-width) / width)*(xmax-xmin);

[0073] ymaxNew=ymax+(yOffset / height)*(ymax-ymin).

[0074] The algorithm described above can be used to derive a second boundary range by locating the initial boundary range horizontally or vertically to fill the visible area of ​​the map. This result is then used to reposition the map display. After repositioning, for example... Figure 1 The effect shown is a scaling, which results in the target area being fully displayed within the map's visible area, while other parts of the map are still displayed below the floating box outside the map's visible area, resulting in a better display effect.

[0075] During the relocation process, since the aspect ratio of the visible area on the map may be different from that of the full-screen display area, the positioning should be based on the principle of displaying the entire area represented by the above-mentioned second and fourth boundaries. Otherwise, the target area will still be incompletely displayed in a certain direction.

[0076] The present invention also provides a map interface display range positioning adaptive device, comprising:

[0077] A visible range determination unit is used to set a visible range area on the map display interface, wherein the visible range area is used to display a target area on the map;

[0078] Display range determination unit, used to determine the display range of the target area;

[0079] The display interface positioning unit is used to position the display interface relative to the map based on the map's visible range and the display range, so that the display range of the target area is located within the map's visible range.

[0080] The present invention also provides a computer-readable storage medium storing computer instructions, which, when executed by a processor, implement a map interface display range positioning adaptive method as described in any of the preceding claims.

[0081] The present invention also provides a computer device, including at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to cause the processor to perform a map interface display range positioning adaptive method as described in any of the preceding claims.

[0082] Based on the above, compared with the prior art, the present invention provides a map interface display range positioning adaptive method. First, a map visibility area is set on the map display interface, which is used to display a target area on the map. Then, the display range of the target area is determined. The display interface is positioned relative to the map based on the map visibility area and the display range, so that the display range of the target area is located within the map visibility area. By setting a map visibility area on the display interface for the target subject, and positioning the display interface based on this visibility area and the display range of the target area, the present invention avoids the situation in the prior art where directly using the full screen of the display interface to position the target area results in the target area being obscured by frames or other business information areas on the interface, affecting the user's observation of the target area.

[0083] Furthermore, those skilled in the art should understand that although many problems exist in the prior art, each embodiment or technical solution of the present invention can be improved in only one or a few aspects, without necessarily solving all the technical problems listed in the prior art or the background art simultaneously. Those skilled in the art should understand that any content not mentioned in a claim should not be construed as a limitation on that claim.

[0084] Although this document frequently uses terms such as floating box, fixed positioning, absolute positioning, child node, map visible area, and target area, the possibility of using other terms is not excluded. These terms are used merely for the convenience of describing and explaining the essence of the invention; interpreting them as any additional limitation would contradict the spirit of the invention.

[0085] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A map interface display range adaptive positioning method, characterized in that, Includes the following steps: S10: Set a map visibility area on the map display interface, the map visibility area being used to display target areas on the map; S20: Determine the display range of the target area; S30: Position the display interface relative to the map based on the map's visible area and the display range, so that the display range of the target area is located within the map's visible area; Step S10 includes the following steps: Create a map div, and set its width and height to 100%; Set the position of the map div to fixed to set the map's positioning method to fixed positioning; Set the pointer-events property of the map div to auto so that the map div can perform event interactions when it is covered by other divs; Create a floating div, and set the width and height of the floating div to 100%; Set the position of the floating div to absolute to set the floating box's positioning method to absolute positioning.

2. The map interface display range adaptive positioning method according to claim 1, characterized in that: The floating div has its display set to flex and its flex-direction set to column, so that the floating box has a vertical flexible box layout. The floating div has three child nodes: a header div, a middle div, and a bottom div.

3. The map interface display range positioning adaptive method according to claim 2, characterized in that: The display of the middle div is set to flex, and the flex-direction is set to row so that the middle div has a horizontal flex box layout; The central div has three child nodes arranged horizontally in sequence: a first area div, a second area div, and a third area div. The range of the second area div is set to the visible area of ​​the map, and the pointer-events of the second area div is set to none so that the visible area of ​​the map does not perform event interactions.

4. The map interface display range adaptive positioning method according to claim 1, characterized in that: The display range of the target area in step S20 includes a first boundary range, which is determined based on the boundary range of the target area when it is displayed in full screen, or based on the latitude and longitude of the target area itself. The first four boundaries include the first longitude minimum value xmin, the first longitude maximum value xmax, the first latitude minimum value ymin, and the first latitude maximum value ymax.

5. The map interface display range adaptive positioning method according to claim 4, characterized in that: Step S30 includes: Obtain the first width (widthFull) and first height (heightFull) of the display interface, in pixels; Obtain the second width and second height of the map's visible area, as well as the horizontal offset xOffset and vertical offset yOffset of the origin of the map's visible area relative to the origin of the display interface, in pixels; The second and fourth boundaries of the map are calculated to position the display interface relative to the map so that the target area is displayed within the visible range of the map and has the maximum display range within the visible range of the map. The second and fourth boundaries include the second minimum longitude xminNew, the first maximum longitude xmaxNew, the first minimum latitude yminNew, and the first maximum latitude ymaxNew.

6. The map interface display range adaptive positioning method according to claim 5, characterized in that: The algorithm for the second fourth boundary range includes: xminNew=xmin-(xOffset / width)*(xmax-xmin); yminNew=ymin-((heightFull-yOffset-height) / height)*(ymax-ymin); xmaxNew=xmax+((widthFull-xOffset-width) / width)*(xmax-xmin); ymaxNew=ymax+(yOffset / height)*(ymax-ymin).

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, which, when executed by a processor, implement a map interface display range positioning adaptive method as described in any one of claims 1-6.

8. A computer device, characterized in that: The method includes at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to cause the processor to perform a map interface display range positioning adaptive method as described in any one of claims 1-6.

Images