A Web front-end UI component management system and method supporting cross-platform

Abstract

The present invention provides a cross-platform Web front-end UI component management system and method, including: a service layer, which is used to link service data related to GIS services; the service data includes standard CIS data and / or industry data; a data processing layer, which provides a unified interface to the outside world, which is used to parse and process the service data, convert it into loadable data, and return the loadable data to the application layer; the application layer is used to provide developers with an API interface to call a variety of functional components prefabricated based on loadable data to build a geographic space data visualization scene. In this way, various standard GIS data and industry company data can be quickly linked and parsed, and the commonly used business functions in the GIS industry can be modularized through the UI component library, and some commonly used optimization operations can be customized, so that developers can quickly implement functions and intuitively view the effects of the functions, which is suitable for common use of products and rapid development of projects.

Description

Technical Field

[0001] The present invention relates to the field of computer software technology, and in particular to a cross-platform Web front-end UI component management system and method. Background Art

[0002] With the development of Internet technology, geographic information systems (GIS) have gradually migrated from desktop applications to Web platforms. GIS implements web browsers on the Web front end to access, analyze and edit geographic spatial data, which is very useful for projects such as urban planning, environmental monitoring, and resource management. Since GIS (Geographic Information System) technical knowledge is highly professional and has a high learning cost, GIS combines knowledge from multiple fields such as computer science, geography, surveying and mapping, and remote sensing technology. GIS professionals need to have the ability to process and analyze large amounts of spatial data, which not only involves basic operations such as data format conversion and data cleaning, but also includes advanced processing such as spatial analysis and pattern recognition of data. At present, three-dimensional GIS is widely used in all walks of life, but it also has some disadvantages for developers:

[0003] 1. Since there are many GIS service companies now, the service standards and return data types are not unified, which makes loading various service data cumbersome and inconsistent;

[0004] 2. Due to the high degree of professionalism of 3D WebGIS, various technical concepts are difficult to understand, resulting in difficulty in quickly adding and using initialization maps, scenes, and other application functions;

[0005] 3. Due to the large number of projects and short project cycles, rapid module development is impossible, resulting in the inability to unify application functions, repetitive work, reinventing the wheel, and the inability to unify and continuously update.

[0006] The vue-cesium currently available on the market is a secondary development based on ceisumjs, but it mainly loads simple data and encapsulates some primary modules, which requires additional data conversion and processing, thereby increasing the workload and time cost; the layout interface design is not user-friendly, and the management during the editing process is difficult; the display form is single, and commonly used business functions are missing, which reduces interactivity. Summary of the invention

[0007] To this end, the present invention provides a cross-platform Web front-end UI component management system and method, aiming to solve the technical problems of developers' difficulty in operation and high learning cost, low editing quality and efficiency, and inconvenience in use and development when using GIS data.

[0008] To achieve the above objectives, the present invention adopts the following technical solutions:

[0009] According to a first aspect of the present invention, the present invention provides a cross-platform Web front-end UI component management system, the system comprising:

[0010] The service layer is used to link service data related to GIS services; the service data includes standard CIS data and / or industry data;

[0011] A data processing layer, which provides a unified interface to the outside world for parsing the service data, converting it into loadable data, and returning the loadable data to the application layer;

[0012] The application layer is used to provide developers with API interfaces to call various functional components prefabricated based on loadable data to build geospatial data visualization scenes;

[0013] The functional components include at least one of a basic component, a common style component, a map operation component and a map application functional component.

[0014] Furthermore, the data processing layer also includes: a WebGL rendering engine;

[0015] The application layer is further used to interact with the user, receive a scene status update request from the user, and forward the scene status update request to the data processing layer;

[0016] The data processing layer is used to use the WebGL rendering engine to render the scene state update request, and output the generated scene state update image to the application layer for display;

[0017] The WebGL rendering engine adopts the WebGL2 standard, and is used to use the GPU to execute vertex and fragment shaders, perform rendering processing on the scene state update request, and generate the scene state update image;

[0018] The scene state update request includes scene state update, including at least one of position movement, layer setting, scene translation, scene scaling, scene rotation and scene tilt; the rendering processing includes at least one of view conversion, lighting calculation and shadow generation.

[0019] Furthermore, the WebGL rendering engine is also used to render the scene state update request based on scene optimization technology and intelligent block loading technology;

