A convenient map legend component based on Amap API and its layer loading method

Abstract

The present invention discloses a convenient map legend component based on Amap API and a layer loading method thereof, which has flexible configuration units, rich layer type selections, efficient point and line data display, flexible layer management, event callback mechanism, and coordinated work of a data processing unit, a legend display unit, a configuration unit and a layer interaction unit, thereby making the map legend component more flexible, allowing users to clearly know the meaning of each element in the map legend component and operate each element, thereby greatly improving the sense of interaction between the user and the legend component, optimizing the user's use experience, and achieving high information transmission efficiency. Furthermore, the layer loading method further improves the user's use experience by configuring and initializing the map legend component, the interaction method is simple and intuitive, and a modular and structured design is adopted, so that the configuration can be completed without large-scale modification of the overall code, and the use is simple and convenient.

Description

Technical Field

[0001] The present invention relates to the technical field of geographic information systems, and in particular to a convenient map legend component based on Amap API and a layer loading method thereof. Background Art

[0002] The map legend component is an indispensable part of map making. It is used to explain the content represented by the symbols and colors on the map. It is usually located in a corner or on one side of the map. It expresses the meaning of map elements through symbol examples and their explanatory text. The design of the legend needs to consider the completeness and consistency of the symbols to ensure that the legend can accurately reflect the information on the map and provide users with better information understanding and interactive experience. It is an indispensable and important tool on the map.

[0003] Currently, the legend component is not flexible enough when used, and there is a lack of good interaction between the user and the legend component. It is difficult for users to use the legend component simply and intuitively, and the experience is often poor.

[0004] Therefore, it is necessary to invent a convenient map legend component and its layer loading method based on Amap API to solve the above problems. Summary of the invention

[0005] The purpose of the present invention is to provide a convenient map legend component based on the Amap API and a layer loading method thereof. By designing a flexible configuration unit, and having rich layer type selection, efficient point and line data display, flexible layer management, event callback mechanism, and the coordinated work of the data processing unit, the legend display unit, the configuration unit and the layer interaction unit, the map legend component is made more flexible, the user can clearly know the meaning of each element in the map legend component, and operate each element, so that the sense of interaction between the user and the legend component is greatly improved, thereby optimizing the user's use experience and high information transmission efficiency; further, the layer loading method further improves the user's use experience by configuring and initializing the map legend component, the interaction method is simple and intuitive, and a modular and structured design is adopted, so that the configuration and update of the map legend component become easier, and the configuration can be completed without large-scale modification of the overall code. It is simple and convenient to use, so as to solve the above-mentioned deficiencies in the technology.

[0006] In order to achieve the above object, the present invention provides the following technical solution: A convenient map legend component based on Amap API comprises:

[0007] The configuration unit has an initial default configuration, which is used to receive the parameters passed in by the user and integrate them for use by other units;

[0008] A legend display unit, used to display the legend module of the map legend component;

[0009] The layer type unit is used to classify and define the types of map layers;

[0010] The layer interaction unit is used to uniformly encapsulate the interactions of different layer types with the map legend component;

[0011] A data processing unit, used for acquiring legend data, storing legend data, and processing legend data;

[0012] Legend interaction unit, used to control the state of the map legend component;

[0013] The event interaction unit is used to perform an event callback for operations in the map legend component that need to interact with the user.

[0014] The aforementioned convenient map legend component based on Amap API, the other units include a legend display unit, a legend interaction unit, a map layer type unit, a map layer interaction unit, a data processing unit, and an event interaction unit.

[0015] The aforementioned convenient map legend component based on Amap API, the legend module includes the following elements:

[0016] a. Graphic symbols, used to receive image addresses and display graphic symbols;

[0017] Among them, after receiving two picture addresses through the configuration unit, the first one is specified as the legend closed state, and the second one is specified as the legend opened state. When no picture is received, the graphic symbol is not displayed;

[0018] The default width of the graphic symbol is set to 2.5% of the page width, and the default height is set to 2.5% of the page height. The width and height can be set by the configuration unit.

[0019] b. Loading symbol, which is represented by four dots rotating at a constant speed, and is hidden by default;

[0020] c. Content label, which is empty by default. Users can pass in the content extension legend display unit information;

[0021] d. Legend name, hidden by default, displays the title information of the configuration unit.

[0022] The aforementioned convenient map legend component based on Amap API, wherein the layer type unit includes a point layer, a line layer, and other layers;

[0023] Among them, point class layers include: massive point layer, marked point layer, massive point mark layer, annotation class layer, and point aggregation layer.

[0024] The basic expression form of the point layer is that N graphic symbols display location information on the map according to spatial geographic data;

[0025] Line layers include: massive line layers and polyline layers;

[0026] The basic form of the line layer is N polylines showing location information on the map according to spatial geographic data;

[0027] Other layers include: heat map layer and image layer;

[0028] Among them, point layers, line layers, and other layers can all be created or destroyed.

[0029] The aforementioned convenient map legend component based on the Amap API, the layer interaction unit, uniformly encapsulates the interaction of different layer types with the map legend component, specifically including:

[0030] K1. Use the common map method to define the creation, destruction, hiding, and display of layers;

[0031] K2. After the point layer is visualized on the map, it responds to mouse in and out operations;

[0032] K3. After the point layer is visualized on the map, it responds to mouse clicks;

[0033] K4. After the line layer is visualized on the map, it responds to mouse in and out operations;

[0034] K5. After the line layer is visualized on the map, it responds to mouse clicks.

[0035] The aforementioned convenient map legend component based on the Amap API uses the common map method to define the creation, destruction, hiding, and display of layers in K1, as follows:

[0036] Layer creation method: According to different layer types, data is passed in through the corresponding Amap JS API method to create corresponding layers on the map for data visualization;

[0037] Destroy layer method: According to different layer types, destroy the corresponding created layer on the map through the corresponding Amap JS API method;

[0038] Hiding layer method: Based on different layer types, use the corresponding Amap JS API method to hide the corresponding created and displayed layer on the map;

[0039] Display layer method: According to different layer types, the corresponding Amap JS API method is used to display the corresponding created and hidden layer on the map;

[0040] In K2, after the point layer is visualized on the map, it responds to mouse in and out operations as follows:

[0041] When the mouse moves over a point on the layer, the description information of the point data is obtained. If there is any, the description text is displayed above the point, otherwise there is no response;

[0042] When the mouse moves out of a certain point on the layer, the displayed description text is hidden;

[0043] When the mouse moves over a point on the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response;

[0044] When the mouse moves over a certain point on the layer, if the point has a selection effect, remove the selection effect;

[0045] At the same time, the layer operation callback event of the event interaction unit is triggered;

[0046] In K3, after the point layer is visualized on the map, it responds to mouse clicks as follows:

[0047] When the mouse is clicked on a point in the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response;

[0048] At the same time, the layer operation callback event of the event interaction unit is triggered;

[0049] In K4, after the line layer is visualized on the map, it responds to mouse in and out operations as follows:

[0050] When the mouse moves over a certain polyline of the layer, the description information of the polyline data is obtained. If there is any, the description text is displayed above the polyline, otherwise there is no response;

[0051] When the mouse moves out of a certain polyline of the layer, the displayed description text is hidden;

[0052] When the mouse moves over a certain polyline segment of the layer, the selected state configuration of the polyline data is obtained, and the polyline style is changed according to the selected configuration item, indicating that the line segment is a selected line segment, indicating that the polyline is selected;

[0053] When the mouse moves out of a certain polyline of the layer, if the polyline has a selection effect, the selection effect will be removed and restored to the default effect;

[0054] At the same time, the layer operation callback event of the event interaction unit;

[0055] In K5, after the line layer is visualized on the map, it responds to the mouse click operation, specifically: the layer operation callback event of the event interaction unit is triggered at the same time.

[0056] The aforementioned convenient map legend component based on Amap API, wherein the data processing unit obtains the legend data configuration item in the configuration unit and makes a call;

[0057] During the call, the legend display unit loading symbol is displayed, indicating that the map legend component is loading. When the call is completed, the loading symbol is hidden, indicating that the legend data loading is completed.

[0058] After the legend data is loaded successfully, the legend data is stored, and the creation layer method of the layer interaction unit is called according to the legend type obtained by the configuration unit to create a layer.

[0059] The aforementioned portable map legend component based on the Amap API, wherein the legend interaction unit can respond to the mouse moving in and out, respond to the mouse clicking operation to change the state of the graphic symbol, and respond to the mouse clicking operation when in use;

[0060] Among them, in response to the mouse moving in and out:

[0061] If the mouse moves over a graphic symbol, the legend display unit can be controlled to display the legend name.

[0062] If the mouse moves out of the graphic symbol, the legend display unit can be controlled to hide the legend name;

[0063] When changing the state of a graphic symbol in response to a mouse click:

[0064] If the mouse click status is to close the graphic symbol, the graphic symbol will switch to the open status.

[0065] If the mouse click status is to open the graphic symbol, the graphic symbol will be switched to closed status;

[0066] In response to a mouse click:

[0067] When the mouse click status is to close the graphic symbol, add layer visualization operation on the map, specifically:

[0068] A1. If the layer is not created, call the data processing unit to obtain the legend data and create the data acquisition layer;

[0069] A2. If the layer has been created, call the display layer method to visualize the created but hidden layer on the map;

[0070] A3. If the layer has been created and the cache data configuration in the configuration unit is turned on, call the data processing unit again to obtain the legend data and create the data acquisition layer;

[0071] A4. If the timer in the configuration unit is configured to be turned on, a timer is created according to the configured timing setting, and the timing starts when the legend data is successfully obtained. When the timing expires, the data processing unit is called again to obtain the legend data to update and create the layer data;

[0072] When the mouse click status is to open the graphic symbol, the layer has been created and the layer visualization operation is performed on the map. Specifically:

[0073] B1. If the cache legend data configuration in the configuration unit is turned on, call the hide layer method to hide the created and displayed layer;

[0074] B2. If the cache legend data configuration in the configuration unit is turned off, call the destroy layer method to destroy the created layer;

[0075] B3. If the timer configuration is turned on in the configuration unit, turn off the timer.

[0076] The aforementioned convenient map legend component based on Amap API, wherein the event callback includes a layer click callback event, a data loading callback event, and a layer operation callback event;

[0077] The layer click callback event is as follows: when the legend display unit is clicked by the mouse, the callback event is called, and the parameters passed are the current status of the legend display unit switch and the configuration items of the map legend component;

[0078] The data loading callback event is as follows: when obtaining legend data, the callback event will be called in the following three states: when the legend data is started to be obtained, when the legend data is failed to be obtained, and when the legend data is completed. The parameters passed are the calling state and the configuration items of the map legend component.

[0079] The specific layer operation callback events are: for mouse clicks and move events, listen for and process them as follows:

[0080] After the point layer is scattered on the map, it can listen to and call back events for individual points.

[0081] After the line layer is drawn on the map, it is possible to listen to and callback events for a single polyline.

[0082] A layer loading method of a convenient map legend component based on the Amap API includes the following steps:

[0083] S1. Configure and initialize the legend on the map, and determine the configuration list of the map legend component;

