CN115809060B

CN115809060B - Openlayers map construction method and device and electronic equipment

Info

Publication number: CN115809060B
Application number: CN202310042949.7A
Authority: CN
Inventors: 李东雨; 孔庆新
Original assignee: Beijing BlueSky Technologies Co Ltd
Current assignee: Beijing BlueSky Technologies Co Ltd
Priority date: 2023-01-28
Filing date: 2023-01-28
Publication date: 2023-05-23
Anticipated expiration: 2043-01-28
Also published as: CN115809060A

Abstract

The embodiment of the invention provides an Openlayers map construction method, an Openlayers map construction device and electronic equipment, relates to the technical field of software, and is applied to the electronic equipment, wherein a Vue component tree is stored in the Openlayers map construction device, and the Openlayers map construction device comprises a father component and a child component; the parent component is a Vue base graph component, wherein a constructor of an Openlayers base graph object is packaged, the child component is a Vue functional component, and a constructor of an Openlayers functional object is packaged, and the method comprises the following steps: receiving configuration information input by a user; initializing a Vue component in the Vue component tree according to the configuration information, and creating an Openlayers object corresponding to the configuration information; and mounting the initialized Vue component, loading the created Openlayers object, and constructing an Openlayers map. By applying the scheme provided by the embodiment of the invention, the Openlayers map can be constructed more simply.

Description

Openlayers map construction method and device and electronic equipment

Technical Field

The present invention relates to the field of software technologies, and in particular, to an Openlayers map construction method, an Openlayers map construction device, and an electronic device.

Background

The Openlayers package is JS (JavaScript) package for developing a Web GIS (World Wide Web Geographic Information Systems, global wide area network geographic information system) client, and an interactive Openlayers map can be constructed by calling the Openlayers package, so that a powerful map display function is provided. However, since different JS programs need to be written each time an Openlayers map is constructed, the construction process of the Openlayers map is complex.

Disclosure of Invention

The embodiment of the invention aims to provide a method and a device for constructing an Openlayers map and electronic equipment, which can construct the Openlayers map more simply. The specific technical scheme is as follows:

in a first aspect, an embodiment of the present invention provides an Openlayers map construction method, which is applied to an electronic device, where a Vue component tree is stored in the electronic device, where the Vue component tree includes a parent component and a child component;

the parent component is a Vue base map component, a constructor of an Openlayers base map object is packaged in the Vue base map component, the Openlayers base map object is created based on the constructor, map attribute and map function packaged in the Vue base map component, the constructor packaged in the Vue base map component is created based on a map class in an Openlayers package, the map class records base map frame information of the Openlayers base map object, the map attribute is an attribute of the Openlayers base map object, and the map function is a function of the Openlayers base map object;

the subcomponent is a Vue functional component, a constructor of an Openlayers functional object is packaged in the Vue functional component, the Openlayers functional object is created based on the constructor and a subclass attribute and a subclass function packaged in the Vue functional component, the constructor packaged in the Vue functional component is created based on a subclass in an Openlayers package, the Openlayers functional object is used for realizing an Openlayers function on the basis of the Openlayers base map object, the subclass records functional frame information of the Openlayers functional object, the subclass attribute is an attribute of the Openlayers functional object, and the subclass function is a function of the Openlayers functional object;

The method comprises the following steps:

receiving configuration information input by a user, wherein the configuration information comprises at least one of the following information: map attribute, map function, subclass attribute, subclass function;

initializing a Vue component in the Vue component tree according to the configuration information, and creating an Openlayers object corresponding to the configuration information, wherein a constructor of the Openlayers object corresponding to the configuration information is packaged in the Vue component, and the Openlayers object is the Openlayers base map object or the Openlayers function object;

and mounting the initialized Vue component, loading the created Openlayers object, and constructing an Openlayers map.

Optionally, initializing a Vue component in the Vue component tree according to the configuration information, and creating an Openlayers object corresponding to the configuration information, including:

initializing a Vue base map component, which is packaged with a constructor of an Openlayers base map object corresponding to configuration information, in the Vue component tree according to the configuration information when the configuration information is map attribute or map function, and creating an Openlayers base map object corresponding to the configuration information;

and initializing a Vue function component, which is packaged with a constructor of an Openlayers function object corresponding to the configuration information, in the Vue component tree according to the configuration information under the condition that the configuration information is a subclass attribute or a subclass function, and creating the Openlayers function object corresponding to the configuration information.

