CN115062176A

CN115062176A - Method and system for self-defining map rendering

Info

Publication number: CN115062176A
Application number: CN202210635082.1A
Authority: CN
Inventors: 王梅先; 李佳蓉
Original assignee: Shandong Langchao Intelligent Medical Technology Co ltd
Current assignee: Shandong Langchao Intelligent Medical Technology Co ltd
Priority date: 2022-06-07
Filing date: 2022-06-07
Publication date: 2022-09-16

Abstract

The invention discloses a method and a system for self-defining map rendering, and relates to the technical field of image processing; drawing a custom map according to requirements, exporting the custom map into an SVG format file, processing the SVG format file into a DOM element which can be controlled by a program, assembling an array in the SVG format file through a JS tool, controlling the time of changing the style of the element by using a setTimeout method, forming rendering animation, positioning the origin of coordinates of the SVG format file and longitude and latitude coordinates corresponding to four corners of the custom map, converting the coordinate system of the custom map by using the existing map coordinate system, and displaying the rendering effect according to the corresponding coordinates in the data of the custom map.

Description

Method and system for self-defining map rendering

Technical Field

The invention discloses a method and a system, relates to the technical field of image processing, and particularly relates to a method and a system for self-defining map rendering.

Background

The map is a traditional mode for data visualization in spatial dimension, and data display by combining the map is usually realized by combining visualization components such as an open source map and ECharts at present, so that most effect display requirements can be basically met.

However, as the visualization technology is widely applied, the traditional map display mode is limited by multiple factors, and firstly, due to the requirement of safety, a part of enterprises and organizations forbid connecting the internet in the office network environment; secondly, the requirement is not only limited in the aspect of data display, and the integral personalized effect and interaction also become more important requirement points; in addition, when the open source map is used, the logo of the base map cannot be blocked and deleted due to copyright problems, and the overall impression is influenced to a certain extent.

Disclosure of Invention

Aiming at the problems in the prior art, the invention provides a method and a system for self-defining map rendering, which realize self-defining map rendering based on SVG combined with a self-established coordinate system and realize better interaction effect.

The specific scheme provided by the invention is as follows:

the invention provides a method for rendering a custom map, which draws the custom map according to requirements, exports the custom map into an SVG format file, processes the SVG format file into a DOM element which can be controlled by a program, assembles an array in the SVG format file by a JS tool, controls the time of changing the style of the element by using a setTimeout method to form rendering animation,

positioning the coordinate origin of the SVG format file and longitude and latitude coordinates corresponding to four corners of the customized map, converting the coordinate system of the customized map by utilizing the existing map coordinate system,

and displaying a rendering effect according to the corresponding coordinates in the data of the user-defined map.

Further, in the method for rendering a customized map, the drawing the customized map according to the requirement and exporting the customized map as an SVG format file includes:

and drawing a self-defined map according to requirements by using Photoshop, Illustrator or sketch, and exporting the map into an SVG format file.

Further, in the method for rendering a customized map, the converting the coordinate system of the customized map by using the existing map coordinate system includes:

and positioning the origin of the positioning coordinate at the upper left corner of the SVG format file, zooming to the same scale of the corresponding area of the existing map coordinate system, selecting longitude and latitude coordinates corresponding to the four corners of the map in the SVG format file, adjusting the width and height of the SVG format file to be coincident with the existing map coordinate system, subtracting the origin of the coordinate of the SVG format file from the existing map coordinate system to obtain a relative position, and then realizing the synchronization of the SVG format file and the existing map coordinate system by utilizing the zooming scale.

Furthermore, in the method for self-defining map rendering, the width of a map frame in the SVG format file is controlled by adding a touchend event and combining a CSS variable according to a scale value.

The invention also discloses a system for self-defining map rendering, which comprises a rendering module, a coordinate calculation module and a display module,

the rendering module draws a custom map according to requirements, exports the custom map into an SVG format file, processes the SVG format file into a DOM element which can be controlled by a program, assembles an array in the SVG format file through a JS tool, controls the time of changing the style of the element by using a setTimeout method to form rendering animation,

the coordinate calculation module positions the coordinate origin of the SVG format file and longitude and latitude coordinates corresponding to four corners of the customized map, converts the coordinate system of the customized map by utilizing the existing map coordinate system,

and the display module displays the rendering effect according to the corresponding coordinates in the data of the user-defined map.

Further, in the system for rendering the customized map, the rendering module draws the customized map according to the requirement and exports the customized map to the SVG format file, which comprises:

and (4) drawing a custom map according to requirements by using Photoshop, Illustrator or sketch, and exporting the custom map as an SVG format file.

Further, in the system for rendering a customized map, the coordinate calculation module converts the coordinate system of the customized map by using the existing map coordinate system, and the method includes:

Further, in the system for self-defining map rendering, the rendering module controls the width of a map frame in the SVG format file by adding a touchend event and combining a CSS variable according to a scale value.

The invention has the advantages that:

the invention provides a method for customizing map rendering, which solves the problem that the effect of a customized demand is difficult to realize. Under the condition of personalized requirements, the realization of styles and animations is sometimes difficult to meet by relying on a traditional library only by means of codes, or the realization cost is too high, the method provided by the invention realizes the requirements by drawing static SVG format pictures and combining with JS interaction, the cost is lower, and the display effect is more flexible.

Meanwhile, the method solves the problem of jamming of animation rendering, files in formats such as GIF (graphics interchange Format) and PNG (public network group) are loaded on the server, the server has certain requirements, white stripes are easy to appear in the process of matching with the animation rendering, and the problem of jamming of the animation rendered by the SVG file by utilizing the coordinate point display and hiding basically cannot occur.

The method can avoid the disadvantage that ECharts is zoomed on a touch screen, the ECharts map is zoomed by controlling the zoom of the map by identifying a mouse wheel, the zoom on the touch screen has no effect, when the requirement is similar to the situation of zooming by two fingers on a mobile phone like operating the map, the ECharts map is realized by force by a ready-made library, but the problem of distortion of the layer after the zoom exists, and the ECharts source code is referred to find that the logic for zooming by the mouse wheel is in a ZRenderr which depends on the logic, so that the debugging of one layer of the ECharts map is too complicated, and the coordinate system simulated by matching an SVG file in the method can easily realize the effect of zooming by two fingers. In addition, the method solves the problem of fuzzy distortion after map amplification, and the realization of the effect of double-finger zooming by using the existing library faces a problem: the ECharts map is blurred after being enlarged, and because the ECharts bottom layer is drawn by Canvas and is not a vector diagram, forced enlargement is distorted. In the method, the SVG file is a vector diagram, and the condition of low pixel can not occur even if the SVG file is arbitrarily amplified.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

FIG. 1 is a schematic flow diagram of the process of the present invention.

Detailed Description

The present invention is further described below in conjunction with the following figures and specific examples so that those skilled in the art may better understand the present invention and practice it, but the examples are not intended to limit the present invention.

positioning the coordinate origin of the SVG format file and longitude and latitude coordinates corresponding to four corners of the custom map, converting the coordinate system of the custom map by utilizing the existing map coordinate system,

The method can avoid the condition that an ECharts library is limited by the internet and a mobile terminal when being combined with a Baidu map or GeoJson for rendering, and realizes the self-defined map rendering based on the combination of an SVG and a self-built coordinate system.

In specific application, in some embodiments of the method, a map style is designed according to customer requirements and is derived into SVG, JS codes are used for controlling dynamic rendering of animation, and coordinate points pointed by data are displayed according to a world map center simulation coordinate system.

Wherein, the map style is designed according to the requirement and exported into an SVG format file, the self-defined map can be drawn according to the requirement of a customer by using tools such as Photoshop, Illustrator, sketch and the like, and exported into the SVG format file for the follow-up JS code dynamic control rendering animation,

and dynamically controlling rendering animation by using the JS tool, interacting with the SVG through the JS program, realizing the effect of rendering animation, setting the height and the width of the file in the SVG format, adding a selector, processing the file into DOM elements which can be controlled by a program, controlling the rendering mode of pictures by using the JS code, and adopting a dynamic edge-tracing animation mode. Assembling ref and class in the SVG format file into an array in a traversing way, controlling the time of changing the style of the element by using a setTimeout method to form rendering animation,

and selecting a Baidu map coordinate to perform coordinate conversion processing on the custom map according to the world map center simulation coordinate system. And opening the Baidu map, floating the SVG format file above the map, and adjusting the width and height of the SVG format file to enable the SVG format file to be overlapped with the map. The method comprises the steps of positioning the origin of coordinates at the upper left corner of an SVG file, picking up coordinates at the origin of coordinates of the SVG file, zooming to the same size as a corresponding area of a Baidu map, taking longitude and latitude coordinates corresponding to four corners of a defined map, subtracting the origin of coordinates of a self-defined map from coordinates of x-axis and y-axis coordinates of coordinate points of the Baidu map returned by a background, and multiplying the original of coordinates of the self-defined map by a zoom scale to obtain relative coordinate points, wherein the algorithm can be, for example: [ (x-109.81) × 624, (37.1356-y) × 536.22 ].