[0020] Wherein, the scene optimization technology includes at least one of frustum culling processing, occlusion culling processing, level detail processing and batch processing;

[0021] The intelligent block loading technology includes at least one of dynamic monitoring, predictive loading and asynchronous loading.

[0022] Furthermore, the application layer is also used to modularize the functional components to form a target module containing multiple independent functions;

[0023] The target module includes at least one of a view module, a tool module, an analysis module, a data module and a system setting module;

[0024] The view module includes at least one of view operation, fly-around, fly-around, first-person perspective, environmental effects, special effects, scene settings and keyboard roaming;

[0025] The tool module includes at least one of: measurement, coordinate positioning, regional navigation, my mark, view bookmark, map drawing, and scene screenshot;

[0026] The analysis module includes at least one of elevation analysis and line of sight analysis;

[0027] The data module includes at least one of project management, route data entry, route conflict detection, and attribute query;

[0028] The system setting module is used to edit the independent functions included in each of the target modules.

[0029] Furthermore, the application layer also includes a set of operation tool plug-ins to assist developers in designing GIS data;

[0030] The operation tool plug-in set includes a scene operation tool, a style editor and / or a layer manager that supports multi-touch and device input.

[0031] Furthermore, the system further comprises a database; the database is linked to the application layer;

[0032] The application layer is also used to access the database through a database access interface;

[0033] The database is used to store the instruction document for use of the Web front-end UI component management system, interactive GIS function code examples and / or starting guides and quick start templates.

[0034] Furthermore, the system also includes an online community platform;

[0035] The online community platform is used to provide developers with communication services such as question answering and knowledge sharing.

[0036] Furthermore, the system also includes an automated build and test tool chain for various functional components to ensure code quality and assist developers in verification when modifying the functional component library.

[0037] Furthermore, the GIS service includes at least one of WiseMap service, OGC WMS service, OGC WFS service, OGC WMTS service, WiseMap W3DS service, WiseMap Wmvts service, ArcGIS service, WiseMap TMS service and WiseMapPbf service.

[0038] According to a second aspect of the present invention, the present invention provides a cross-platform Web front-end UI component management method, which is applied to a Web front-end UI component management system as described in any one of the second aspects of the present invention, and the method comprises:

[0039] Linking service data related to GIS services; the service data includes standard CIS data and / or industry data;

[0040] Parsing the service data and converting it into loadable data;

[0041] Prefabricate a variety of functional components based on the loadable data, and set API interfaces for the functional components so that developers can call the functional components to build a geospatial data visualization scene;

[0042] The functional components include at least one of a basic component, a common style component, a map operation component and a map application functional component.

[0043] The present invention adopts the above technical solution and has at least the following beneficial effects:

[0044] Through the scheme of the present invention, a cross-platform Web front-end UI component management system is constructed, including: a service layer, which is used to link service data related to GIS services; the service data includes standard CIS data and / or industry data; a data processing layer, which provides a unified interface to the outside world, which is used to parse and process the service data, convert it into loadable data, and return the loadable data to the application layer; the application layer is used to provide developers with an API interface to call a variety of functional components prefabricated based on loadable data to build a geographic spatial data visualization scene. In this way, various standard GIS data and industry company data can be quickly linked and parsed, and the commonly used business functions in the GIS industry can be modularized through the UI component library, so that developers can quickly implement functions and intuitively view the effects of functions, which is suitable for common use of products and rapid development of projects.

[0045] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0047] Figure 1 A schematic diagram of the structure of a cross-platform Web front-end UI component management system provided by an embodiment of the present invention is shown;

[0048] Figure 2 An example diagram of a user interface for a service link provided by an embodiment of the present invention is shown;

[0049] Figure 3 An example diagram of a user interface of a functional component provided by an embodiment of the present invention is shown;

[0050] Figure 4 A schematic diagram of the structure of a cross-platform Web front-end UI component management system provided by another embodiment of the present invention is shown;

[0051] Figure 5 An example diagram of a user interface for module classification provided by an embodiment of the present invention is shown;