Optionally, a ue monitoring tool is preconfigured in the ue component tree, and after initializing a ue component in the ue component tree according to the configuration information and creating an Openlayers object corresponding to the configuration information, the method further includes:

under the condition that the Vue monitoring tool monitors the change of the configuration information, modifying an Openlayers object corresponding to the changed configuration information according to the changed configuration information;

after the initialized Vue component is mounted and the created Openlayers object is loaded and the Openlayers map is constructed, the method further comprises the steps of:

and loading the modified Openlayers object and modifying the Openlayers map.

Optionally, the Openlayers base map object includes at least one of the following base map objects: static map, thermodynamic map, tile map.

Optionally, the subclasses in the Openlayers package are used to implement at least one of the following Openlayers functions: eagle eye display, measurement, openlayers map adjustment, dot line and plane drawing, vector layer creation, openlayers map component display and information prompt.

In a second aspect, an embodiment of the present invention provides an Openlayers map building apparatus, which is applied to an electronic device, where a Vue component tree is stored in the electronic device, where the Vue component tree includes a parent component and a child component;

The device comprises:

the receiving module is used for receiving configuration information input by a user, wherein the configuration information comprises at least one of the following information: map attribute, map function, subclass attribute, subclass function;

the creating module is used for initializing a Vue component in the Vue component tree according to the configuration information and creating an Openlayers object corresponding to the configuration information, wherein a constructor of the Openlayers object corresponding to the configuration information is packaged in the Vue component, and the Openlayers object is the Openlayers base map object or the Openlayers function object;

the building module is used for mounting the initialized Vue component, loading the created Openlayers object and building the Openlayers map.

Optionally, the creating module includes:

the first creating sub-module is used for initializing a Vue base map component, which is encapsulated with a constructor of an Openlayers base map object corresponding to the configuration information, in the Vue component tree according to the configuration information when the configuration information is a map attribute or a map function, and creating the Openlayers base map object corresponding to the configuration information;

and the second creating submodule is used for initializing a Vue functional component, which is encapsulated with a constructor of an Openlayers functional object corresponding to the configuration information, in the Vue functional component tree according to the configuration information when the configuration information is a subclass attribute or a subclass function, and creating the Openlayers functional object corresponding to the configuration information.

Optionally, the Vue component tree is preconfigured with a Vue listening tool, and the creating module is further configured to:

the building module is also for:

and loading the modified Openlayers object and modifying the Openlayers map.

In a third aspect, an embodiment of the present invention provides an electronic device, including a processor, a communication interface, a memory, and a communication bus, where the processor, the communication interface, and the memory complete communication with each other through the communication bus;

a memory for storing a computer program;

a processor for implementing any of the method steps of the first aspect described above when executing a program stored on a memory.

In a fourth aspect, a computer readable storage medium has a computer program stored therein, which when executed by a processor, implements any of the method steps of the first aspect.

The embodiment of the invention has the beneficial effects that:

by applying the Openlayers map construction method provided by the embodiment of the invention, configuration information which can contain map attributes, map functions, subclasses attributes and subclasses functions and is input by a user is received, and a Vue component which is packaged with the configuration function and is in a Vue component tree is initialized by initializing the configuration function of the Openlayers object corresponding to the configuration information according to the configuration information. Because the Openlayers base map object is created through the constructor, the map attribute and the map function of the Openlayers base map object encapsulated in the Vue base map component, and the Openlayers function object is created through the constructor, the subclass attribute and the subclass function of the Openlayer function object encapsulated in the Vue function component, the Openlayers object corresponding to the configuration information can be created according to the configuration information and the corresponding constructor. And realizing the construction of the Openlayers map by mounting the Vue component in the initialized Vue component tree and loading the created Openlayers object. In the scheme provided by the embodiment of the invention, a user can construct the Openlayers map by using the constructors of the Openlayers objects packaged in the Vue component only by inputting different configuration information, and the user does not need to convert the Openlayers map into JavaScript codes, so that the complexity of constructing the Openlayers map and the development difficulty of the Openlayers map are reduced, different Openlayers maps can be constructed more simply and flexibly, the development efficiency is improved, and meanwhile, the use of users with unclear JavaScript related knowledge is facilitated.