And marking corresponding coordinates in the data on the map by combining the data transmitted from the background, and processing the display effect as required.

Furthermore, in the method for self-defining map rendering, the width of a map frame in the SVG format file is controlled by adding a touchd event and combining a CSS variable according to a scale value. The SVG is a vector layer, and cannot be distorted after being enlarged and reduced, but the map boundary is also thickened after being enlarged again. The problem that the map frame is enlarged and thickened along with the map can be solved.

The information interaction, execution process and other contents between the modules in the system are based on the same concept as the method embodiment of the present invention, and specific contents can be referred to the description in the method embodiment of the present invention, and are not described herein again.

Similarly, the system of the invention solves the problem that the effect of the custom requirement is difficult to realize. Under the condition of personalized requirements, the realization of styles and animations is sometimes difficult to meet by relying on a traditional library and relying on codes alone, or the realization cost is too high, the system draws static SVG format pictures and combines JS interaction to realize the requirements, the cost is low, and the display effect is more flexible.

Meanwhile, the system of the invention solves the problem of jamming of animation rendering, files in formats such as GIF and PNG are loaded on the server, so that certain requirements are imposed on the server, white stripes are easy to appear in the process of matching with the animation rendering, and the problem of jamming of the animation rendered by using the SVG file by utilizing the coordinate point display and hiding basically cannot occur.

The system can avoid the disadvantage that ECharts zoom on a touch screen, an ECharts map controls the zoom of the map by identifying a mouse wheel, the zoom on the touch screen has no effect, when the requirement is similar to the situation of zooming by two fingers on a mobile phone like operating the map, the ECharts map is realized by force by an existing library, but the problem of distortion of the layer after the zoom exists, and the ECharts source code is referred to find that the logic of zooming by the mouse wheel is in a ZRenderr which the mouse wheel depends on, so that the debugging of the ECharts map layer by layer is too complicated, and the coordinate system simulated by matching an SVG file in the system can easily realize the effect of zooming by two fingers. In addition, the system of the invention solves the problem of fuzzy distortion after map enlargement, and the realization of the effect of double-finger zooming by using the existing library faces a problem: the ECharts map is blurred after being enlarged, and because the ECharts bottom layer is drawn by Canvas and is not a vector diagram, forced enlargement is distorted. The SVG file in the system is a vector diagram, and the condition of low pixel can not occur even if the SVG file is arbitrarily amplified.

It should be noted that not all steps and modules in the above flows and system structures are necessary, and some steps or modules may be omitted according to actual needs. The execution sequence of the steps is not fixed and can be adjusted according to the needs. The system structure described in the above embodiments may be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by a plurality of physical entities, or some components in a plurality of independent devices may be implemented together.

The above-mentioned embodiments are merely preferred embodiments for fully illustrating the present invention, and the scope of the present invention is not limited thereto. The equivalent substitutions or changes made by the person skilled in the art on the basis of the present invention are all within the protection scope of the present invention. The protection scope of the invention is subject to the claims.

Claims

1. A method for rendering a customized map is characterized in that the customized map is drawn according to requirements and exported to be an SVG format file, the SVG format file is processed to be a DOM element which can be controlled by a program, an array in the SVG format file is assembled by a JS tool, the time of changing the style of the element is controlled by a setTimeout method to form rendering animation,

2. The method for customized map rendering of claim 1, wherein said drawing a customized map according to the requirement and exporting the customized map as an SVG format file comprises:

3. The method for customized map rendering according to claim 1 or 2, wherein the scaling the coordinate system of the customized map by using the existing map coordinate system comprises:

4. The method for customized map rendering of claim 1, wherein the width of the map border in the SVG format file is controlled according to the value of scale in combination with CSS variables by adding touch events.

5. A system for self-defining map rendering is characterized by comprising a rendering module, a coordinate calculation module and a display module,

6. The system for customized map rendering of claim 5, wherein said rendering module draws customized maps on demand and exports said customized maps into SVG format files, comprising:

7. The system of claim 5 or 6, wherein the coordinate calculation module uses an existing map coordinate system to scale the coordinate system of the custom map, comprising:

8. The system of claim 5, wherein the rendering module controls the width of the map border in the SVG format file according to the value of scale in combination with CSS variables by adding a touch event.