A method for layer usage

By standardizing parameters and using the Mapmost framework's layer loading method, the problems of repetitive development and difficult interaction of map functions are solved, enabling rapid construction and flexible use of map modules, suitable for various business fields.

CN114663563BActive Publication Date: 2026-02-17SUZHOU IND PARK SURVEYING MAPPING & GEOINFORMATION CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202210182355.1
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-02-25
Publication Date
2026-02-17
Estimated Expiration
2042-02-25

AI Technical Summary

Technical Problem

In existing technologies, map functions are difficult to develop and maintain repeatedly, geographic data has a high barrier to entry, and different rendering languages ​​in map containers make it difficult for developers and clients to interact.

Method used

This paper provides a method for using layers, which determines the resource acquisition method through standardized parameters and layer type fields, uses the Mapmost framework for layer loading and removal, encapsulates map interaction events, and simplifies the use of the map framework.

Benefits of technology

It reduces redundant development of map function code logic, lowers development difficulty, is suitable for front-end developers without GIS knowledge, supports the rapid construction of map modules in various business fields, and improves development efficiency and flexibility.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114663563B_ABST
    Figure CN114663563B_ABST
Patent Text Reader

Abstract

The application discloses a kind of layer use method, comprising: S11, calling unified layer loading method, input standardization parameter and judging variable;S12, the layer type field of standardization parameter is judged layer resource acquisition mode;S13, the preprocessing of layer resource is carried out;S14, the specific layer rendering mode is judged by layer type parameter.This application realizes that all types of map resource display call the same method, let user convert the understanding of map and various layer professional concept into the understanding of standard parameter.This method judges each field of standard parameter, automatically carries out corresponding subsequent loading / removal process, greatly reduces the secondary development of ordinary developer to map framework.This application has the advantages of simple code, convenient to use, high reusability, strong flexibility, etc., is more suitable for front-end developer without GIS knowledge, and can be widely used in the rapid construction of map module in various business fields.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention relates to the field of GIS technology, and in particular to a method for using layers. Background Technology

[0002] With the comprehensive development of GIS technology, it has gradually become an important branch of the information industry. Among them, WebGIS, leveraging the advantages of the Internet and with its excellent scalability and cross-platform compatibility, is widely used in many fields such as resources, environment, land, real estate, transportation, and government offices. Mapmost, as a front-end map framework that supports loading various map services such as raster and vector, offers high flexibility in front-end style customization and rendering, and integrates 3D scenes, has become a superior WebGIS technology choice in production.

[0003] Currently, map modules are widely used in various business scenarios, but the requirements for map functions are relatively fixed. The current production model easily leads to the repetitive development of map functions, inconsistent functions and styles, and difficulties in maintenance.

[0004] At the same time, the use of geographic data and map resources requires developers to have strong professional knowledge, and the existing technology has a high barrier to entry; if the advantages of front-end style customization and 3D scene rendering are to be brought into play, a higher learning cost is required.

[0005] Secondly, the rendering language for geographic features in the map container (WebGL) differs from that of ordinary front-end rendering languages ​​(HTML-DOM), making interaction between developers and clients more difficult. Summary of the Invention

[0006] The technical problem to be solved by this invention is to provide a method for quickly building map modules that is suitable for front-end developers without GIS knowledge and can be widely used in various business fields.

[0007] To address the above problems, this invention provides a layer usage method, including a layer loading step, wherein the layer loading step includes:

[0008] S11. Call the unified layer loading method, passing in standardized parameters and judgment variables;

[0009] S12. Determine the layer resource acquisition method through the layer type field of the standardized parameters;

[0010] S13. Perform preprocessing of layer resources;

[0011] S14. Determine the specific layer rendering method by using the layer type parameter.

[0012] As a further improvement of the present invention, step S12 includes:

[0013] If the layer resource comes from the service address, the service return is obtained through a request; among them, the layer resources of feature layer and 3D effect layer come from the data field in the standardized parameters; the layer resources of map service layer and 3D model layer come from the service address field in the standardized parameters.

[0014] As a further improvement of the present invention, step S13 includes: if the original data of the layer resource is not in the standard Geojson format, then the original data is preprocessed and the layer resource composed of the standard data format is returned; if the annotation field in the standardization parameters has customization requirements, then the original data is also preprocessed to generate the layer resource of the annotation layer corresponding to the layer.