[0084] Among them, the configuration list includes size, name, graphic symbol, content style, and map layer;

[0085] S2, determine whether the map legend component is open;

[0086] If yes, execute step S4, if no, do nothing;

[0087] S3. Click on the map legend component to control it to open or close the map layer;

[0088] If the current map legend component is in a closed state, execute step S4; if the current map legend component is in an open state, execute step S6;

[0089] S4. Call the map legend component to obtain data method to obtain map legend component data;

[0090] S5. judging whether the map layer type of the map legend component can be processed;

[0091] If it is yes, create a map layer of the corresponding type according to the map legend component data; if it is no, return the map legend component data;

[0092] S6. generating a map layer on the map;

[0093] S7. When the map legend component is closed, the map layer of the map legend component on the map is removed.

[0094] Compared with the prior art, the present invention has the following beneficial effects:

[0095] 1. The present invention is designed with a flexible configuration unit. The map legend component can be adjusted according to the user's own needs during use, thereby optimizing the user experience. The interface is simple and the information transmission efficiency is high;

[0096] 2. The display and hiding of loading symbols in the legend display unit provides users with clear loading status feedback, avoiding users' anxiety or misunderstanding caused by unclear loading status. The legend name is displayed when the mouse moves into the graphic symbol and is hidden when it moves out. This instant feedback mechanism helps users quickly identify and understand the elements on the map, enhancing the readability and ease of use of the map legend component;

[0097] 3. It provides a rich selection of layer types, efficient point and line data display, and flexible layer management, thereby improving the readability and interactivity of the map legend component, further optimizing the user experience, and through the unified encapsulation of the layer interaction unit, the layer management is more flexible and has a rich interactive experience;

[0098] 4. The event callback mechanism supports the visualization of complex layer data and performs corresponding processing according to the status of the current legend display unit and the configuration items of the map legend component. This instant feedback mechanism enhances the interactivity between users and maps, allowing users to more intuitively control the display and hiding of map layers, thus improving user experience;

[0099] 5. Through the collaborative work of the data processing unit, legend display unit, configuration unit and layer interaction unit, the processing, loading, creation, configuration and optimization of layers become efficient and intuitive, the layer data becomes transparent, controllable and highly flexible, the user interacts better with the entire map legend component, and the operation is more intuitive and convenient;

[0100] 6. The layer loading method configures and initializes the map legend component, so that users can intuitively see the map legend and understand the meaning of different layers on the map, which improves the user experience. The interaction method is simple and intuitive, with high flexibility to meet the needs of different application scenarios. By judging the switch state of the map legend component, the accuracy and effectiveness of layer loading can be ensured. The modular and structured design makes it easier to configure and update the map legend component. The configuration can be completed without large-scale modifications to the overall code. It is simple and convenient to use. BRIEF DESCRIPTION OF THE DRAWINGS

[0101] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0102] Figure 1 A flowchart for layer loading of the map legend component of the present invention. DETAILED DESCRIPTION

[0103] In order to enable those skilled in the art to better understand the technical solution of the present invention, the present invention will be further described in detail below with reference to the accompanying drawings.

[0104] The present invention provides a convenient map legend component based on Amap API, including:

[0105] The configuration unit has an initial default configuration, which is used to receive the parameters passed in by the user and integrate them for use by other units;

[0106] A legend display unit, used to display the legend module of the map legend component;

[0107] The layer type unit is used to classify and define the types of map layers;

[0108] The layer interaction unit is used to uniformly encapsulate the interactions of different layer types with the map legend component;

[0109] A data processing unit, used for acquiring legend data, storing legend data, and processing legend data;

[0110] Legend interaction unit, used to control the state of the map legend component;

[0111] The event interaction unit is used to perform an event callback for operations in the map legend component that need to interact with the user;

[0112] The other units include a legend display unit, a legend interaction unit, a map layer type unit, a map layer interaction unit, a data processing unit, and an event interaction unit.

[0113] In one embodiment, the legend module includes the following elements:

[0114] a. Graphic symbols, used to receive image addresses and display graphic symbols;

[0115] Among them, after receiving two picture addresses through the configuration unit, the first one is specified as the legend closed state, and the second one is specified as the legend opened state. When the picture is not received, the graphic symbol is not displayed. The closed and opened states of the map legend component are defined by receiving the picture address through the configuration unit, so that the display of the map legend component can be flexibly adjusted according to actual needs. When the picture is not received, the graphic symbol is not displayed, thereby avoiding useless placeholders or blank displays and improving the neatness of the user interface.

[0116] The default width of graphic symbols is set to 2.5% of the page width, and the default height is set to 2.5% of the page height. The width and height can be set by the configuration unit, which provides reasonable default values ​​and ensures that users can make personalized adjustments according to specific layout requirements.

[0117] b. The loading symbol, which is represented by four dots rotating at a uniform speed, is hidden by default. It intuitively conveys to users that the legend is loading, avoiding the user's uncertainty during the waiting process and improving the user experience. The loading symbol is hidden by default and is only displayed when needed, avoiding unnecessary interface interference;

[0118] c. Content tag, which is empty by default. Users can pass in content to expand the legend display unit information, that is, allow users to pass in custom content, increasing the information carrying capacity and expression flexibility of the map legend component;

[0119] d. Legend name, hidden by default, allows to reduce the interference of interface elements when not necessary, allowing users to focus more on the main information, and to keep the interface simple and intuitive while ensuring the efficiency of information communication. The displayed content is the title information of the configuration unit, so that the map legend component can not only display the name as needed, but also be consistent with the content of the configuration unit, and the relevance and consistency are enhanced.

