A smart city componentized construction method and system based on digital twinning

Abstract

The application provides a kind of based on digital twinning wisdom city component construction method and system, it is related to communication technical field, including steps S1: based on digital twinning construction city real scene three-dimensional data base;Through functional module, city real scene dynamic and static elements are digitized;S2: through model, view and controller constructs wisdom city function component;S3: based on component basic information, editable variable, component provides variable to outside, ReactUI component and slot definition to form wisdom city single function component installation package;S4: according to the function demand of user, different wisdom city function component installation package is added to visual wisdom city application platform.This method improves resource sharing utilization rate and the calculation efficiency and precision of wisdom city based on digital twinning by constructing wisdom city function business module architecture, so as to reduce the cost consumed by management and maintenance.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of communication, in particular to a smart city component construction method and system based on digital twinning. BACKGROUND

[0002] Digital twinning refers to fully utilizing physical models and Internet of Things sensors to collect running history data in the whole life cycle, integrating multi-disciplinary, multi-physical quantity, multi-scale and multi-probability simulation processes, and completing mapping in a virtual space, so as to reflect and control the whole life cycle process of the corresponding entity object. When digital twinning is applied to a city, a "virtual city" completely corresponding to the physical city is re-created in the network space by using Internet of Things technology to digitize all dynamic and static elements such as people, objects, events, water, electricity and gas on the basis of BIM and city three-dimensional GIS, forming a pattern of coexistence and integration of the physical entity city in the physical dimension and the digital city in the information dimension.

[0003] At present, the construction of a smart city based on digital twinning mainly uses code writing by developers to realize different content display. With the increasing and changing needs, the amount of project code is becoming more and more huge, and the management and maintenance costs are constantly increasing. SUMMARY

[0004] The problem solved by the present application is how to construct a smart city function business module architecture that can be plugged in and out without feeling, improve resource sharing utilization rate, and improve the computing efficiency and accuracy of a smart city based on digital twinning, so as to reduce the cost consumed by management and maintenance.

[0005] To solve the above problems, the present application provides a smart city component construction method based on digital twinning, comprising the steps of:

[0006] S1: constructing a city real scene three-dimensional data base based on digital twinning; digitizing city real scene dynamic and static elements through a function module;

[0007] S2: constructing a smart city function component through a model, a view and a controller;

[0008] S3: composing a smart city single function component installation package based on component basic information, editable variables, component external variable providing variables, ReactUI components and slot definitions;

[0009] S4: adding different smart city function component installation packages to a visual smart city application platform according to the function requirements of a user;

[0010] S5: configuring the smart city function components on the visual smart city application platform according to the user-selected smart city function components; and saving the selected smart city function component configuration to the background server;

[0011] S6: upon receiving the corresponding smart city function page request information, returning to step S5 to show the user the smart city function component configuration saved in the background server.

[0012] In the above method, since there is commonality or similarity among different smart city projects based on digital twinning, componentization of function modules can simultaneously realize a large number of analysis and calculation efficiency guarantee of specific digital twinning functions, reasonably allocate cloud and edge computing resources, effectively split computing tasks, and greatly improve the computing efficiency and accuracy of smart cities based on digital twinning. Using the architecture of React combined with typescript, the smart city function components are realized to run independently and the browser is dynamically loaded. The reusability of component functions is freed from the code layer, so that a smart city function business module architecture that can be plugged in and out without feeling is constructed relying on the framework that can dynamically load components.

[0013] In the above method, the business data in the smart city function and the smart city real scene three-dimensional basic data service are separated, the self-defined smart city platform provides data warehousing, resource management, and business component calling services, and the smart city real scene three-dimensional basic data and the self-defined different smart city function components construct complex business services, which maximizes resource sharing and maximizes business development flexibility.

[0014] In the above method, the server deployment method used separates the editing, publishing, and management modules of the smart city function component application. At the same time, it supports non-database management component relationships, directly builds smart city function applications through configuration files, and maximizes the complexity of the deployment environment, only needs to install docker and docker-compose to use.