[0052] Figure 6 A schematic flow chart of a method for managing a Web front-end UI component supporting cross-platforms provided by an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0053] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0054] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the statement "include..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0055] In view of the need to solve the problem of difficulty in operation and high learning cost, low editing quality and efficiency, and inconvenience in use and development when developers use GIS data, the present invention provides a cross-platform Web front-end UI component management system, which should focus on the following points: provide a set of simple and intuitive programming interfaces so that developers can quickly get started; abstract the underlying complexity so that developers can use it without in-depth understanding of the internal working principle of GIS; provide comprehensive documents to detail the usage of each component; examples and actual cases are essential to help developers understand how to use components; online interactive tutorials can also be provided to guide developers to complete the implementation of common functions step by step; provide rich code examples, especially the implementation of common functions (such as map display, mark addition, layer control, etc.), so that developers can copy and modify the code to meet their needs; through modular design, developers can only introduce the functional modules they need, simplify the complexity of the application, and help reduce the final package size. Thereby reducing the difficulty of operation and learning cost; facilitating use and development, greatly reducing the load of results, and improving editing quality and efficiency.

[0056] Based on this, the embodiment of the present invention provides a Web front-end UI component management system that supports cross-platform, such as Figure 1 As shown, it may include a service layer 110 , a data processing layer 120 and an application layer 130 .

[0057] The service layer 110 may be used to link service data related to GIS services.

[0058] The data processing layer 120 provides a unified interface to the outside world, which can be used to parse and process the service data, convert it into loadable data, and return the loadable data to the application layer.

[0059] The application layer 130 can be used to provide developers with an API interface to call a variety of prefabricated functional components based on loadable data to build a geospatial data visualization scene.

[0060] The service data in the embodiment of the present invention may include standard CIS data and / or industry data, and the linkable GIS services may include WiseMap service, OGC WMS service, OGC WFS service, OGC WMTS service, WiseMap W3DS service, WiseMap Wmvts service, ArcGIS service, WiseMap TMS service and WiseMap Pbf service, etc.

[0061] The data processing layer 120 obtains service data through the link between the service layer 110 and the GIS service, and provides a unified interface to the outside world. It internally supports multiple spatial data formats (such as GeoJSON, KML, etc.) and GIS service protocols (such as WMS, WFS, etc.). Figure 2 The figure shows an example of the user interface of the service link. Loadable data is obtained by parsing, sorting, optimizing and converting the published service address. As a result, developers do not need to pay attention to the specific implementation details of the data source and can focus more on the development of business logic. Based on the loadable data, the embodiment of the present invention can prefabricate a variety of functional components and provide them for developers to use through the API interface call provided by the application layer 130. The application layer 130 can be a mobile APP / webpage used by developers. Its main function is to realize convenient map services, product development, etc. through interaction with developers.

[0062] like Figure 3 The figure below is a user interface diagram of various functional components prefabricated based on loadable data. Functional components provide basic functions and extended functions based on maps. The major categories include basic components, common style components, map operation components, map application functional components, etc.

[0063] It should be noted that the UI functional components provided in the embodiments of the present invention are highly configurable, such as map views, layer controllers, markers, information windows, etc. Each component is carefully designed to support a wide range of customization options. In addition, each functional component is decoupled from the others, and developers can use them in a flexible combination. As a result, developers can build high-performance, interactive maps and spatial data visualization functions on mobile devices through simple API calls.

[0064] In an alternative embodiment, if Figure 4 As shown, in a cross-platform Web front-end UI component management system provided by an embodiment of the present invention, the data processing layer 120 may also include: a data processing module 1201 and a WebGL rendering engine 1202; wherein the data processing module 1201 is used to implement the above-mentioned main functions of the data processing layer 120.

[0065] The application layer 130 is also used to interact with the user, receive scene status update requests from the user, and forward the scene status update requests to the data processing layer 120; the data processing layer 120 is used to use the WebGL rendering engine 1202 to render the scene status update requests, and output the generated scene status update image to the application layer 130 for display; the WebGL rendering engine 1202 adopts the WebGL2 standard, and is used to use the GPU to execute vertex and fragment shaders, render the scene status update requests, and generate a scene status update image.

[0066] That is, the embodiment of the present invention designs and implements a lightweight WebGL rendering engine 1202, adopts the latest WebGL2 standard, and optimizes common geospatial data visualization scenarios. Through intelligent block loading technology and scene optimization technology, a smooth user interaction experience can be maintained even when processing large-scale GIS data. Specifically, the workflow of the WebGL rendering engine 1202 generally includes the following steps S1 to S4:

[0067] Step S1, input processing: receiving an operation request input by a user through the application layer 130;

[0068] Step S2, scene update: update the scene state according to the scene state update logic carried in the operation request, including position movement, layer setting, scene translation, scene scaling, scene rotation, and scene tilt, etc.

[0069] Step S3, rendering process: use the GPU to execute vertex and fragment shaders for rendering processing to generate a scene state update image. The rendering processing process may specifically include view conversion, lighting calculation, shadow generation, etc.

[0070] Step S4, frame buffer output: output the rendering result to the application layer 130 for display.

[0071] In addition, when rendering the scene state update request, the scene optimization technology used in the embodiment of the present invention includes frustum culling, occlusion culling, level detail processing and batch processing. Among them, frustum culling refers to not rendering objects outside the camera's field of view; occlusion culling refers to not rendering objects that are completely blocked by other objects; level detail processing (LOD, Level of Detail) refers to using models of different precisions according to the distance between the object and the camera; batch processing refers to reducing the number of drawing calls and improving performance by merging the rendering of multiple similar objects. The embodiment of the present invention can also use intelligent block loading technology to dynamically monitor, predictively load and asynchronously load the load. Among them, dynamic monitoring refers to real-time monitoring of the user's position and field of view direction; predictive loading refers to preloading the data blocks that will be needed according to the user's travel path; asynchronous loading refers to loading data in the background thread to avoid blocking the main thread and causing the screen to freeze. As a result, the rendering process is smoother, further improving the user interaction experience.

[0072] In an optional embodiment, the application layer 130 in the embodiment of the present invention can also be used to modularize and classify functional components to form a target module containing multiple independent functions. That is, when designing the UI functional component library, the embodiment of the present invention adopts a modular architecture, and each module is responsible for an independent function, which is helpful for future expansion and maintenance. Developers can also add new components or functions as needed, and can also easily integrate with third-party resource libraries.

[0073] like Figure 5 As shown, it is a schematic diagram of the user interface of module classification. Among them, the target module includes view module, tool module, analysis module, data module and system setting module. Among them, the view module includes view operation, orbital flight, flight roaming, first-person perspective, environmental effects, special effects, scene setting and keyboard roaming; the tool module includes measurement, coordinate positioning, regional navigation, my mark, perspective bookmark, map drawing, scene screenshot, etc.; the analysis module includes elevation analysis and line of sight analysis; the data module includes project management, route data entry, route conflict detection, attribute query, etc.; the system setting module is used to edit the independent functions contained in each target module. It should be noted that the above-mentioned target modules and their corresponding independent functions are only examples. In actual applications, they can also be set accordingly according to needs, and the present invention does not limit this.

[0074] In an optional embodiment, the application layer 130 may also include an application module 1301 and an operation tool plug-in set 1302 that assists developers in designing GIS data. The application module 1301 is used to implement the above-mentioned main functions of the application layer 130; the operation tool plug-in set 1302 may include scene operation tools, style editors and / or layer managers that support multi-touch and device input, and support operations such as map scene translation, zooming, rotation, and tilt. At the same time, it supports multi-touch and different input devices on the desktop to ensure a good operating experience on various devices. The operation tool plug-in set 1302 can help developers quickly design attractive map appearances and layouts.

[0075] In addition, the embodiment of the present invention also focuses on the cross-platform capability of the Web front-end UI component management system to ensure that it can work properly on various mainstream browsers and operating systems, and specifically ensures stability and performance in different environments through extensive testing.

[0076] Furthermore, the cross-platform Web front-end UI component management system provided by the embodiment of the present invention may also include a database 140. The database 140 is linked to the application layer 130, and the application layer 130 may also be used to access the database 140 through a database access interface.

[0077] The database 140 may be used to store instruction documents for the Web front-end UI component management system, interactive GIS function code examples and / or start-up guides and quick start templates.

[0078] The instruction manual is a set of detailed API documents, which clearly describe the usage, parameters, return values, and possible errors of each function, method, and component of the UI functional components, thereby ensuring that developers can quickly understand how to use the component library to build applications.

[0079] GIS function code examples refer to sample codes that cover common GIS functions, such as map display, layer management, spatial data query, path planning, etc. These examples are interactive, and developers can learn and explore different functions of the component library by modifying the code.