[0120] In this embodiment, by designing a flexible configuration module, the map legend component can be adjusted according to the user's own needs during use. The layout of the entire interface is reasonable and relatively neat, with high flexibility and configurability, thereby optimizing the user experience. The interface is simple and the information transmission efficiency is high.

[0121] In one embodiment, the layer type unit includes a point layer, a line layer, and other layers;

[0122] Among them, point class layers include: massive point layer, marked point layer, massive point mark layer, annotation class layer, and point aggregation layer.

[0123] The basic expression form of the point layer is that N graphic symbols display location information on the map according to spatial geographic data, making the display of point data more intuitive and accurate;

[0124] The point layer data includes: unique identification, descriptive text information, longitude, latitude and other extended information;

[0125] Point layers can set layer symbols for each latitude and longitude on the map. Points can be set to display the same layer symbol for the current map legend component, or they can be set to display each point data under the map legend component. When each point is located on the map, determine the layer number type, take the corresponding layer symbol from the map icon configuration list, and display the point on the map;

[0126] The graphic symbol of the point layer is in the shape of a red water drop by default, with a width of 30 pixels and a height of 35 pixels. The width and height can be set separately. The latitude and longitude point in the middle of the layer symbol is used as the reference point by default. The point reference point position can be set uniformly in the current map legend component, or the point reference point position can be set separately for each point data in the map legend component.

[0127] When a point layer displays N points on the map, the mouse can click on one of the points to obtain the name of the layer symbol of the current point. Then, through the map icon configuration list, it is determined whether there is a graphic symbol configuration of the selected style for the graphic symbol. If so, the layer symbol of the point becomes selected and the point is displayed as selected. If not, no processing is performed.

[0128] When the point layer displays N points on the map, the mouse can be hovered over one of the points to obtain the descriptive text information of the current point. If there is, the descriptive text information of the point will be displayed above the point. If not, no processing will be done.

[0129] Line layers include: massive line layers and polyline layers;

[0130] The basic form of the line layer is that N polylines display location information on the map according to spatial geographic data, effectively presenting the direction and distribution of linear data;

[0131] The line layer can set the color of each line segment on the map. The line segment color can be set uniformly for the current map legend component, or the line segment color can be set separately for each line segment data under the map legend component. The width of each line segment on the map can be set uniformly for the current map legend component, or the line segment width can be set separately for each line segment data under the map legend component.

[0132] At the same time, the line layer can set the color and width of each line segment when it is selected on the map. The color and width of the line segment when it is selected can be set uniformly for the current map legend component, and the color and width of the line segment when it is selected can also be set separately for each line segment data under the map legend component;

[0133] When the line layer displays N line segments on the map, you can click on one of the line segments to get the color and width settings of the current line segment when it is selected:

[0134] If yes, the line segment will be changed to the color and width of the selected line segment, and the line segment will be displayed as selected. If no, no processing will be done.

[0135] When the line layer displays N line segments on the map, the mouse can be hovered over one of the line segments to obtain the description text information of the current line segment. If there is, the description text information of the line segment is displayed above the line segment. If not, no processing is performed.

[0136] Other layers include: heat map layer and image layer;

[0137] Among them, point layers, line layers, and other layers can all be created or destroyed, allowing users to dynamically adjust the layer content on the map legend component according to actual needs. The operation flexibility is high, which improves the user experience while optimizing the rendering performance and resource utilization of the map legend component.

[0138] In this embodiment, a rich selection of layer types is provided to meet the map display requirements in different scenarios, and the display of point data is made more intuitive and accurate, and the direction and distribution of linear data are effectively presented;

[0139] Each layer type is an independent module, making it easier to add new layer types and maintain and optimize existing layer types.

[0140] For point layers and line layers, users can customize layer symbols, colors, widths and other properties, and can even set these properties for each point or line segment separately. This high degree of customizability makes the map legend component display more flexible and personalized.

[0141] In one embodiment, the layer interaction unit uniformly encapsulates the interactions of different layer types with the map legend component, specifically including:

[0142] K1. Use the common map method to define the creation, destruction, hiding, and display of layers, as follows:

[0143] Layer creation method: According to different layer types, data is passed in through the corresponding Amap JS API method to create corresponding layers on the map for data visualization;

[0144] Destroy layer method: According to different layer types, destroy the corresponding created layer on the map through the corresponding Amap JS API method;

[0145] Hiding layer method: Based on different layer types, use the corresponding Amap JS API method to hide the corresponding created and displayed layer on the map;

[0146] Display layer method: According to different layer types, the corresponding Amap JS API method is used to display the corresponding created and hidden layer on the map;

[0147] K2. After the point layer is visualized on the map, it responds to mouse in and out operations, as follows:

[0148] When the mouse moves over a point on the layer, the description information of the point data is obtained. If there is any, the description text is displayed above the point, otherwise there is no response;

[0149] When the mouse moves out of a certain point on the layer, the displayed description text is hidden;

[0150] When the mouse moves over a point on the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response;

[0151] When the mouse moves over a certain point on the layer, if the point has a selection effect, remove the selection effect;

[0152] At the same time, the layer operation callback event of the event interaction unit is triggered;

[0153] K3. After the point layer is visualized on the map, it responds to mouse clicks as follows:

[0154] When the mouse is clicked on a point in the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response;

[0155] At the same time, the layer operation callback event of the event interaction unit is triggered;

[0156] K4. After the line layer is visualized on the map, it responds to mouse in and out operations, as follows:

[0157] When the mouse moves over a certain polyline of the layer, the description information of the polyline data is obtained. If there is any, the description text is displayed above the polyline, otherwise there is no response;