[0015] Further, the model in step S2 is a data layer, which is a data skeleton of a single smart city function component; the view is a UI part of the single smart city function component, which is a style representation of the function component; the controller is a loading scheduling of the single smart city function component; the model and the view are integrated into the function component, and are organized by the controller.

[0016] Further, the component basic information in step S3 includes component name, component number, and component version number; and the component editable variable is an external input parameter of the function component.

[0017] Further, the component in step S3 provides the variable to the outside to provide the field dependent on the data of other functional components, and the editable variable of the other functional components can be associated with the provided variable of the functional component.

[0018] Further, the ReactUI component in step S3 is a UI part developed based on React, and the display layer of the component node ID module is transmitted through the Props of the React component; the ID is automatically transmitted to mark the belonging ID in the rendering process of the UI part through the setting on the externally transmitted Props parameter; and the slot definition is used to declare the slot information of the functional component.

[0019] Further, the visual smart city application platform in step S4 adopts typescript and React architecture.

[0020] Further, the range configured in step S5 includes the functional module position and the access data.

[0021] The access data comes from the fixed value and other functional components; the fixed value is the content edited by the user in the attribute inspector when the visual smart city application platform is built; and the other functional components are the variable definitions provided by the component in step S3.

[0022] A smart city componentization construction system based on digital twinning, comprising:

[0023] The first construction unit is used for constructing a city real scene three-dimensional data base according to digital twinning; and the dynamic and static elements of the city real scene are digitized through functional modules.

[0024] The second construction unit is used for constructing a smart city functional component through a model, a view and a controller.

[0025] The combination unit is used for combining a smart city single functional component installation package according to component basic information, editable variables, component provided variables, ReactUI components and slot definitions.

[0026] The adding unit is used for adding different smart city functional component installation packages to the visual smart city application platform according to the functional requirements of the user.

[0027] The configuration unit is used for configuring the smart city functional components on the visual smart city application platform according to the selected smart city functional components of the user.

[0028] The offline packaging unit is used for saving the selected smart city functional component configuration to a background server.

[0029] A function page display platform is configured to display a smart city function component configuration saved in a background server to a user upon receiving a corresponding smart city function page request information.

[0030] The application has the following beneficial effects:

[0031] The application uses a React combined with typescript architecture to realize the separate running of smart city function components and the dynamic loading of browsers, so that the reusability of component functions is separated from the code layer, thereby relying on a framework capable of dynamically loading components to construct a smart city function business module architecture capable of plug-and-play. The application separates the business data in the smart city function and the smart city real scene three-dimensional basic data service, provides data warehousing, resource management, business component calling and other services on the self-defined smart city platform, and constructs complex business services from the smart city real scene three-dimensional basic data and the self-defined different smart city function components, thereby maximizing resource sharing and business development flexibility. BRIEF DESCRIPTION OF DRAWINGS

[0032] Figure 1 A flow chart of a smart city componentization construction method based on digital twinning is provided for the first embodiment of the application.

[0033] Figure 2 A system structure diagram of a smart city componentization construction system based on digital twinning is provided for the second embodiment of the application. DETAILED DESCRIPTION

[0034] In order to make the above-mentioned purposes, features and advantages of the application more obvious and easy to understand, the specific embodiments of the application will be described in detail below with reference to the accompanying drawings.

[0035] The following are specific embodiments of the application and further descriptions of the technical solutions of the application are provided in combination with the accompanying drawings, but the application is not limited to these embodiments.

[0036] Embodiment One

[0037] The embodiment provides a smart city componentization construction method based on digital twinning, as shown in Figure 1 The method comprises the following steps:

[0038] S1: constructing a city real scene three-dimensional data base based on digital twinning; and digitizing city real scene dynamic and static elements through function modules.

[0039] S2: Constructing a smart city function component through a model, a view and a controller;

[0040] S3: Composing a smart city single function component installation package based on component basic information, editable variables, component provided variables, ReactUI components and slot definitions;

[0041] S4: Adding different smart city function component installation packages to a visual smart city application platform according to user function requirements;