[0015] As a further improvement of the present invention, step S14 includes:

[0016] S141. If the layer type is a feature layer or a vector tile layer, then use the corresponding point, icon, line, and polygon layer loading methods in the Mapmost framework; the rendering style of the layer is determined by the icon field, filter field, model field, and transparency field in the standardization parameters; the data filtering of the layer is determined by the data filter field in the standardization parameters.

[0017] S142. If the layer type is a raster slice or image mask layer, the corresponding raster layer loading method in the Mapmost framework will be used; the rendering style of the layer is determined by the transparency field in the normalization parameters.

[0018] S143. If the layer type is a clustering graph layer, then use the icon layer loading method in the Mapmost framework and use the clustering rendering mode; when the clustering layer is loaded, the scatter layer that cannot be clustered is loaded at the same time, and the rendering style of the scatter layer is the same as that of the point layer in step S141.

[0019] S144. If the layer type is a heatmap layer, then use the heatmap layer loading method in the Mapmost framework and use the heatmap aggregation rendering mode. When loading the heatmap layer, load the scatter point layer that cannot be aggregated at the same time. The rendering style of the scatter point layer is the same as that of the point layer in step S141.

[0020] S145. If the layer type is a columnar layer, then use the fill and heighten layer loading method in the Mapmost framework; the rendering style of the layer is determined by the filter field, model field, and transparency field in the normalization parameters; the data filtering of the layer is determined by the data filter field in the normalization parameters.

[0021] S146. If the layer type is a tilted image tile layer, then use the 3dtiles tile loading method provided by the Cesium engine integrated in the Mapmost framework.

[0022] S147. If the layer type is a 3D model layer, the model loading method provided by the Cesium engine integrated in the Mapmost framework is used; the rendering center of the model is determined by the center point field in the normalization parameters.

[0023] S148. If the layer type is a 3D special effects layer, the 3D graphics loading method provided by the Cesium engine integrated in the Mapmost framework will be used; the rendering style of the layer is determined by the filter field, model field, transparency field, and speed field in the standardized parameters; the rendering center of the graphics is determined by the center point field in the standardized parameters.

[0024] As a further improvement of the present invention, a layer removal step is also included, the layer removal step comprising:

[0025] S21. Call the unified layer removal method, passing in the standardized parameters used when loading this layer;

[0026] S22. Determine layer removal by using the layer type field of the standardized parameters.

[0027] As a further improvement of the present invention, step S22 includes:

[0028] S221: If the layer is a WebGL layer that depends on the Mapmost framework for loading, then find the specific layer through the layer identifier field of the normalized parameters; use the Mapmost framework's remove layer method to remove the layer and its corresponding resources.

[0029] S222: If the layer belongs to a 3D model and 3D graphics loaded by the Cesium engine integrated in Mapmost, then find the corresponding model or effect in the 3D model list of the map object through the layer identifier field of the standardized parameters, and remove the model or effect.

[0030] As a further improvement of the present invention, a map click interaction event processing step is also included, the map click interaction event processing step comprising:

[0031] S31. When the map container is instantiated, define a click event, determine the triggering target of the click event, and if the triggering target is the map canvas, then continue to step S32.

[0032] S32. Retrieve all business layers overlaid on the base map layer from all layers rendered in the current map container;

[0033] S33. Traverse the business layers and return the elements rendered at the click event location and the layer information of the element.

[0034] S34. If one or more elements are found at the clicked location and the map is in normal selection mode, then the operation of highlighting the elements and popping up the details box will begin.

[0035] S3. Pass the clicked feature and the layer information of the feature returned in step S33 to the parent component of a map component. The parent component can perform subsequent operations in the map click event callback of the map component.

[0036] As a further improvement of the present invention, step S34 includes:

[0037] S341. Remove the previously loaded highlight layer and details pop-up;

[0038] S342. Relying on the previously described unified layer usage method, repeat the layer loading steps, and the rendering style of the layer is determined by the selected style filter field in the standardized parameters.

[0039] S343. If a details field is configured in the standardized parameters, then the details box will be generated according to the configuration.

[0040] As a further improvement of the present invention, step S343 includes:

[0041] S3431. If the type field in the details field is a simple pop-up, then use the details information contained in the clickable element returned in step S33, combined with the details attribute (props) configuration in the details field, to generate the required details information HTML string and write it into the Mapmost built-in pop-up.