Drawings

In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the invention, and other embodiments may be obtained according to these drawings to those skilled in the art.

Fig. 1 is a flow chart of a first Openlayers map construction method provided by an embodiment of the present invention;

fig. 2 is a flow chart of a second Openlayers map construction method according to an embodiment of the present invention;

fig. 3 is a flow chart of a third Openlayers map construction method according to an embodiment of the present invention;

fig. 4 is a schematic structural diagram of a first Openlayers map building device according to an embodiment of the present invention;

fig. 5 is a schematic structural diagram of a second Openlayers map building device according to an embodiment of the present invention;

fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by the person skilled in the art based on the present invention are included in the scope of protection of the present invention.

In order to construct an Openlayers map more simply, the embodiment of the invention provides an Openlayers map construction method and device and electronic equipment.

Fig. 1 is a flow chart of a first Openlayers map construction method provided by an embodiment of the present invention, which is applied to an electronic device, where a Vue component tree is stored in the electronic device, where the Vue component tree includes a parent component and a child component.

The parent component is a Vue base map component, the Vue base map component is encapsulated with a constructor of an Openlayers base map object, the Openlayers base map object is created based on the constructor encapsulated in the Vue base map component, map (map) attributes and map functions, the constructor encapsulated in the Vue base map component is created based on a map class in an Openlayers package, the map class records base map frame information of the Openlayers base map object, the map attributes are attributes of the Openlayers base map object, and the map functions are functions of the Openlayers base map object.

Specifically, map classes in the Openlayers package are called in the Vue project to obtain base map frame information, corresponding construction functions are created according to the base map frame information, and the corresponding construction functions are packaged into a Vue base map component which is used as a father component in a Vue component tree. The Openlayers base map object can be created by the constructor and map attribute, map function, and the like encapsulated in the Vue base map component. The map attribute represents a value of an attribute of the Openlayers base map object, for example, may represent a position of a center point of the Openlayers base map object and a display range of the Openlayers base map object. The map function is a function that can implement a function on an Openlayers base map object, for example, a function that can load a picture and a webpage map.

In one embodiment of the present invention, the Openlayers base map object includes at least one of the following base map objects: static map, thermodynamic map, tile map.

Specifically, a corresponding constructor is created by calling a map class in an Openlayers package, and different base map objects can be created by the constructor in a Vue base map component and different map attributes and map functions, wherein the different base map objects have different creation characteristics. For example, a static image is a base image object that can load a picture in JPEG (Joint Photographic Experts Group) format, PNG (Portable Network Graphics, portable network graphic) format as a base image, a map attribute includes picture information of the picture, and a map function is a function for loading the picture. The thermodynamic diagram is a base diagram object supporting a GeoJSON data coding format and supporting dynamic incoming data, the map attribute comprises base diagram information of the GeoJSON data for creating the thermodynamic diagram, and the map function is a function for realizing the dynamic incoming function. The tile map is a base map object supporting various webpage maps, the map function is a function for loading the webpage maps, and the map attribute is information for configuring the webpage maps.

By applying the scheme provided by the embodiment of the invention, according to the creation characteristics of different Openlayers base map objects, by calling the constructors which are encapsulated in the Vue base map component and created by the map class in the Openlayers package and different Openlayers base map objects which can be created by different map attributes and map functions, the applicable Openlayers base map objects are enriched, and more diversified Openlayers maps can be constructed.

The above-mentioned subcomponent is a Vue functional component, the above-mentioned Vue functional component encapsulates the constructor of the Openlayers functional object, the above-mentioned Openlayers functional object is based on the constructor and subclass attribute of encapsulation in the above-mentioned Vue functional component, the constructor of encapsulation in the above-mentioned Vue functional component is based on subclass in the Openlayers package and is established, the above-mentioned Openlayers functional object is used for realizing the Openlayers function on the basis of above-mentioned Openlayers base map object, the above-mentioned subclass records the functional frame information of the above-mentioned Openlayers functional object, the above-mentioned subclass attribute is the attribute of the above-mentioned Openlayers functional object, the above-mentioned subclass function is the function of the above-mentioned Openlayers functional object.