[0042] S5: Configuring smart city function components on the visual smart city application platform according to user-selected smart city function components; and saving the selected smart city function component configuration to a background server;

[0043] S6: When receiving a corresponding smart city function page request information, returning to step S5 to show the user the smart city function component configuration saved in the background server.

[0044] Specifically, since there is commonality or similarity among different smart city projects based on digital twinning, componentization of function modules can simultaneously realize massive analysis and calculation efficiency guarantee of specific digital twinning functions, reasonably allocate cloud and edge computing resources, effectively split computing tasks, and greatly improve the computing efficiency and precision of smart cities based on digital twinning. Using the architecture of React combined with typescript, the smart city function component is realized to run independently and be dynamically loaded by the browser. The reusability of the component function is freed from the code layer, so that a smart city function business module architecture that can be plugged in and out without feeling is constructed relying on the framework that can dynamically load components.

[0045] Specifically, the business data in the smart city function and the smart city real scene three-dimensional basic data service are separated, the self-defined smart city platform provides data warehousing, resource management, business component calling and other services, and the smart city real scene three-dimensional basic data and the self-defined different smart city function components construct complex business services, so as to maximize resource sharing and maximize business development flexibility.

[0046] Specifically, the server deployment method used will strip the editing, publishing and management modules of the smart city function component application. At the same time, it supports non-database management component relationships, directly builds a smart city function application through a configuration file, and maximizes the complexity of the deployment environment, and only needs to install docker and docker-compose to use.

[0047] Specifically, the selected smart city self-defined platform and component configuration are saved to a server, a separate offline packaging script is generated through a docker and docker-compose architecture, and a separate offline deployment package is generated. A DockerFile is generated through a script, a plurality of images (database service image, backend microservice image, static resource image, and front-end deployment environment image) are generated, the images are connected and run through docker-compose, and container dependency relationship arrangement is performed.

[0048] Specifically, the dynamic rendering page to complete the smart city function page display mainly adopts a React technical architecture.

[0049] The model in step S2 is a data layer, which is a data skeleton of a single function component of a smart city; the view is a UI part of the single function component of the smart city, which is a style representation of the function component; the controller is a loading scheduling of the single function component of the smart city; the model and the view are integrated into the function component, and are scheduled and organized through the controller.

[0050] Specifically, a relatively independent component can be regarded as a domain (field), the model and the view are integrated into an independent field, and then are scheduled and organized through an upper-layer controller, so as to realize isolation of a business model. Through pop-cmpt-core, pop-cmpt-cli, and pop-cmpt-typescript dependent packages, the completed single function component of the smart city is saved to an npm private warehouse for downloading and using. The pop-cmpt-core includes a base class of the component, is used for standardizing the composition of the component, and makes the key core code consistent. The development environment includes webpack, component development template code, and basic dependent libraries (pop-cmpt-core warehouse).

[0051] The component basic information in step S3 includes a component name, a component number, and a component version number; and the editable variable of the component is an external input parameter of the function component.

[0052] Specifically, the editable variable of the component can be said to be a user configuration item of the component, which is a configuration item in an attribute inspector seen by a user in an application building interface. The name and data type of the variable are declared, and the editing interface is declared. Actual variable declaration and definition are in a logic processing part of a component class. The editable variable array is a declaration of the variable, and is used for a condition read and rendered by an application editing platform. The component development core library will provide some default editType (attribute editor type).

[0053] In step S3, the component provides a variable to other functional components to provide data dependency, and the editable variable of the other functional component can be associated with the externally provided variable of the functional component.

[0054] Specifically, the field is declared to provide data dependency to other components, and the editable variable of the other component can be associated with the externally provided variable of the component. The specific value is defined elsewhere in the component, and the specific member variable is collected by the data monitoring function makeObservable and registered in the publish-subscribe center.

[0055] In step S3, the ReactUI component is a UI part developed based on React, and the display layer of the component node ID module is transmitted through the Props of the React component; the Props parameter transmitted from the outside is set, and the UI part automatically transmits an ID to mark the belonging ID during the rendering process; the slot definition declaration is used to declare the slot information of the functional component.