[0158] When the mouse moves out of a certain polyline of the layer, the displayed description text is hidden;

[0159] When the mouse moves over a certain polyline segment of the layer, the selected state configuration of the polyline data is obtained, and the polyline style is changed according to the selected configuration item, indicating that the line segment is a selected line segment, indicating that the polyline is selected;

[0160] When the mouse moves out of a certain polyline of the layer, if the polyline has a selection effect, the selection effect will be removed and restored to the default effect;

[0161] At the same time, the layer operation callback event of the event interaction unit;

[0162] K5. After the line layer is visualized on the map, it responds to mouse clicks as follows:

[0163] After the line layer is visualized on the map, it responds to the mouse click operation, specifically: triggering the layer operation callback event of the event interaction unit at the same time.

[0164] In this embodiment, the interaction of different layer types with the map legend component is uniformly encapsulated, which simplifies the complexity of the interaction and makes it unnecessary for developers to write repeated interaction logic for different layer types, thereby improving development efficiency and reducing the error rate, making the map legend component more stable, reliable and efficient in interaction, and providing users with a more friendly and efficient interaction experience;

[0165] At the same time, for point layers and line layers, response logic for mouse in / out and click operations is designed respectively, which enables users to obtain layer information more intuitively and enhances the readability and usability of map legend components.

[0166] The layer operation callback event of the event interaction unit is triggered during the layer interaction process, allowing developers to add custom logic for layer interaction without modifying the original code, thereby enhancing the scalability and maintainability of the system.

[0167] By visually displaying different types of layers and combining them with rich interactive designs, it supports the visualization of complex data, allowing developers to use map legend components to intuitively present and analyze data.

[0168] In one embodiment, the data processing unit obtains the legend data configuration item in the configuration unit and calls it, so that the legend data processing flow is clearer and more efficient, and the redundancy and errors in the legend data loading and processing process are reduced. At the same time, the storage of the legend data also provides convenience for subsequent layer creation and interaction;

[0169] During the call process, the legend display unit displays a loading symbol, indicating that the map legend component is loading. When the call is completed, the loading symbol is hidden, indicating that the legend data loading is complete, thus providing users with clear loading status feedback. That is, when users are waiting for the legend data to load, the display of the loading symbol can inform users that data loading is currently in progress, avoiding user anxiety or misunderstanding caused by unclear loading status. After loading is completed, the hiding of the loading symbol indicates that the data is ready and users can start using map functions.

[0170] After the legend data is loaded successfully, the legend data is stored, and the creation layer method of the layer interaction unit is called according to the configuration unit to obtain the legend type to create a layer, so that the creation and configuration of the layer are more flexible and customizable, meeting the needs of different users and application scenarios.

[0171] In this embodiment, by decomposing and asynchronously processing legend data loading and layer creation tasks, system performance can be optimized and user waiting time can be reduced. At the same time, the storage and reuse of legend data also reduces repeated loading and processing of data, thereby improving the overall efficiency of the system.

[0172] Furthermore, through the collaborative work of the data processing unit, legend display unit, configuration unit and layer interaction unit, its efficient legend data processing and loading, and flexible layer creation and configuration provide users with a more efficient, intuitive and flexible interactive experience.

[0173] In one embodiment, the legend interaction unit, when in use, can respond to mouse movement in and out, respond to mouse click operations to change the state of the graphic symbol, and respond to mouse click operations;

[0174] Among them, in response to the mouse moving in and out:

[0175] If the mouse moves over a graphic symbol, the legend display unit can be controlled to display the legend name.

[0176] If the mouse moves out of the graphic symbol, the legend display unit can be controlled to hide the legend name;

[0177] Furthermore, the legend name is displayed when the mouse moves into the graphic symbol and is hidden when the mouse moves out. This instant feedback mechanism can help users quickly identify and understand the elements on the map legend component, enhancing the readability and usability of the map legend component.

[0178] When changing the state of a graphic symbol in response to a mouse click:

[0179] If the mouse click status is to close the graphic symbol, the graphic symbol will switch to the open status.

[0180] If the mouse click status is to open the graphic symbol, the graphic symbol will be switched to closed status;

[0181] Furthermore, by clicking on a graphic symbol to switch its status, such as on or off, users can intuitively control the display and hiding of map layers, which improves the flexibility of layer interaction and user participation;

[0182] In response to a mouse click:

[0183] When the mouse click status is to close the graphic symbol, add layer visualization operation on the map, specifically:

[0184] A1. If the layer is not created, call the data processing unit to obtain the legend data and create the data acquisition layer;

[0185] A2. If the layer has been created, call the display layer method to visualize the created but hidden layer on the map;

[0186] A3. If the layer has been created and the cache data configuration in the configuration unit is turned on, call the data processing unit again to obtain the legend data and create the data acquisition layer;

[0187] A4. If the timer in the configuration unit is configured to be turned on, a timer is created according to the configured timing setting, and the timing starts when the legend data is successfully obtained. When the timing expires, the data processing unit is called again to obtain the legend data to update and create the layer data;

[0188] When the mouse click status is to open the graphic symbol, the layer has been created and the layer visualization operation is performed on the map. Specifically:

[0189] B1. If the cache legend data configuration in the configuration unit is turned on, call the hide layer method to hide the created and displayed layer;

[0190] B2. If the cache legend data configuration in the configuration unit is turned off, call the destroy layer method to destroy the created layer;

[0191] B3. If the timer configuration is turned on in the configuration unit, turn off the timer operation;