Specifically, the subclass in the Openlayers package is called in the Vue project to acquire the function frame information, a corresponding construction function is created according to the function frame information, and the corresponding construction function is packaged into a Vue function component which is used as a sub-component in the Vue component tree. The Openlayers function object can be created through the constructor and sub-class attributes and sub-class functions encapsulated in the Vue function component. The subclass attribute represents a value of an attribute of an Openlayers functional object, the map function is a function capable of realizing a specific function in the Openlayers functional object, for example, for the Openlayers functional object for amplifying an Openlayers map, the subclass attribute may be an amplification factor, and the subclass function may be a specific function for amplifying the Openlayers map.

In addition, different constructors can be created according to subclasses in different Openlayers packages, the different constructors are packaged into different Vue functional components, different Openlayers functional objects can be created through the different Vue functional components, different subclasses and different subclasses, and different Openlayers functional objects are applied to the created Openlayers base map objects to realize different Openlayers functions.

In one embodiment of the invention, the Vue component tree contains a Vue base map component as a father component, a plurality of Vue function components are used as sub-components, and mapping relations exist among the Vue components, namely, the sub-class attribute of the Openlayers function object created by the constructor encapsulated in one Vue function component can correspond to the map attribute of the Openlayers base map object created by the constructor encapsulated in the Vue base map component or correspond to the sub-class attribute of the Openlayers function object created by the constructor encapsulated in other Vue function components; the sub-class functions of the Openlayers function object created by the constructors encapsulated in one Vue function component may correspond to the map functions of the Openlayers base map object created by the constructors encapsulated in the Vue base map component, or to the sub-class functions of the Openlayers function object created by the constructors encapsulated in other Vue function components. For example, by defining a tips tool in a Vue component, properties of an Openlayers object created based on constructors encapsulated in the Vue component may be passed to other Vue components to correspondingly change properties of the Openlayers object during creation of the Openlayers object based on constructors encapsulated in other Vue components, and functions of the Openlayers object created based on constructors encapsulated in the Vue component may be passed to other Vue components to correspondingly change functions of the Openlayers object during creation of the Openlayers object based on constructors encapsulated in other Vue components.

In one embodiment of the present invention, the subclasses in the Openlayers package are used to implement at least one of the following Openlayers functions: eagle eye display, measurement, openlayers map adjustment, dot line and plane drawing, vector layer creation, openlayers map component display and information prompt.

Specifically, different constructional functions are created by calling different subclasses in an Openlayers package for realizing different Openlayers functions and are packaged into different Vue functional components, one or more Openlayers functional objects can be created and different Openlayers functions can be realized by the constructional functions in the different Vue functional components and different subclass attributes and subclass functions, and corresponding Openlayers functions can be realized by the different Openlayers functional components. The function of the Openlayers displayed by the eagle eyes is to reduce the constructed complete Openlayers map to one eagle eye, so as to check the relative position of the currently displayed Openlayers map in the complete Openlayers map. The function of Openlayers is to measure the distance between two selected points and the area surrounded by a plurality of points. The Openlayers function of the Openlayers map adjustment is to move the center point of the Openlayers map, rotate the Openlayers map and adjust the display proportion of the Openlayers map. The function of the Openlayers drawn by the dotted line and the plane is to draw and display points, lines and planes on the Openlayers map. The function of the Openlayers created by the vector layers is to create the vector layers which can be loaded on the Openlayers base map object and realize the display of the data represented by the layer elements on the Openlayers map. The Openlayers function displayed by the Openlayers map component is to display a map component which can be directly operated by a user on the Openlayers map, for example, the map component can be an enlarged, reduced and scaled map component of the Openlayers map. The Openlayers function of the information prompt is to display prompt information for prompting the user and responding to the user on an Openlayers map.

In one embodiment of the invention, an Openlayers function object for realizing the Openlayers function can be created through a constructor and corresponding subclass attribute and subclass function packaged in the Vue function component, and the map attribute of the Openlayers base map object created based on the constructor packaged in the Vue base map component, the map function or the subclass attribute and subclass function of the Openlayers function object created by the constructor packaged in other Vue function components are changed. For example, by creating a corresponding Openlayers function object through a Vue function component and a corresponding sub-class attribute and sub-class function of a function for moving a center point of an Openlayers map in an Openlayers function for implementing Openlayers map adjustment, a position of the center point of an Openlayers base map object can be changed.