[0056] Specifically, the slot definition declaration is used to declare the slot information of the component. The slot is a container for placing child components, and a component can have several slots. The slot is divided into a unique slot and a plurality of slots, and the unique slot can only place one child component, and the plurality of slots can place an indefinite number of child components. The reason for distinguishing between unique slots and multiple slots is to meet different page layout requirements.

[0057] Specifically, the actual definition of the component slot is performed in ReactUI, and the pop-cmpt-core or SlotWrapper is used to define the slot. In addition to being used as a container for components, the slot also needs to be visually displayed in the editable interface. Considering the uniformity of the slot form in the visual interface and the variability of the actual component development process, the SlotWrapper contains two features of component nesting and visual editing interface of the slot. During the component development process, the SlotWrapper can be regarded as a normal dom element, so the tag attributes (such as tag, class, and style) need to be transmitted.

[0058] In step S4, the visual smart city application platform adopts typescript and React architecture.

[0059] Specifically, different smart city functional component installation packages are added to the platform according to the functional requirements of the user. Typescript and React architecture are adopted to conveniently standardize the code through type checking. The base class and interface are used to standardize the basic components of the typescript and React architecture.

[0060] The range configured in step S5 includes the function module position and the access data.

[0061] The access data is from a fixed value and other function components; the fixed value is edited by the user in the attribute inspector when building the visual smart city application platform; and the other function components are variable definitions provided by the components in step S3.

[0062] Specifically, according to the selected smart city function components, the components on the platform are configured, including the function module position, the accessed data, etc. First, the variables provided by the components to the outside are registered in the publish-subscribe center when the components are loaded, and then the subscriptions of all components are registered after all components are published. Using the interface of mobx, a set of data management basic library is realized based on the proxy feature of es6, which is most compatible with the current mobx usage habits. Through the listening feature of proxy, the collected component variables are automatically registered in the publish-subscribe center.

[0063] Specifically, the entry js file of the component package is obtained through asynchronous dynamic loading, and then inserted into the document stream of html to execute the js script, and the component automatically performs the mounting task. When all components are mounted, the micro-front-end framework constructs a component tree according to the component relationship and renders.

[0064] The method realizes the separate running of the smart city function components by using the architecture of React combined with typescript, and dynamically loads the components in the browser. The reusability of the component function is freed from the code layer, so that the framework capable of dynamically loading components is relied on to construct the smart city function business module architecture capable of plug-and-play. The business data in the smart city function and the smart city real scene three-dimensional basic data service are separated, the self-defined smart city platform provides data warehousing, resource management, business component calling services, and the smart city real scene three-dimensional basic data provided by the self-defined different smart city function components construct complex business services, which realize the maximum resource sharing and the maximum business development flexibility. Since the function modules have generality or similarity in different smart city projects based on digital twinning, the componentization of the function modules can realize the massive analysis and calculation efficiency guarantee of specific digital twinning functions, reasonably allocate the computing resources of the cloud and the edge, effectively split the computing tasks, and improve the computing efficiency and precision of the smart city based on digital twinning.

[0065] Embodiment two

[0066] The embodiment provides a smart city componentization construction system based on digital twinning, as shown in Figure 2 The system comprises:

[0067] The first construction unit is used for constructing a city real scene three-dimensional data base according to a digital twin, and digitizing dynamic and static elements of the city real scene through a function module.

[0068] The second construction unit is used for constructing a smart city function component through a model, a view and a controller.

[0069] The combination unit is used for composing a smart city single function component installation package according to component basic information, editable variables, component external provided variables, a ReactUI component and a slot definition.

[0070] The adding unit is used for adding different smart city function component installation packages to a visual smart city application platform according to a user's function demand.

[0071] The configuration unit is used for configuring a smart city function component on the visual smart city application platform according to a user-selected smart city function component.

[0072] The offline packaging unit is used for saving a selected smart city function component configuration to a background server.

[0073] The function page display platform is used for displaying a smart city function component configuration saved in the background server to a user when receiving a corresponding smart city function page request information.