[0192] Furthermore, according to the settings of the configuration unit, the creation, display, hiding and destruction of layers are managed intelligently. For example, when the cache data configuration is turned on, the cached layer data is used first. When the cache data configuration is turned off, the data is re-acquired and the layer is created. This strategy not only ensures the real-time nature of the data, but also optimizes the use of system resources. The introduction of the timer realizes the timed update of the layer, ensuring the accuracy and timeliness of the map legend component information. Users can set the timer as needed to automatically update the layer data and reduce the tediousness of manual operations.

[0193] And through intelligent layer management strategies, unnecessary layer creation and destruction operations are avoided, reducing the waste of system resources. The use of timers realizes the regular update of layer data, avoids such data lags and errors, and improves the accuracy and reliability of map legend component information.

[0194] In this embodiment, the design of the legend interaction unit not only improves the user experience and readability of the map legend component, but also optimizes the layer management strategy, enhances the scalability and maintainability of the system, improves system performance, and provides users with a more efficient, intuitive and flexible map legend component interaction experience.

[0195] In one embodiment, the event callback includes a layer click callback event, a data loading callback event, and a layer operation callback event;

[0196] The layer click callback event is as follows: when the legend display unit is clicked by the mouse, the callback event is called, and the parameters passed are the current status of the legend display unit switch and the configuration items of the map legend component;

[0197] Furthermore, when the user clicks on the legend display unit, a callback event can be triggered immediately, and corresponding processing can be performed according to the current state of the legend display unit and the configuration items of the map legend component. This instant feedback mechanism enhances the interactivity between the user and the map legend component, allowing the user to more intuitively control the display and hiding of map layers;

[0198] The data loading callback event is as follows: when obtaining legend data, the callback event will be called in the following three states: when the legend data is started to be obtained, when the legend data is failed to be obtained, and when the legend data is completed. The parameters passed are the calling state and the configuration items of the map legend component.

[0199] Furthermore, in the process of acquiring legend data, callback events are used to notify users of the start, failure, and end of data acquisition, so that users can clearly understand the progress and status of data loading. This transparency helps users better understand the loading status of the map legend component and take corresponding measures when necessary. At the same time, the callback event also passes the configuration items of the map legend component, so that users can have more precise control based on the configuration;

[0200] The specific layer operation callback events are: for mouse clicks and move events, listen for and process them as follows:

[0201] After the point layer is scattered on the map, it can listen to and call back events for individual points.

[0202] After the line layer is drawn on the map, it can listen to and callback events for a single polyline;

[0203] Furthermore, by monitoring the mouse click and move events, refined operation control of point and line layers is achieved. Users can monitor and call back events for individual points or polylines on the map legend component, thereby making more accurate analysis and decision-making. This refined control makes the application of the map legend component more flexible and powerful.

[0204] The design of the callback mechanism makes the map legend component and layer management more modular and configurable. Developers can customize the processing logic of callback events according to actual needs without modifying the core code, thereby improving the scalability and maintainability of the system and making the map legend component application easier to upgrade and maintain;

[0205] At the same time, the design of callback events also allows users to more intuitively understand the loading status of the map legend component, the status of the layer, and the operation of a single point or line. This design optimizes the user experience and makes it smoother and more enjoyable for users to use the map legend component application.

[0206] In this embodiment, by introducing an event callback mechanism, the interactivity of the map legend component and layer management, the transparency and controllability of data loading, the refined control of layer operations, and the scalability and maintainability of the system are significantly improved, providing users with a more efficient, intuitive and flexible interactive experience.

[0207] like Figure 1 As shown, a layer loading method of a convenient map legend component based on the Amap API includes the following steps:

[0208] S1. Configure and initialize the legend on the map, and determine the configuration list of the map legend component;

[0209] Among them, the configuration list includes size, name, graphic symbol, content style, and map layer;

[0210] S2, determine whether the map legend component is open;

[0211] If yes, execute step S4, if no, do nothing;

[0212] S3. Click on the map legend component to control it to open or close the map layer;

[0213] If the current map legend component is in a closed state, execute step S4; if the current map legend component is in an open state, execute step S6;

[0214] S4. Call the map legend component to obtain data method to obtain map legend component data;

[0215] S5. judging whether the map layer type of the map legend component can be processed;

[0216] If it is yes, create a map layer of the corresponding type according to the map legend component data; if it is no, return the map legend component data;

[0217] S6. generating a map layer on the map;

[0218] S7. When the map legend component is closed, the map layer of the map legend component on the map is removed.

[0219] The layer loading method has the following specific beneficial effects:

[0220] Improve user experience: By configuring and initializing the map legend component, users can intuitively see the map legend and understand the meaning of different layers on the map, so that they can use the map more conveniently. At the same time, users can control the opening and closing of layers by clicking on the legend component. This interactive method is simple and intuitive, thus improving the user experience;

[0221] Flexibility and scalability: This layer loading method allows you to customize the size, name, graphic symbol, content style, and map layer of the legend component as needed. It is highly flexible and the map legend component can adapt to different application scenarios and meet diverse needs.

[0222] Efficiency: By judging the switch status of the map legend component, unnecessary layer loading and unloading operations can be avoided, improving the efficiency of map rendering. In addition, judging whether the map layer type of the map legend component can be processed also ensures the accuracy and effectiveness of layer loading;

[0223] Resource optimization: When the map legend component is closed, the corresponding map layer can be automatically removed, thereby releasing map rendering resources and avoiding resource waste;

[0224] Easy to maintain and update: The layer loading method adopts a modular and structured design, which makes it easier to configure and update the map legend component. When you need to add a new layer or modify the configuration of an existing layer, you only need to update the corresponding configuration list without making large-scale modifications to the overall code;

[0225] This layer loading method has shown significant beneficial effects in improving user experience, flexibility and scalability, efficiency, resource optimization, and ease of maintenance and updating.