By applying the scheme provided by the embodiment of the invention, different Openlayers function objects are created by calling the corresponding construction functions, corresponding subclass attributes and corresponding subclass functions, which are encapsulated in the Vue function component and created by the subclasses in the Openlayers package for realizing different Openlayers functions, so that the different Openlayers function objects can realize different Openlayers functions, and the availability of the Openlayers map is improved.

The method comprises the following steps S101-S103.

Step S101, receiving configuration information input by a user.

Wherein the configuration information includes at least one of the following information: map attribute, map function, subclass attribute, subclass function.

Specifically, configuration information including at least one of map attribute, map function, sub-class attribute and sub-class function input by a user is received through a message bus, where the configuration information may be field information manually input by the user, or may be configuration information obtained by operating a user on a constructed Openlayers map, for example, the user moves the constructed Openlayers map to indicate that the user changes the position of the center point of the Openlayers map, and then receives configuration information corresponding to the operation to change the center point of the Openlayers map.

Step S102, initializing the Vue component in the Vue component tree according to the configuration information, and creating an Openlayers object corresponding to the configuration information.

And the Vue component is packaged with a constructor of an Openlayers object corresponding to the configuration information, wherein the Openlayers object is the Openlayers base map object or the Openlayers function object.

Specifically, map attribute, map function, sub-class attribute and sub-class function possibly contained in the configuration information are transmitted into a Vue component packaged with a constructor of an Openlayers object corresponding to the configuration information, the constructor of the Openlayers object corresponding to the configuration information is initialized, the Vue component in the Vue component tree is initialized, and the corresponding Openlayers object is created according to the configuration information and the constructor packaged in the Vue component.

Step S103, mounting the initialized Vue component, loading the created Openlayers object, and constructing an Openlayers map.

Specifically, after initializing a Vue component and creating a corresponding Openlayers object according to configuration information, loading the created Openlayers object by mounting the Vue component in the initialized Vue component tree and in the process of mounting the Vue component, so that an Openlayers map required by a user can be constructed.

Fig. 2 is a flow chart of a second Openlayers map construction method according to an embodiment of the present invention, and on the basis of fig. 1, the above step S102 may be implemented by the following steps S102A-S102B.

Step S102A, initializing a Vue base graph component of a constructor, which is packaged with an Openlayers base graph object corresponding to the configuration information, in the Vue component tree according to the configuration information when the configuration information is a map attribute or a map function, and creating the Openlayers base graph object corresponding to the configuration information.

Specifically, in the case that the configuration information is a map attribute or a map function, according to the configuration information input by a user, only the map attribute or the map function contained in the configuration information needs to be transferred into a Vue base map component packaged with a constructor of an Openlayers base map object corresponding to the configuration information, the constructor of the Openlayers base map object corresponding to the configuration information is initialized, the Vue base map component in the Vue component tree is initialized, and a corresponding Openlayers base map object is created according to the map attribute or the map function contained in the configuration information and the constructor packaged in the Vue component.

In one embodiment of the invention, the configuration information is map attribute or map function, the Vue base map component of the constructor of the Openlayers base map object corresponding to the configuration information is initialized according to the configuration information, after the Openlayers base map object corresponding to the configuration information is created, if the mapping relationship exists between the Vue base map component and the Vue function component, the sub-class attribute of the Openlayers function object corresponds to the map attribute of the Openlayers base map object created or the sub-class function corresponds to the map function of the Openlayers base map object created, the information of the map attribute with the corresponding relationship can be transmitted into the Vue function component of the constructor of the Openlayers function object containing the corresponding sub-class attribute through the data interaction among the Vue components, so that the corresponding Openlayers function object is modified according to the map attribute transmitted; and transmitting the information of the map function with the corresponding relation into a Vue functional component packaged with a constructor of an Openlayers functional object containing the corresponding sub-class function, so as to modify the corresponding Openlayers base map object according to the transmitted map function.

Step S102B, initializing a Vue function component of a constructor of the Openlayers function object corresponding to the configuration information in the Vue component tree according to the configuration information when the configuration information is a subclass attribute or a subclass function, and creating the Openlayers function object corresponding to the configuration information.