[0080] Getting Started Guides and Quick Start Templates are detailed getting started guides and quick start templates provided to help developers get started faster. These resources can help developers set up a basic GIS application in a few minutes and start customized development.

[0081] In addition, in order to ensure that developers can install the application layer APP, the embodiment of the present invention also provides a simple installation process, which greatly reduces the development threshold. For example, you can directly install it through a package manager (such as npm or yarn):

[0082] npminstall wisemap

[0083] / / or

[0084] yarn add wisemap

[0085] This makes it very easy for developers to integrate the GIS service UI component management system into existing projects.

[0086] In an optional embodiment, in terms of modular import support, developers can choose to import only the components and functions they need, without having to load the entire UI function component library, which helps reduce the size of the final application. For example: import{Map,Layer,Baselayer,Toolba}from'wisemap';

[0087] In an optional embodiment, the UI component management system provided by the embodiment of the present invention may also include an online community platform 150 (such as GitHub, Stack Overflow) and / or frequently asked questions (FAQ) to provide developers with communication services for question answering and knowledge sharing, which can help developers solve problems encountered and promote knowledge sharing.

[0088] In an optional embodiment, the UI component management system provided by the embodiment of the present invention may also include an automated building and testing tool chain 160 for various functional components to ensure code quality and assist developers in verification when modifying the functional component library.

[0089] A cross-platform Web front-end UI component management system provided based on the embodiment of the present invention greatly reduces the complexity and entry difficulty of GIS Web application development, so that developers can easily and efficiently start developing map-related functions even without professional GIS background knowledge. The core advantages of the present invention lie in its high-performance rendering, ease of use, and cross-platform compatibility, aiming to lower the learning threshold for GIS Web application development, improve development efficiency, and achieve high standards in user interface and experience. Through the present invention, even non-GIS experts can quickly build powerful and responsive GIS applications.

[0090] Furthermore, the embodiment of the present invention also provides a cross-platform Web front-end UI component management method, which is applied to the Web front-end UI component management system shown above. Figure 6 As shown, the following steps S601 to S603 may be included:

[0091] Step S601, linking service data related to GIS services; the service data includes standard CIS data and / or industry data;

[0092] Step S602, parsing the service data and converting it into loadable data;

[0093] Step S603, prefabricating a variety of functional components based on the loadable data, and setting API interfaces for the functional components so that developers can call the functional components to build a geospatial data visualization scene;

[0094] The functional components include at least one of a basic component, a common style component, a map operation component and a map application functional component.

[0095] The cross-platform Web front-end UI component management method proposed in the embodiment of the present invention has at least the following advantages:

[0096] 1) The map scene can be initialized quickly, and some commonly used optimization operations can be customized, such as scene rotation, double-click to zoom in, display map-related location information in the lower right corner, etc.;

[0097] 2) It can quickly link various standard GIS data and industry company data, perform data analysis, display data and positioning data, adjust scalability parameters, such as WMS service data WMTS service data, etc.;

[0098] 3) The commonly used business functions in the GIS industry are modularized through the WiseMap component library, which enables third-party developers to quickly implement functions and intuitively view the effects of functions, such as volume analysis, flooding analysis, etc.

[0099] 4) Provides many standard public methods, such as data conversion and coordinate system data conversion methods;

[0100] 5) Suitable for common use of products and rapid development of projects.

[0101] 6) The form of the embodiment of the present invention facilitates modularization of functions and neatness of methods, is conducive to the collection and organization of functions, and gradually forms fast loading of components, standardized preview of data, etc.

[0102] It can be understood that the same or similar parts of the above embodiments can be referenced to each other, and the contents not described in detail in some embodiments can refer to the same or similar contents in other embodiments.

[0103] In addition, the functional units in various embodiments of the present invention may be physically independent of each other, or two or more functional units may be integrated together, or all functional units may be integrated into one processing unit. The above integrated functional units may be implemented in the form of hardware, or in the form of software or firmware.