[0226] Among them, the Map JS API is a Web map rendering engine provided free of charge by the AutoNavi open platform, which mainly uses WebGL as the main drawing method.

[0227] In summary, the present invention is designed with a flexible configuration unit, and the map legend component can be adjusted according to the user's own needs during use, thereby optimizing the user's use experience, and the interface is simple while the information transmission efficiency is high;

[0228] The display and hiding of loading symbols in the legend display unit provides users with clear loading status feedback, avoiding users' anxiety or misunderstanding caused by unclear loading status. The legend name is displayed when the mouse moves into the graphic symbol and is hidden when it moves out. This instant feedback mechanism helps users quickly identify and understand the elements on the map, enhancing the readability and ease of use of the map legend component.

[0229] It also provides a rich selection of layer types, efficient point and line data display, and flexible layer management, thereby improving the readability and interactivity of the map legend component, further optimizing the user experience, and through the unified encapsulation of the layer interaction unit, the layer management is more flexible and has a rich interactive experience;

[0230] The event callback mechanism supports the visualization of complex layer data and performs corresponding processing according to the status of the current legend display unit and the configuration items of the map legend component. This instant feedback mechanism enhances the interactivity between users and maps, allowing users to more intuitively control the display and hiding of map layers, thus improving user experience.

[0231] Through the collaborative work of the data processing unit, legend display unit, configuration unit and layer interaction unit, the processing, loading, creation, configuration and optimization of layers become efficient and intuitive, the layer data becomes transparent, controllable and highly flexible, the user has better interaction with the entire map legend component, and the operation is more intuitive and convenient;

[0232] Furthermore, the layer loading method configures and initializes the map legend component, so that the user can intuitively see the map legend and understand the meaning of different layers on the map, thereby improving the user experience. The interaction method is simple and intuitive, with high flexibility, meeting the needs of different application scenarios. By judging the switch state of the map legend component, the accuracy and effectiveness of layer loading can be ensured. The modular and structured design is adopted, making the configuration and update of the map legend component easier, and the configuration can be completed without large-scale modification of the overall code. It is simple and convenient to use.

[0233] This embodiment solves the problems that the existing legend component has low flexibility when in use, lacks a good sense of interaction between the user and the legend component, and is difficult for the user to use the legend component simply and intuitively, resulting in a poor user experience.

[0234] The above description is only by way of illustration of certain exemplary embodiments of the present invention. It is undoubted that those skilled in the art can modify the described embodiments in various ways without departing from the spirit and scope of the present invention. Therefore, the above drawings and descriptions are illustrative in nature and should not be construed as limiting the scope of protection of the claims of the present invention.

Claims

1. A convenient map legend component based on Amap API, characterized by: include: The configuration unit has an initial default configuration, which is used to receive the parameters passed in by the user and integrate them for use by other units; A legend display unit, used to display the legend module of the map legend component; The layer type unit is used to classify and define the types of map layers; The layer interaction unit is used to uniformly encapsulate the interactions of different layer types with the map legend component; A data processing unit, used for acquiring legend data, storing legend data, and processing legend data; Legend interaction unit, used to control the state of the map legend component; The event interaction unit is used to perform an event callback for operations in the map legend component that need to interact with the user; The legend module includes the following elements: a. Graphic symbols, used to receive image addresses and display graphic symbols; Among them, after receiving two picture addresses through the configuration unit, the first one is specified as the legend closed state, and the second one is specified as the legend opened state. When no picture is received, the graphic symbol is not displayed; The default width of the graphic symbol is set to 2.5% of the page width, and the default height is set to 2.5% of the page height. The width and height can be set by the configuration unit. b. Loading symbol, which is represented by four dots rotating at a constant speed, and is hidden by default; c. Content label, which is empty by default. Users can pass in the content extension legend display unit information; d. Legend name, hidden by default, displays the title information of the configuration unit; The layer type unit includes point layer, line layer and other layers; Among them, point class layers include: massive point layer, marked point layer, massive point mark layer, annotation class layer, and point aggregation layer. The basic expression form of the point layer is that N graphic symbols display location information on the map according to spatial geographic data; Line layers include: massive line layers and polyline layers; The basic form of the line layer is N polylines showing location information on the map according to spatial geographic data; Other layers include: heat map layer and image layer; Among them, point layers, line layers, and other layers can all be created or destroyed.

2. A convenient map legend component based on Amap API according to claim 1, characterized in that: The other units include a legend display unit, a legend interaction unit, a map layer type unit, a map layer interaction unit, a data processing unit, and an event interaction unit.

3. A convenient map legend component based on Amap API according to claim 1, characterized in that: The layer interaction unit uniformly encapsulates the interactions of different layer types with the map legend component, specifically including: K1. Use the common map method to define the creation, destruction, hiding, and display of layers; K2. After the point layer is visualized on the map, it responds to mouse in and out operations; K3. After the point layer is visualized on the map, it responds to mouse clicks; K4. After the line layer is visualized on the map, it responds to mouse in and out operations; K5. After the line layer is visualized on the map, it responds to mouse clicks.