Specifically, in the case that the configuration information is a subclass attribute or a subclass function, only the subclass attribute or the subclass function contained in the configuration information needs to be transmitted into the Vue function component packaged with the constructor of the Openlayers function object corresponding to the configuration information according to the configuration information input by the user, the Vue function component in the Vue component tree is initialized by initializing the constructor of the Openlayers function object corresponding to the configuration information, and the corresponding Openlayers function object is created according to the subclass attribute or the subclass function contained in the configuration information and the constructor packaged in the Vue component. For example, for a Vue function component for implementing an Openlayers function for displaying a vector layer, under the condition that configuration information contains a sub-class attribute or a sub-class function used for the Vue function component, initializing the corresponding Vue function component according to the configuration information, and creating a corresponding Openlayers function object, it is possible to implement adjustment of a layer element array in the vector layer, and also possible to implement creation of a new vector layer, and dynamically display required data on a constructed Openlayers map by mounting the Vue function component and loading the corresponding Openlayers function object.

In one embodiment of the invention, the configuration information is a sub-class attribute or a sub-class function, a Vue functional component which is packed with a constructor of an Openlayers functional object corresponding to the configuration information is initialized according to the configuration information, and after the Openlayers functional object corresponding to the configuration information is created, as mapping relations exist between the Vue base map component and the Vue functional component and between different Vue functional components, if the map attribute of the Openlayers base map object corresponds to the sub-class attribute of the Openlayers functional object or the map function corresponds to the sub-class function of the Openlayers functional object, the information of the sub-class attribute with the corresponding relation can be transmitted into the Vue base map component packed with the constructor of the Openlayers base map object containing the corresponding map attribute through data interaction between the Vue components, so that the corresponding Openlayers base map object is modified according to the transmitted sub-class attribute; and transmitting information of the sub-class function with the corresponding relation into a Vue base map component which is packaged with a constructor of the Openlayers base map object containing the corresponding map function, so as to modify the corresponding Openlayers base map object according to the transmitted sub-class function. If the sub-class attribute of the other Openlayers function object corresponds to the sub-class attribute of the created Openlayers function object or the sub-class function corresponds to the sub-class function of the created Openlayers function object, information of the sub-class attribute with the corresponding relation can be transmitted into the Vue function component which is packaged with the construction function of the Openlayers function object containing the corresponding sub-class attribute through data interaction among the Vue components, so that the corresponding Openlayers function object is modified according to the transmitted sub-class attribute; and transmitting the information of the sub-class function with the corresponding relation into a Vue functional component packaged with a constructor of the Openlayers functional object containing the corresponding sub-class function, so as to modify the corresponding Openlayers functional object according to the transmitted sub-class function.

In addition, one step may be selected between step S102A and step S102B, or both steps may be performed, and there is no sequence of execution, that is, step S102A and step S102B may be arbitrarily performed after step S101 is performed.

By applying the scheme provided by the embodiment of the invention, under the condition that the configuration information is the map attribute or the map function, only the Vue base map component which is packaged with the constructor of the Openlayers base map object corresponding to the configuration information is required to be initialized according to the configuration information, and the Openlayers base map object corresponding to the configuration information is created. Under the condition that the configuration information is a subclass attribute or a subclass function, only the Vue function component which is packaged with the constructor of the Openlayers function object corresponding to the configuration information is required to be initialized according to the configuration information, and the Openlayers function object corresponding to the configuration information is created, so that a specific mode of initializing the Vue component in the Vue component tree and creating the corresponding Openlayers object under the condition that the configuration information is different is provided.

Fig. 3 is a schematic flow chart of a third Openlayers map construction method according to an embodiment of the present invention, and on the basis of fig. 1, step S102 may further include step S104, and step S103 may further include step S105.

Step S104, under the condition that the Vue monitoring tool pre-configured in the Vue component tree monitors the change of the configuration information, modifying the Openlayers object corresponding to the changed configuration information according to the changed configuration information.

Specifically, a Vue monitoring tool is preconfigured in the Vue component tree, so that the change of configuration information input by a user can be monitored, and after the change of the input configuration information is monitored, the Vue monitoring tool modifies the attribute or function of an Openlayers object corresponding to the changed configuration information according to the map attribute, map function, sub-class attribute and sub-class function information contained in the changed configuration information.

Step S105, loading the modified Openlayers object and modifying the Openlayers map.