[0074] The system can realize massive analysis and calculation efficiency guarantee of specific digital twin functions, reasonably allocate cloud and edge computing resources, effectively split computing tasks, and improve the calculation efficiency and precision of the smart city based on the digital twin, because the function modules have commonality or similarity in different smart cities based on the digital twin.

[0075] Although the present disclosure is disclosed as above, the protection scope of the present disclosure is not limited to this. Those skilled in the art can make various changes and modifications without departing from the spirit and scope of the present disclosure, and these changes and modifications will fall within the protection scope of the present disclosure.

Claims

1. A method for constructing a smart city component based on digital twinning, characterized in that, The method comprises the steps of: S1: constructing a city real scene three-dimensional data base based on digital twinning; and digitizing dynamic and static elements of the city real scene through a function module; S2: constructing a smart city function component through a model, a view, and a controller; S3: composing a smart city single function component installation package based on component basic information, editable variables, component externally provided variables, a React UI component, and slot definitions; S4: adding different smart city function component installation packages to a visual smart city application platform according to a function demand of a user; S5: configuring a smart city function component on the visual smart city application platform according to a selected smart city function component of the user; and saving the selected smart city function component configuration to a background server; S6: when receiving a corresponding smart city function page request information, returning to step S5 to show the smart city function component configuration saved in the background server to the user; The component basic information in step S3 comprises a component name, a component number, and a component version number; The editable variables of the component are external input parameters of the function component; The component externally provided variables in step S3 are fields for providing data dependency to other function components, and the editable variables of the other function components are associated to the externally provided variables of the function component; The React UI component in step S3 is a UI part developed based on React, and a display layer of a component node ID module is transmitted through Props of the React component; an ID is automatically transmitted to the UI part in a rendering process to mark the ID; and the slot definition declares slot information of the function component.

2. The digital-twin-based smart city componentization construction method according to claim 1, characterized in that, The model in step S2 is a data layer, which is a data skeleton of the smart city single function component; the view is a UI part of the smart city single function component, which is a style performance of the function component; and the controller is a loading scheduling of the smart city single function component; the model and the view are integrated into the function component, and are scheduled and organized through the controller.

3. The digital-twin-based smart city componentization construction method according to claim 1, characterized in that, The visual smart city application platform in step S4 adopts typescript and React architecture.

4. The digital-twin-based smart city componentization construction method according to claim 1, characterized in that, The configuration in step S5 comprises a function module position and access data; The access data comes from fixed values and other function components; the fixed values are contents edited by the user in an attribute inspector when the user builds the visual smart city application platform; and the other function components are variable definitions externally provided by the components in step S3.

5. A smart city componentized construction system based on digital twinning, characterized in that, The method comprises: A first construction unit for constructing a city real scene three-dimensional data base based on digital twinning; A function module is used to digitize dynamic and static elements of the city real scene; A second construction unit for constructing a smart city function component through a model, a view, and a controller; A combination unit for composing a smart city single function component installation package based on component basic information, editable variables, component externally provided variables, a React UI component, and slot definitions; and The adding unit is configured to add different intelligent city function component installation packages to the visual intelligent city application platform according to the function requirements of the user; The configuring unit is configured to configure the intelligent city function components on the visual intelligent city application platform according to the selected intelligent city function components of the user; The offline packaging unit is configured to save the selected intelligent city function component configuration to the background server; The function page display platform is configured to display the intelligent city function component configuration saved in the background server to the user when receiving the corresponding intelligent city function page request information; The component basic information includes a component name, a component number and a component version number; The editable variable of the component is an external input parameter of the function component; The external provided variable of the component is a field for providing data dependency to other function components, and the editable variable of the other function component is associated to the external provided variable of the function component; The React UI component is a UI part developed based on React, and the display layer of the component node ID module is transmitted through the Props of the React component; the Props parameter transmitted from outside is set, and an ID is automatically transmitted to the UI part in the rendering process to mark the belonging ID; the slot definition declaration is used for declaring the slot information of the function component.

Images