4. A convenient map legend component based on Amap API according to claim 3, characterized in that: In K1, the creation, destruction, hiding, and display of layers are defined using the common map methods, as follows: Layer creation method: According to different layer types, data is passed in through the corresponding Amap JS API method to create corresponding layers on the map for data visualization; Destroy layer method: According to different layer types, destroy the corresponding created layer on the map through the corresponding Amap JS API method; Hiding layer method: Based on different layer types, use the corresponding Amap JS API method to hide the corresponding created and displayed layer on the map; Display layer method: According to different layer types, the corresponding Amap JS API method is used to display the corresponding created and hidden layer on the map; In K2, after the point layer is visualized on the map, it responds to mouse in and out operations as follows: When the mouse moves over a point on the layer, the description information of the point data is obtained. If there is any, the description text is displayed above the point, otherwise there is no response; When the mouse moves out of a certain point on the layer, the displayed description text is hidden; When the mouse moves over a point on the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response; When the mouse moves over a certain point on the layer, if the point has a selection effect, remove the selection effect; At the same time, the layer operation callback event of the event interaction unit is triggered; In K3, after the point layer is visualized on the map, it responds to mouse clicks as follows: When the mouse is clicked on a point in the layer, the selected state graphic symbol of the point data is obtained; if there is one, a selected state graphic symbol is superimposed on the point to indicate that the point is selected, otherwise there is no response; At the same time, the layer operation callback event of the event interaction unit is triggered; In K4, after the line layer is visualized on the map, it responds to mouse in and out operations as follows: When the mouse moves over a certain polyline of the layer, the description information of the polyline data is obtained. If there is any, the description text is displayed above the polyline, otherwise there is no response; When the mouse moves out of a certain polyline of the layer, the displayed description text is hidden; When the mouse moves over a certain polyline segment of the layer, the selected state configuration of the polyline data is obtained, and the polyline style is changed according to the selected configuration item, indicating that the line segment is a selected line segment, indicating that the polyline is selected; When the mouse moves out of a certain polyline of the layer, if the polyline has a selection effect, the selection effect will be removed and restored to the default effect; At the same time, the layer operation callback event of the event interaction unit; In K5, after the line layer is visualized on the map, it responds to the mouse click operation, specifically: the layer operation callback event of the event interaction unit is triggered at the same time.

5. A convenient map legend component based on Amap API according to claim 4, characterized in that: The data processing unit obtains the legend data configuration item in the configuration unit and calls it; During the call, the legend display unit loading symbol is displayed, indicating that the map legend component is loading. When the call is completed, the loading symbol is hidden, indicating that the legend data loading is completed. After the legend data is loaded successfully, the legend data is stored, and the creation layer method of the layer interaction unit is called according to the legend type obtained by the configuration unit to create a layer.

6. A convenient map legend component based on Amap API according to claim 5, characterized in that: When in use, the legend interaction unit can respond to the mouse moving in and out, respond to the mouse clicking operation to change the state of the graphic symbol, and respond to the mouse clicking operation; Among them, in response to the mouse moving in and out: If the mouse moves over a graphic symbol, the legend display unit can be controlled to display the legend name. If the mouse moves out of the graphic symbol, the legend display unit can be controlled to hide the legend name; When changing the state of a graphic symbol in response to a mouse click: If the mouse click status is to close the graphic symbol, the graphic symbol will switch to the open status. If the mouse click status is to open the graphic symbol, the graphic symbol will be switched to closed status; In response to a mouse click: When the mouse click status is to close the graphic symbol, add layer visualization operation on the map, specifically: A1. If the layer is not created, call the data processing unit to obtain the legend data and create the data acquisition layer; A2. If the layer has been created, call the display layer method to visualize the created but hidden layer on the map; A3. If the layer has been created and the cache data configuration in the configuration unit is turned on, call the data processing unit again to obtain the legend data and create the data acquisition layer; A4. If the timer in the configuration unit is configured to be turned on, a timer is created according to the configured timing setting, and the timing starts when the legend data is successfully obtained. When the timing expires, the data processing unit is called again to obtain the legend data to update and create the layer data; When the mouse click status is to open the graphic symbol, the layer has been created and the layer visualization operation is performed on the map. Specifically: B1. If the cache legend data configuration in the configuration unit is turned on, call the hide layer method to hide the created and displayed layer; B2. If the cache legend data configuration in the configuration unit is turned off, call the destroy layer method to destroy the created layer; B3. If the timer configuration is turned on in the configuration unit, turn off the timer.

7. A convenient map legend component based on Amap API according to claim 6, characterized in that: The event callback includes a layer click callback event, a data loading callback event, and a layer operation callback event; The layer click callback event is as follows: when the legend display unit is clicked by the mouse, the callback event is called, and the parameters passed are the current status of the legend display unit switch and the configuration items of the map legend component; The data loading callback event is as follows: when obtaining legend data, the callback event will be called in the following three states: when the legend data is started to be obtained, when the legend data is failed to be obtained, and when the legend data is completed. The parameters passed are the calling state and the configuration items of the map legend component. The specific layer operation callback events are: for mouse clicks and move events, listen for and process them as follows: After the point layer is scattered on the map, it can listen to and call back events for individual points. After the line layer is drawn on the map, it is possible to listen to and callback events for a single polyline.

8. A layer loading method for a convenient map legend component based on Amap API according to any one of claims 1 to 7, characterized in that: The following steps are involved: S1. Configure and initialize the legend on the map, and determine the configuration list of the map legend component; Among them, the configuration list includes size, name, graphic symbol, content style, and map layer; S2, determine whether the map legend component is open; If yes, execute step S4, if no, do nothing; S3. Click on the map legend component to control it to open or close the map layer; If the current map legend component is in a closed state, execute step S4; if the current map legend component is in an open state, execute step S6; S4. Call the map legend component to obtain data method to obtain map legend component data; S5. judging whether the map layer type of the map legend component can be processed; If it is yes, create a map layer of the corresponding type according to the map legend component data; if it is no, return the map legend component data; S6. generating a map layer on the map; S7. When the map legend component is closed, the map layer of the map legend component on the map is removed.

Images