Specifically, by loading the modified Openlayers object, the Openlayers map constructed by the user can be modified. For example, configuration information of a map amplifying part displayed on an Openlayers map is clicked by a user, a Vue monitoring tool monitors that the configuration information is changed, sub-class attributes and sub-class functions of Openlayers function objects used for displaying the map amplifying part are modified according to information contained in the configuration information, sub-class attributes and sub-class functions of Openlayers function objects of Openlayers function used for realizing Openlayers map adjustment are modified through the Openlayers function objects, the proportion of the Openlayers map is adjusted, and the displayed map is amplified.

In one embodiment of the present invention, the Vue monitoring tool may be further configured to monitor a map attribute, a map function, a sub-class attribute, and a sub-class function that have a correspondence relationship with each other, determine whether any item of information in the map attribute, the map function, the sub-class attribute, and the sub-class function that are monitored changes, and if any item changes, adjust other item of information in the map attribute, the map function, the sub-class attribute, and the sub-class function that have a correspondence relationship with each other accordingly.

By applying the scheme provided by the embodiment of the invention, whether the configuration information input by a user changes is monitored through a Vue monitoring tool pre-configured in the Vue component tree, and under the condition that the configuration information changes, the Openlayers object corresponding to the configuration information can be modified according to the changed configuration information so as to modify the constructed Openlayers map.

Based on the same inventive concept, corresponding to the above-mentioned Openlayers map construction method, the embodiment of the invention further provides an Openlayers map construction device, which is applied to electronic equipment, wherein a Vue component tree is stored in the electronic equipment, and the Vue component tree comprises a parent component and a child component.

The subcomponent is a Vue functional component, a constructor of an Openlayers functional object is packaged in the Vue functional component, the Openlayers functional object is created based on the constructor and a subclass attribute and a subclass function packaged in the Vue functional component, the constructor packaged in the Vue functional component is created based on a subclass in an Openlayers package, the Openlayers functional object is used for realizing an Openlayers function on the basis of an Openlayers base map object, the subclass records functional frame information of the Openlayers functional object, the subclass attribute is an attribute of the Openlayers functional object, and the subclass function is a function of the Openlayers functional object.

Fig. 4 is a schematic structural diagram of a first Openlayers map construction device according to an embodiment of the present invention, where the device includes:

a receiving module 401, configured to receive configuration information input by a user, where the configuration information includes at least one of the following information: map attribute, map function, subclass attribute, subclass function;

a creating module 402, configured to initialize a Vue component in the Vue component tree according to the configuration information, and create an Openlayers object corresponding to the configuration information, where a constructor of the Openlayers object corresponding to the configuration information is encapsulated in the Vue component, and the Openlayers object is the Openlayers base map object or the Openlayers functional object;

The building module 403 is configured to mount the initialized Vue component and load the created Openlayers object, and build an Openlayers map.

In one embodiment of the present invention, fig. 5 is a schematic structural diagram of a second Openlayers map building apparatus according to the embodiment of the present invention, and compared with the foregoing fig. 4, the creating module 402 includes:

a first creating submodule 402A, configured to initialize a Vue base map component in the Vue component tree, where the configuration information is a map attribute or a map function, and the Vue base map component encapsulates a constructor of an Openlayers base map object corresponding to the configuration information according to the configuration information, so as to create an Openlayers base map object corresponding to the configuration information;

and a second creating submodule 402B, configured to initialize, according to the configuration information, a Vue function component in the Vue component tree, where a constructor of the Openlayers function object corresponding to the configuration information is encapsulated, and create an Openlayers function object corresponding to the configuration information, where the configuration information is a subclass attribute or a subclass function.

In one embodiment of the present invention, the Vue component tree is preconfigured with a Vue listening tool, and the creating module 402 is further configured to:

and under the condition that the Vue monitoring tool monitors the change of the configuration information, modifying the Openlayers object corresponding to the changed configuration information according to the changed configuration information.

The building module 403 is further configured to:

and loading the modified Openlayers object and modifying the Openlayers map.

Based on the same inventive concept, corresponding to the above-mentioned Openlayers map construction method, the embodiment of the invention further provides an electronic device, as shown in fig. 6, which is a schematic structural diagram of the electronic device according to the embodiment of the invention, and includes a processor 601, a communication interface 602, a memory 603, and a communication bus 604, where the processor 601, the communication interface 602, and the memory 603 complete communication with each other through the communication bus 604.

Memory 603 for storing a computer program and a Vue component tree comprising parent and child components.