[0042] S3432. If the type field in the details field is a custom pop-up, then use the pop-up function of the LayuiLayer plugin to generate an iframe type pop-up, and the iframe address is the address field in the details field.

[0043] As a further improvement of the present invention, a map double-click interaction event processing step is also included, wherein the map double-click interaction event includes:

[0044] S41. The map container starts timing as soon as it hears a click event, and stops when the next click event occurs.

[0045] S42. Calculate the time difference between two click events. If it is greater than the threshold, it is determined to be two click events; if it is less than the threshold, it is determined to be a double click event and no click event is triggered.

[0046] S43. If a double-click event is triggered, the double-click event and the element information that triggered the event are passed to the parent component. The parent component can then perform subsequent operations in the map double-click event callback opened by the map component.

[0047] The beneficial effects of this invention are:

[0048] This invention allows users to directly obtain commonly used map functions such as base map tree and layer tree, as well as corresponding interactive modules, after component instantiation, reducing the repetitive development of code logic for commonly used functions and simplifying the use of the map framework.

[0049] The layer usage method provided by this invention enables the display of all types of map resources to use the same method, allowing users to transform their understanding of professional concepts related to maps and various layers into an understanding of standard parameters. This method judges each field of the standard parameters and automatically performs the corresponding subsequent loading / removal processes, greatly reducing the need for ordinary developers to perform secondary development on the map framework.

[0050] Furthermore, as a refinement of this layer usage method, this invention encapsulates the code logic of some commonly used map interaction events and exposes them as component events, enabling this invention to flexibly meet the complex business needs in the usage scenarios of the parent component.

[0051] This invention has the advantages of concise code, ease of use, high reusability, and strong flexibility. It is more suitable for front-end developers without GIS knowledge and can be widely used for the rapid construction of map modules in various business fields.

[0052] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described in detail below with reference to the accompanying drawings. Attached Figure Description

[0053] Figure 1 This is a design diagram of the concept of "using standardized parameters for layers" in a preferred embodiment of the present invention;

[0054] Figure 2 This is a flowchart illustrating the specific implementation of the layer loading function in a preferred embodiment of the present invention;

[0055] Figure 3 This is a flowchart illustrating the specific implementation of map click events in a preferred embodiment of the present invention;

[0056] Figure 4 This is a diagram illustrating the effect of layer loading in a preferred embodiment of the present invention;

[0057] Figure 5This is a diagram illustrating the effect of displaying a custom details pop-up when clicking on an element in a preferred embodiment of the present invention. Detailed Implementation

[0058] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, so that those skilled in the art can better understand and implement the present invention. However, the embodiments described are not intended to limit the present invention.

[0059] like Figure 1 The diagram illustrates the layer usage method in this embodiment, standardizing the loading methods and required parameters for commonly used real-time rendering layers, map service layers, 3D model layers, and 3D effects layers in daily operations. Figure 1 The design scheme for standardized parameters is shown in detail, making specific layers objects of this generic layer class, which can be called using standard parameters and unified methods. The layer usage method includes the following steps:

[0060] S11. Call the unified layer loading method (loadLayer), passing in the standardized parameters and judgment variables (boolean values).

[0061] S12. Determine the layer resource acquisition method using the layer type field (geotype) of the standardized parameters:

[0062] Specifically, the layer resources for feature layers such as points, lines, polygons, and text, and 3D effect layers such as 3D circles and spheres, come from the data field in the standardized parameters; the layer resources for map service layers such as vector tiles, raster tiles, and oblique image tiles, and 3D model layers come from the service address field in the standardized parameters. If the layer resource comes from a service address, the service response is obtained by requesting it.

[0063] S13. Preprocessing of Layer Resources. Specifically, if the original data of the layer resources is not in standard Geojson format, it needs to be preprocessed in this step to return layer resources composed of standard data format. If the annotation field (text) in the standardization parameters has customization requirements, the original data is also preprocessed in this step to generate the layer resources of the annotation layer corresponding to this layer.

[0064] S14. Determine the specific layer rendering method through the layer type parameter, including:

[0065] S141. If the layer type is a feature layer such as a point, line, or polygon, or a vector tile layer, then the corresponding point / icon, line, and polygon layer loading methods in the Mapmost framework will be used. The layer's rendering style, such as color, icon, icon size, and transparency, is determined by the icon field (images), filter field (filter), size field (size), and opacity field (opacity) in the normalization parameters. The layer's data filtering is determined by the data filter field (datafilter) in the normalization parameters.

[0066] S142. If the layer type is a raster tile or image mask, the corresponding raster layer loading method in the Mapmost framework will be used. Layer rendering style: Opacity is determined by the opacity field in the normalization parameters.

[0067] S143. If the layer type is a cluster graph layer, then the icon layer loading method in the Mapmost framework is used, and the cluster rendering mode is used. When loading the cluster layer, the scatter layer that cannot be clustered is also loaded. The rendering style of the scatter layer is the same as that of the point layer in S4-1.

[0068] S144. If the layer type is a heatmap layer, then the heatmap layer loading method in the Mapmost framework is used, and the heatmap aggregation rendering mode is used. When loading the heatmap layer, the scatter plot layer that cannot be aggregated is also loaded. The rendering style of the scatter plot layer is the same as that of the point layer in S4-1.

[0069] S145. If the layer type is a columnar layer (extrusion), then the fill-and-increase layer loading method in the Mapmost framework is used. The layer's rendering style, such as color, height, and opacity, is determined by the filter, size, and opacity fields in the normalization parameters. The layer's data filtering is determined by the data filter field in the normalization parameters.

[0070] S146. If the layer type is a tilted image tile layer (3dtiles), then use the 3dtiles tile loading method provided by WebGL integrated in the Mapmost framework.

[0071] S147. If the layer type is a 3D model layer (glb, fbx, obj), then the model loading method provided by the Cesium engine integrated in the Mapmost framework is used. The rendering center of the model is determined by the center point field in the normalized parameters.

[0072] S148. If the layer type is a 3D effect circle, 3D effect sphere, or 3D geofencing layer (radar, sphere, fencing), then the 3D graphics loading method provided by WebGL integrated in the Mapmost framework will be used. The layer's rendering style, such as color, size, opacity, and effect speed, is determined by the filter, size, opacity, and speed fields in the normalization parameters. The rendering center of the graphics is determined by the center point field in the normalization parameters.

[0073] After the 3D model class layer in steps S15, S147, and S148 is loaded, the model object in the callback parameter is added to the 3D model list of the map object for subsequent operations.

[0074] To improve functionality and optimize user experience, this invention also provides a unified method for removing layers, because the frameworks on which layers are loaded vary, and the content to be removed from the map container also differs.

[0075] The specific steps are as follows:

[0076] S21. Call the uniform layer removal method (loadLayer), passing in the standardized parameters used when loading this layer, where the judgment variable is false.

[0077] S22. Determine layer removal by using the geotype field of the standardized parameters, specifically including:

[0078] S221. If the layer is a WebGL layer that depends on the Mapmost framework for loading, then find the specific layer through the layer identifier field of the normalized parameters. Use the Mapmost framework's remove layer method to remove the layer and its corresponding resources.

[0079] S222. If the layer belongs to the 3D model and 3D graphics loaded by the Cesium engine integrated in Mapmost, then find the corresponding model or effect in the 3D model list of the map object through the layer identifier field of the standardized parameters, and remove the model or effect.

[0080] Based on summarizing daily business needs, this invention also encapsulates a map click interaction event as a supplement and improvement to the above-mentioned technologies. By performing secondary development based on Mapmost map interaction events and the LayuiLayer component, and configuring the detail field and selection style filter field (filter_sel) of the layer loading standardized parameters, it is possible to achieve functions such as highlighting features, popping up a details box, and passing the selected feature details to the parent component of a map component after clicking on a feature layer. The specific implementation steps are as follows:

[0081] S31. When the map container is instantiated, a click event is defined, and the target of the click event is determined. If the target is the map canvas, the program continues.

[0082] S32. Retrieve all business layers overlaid on the base map layer from all layers rendered in the current map container.

[0083] S33. Traverse the business layers and return the element rendered at the click event location and the layer information of the element.

[0084] S34. If one or more features are found at the clicked location and the map is in normal selection mode (i.e., not in drawing mode), then the operation of highlighting features and popping up a details box will begin, including:

[0085] S341. Remove the previously loaded highlight layer and details pop-up;

