Map data and table data bidirectional binding method based on web program

Abstract

The invention provides a map data and table data bidirectional binding method based on a web program. The map data and table data bidirectional binding method based on the web program comprises the following steps that a table form, a third-party map api and react.js are provided; an mvvm structure is adopted, and a view layer and a data layer of the map are separated; a hook function of the reaction is called, so that the table DB and the mapDB subscribe to the controlleer DB; the data operation of the controlleer DB is concerned to simultaneously operate the map and table data through the controlleer DB. According to the map data and table data two-way binding method, the research and development time of a developer for combined development of the map and the table can be saved.

Description

Technical Field

[0001] The present invention belongs to the technical field of software design and development, and particularly relates to a method for two-way binding of map data and table data based on web programs. Background Art

[0002] With the upgrade of Internet users' consumption content and interaction methods, the use of Web map technology has become increasingly widespread, and the personalized requirements for map display have also been increasing. Currently, various map APIs, such as Mapbox, Baidu Map, Amap, Arcgis, etc.

[0003] Currently, the mainstream of Web development is to adopt a component-based development model, mainly based on frameworks represented by React and Vue for development, introducing the componentization method. However, since react is a one-way data flow, it is impossible to directly implement the mutual operation of table data and map data. Summary of the Invention

[0004] In view of the above technical problems, the present application proposes a method for two-way binding of map data and table data based on web programs. The specific technical solutions are as follows:

[0005] A method for two-way binding of map data and table data based on web programs includes the following steps:

[0006] Provide a table, a third-party map api, and react.js;

[0007] Adopt the mvvm structure to separate the view layer and data layer of the map;

[0008] Call the hooks function of react to enable tableDB and mapDB to subscribe to controllerDB;

[0009] Pay attention to the data operations of controllerDB to operate map and table data simultaneously through controllerDB.

[0010] Furthermore, the data operations of controllerDB include addition, deletion, modification, and query.

[0011] Furthermore, the tableDB of the table component is only used to render table data, and the mapDB of the map is only used to render the map.

[0012] Furthermore, the called hooks function is useEffect.

[0013] The beneficial effects of the present invention are:

[0014] The two-way binding method of the map data and table data in this application can save the R & D time of developers for the combined development of maps and tables. Brief Description of the Drawings

[0015] Figure 1 Shown is a flowchart of the two-way binding method of map data and table data. Detailed Implementation Modes

[0016] In the following description, certain specific details are set forth in order to provide a thorough understanding of various embodiments. However, those skilled in the art should understand that the present invention may be practiced without these details. In other instances, well-known structures have not been shown or described in detail to avoid unnecessarily obscuring the description of the embodiments. Unless the context otherwise requires, throughout the specification and the appended claims, the word "comprise" shall be interpreted in an open, inclusive sense, i.e., as "including, but not limited to".

[0017] The phrase "an embodiment" or "embodiments" referred to throughout this specification means that a particular feature, structure, or characteristic related to the embodiment is included in at least one embodiment. Thus, the phrases "in an embodiment" or "in embodiments" that appear throughout this specification do not necessarily all refer to the same embodiment. In addition, the specific features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. Further, as used in this specification and the appended claims, the singular forms "a / an" and "the" include plural referents unless the context clearly dictates otherwise. It should also be noted that the term "or" generally adopts its meaning including "and / or" unless the context clearly dictates otherwise.

[0018] The two-way binding method of map data and table data based on a web program provided by this application, this method refers to Figure 1 , and includes the following steps:

[0019] Provide a table, a third-party map API, and react.js;

[0020] Adopt the mvvm structure to separate the view layer and data layer of the map;

[0021] Call the hooks function of react to enable tableDB and mapDB to subscribe to controllerDB;

[0022] Pay attention to the data operations of controllerDB to operate the map and table data simultaneously through controllerDB.

[0023] In the above steps, the data operations of controllerDB include addition, deletion, modification, and query.

[0024] In the above steps, the tableDB of the table component is only used to render the table data, and the mapDB of the map is only used to render the map.

[0025] In the above steps, the hooks function called is useEffect.

[0026] The MVVM architecture is a software design pattern aimed at separating the design and implementation issues in graphical user interface development. It consists of three main parts: Model, View, and ViewModel.

[0027] Model: Responsible for managing the data and business logic of the application. It contains the data structures and methods required by the application for handling data access and operations. The communication between the model and the view model and the view is one-way, that is, the model can notify the view model of data changes, but the view model and the view cannot directly modify the data of the model.

[0028] View: The presentation layer of the user interface, responsible for data rendering and user interaction. The view communicates with the model through the view model and cannot directly access the data of the model.

[0029] ViewModel: The bridge connecting the model and the view. It is responsible for converting the data of the model into the format required by the view and handling user interaction operations. The view model can listen for data changes in the model and update the display of the view; at the same time, it can also receive user interaction events from the view and update the data of the model.

[0030] The above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit them.

Claims

1. A two-way binding method for map data and table data based on a web program, characterized in that: The steps include: Provides table, third-party map API and react.js; Adopt MVVM structure to separate the view layer and data layer of the map; Call the hooks function of react to make tableDB and mapDB subscribe to controllerDB; Focus on the data operation of controllerDB to operate map and table data at the same time through controllerDB.

2. The method for bidirectionally binding map data and table data based on a web program according to claim 1, characterized in that: The data operations of controllerDB include adding, deleting, modifying and querying.

3. The method for bidirectionally binding map data and table data based on a web program according to claim 1, characterized in that: The tableDB of the table component is only used to render table data, and the mapDB of the map is only used to render the map.

4. The method for bidirectionally binding map data and table data based on a web program according to claim 1, characterized in that: The hooks function called is useEffect.

Images