[0104] Those skilled in the art can understand that if the integrated functional unit is implemented in the form of software and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention can essentially or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, which includes a number of instructions to enable a computing device (such as a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention when running the instructions. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk and other media that can store program codes.

[0105] Alternatively, all or part of the steps of implementing the aforementioned method embodiments may be accomplished by hardware associated with program instructions (such as a computing device such as a personal computer, a server, or a network device), and the program instructions may be stored in a computer-readable storage medium. When the program instructions are executed by a processor of a computing device, the computing device executes all or part of the steps of the methods described in the embodiments of the present invention.

[0106] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that within the spirit and principles of the present invention, the technical solutions described in the aforementioned embodiments can still be modified, or some or all of the technical features therein can be replaced by equivalents. However, these modifications or replacements do not deviate from the protection scope of the present invention.

Claims

1. A cross-platform Web front-end UI component management system, characterized in that: The system comprises: The service layer is used to link service data related to GIS services; the service data includes standard CIS data and / or industry data; A data processing layer, which provides a unified interface to the outside world for parsing the service data, converting it into loadable data, and returning the loadable data to the application layer; The application layer is used to provide developers with API interfaces to call various functional components prefabricated based on loadable data to build geospatial data visualization scenes; The functional components include at least one of a basic component, a common style component, a map operation component and a map application functional component.

2. The system according to claim 1, characterized in that The data processing layer also includes: a WebGL rendering engine; The application layer is further used to interact with the user, receive a scene status update request from the user, and forward the scene status update request to the data processing layer; The data processing layer is used to use the WebGL rendering engine to render the scene state update request, and output the generated scene state update image to the application layer for display; The WebGL rendering engine adopts the WebGL2 standard, and is used to use the GPU to execute vertex and fragment shaders, perform rendering processing on the scene state update request, and generate the scene state update image; The scene state update request includes scene state update, including at least one of position movement, layer setting, scene translation, scene scaling, scene rotation and scene tilt; the rendering processing includes at least one of view conversion, lighting calculation and shadow generation.

3. The system according to claim 2, characterized in that The WebGL rendering engine is further used to render the scene status update request based on scene optimization technology and intelligent block loading technology; Wherein, the scene optimization technology includes at least one of frustum culling processing, occlusion culling processing, level detail processing and batch processing; The intelligent block loading technology includes at least one of dynamic monitoring, predictive loading and asynchronous loading.

4. The system according to claim 1, characterized in that The application layer is also used to modularize and classify the functional components to form a target module containing multiple independent functions; The target module includes at least one of a view module, a tool module, an analysis module, a data module and a system setting module; The view module includes at least one of view operation, fly-around, fly-around, first-person perspective, environmental effects, special effects, scene settings and keyboard roaming; The tool module includes at least one of: measurement, coordinate positioning, regional navigation, my mark, view bookmark, map drawing, and scene screenshot; The analysis module includes at least one of elevation analysis and line of sight analysis; The data module includes at least one of project management, route data entry, route conflict detection, and attribute query; The system setting module is used to edit the independent functions included in each of the target modules.

5. The system according to claim 1, characterized in that The application layer also includes a set of operation tool plug-ins to assist developers in designing GIS data; The operation tool plug-in set includes a scene operation tool, a style editor and / or a layer manager that supports multi-touch and device input.

6. The system according to claim 1, characterized in that The system further comprises a database; the database is linked to the application layer; The application layer is also used to access the database through a database access interface; The database is used to store the instruction document for use of the Web front-end UI component management system, interactive GIS function code examples and / or starting guides and quick start templates.

7. The system according to claim 1, characterized in that The system also includes an online community platform; The online community platform is used to provide developers with communication services such as question answering and knowledge sharing.

8. The system according to claim 1, characterized in that The system also includes an automated build and test tool chain for multiple functional components to ensure code quality and assist developers in verification when modifying the functional component library.

9. The system according to any one of claims 1 to 8, characterized in that: The GIS service includes at least one of WiseMap service, OGC WMS service, OGC WFS service, OGC WMTS service, WiseMap W3DS service, WiseMap Wmvts service, ArcGIS service, WiseMap TMS service and WiseMap Pbf service.

10. A cross-platform Web front-end UI component management method, characterized in that: Applied to a Web front-end UI component management system according to any one of claims 1 to 9, the method comprising: Linking service data related to GIS services; the service data includes standard CIS data and / or industry data; Parsing the service data and converting it into loadable data; Prefabricate a variety of functional components based on the loadable data, and set API interfaces for the functional components so that developers can call the functional components to build a geospatial data visualization scene; The functional components include at least one of a basic component, a common style component, a map operation component and a map application functional component.

Images