[0086] S342. Relying on the previously described unified layer usage method, repeat the layer loading steps. The layer's rendering style is determined by the selected style filter field (filter_sel) in the normalization parameters.

[0087] S343. If a details field is configured in the standardized parameters, then the details box will be generated according to the configuration, including:

[0088] S3431. If the type field in the details field is a simple pop-up, then use the details information contained in the clickable element returned in S3, combined with the details attribute (props) configuration in the details field, to generate the required details information HTML string and write it into the Mapmost built-in pop-up.

[0089] S3432. If the type field in the details field is a custom pop-up, then use the pop-up function of the LayuiLayer plugin to generate an iframe type pop-up. The iframe address is the address field (url) in the details field.

[0090] S35. Pass the clicked feature and its layer information returned in step S33 to the parent component of the map component. The parent component can then perform subsequent operations in the map click event callback enabled by the map component.

[0091] In existing technologies, the native double-click event of a map container triggers both a double-click event and two single-click events. To resolve this conflict and as an optimization, this invention also encapsulates a map double-click interaction event, distinct from the single-click event. The specific implementation steps are as follows:

[0092] S41: The map container starts timing as soon as it hears a click event, and stops when the next click event occurs.

[0093] S42: Calculate the time difference between the triggering of two click events. If it is greater than the threshold, it is determined to be two click events; if it is less than the threshold, it is determined to be a double-click event and the above click event is not triggered.

[0094] S43: If a double-click event is triggered, the double-click event and the element information that triggered the event are passed to the parent component. The parent component can then perform subsequent operations in the map double-click event callback provided by the map component.

[0095] This completes the implementation of common map interaction functions after layer loading. Compared to existing technologies, this technology omits the complex and cumbersome code logic implementation processes for map container interaction, click event positioning, and pop-up content construction, making it more suitable for rapid development. This technology can pass the interaction results to the parent component, providing support for subsequent customized business requirements.

[0096] In one embodiment, the implementation of one of the most complex application scenarios of this invention is described in detail: loading a clustering graph, and after scaling the map to a certain scale, loading a scatter plot with corresponding icons and text labels based on data attributes, and then clicking on the scatter plot to pop up a custom details box. For example... Figure 2 As shown, the specific implementation logic is as follows:

[0097] S1: Constructs a function for initial layer type filtering and raw data acquisition. The input parameters for this function are the layer loading standardization parameters and judgment variables.

[0098] S1-1: If the variable is true, the layer loading process begins; if it is false, the layer removal process begins.

[0099] S1-2: The layer loading procedure first determines the layer type field value. If the layer type is point, line, polygon, cluster, heatmap, or histogram, then it proceeds to the data retrieval procedure. If the layer type is raster, image, 3dtiles tile, 3D model, or 3D effect, then it skips the data retrieval and directly enters the specific layer loading function.

[0100] S1-3: The data retrieval program first determines the data source field value passed in the standardized parameters for layer loading. If the data source is a service address, the program retrieves the data via a front-end HTTP request and then enters the specific layer loading function. If the data source is the data itself, the program directly enters the specific layer loading function (this invention uses the standard GeoJson geographic data format).

[0101] S2: In this example, the layer type is a cluster layer. At this point, the program enters the cluster layer loading function, and the function input parameters are geographic data and layer loading standardization parameters.

[0102] S2-1: First, the geographic data is preprocessed and constructed into the standard GeoJson format.

[0103] S2-2: Load the layer resource of type clustered with data in S2-1 into the map container. The resource name is a unique key value in the normalization parameters.

