WebGIS-based visual thematic mapping method

Abstract

The invention relates to the technical field of business process management, and discloses a WebGIS-based visual thematic drawing method, which comprises the following steps that: the content in a web page consists of html (Hypertext Markup Language) and css (Secure Subscriber Identity), and any graph is drawn in a canvas through a program by utilizing the canvas of one of the html; generating a picture from the drawn graph; a DIV is placed in a page to serve as a drawing container, and through CSS (setting the positioning mode of the container to be relative positioning, it is guaranteed that a module in the container is always in a correct position; a map module is placed in a container, the position and the size are set, if a title is not needed, the size can be set to be 100%, otherwise, the size is modified according to the situation, the display space of text information is reserved, a map layer of a map can be loaded through a configuration file, and the specific loading mode is not limited. Layout is carried out through dragging, layout data can be stored, and reusability of drawing operation is improved.

Description

Technical Field

[0001] The invention relates to the technical field of business process management, and in particular to a visual thematic mapping method based on WebGIS. Background Art

[0002] The core of WebGIS-based visual thematic mapping is to control the template and content of thematic mapping by combining the existing WebGIS engine with Web front-end technology, thereby realizing the visualization and customization of mapping. Visual thematic mapping adopts the idea of ​​"modularization", that is, the content to be displayed in the mapping process can be understood as a module, such as map module, text description module, legend module, scale module, etc., and each module is designed to be "what you see is what you get". Users can change the position of the module by dragging on the Web page, change the appearance of the text by modifying the style (text type module), and even upload custom pictures to modify the content of the module (such as the compass), and all modifications are effective immediately. The process of drawing is to use Web front-end technology to merge the designed drawing content together to form a new picture (which can be understood as superimposing several pictures together), so the effect after drawing is consistent with the current content. The entire operation process does not require users to have too much GIS professional knowledge, but only basic web page operation skills, which greatly reduces the tediousness and difficulty of the traditional mapping process.

[0003] Currently, the existing Web-based mapping methods on the market mostly use the method of generating images on the server side and then returning them to the client side. The mapping content has great limitations. At the same time, affected by the server-side network security policy (especially in industries involving government affairs such as planning), many map service contents cannot be generated. In some other actual projects, users do not have the authority to modify the server-side mapping templates. For many reasons, the mapping content is too single and cannot be customized.

[0004] Therefore, there is an urgent need for a WebGIS-based visual thematic mapping method to solve the above technical problems. Summary of the invention

[0005] The purpose of the present invention is to provide a visual thematic mapping method based on WebGIS to solve the problems raised in the above background technology.

[0006] To achieve the above object, the present invention provides the following technical solutions:

[0007] A method for visualizing thematic mapping based on WebGIS, the method comprising the following steps:

[0008] Step 1: The content of the web page is composed of HTML and CSS, and the canvas of HTML is used to draw any graphics in the canvas through the program, and the graphics after drawing are generated into pictures;

[0009] Step 2: Place a DIV on the page as a container for drawing, and use CSS to set the container's positioning method to relative positioning to ensure that the modules inside the container are always in the correct position.

[0010] Step 3. Place a map module in the container and set the position and size. If you do not need a title, set the size to 100%. Otherwise, modify the size according to the situation and reserve space for text information. The map layer can be loaded through the configuration file. There is no restriction on the specific loading method. As long as the layer is loaded normally, it can be mapped.

[0011] Step 4. Add other modules to the container, such as title, legend, scale, and compass, and then set the position of each module and the relevant parameters of the module. As needed, manually draw graphics and text annotations on the map, or temporarily load graphic files.

[0012] Step 5. After setting the layout and parameters of the module, the core process of the mapping method will be executed. A blank canvas will be created in the page, and then the HTML target to be drawn will be specified. The program will analyze the HTML structure and CSS style of the target, and draw the container, map and each module on the canvas in turn according to the position and style in the page, and finally generate the picture;

[0013] Step 6. After the drawing is completed, the layout and configuration information of this drawing will be saved on the server side for easy use next time.

[0014] Preferably, DIV is a type of html in a web page.

[0015] Preferably, CSS is a language for controlling the appearance and style of containers in web pages.

[0016] Preferably, the temporarily loaded graphic file includes a SHP file or a CAD file.

[0017] Preferably, the WebGIS-based visual thematic mapping method does not rely on a mapping interface on a GIS server side, but is completely implemented on a browser side.

[0018] Preferably, the WebGIS-based visual thematic mapping method is not restricted by the GIS server-side mapping template, and is not limited to the modules mentioned in the above text. It forms personalized modules through customized development to improve the diversity of mapping.

[0019] Compared with the prior art, the present invention has the following beneficial effects:

[0020] 1. This method does not rely on the mapping interface of the GIS server side, but is completely implemented on the browser side, which improves the efficiency of mapping;

[0021] 2. The mapping content of this method is not limited by the mapping template on the GIS server side, and is not limited to the modules mentioned in the above text. It can form personalized modules through customized development, which improves the diversity of mapping;

[0022] 3. This method can perform layout by dragging and dropping, and can save layout data, which improves the reusability of drawing operations. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Other features, objects and advantages of the present application will become more apparent by reading the detailed description of non-limiting embodiments made with reference to the following drawings:

[0024] Figure 1 This is a demonstration effect diagram of a WebGIS-based visualized thematic mapping method of the present invention. DETAILED DESCRIPTION

[0025] The present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It is understood that the specific embodiments described herein are only used to explain the relevant invention, rather than to limit the invention. It should also be noted that, for ease of description, only the parts related to the invention are shown in the accompanying drawings. The different types of section lines in the drawings in the embodiments of the present invention are not marked according to the national standard, nor are there any requirements for the materials of the components, but are used to distinguish the cross-sectional views of the components in the drawings.

[0026] See also Figure 1 A method for visualizing thematic mapping based on WebGIS is provided, and the method for visualizing thematic mapping based on WebGIS comprises the following steps:

[0027] Step 1: The content of the web page is composed of HTML and CSS, and the canvas of HTML is used to draw any graphics in the canvas through the program, and the graphics after drawing are generated into pictures;

[0028] Step 2: Place a DIV on the page as a container for drawing, and use CSS to set the container's positioning method to relative positioning to ensure that the modules inside the container are always in the correct position.

[0029] Step 3. Place a map module in the container and set the position and size. If you do not need a title, set the size to 100%. Otherwise, modify the size according to the situation and reserve space for text information. The map layer can be loaded through the configuration file. There is no restriction on the specific loading method. As long as the layer is loaded normally, it can be mapped.

[0030] Step 4. Add other modules to the container, such as title, legend, scale, and compass, and then set the position of each module and the relevant parameters of the module. As needed, manually draw graphics and text annotations on the map, or temporarily load graphic files.

[0031] Step 5. After setting the layout and parameters of the module, the core process of the mapping method will be executed. A blank canvas will be created in the page, and then the HTML target to be drawn will be specified. The program will analyze the HTML structure and CSS style of the target, and draw the container, map and each module on the canvas in turn according to the position and style in the page, and finally generate the picture;

[0032] Step 6. After the drawing is completed, the layout and configuration information of this drawing will be saved on the server side for easy use next time.

[0033] Among them, DIV is a kind of html in the web page.

[0034] Among them, CSS is a language for controlling the appearance and style of containers in web pages.

[0035] The temporarily loaded graphic files include SHP files or CAD files.

[0036] Among them, the WebGIS-based visual thematic mapping method does not rely on the mapping interface of the GIS server side and is completely implemented on the browser side.

[0037] Among them, the WebGIS-based visual thematic mapping method is not restricted by the GIS server-side mapping template, and is not limited to the modules mentioned in the above text. It forms personalized modules through customized development to improve the diversity of mapping.

[0038] It should be noted that the WebGIS-based visualization thematic mapping method (hereinafter referred to as the method) is widely used in a wide range of industries and scenarios, including urban planning, land management, real estate management and other industries, as well as other scenarios using WebGIS technology. The implementation principle and technical solution of the visualization mapping method are introduced in detail here.

[0039] 1. The content of a web page is composed of HTML and CSS. The former can be understood as the "skeleton" of the page, and the latter can be understood as the "skin" of the page. The skeleton determines the structure of the page, while the skin determines the appearance of the page. Among the many HTML, there is one called canvas. Through the program, you can draw any graphics on the canvas, and you can generate pictures from the drawn graphics. The above concepts are the basis of the method.

[0040] 2. Place a DIV (a type of HTML in a web page) in the page as a container for drawing (hereinafter referred to as the container), and set the positioning mode of the container to "relative positioning" through CSS (a language that controls the appearance and style of containers in web pages). This ensures that the modules inside the container are always in the correct position. For example, if the position of module A is set to left:10px, top:10px, then no matter how the size of the container changes, module A is always 10px away from the upper left corner of the container.

[0041] 3. Place a map module (hereinafter referred to as map) in the container and set the position and size. If you do not need a title, you can set the size to 100%. Otherwise, modify the size according to the situation and reserve space for text information. The map layer can be loaded through the configuration file. There is no restriction on the specific loading method. As long as the layer is loaded normally, you can make a map.

[0042] 4. Add other modules to the container, such as title, legend, scale, compass, etc., and then set the position of each module and the relevant parameters of the module. You can manually draw graphics and text annotations on the map as needed, or temporarily load graphic files (such as SHP files, CAD files). The effect after setting is as follows: Figure 1 As shown;

[0043] 5. After setting the layout and parameters of the module, the core process of the mapping method will be executed. The method uses a technology called "html to canvas". Its principle is to create a blank canvas in the page, and then specify the HTML target to be drawn (here is the container created in step 2). The program analyzes the HTML structure and CSS style of the target, and draws the container, map and each module on the canvas in turn according to the position and style in the page, and finally generates the picture, thus completing the entire mapping process. The following figure is the picture of the completed mapping.

[0044] 6. After the drawing is completed, the layout and configuration information of this drawing can be saved on the server side for easy use next time.

[0045] The contents not described in detail in this specification belong to the prior art known to professionals in this field.

[0046] The above description is only a preferred embodiment of the present application and an explanation of the technical principles used. Those skilled in the art should understand that the scope of the invention involved in the present application is not limited to the technical solution formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the inventive concept. For example, the above features are replaced with (but not limited to) technical features with similar functions disclosed in the present application.

Claims

1. A visual thematic mapping method based on WebGIS, characterized by: The WebGIS-based visualization thematic mapping method includes the following steps: Step 1: The content of the web page is composed of HTML and CSS, and the canvas of HTML is used to draw any graphics in the canvas through the program, and the graphics after drawing are generated into pictures; Step 2: Place a DIV on the page as a container for drawing, and use CSS to set the container's positioning method to relative positioning to ensure that the modules inside the container are always in the correct position. Step 3. Place a map module in the container and set the position and size. If you do not need a title, set the size to 100%. Otherwise, modify the size according to the situation and reserve space for text information. The map layer can be loaded through the configuration file. There is no restriction on the specific loading method. As long as the layer is loaded normally, it can be mapped. Step 4. Add other modules to the container, such as title, legend, scale, and compass, and then set the position of each module and the relevant parameters of the module. As needed, manually draw graphics and text annotations on the map, or temporarily load graphic files. Step 5. After setting the layout and parameters of the module, the core process of the mapping method will be executed. A blank canvas will be created in the page, and then the HTML target to be drawn will be specified. The program will analyze the HTML structure and CSS style of the target, and draw the container, map and each module on the canvas in turn according to the position and style in the page, and finally generate the picture; Step 6. After the drawing is completed, the layout and configuration information of this drawing will be saved on the server side for easy use next time.

2. A WebGIS-based visual thematic mapping method according to claim 1, characterized in that: DIV is a type of HTML in web pages.

3. A WebGIS-based visual thematic mapping method according to claim 1, characterized in that: CSS is a language that controls the appearance and style of containers in web pages.

4. A WebGIS-based visual thematic mapping method according to claim 1, characterized in that: Temporarily loaded graphic files include SHP files or CAD files.

5. A WebGIS-based visual thematic mapping method according to claim 1, characterized in that: This WebGIS-based visualization thematic mapping method does not rely on the mapping interface of the GIS server and is completely implemented on the browser side.

6. A WebGIS-based visual thematic mapping method according to claim 1, characterized in that: The WebGIS-based visual thematic mapping method is not restricted by the GIS server-side mapping template, and is not limited to the modules mentioned in the above text. It forms personalized modules through customized development to improve the diversity of mapping.

Images