The processor 601 is configured to execute the program stored in the memory 603, and implement the following steps:

The communication bus mentioned above for the electronic devices may be a peripheral component interconnect standard (Peripheral Component Interconnect, PCI) bus or an extended industry standard architecture (Extended Industry Standard Architecture, EISA) bus, etc. The communication bus may be classified as an address bus, a data bus, a control bus, or the like. For ease of illustration, the figures are shown with only one bold line, but not with only one bus or one type of bus.

The communication interface is used for communication between the electronic device and other devices.

The Memory may include random access Memory (Random Access Memory, RAM) or may include Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the aforementioned processor.

The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but also digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-ProgrammableGate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

In yet another embodiment of the present invention, a computer readable storage medium is provided, in which a computer program is stored, the computer program implementing the steps of any of the Openlayers map construction methods described above when executed by a processor.

In yet another embodiment of the present invention, a computer program product containing instructions that, when run on a computer, cause the computer to perform any of the Openlayers map construction methods of the above embodiments is also provided.

In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the present invention, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another, for example, by wired (e.g., coaxial cable, optical fiber, digital Subscriber Line (DSL)), or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid State Disk (SSD)), etc.

It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

In this specification, each embodiment is described in a related manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for Openlayers map construction apparatus, electronic device, computer readable storage medium, computer program product embodiments, the description is relatively simple, as it is substantially similar to method embodiments, and relevant places are referred to in the section of the description of method embodiments.

The foregoing description is only of the preferred embodiments of the present invention and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.

Claims

1. The Openlayers map construction method is characterized by being applied to electronic equipment, wherein a Vue component tree is stored in the electronic equipment, and the Vue component tree comprises a father component and a child component;

the parent component is a Vue base map component, a constructor of an Openlayers base map object is packaged in the Vue base map component, the Openlayers base map object is created based on the constructor packaged in the Vue base map component, map attributes and map functions, the constructor packaged in the Vue base map component is created based on map classes in an Openlayers package, the map classes record base map frame information of the Openlayers base map object, the map attributes are attributes of the Openlayers base map object, and the map functions are functions of the Openlayers base map object;

The method comprises the following steps:

mounting the initialized Vue component, loading the created Openlayers object, and constructing an Openlayers map;

initializing a Vue component in the Vue component tree according to the configuration information, and creating an Openlayers object corresponding to the configuration information, wherein the initializing comprises the following steps:

2. The method according to claim 1, wherein a Vue listening tool is preconfigured in the Vue component tree, and after initializing a Vue component in the Vue component tree according to the configuration information, creating an Openlayers object corresponding to the configuration information, the method further includes:

after the initialized Vue component is mounted and the created Openlayers object is loaded, the method further comprises the steps of:

and loading the modified Openlayers object and modifying the Openlayers map.

3. The method of claim 1, wherein the Openlayers floor object comprises at least one of the following floor objects: static map, thermodynamic map, tile map.

4. A method according to any of claims 1-3, wherein the subclasses in the Openlayers package are used to implement at least one of the following Openlayers functions: eagle eye display, measurement, openlayers map adjustment, dot line and plane drawing, vector layer creation, openlayers map component display and information prompt.

5. The Openlayers map construction device is characterized by being applied to electronic equipment, wherein a Vue component tree is stored in the electronic equipment, and the Vue component tree comprises a parent component and a child component;

The device comprises:

the building module is used for mounting the initialized Vue component, loading the created Openlayers object and building an Openlayers map;

the creation module comprises:

6. The apparatus of claim 5, wherein a Vue listening tool is preconfigured in the Vue component tree, the creation module further to:

the building module is also for:

and loading the modified Openlayers object and modifying the Openlayers map.

7. The apparatus of claim 5, wherein the Openlayers base map object comprises at least one of the following base map objects: static map, thermodynamic map, tile map.

8. The apparatus of any of claims 5-7, wherein a subclass in the Openlayers package is to implement at least one of the following Openlayers functions: eagle eye display, measurement, openlayers map adjustment, dot line and plane drawing, vector layer creation, openlayers map component display and information prompt.

9. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;

A memory for storing a computer program;

a processor for carrying out the method steps of any one of claims 1-4 when executing a program stored on a memory.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored therein a computer program which, when executed by a processor, implements the method steps of any of claims 1-4.