[0104] S2-3: Load a circular layer representing the clustering layer into the map container. The layer identifier is a unique key-value pair with a specific suffix in the normalization parameters. This layer type is circle, the filter is "with clustered points," the rendering color is Mapmost's default clustering color level, and the cluster circle radius is Mapmost's default radius (the rendering color and cluster circle radius are custom fields in the clustering layer's normalization parameters; the code logic should prioritize using the input parameter values). The rendering transparency is the transparency field in the normalization parameters.

[0105] S2-4: Load the clustering value layer of the clustering layer into the map container. The layer identifier is a unique key value in the normalization parameters plus a specific suffix. This layer is a label text layer, the filter is "with clustered points", the text content is "{point_count_abbreviated}", the rendering font is the Mapmost default font, and the rendering transparency is the transparency field in the normalization parameters.

[0106] S2-5: In this example, the passed-in standardized parameters include an icon field, so all configured icons must be loaded before loading the layer. The icon name is the value of the name field of each icon configuration object, and the icon source is the value of the url field.

[0107] S2-6: After all icons have been loaded, load the scatter plot layer (which cannot be clustered) into the map container. The layer identifier is a unique key-value pair in the normalization parameters. This layer is the icon layer, the filter is "No Clusters," and the rendering style filter is the value of the style filter field in the normalization parameters. The style filter must be written in a format that conforms to Mapmost expressions.

[0108] S2-7: If there is no need to load icons, a method for loading ordinary point layers must also be provided. The layer is a point layer, the filter is "no clustering points", the rendering style filter is the style filter field value of the normalization parameter (the style filter writing format must satisfy the Mapmost expression), the point size is the model field value of the normalization parameter, and the rendering transparency is the transparency field of the normalization parameter.

[0109] S2-8: If a label field is configured in the standardization parameters, the label layers must be loaded sequentially according to the configured label attributes. The layers are text layers, and the layer identifier is a unique key value in the standardization parameters plus an attribute name suffix. The text content of each layer is "["get", attribute key]", and the text offset is the vertical offset between lines.

[0110] This completes the requirement to load the clustering graph and the corresponding labeled scatter plot, achieving the desired effect as follows. Figure 4 As shown.

[0111] In another specific embodiment, such as Figure 3 The diagram shows the specific implementation logic for map click events, double-click events, highlighted features, and pop-up detail boxes:

[0112] S3: After the map container is generated, register click events for the map container.

[0113] S3-1: Determine the target of the click event. If the target is the map canvas, continue the program.

[0114] S3-2: Click event triggers timer. If the time difference between two click events is less than the threshold, it is judged as a double-click event and the single-click event logic is not triggered.

[0115] S3-3: Returns the rendered feature at the click event location and the layer information of the feature:

[0116] S3-3-1: Get all layers rendered in the current map container, and find all business layers overlaid on the base map layer according to the base map configuration.

[0117] S3-3-2: Traverse the business layers and use the Mapmost "queryRenderedFeatures" method to return the feature rendered at the click event location and the layer information of this feature.

[0118] S3-4: If one or more features are found at the clicked location and the map is in normal selection mode (i.e., not in drawing mode), and the selected layer is not a clustered circle layer, then the operation of highlighting features and popping up a details box will begin.

[0119] S4: Improve the highlight layer function, with the function parameters being the selected features and the standardized parameters for layer loading.

[0120] S4-1: Use the Mapmost "getLayer" method to remove all highlighted layers with the "highlight" identifier in their layer identifiers; use the LayuiLayer's closeAll method to remove all custom detail pop-ups; get the DOM element with the specific ID used to display the suggestion pop-up and hide the element.

[0121] S4-2: Construct highlight functions for highlighted points, lines, polygons, and columns based on the feature type of the selected features. The input parameters of the highlight function are the selected features and the standardized parameters of the layer containing the selected features.

[0122] S4-2-1: First, the geographic data is preprocessed to construct the features into the standard GeoJson format.

[0123] S4-2-2: Repeat the previously described unified layer usage method, repeating the layer loading steps from S2-5 to S2-8. The rendering style of the layer is determined by the selected style filter field (filter_sel) in the normalization parameters.

[0124] S5: Improve the pop-up details box function. The function parameters are the selected feature, the standardized parameters for layer loading, and the latitude and longitude of the click event.

[0125] S5-1: If the type field in the details field is a simple pop-up, then use the details information contained in the clickable element returned in S3-3, combined with the details attribute (props) configuration in the details field, to generate the required details information HTML string. Use Mapmost's Popup component to generate the pop-up, load the pop-up at the passed latitude and longitude position, and write the details information string into it.

[0126] S5-2: Get the relative position of an image component within its parent component and calculate the offset of the pop-up relative to the top and left edges of the browser window.

[0127] S5-3: If the type field in the details field is a custom pop-up, then use the pop-up function of the LayuiLayer plugin to generate an iframe type pop-up. The iframe address is the address field (url) in the details field, and the offset of the pop-up is the offset calculated in S5-2.

[0128] S5-4: In the callback function for the pop-up closing time, add an event trigger to pass the selected features and layer loading standardization parameters to the parent component.

[0129] S6: At the end of the map container click event, add an event trigger to pass the clicked feature and its layer information returned in S3-3 to the parent component of the map component. The parent component can then perform subsequent operations in the map click event callback enabled by the map component.

[0130] This completes the function of highlighting layer elements when clicked and popping up a custom details box, achieving the desired effect as follows. Figure 5 As shown.

[0131] This invention allows users to directly obtain commonly used map functions such as base map tree and layer tree, as well as corresponding interactive modules, after component instantiation, reducing the repetitive development of code logic for commonly used functions and simplifying the use of the map framework.

[0132] The layer usage method provided by this invention enables the display of all types of map resources to use the same method, allowing users to transform their understanding of professional concepts related to maps and various layers into an understanding of standard parameters. This method judges each field of the standard parameters and automatically performs the corresponding subsequent loading / removal processes, greatly reducing the need for ordinary developers to perform secondary development on the map framework.

[0133] Furthermore, as a refinement of this layer usage method, this invention encapsulates the code logic of some commonly used map interaction events and exposes them as component events, enabling this invention to flexibly meet the complex business needs in the usage scenarios of the parent component.

[0134] This invention has the advantages of concise code, ease of use, high reusability, and strong flexibility. It is more suitable for front-end developers without GIS knowledge and can be widely used for the rapid construction of map modules in various business fields.

[0135] The above embodiments are merely preferred embodiments provided to fully illustrate the present invention, and the scope of protection of the present invention is not limited thereto. Equivalent substitutions or modifications made by those skilled in the art based on the present invention are all within the scope of protection of the present invention. The scope of protection of the present invention is defined by the claims.

Claims

1. A method for using layers, characterized in that, The layer loading step includes: S11. Call the unified layer loading method, passing in standardized parameters and judgment variables; S12. Determine the layer resource acquisition method through the layer type field of the standardized parameters; if the layer resource comes from the service address, obtain the service return through a request; among them, the layer resources of feature layer and 3D effect layer come from the data field in the standardized parameters; the layer resources of map service layer and 3D model layer come from the service address field in the standardized parameters. S13. Perform preprocessing of layer resources; S14. Determine the specific layer rendering method by using the layer type parameter; It also includes a layer removal step, which includes: S21. Call the unified layer removal method, passing in the standardized parameters used when loading this layer; S22. Determine layer removal based on the layer type field of the standardized parameters; It also includes a map click interaction event handling step, which includes: S31. When the map container is instantiated, define a click event, determine the triggering target of the click event, and if the triggering target is the map canvas, then continue to step S32. S32. Retrieve all business layers overlaid on the base map layer from all layers rendered in the current map container; S33. Traverse the business layers and return the elements rendered at the click event location and the layer information of the element. S34. If one or more elements are found at the clicked location and the map is in normal selection mode, then the operation of highlighting the elements and popping up the details box will begin. S3. Pass the clicked feature and the layer information of the feature returned in step S33 to the parent component of a map component. The parent component performs subsequent operations in the map click event callback opened by the map component.

2. The layer usage method as described in claim 1, characterized in that, Step S13 includes: if the original data of the layer resource is not in the standard Geojson format, then preprocess the original data and return the layer resource composed of the standard data format; if the annotation field in the standardization parameters has customization requirements, then preprocess the original data in the same way and generate the layer resource of the annotation layer corresponding to the layer.

3. The layer usage method as described in claim 1, characterized in that, Step S34 includes: S341. Remove the previously loaded highlight layer and details pop-up; S342. Relying on the previously described unified layer usage method, repeat the layer loading steps, and the rendering style of the layer is determined by the selected style filter field in the standardized parameters. S343. If a details field is configured in the standardized parameters, then the details box will be generated according to the configuration.

4. The layer usage method as described in claim 1, characterized in that, It also includes a map double-click interaction event handling step, wherein the map double-click interaction event includes: S41. The map container starts timing as soon as it hears a click event, and stops when the next click event occurs. S42. Calculate the time difference between two click events. If it is greater than the threshold, it is determined to be two click events; if it is less than the threshold, it is determined to be a double click event and no click event is triggered. S43. If a double-click event is triggered, the double-click event and the element information that triggered the event are passed to the parent component. The parent component then performs subsequent operations in the map double-click event callback opened by the map component.

Citation Information

Patent Citations

  • Map service publishing method and device

    CN109947882A