CN111063010A

CN111063010A - Map motion track animation realization method and device, electronic equipment and storage medium

Info

Publication number: CN111063010A
Application number: CN201911279596.2A
Authority: CN
Inventors: 魏振宇
Original assignee: Beijing Mininglamp Software System Co ltd
Current assignee: Beijing Mininglamp Software System Co ltd
Priority date: 2019-12-12
Filing date: 2019-12-12
Publication date: 2020-04-24

Abstract

The application provides a map motion track animation realization method, a map motion track animation realization device, electronic equipment and a storage medium, and relates to the technical field of navigation, wherein the method comprises the following steps: acquiring a map example and a motion path, wherein the motion path is a planned path generated in the map example based on a plurality of preset coordinate points; and calling an SVG operation application program interface, and generating a moving animation of the moving path in the map example based on the moving path, wherein the moving animation is a dynamic image sequentially connecting a plurality of preset coordinate points through extension and bending of lines. According to the method and the device, the plurality of preset points can be sequentially connected and changed according to the sequence and displayed through the animation, so that the movement path is more visual and clear when the path planning is carried out on the map, and a user can conveniently carry out the path planning.

Description

Map motion track animation realization method and device, electronic equipment and storage medium

Technical Field

The application relates to the technical field of navigation, in particular to a map motion trajectory animation implementation method and device, electronic equipment and a storage medium.

Background

Maps are widely used in various field systems, so that operations on maps are more and more commonly used, such as marking points on the maps, delineating areas on the maps, defining a certain position on the maps, planning a path on the maps, and the like. The method has the advantages that a static diagram from a starting point to an end point is obtained when a path is planned at present, the specific advancing process is not clear, namely, the advancing sequence of each coordinate point is not clear, and the motion trail is not visual and clear enough, and the prior art does not relate to the animation implementation of the motion trail.

Disclosure of Invention

The embodiment of the application aims to provide a map movement track animation realization method, a map movement track animation realization device, electronic equipment and a storage medium, so as to solve the problems that in the existing method, the sequence of the advance of each coordinate point of a map movement track is not clear, and the route planning is not visual and clear enough.

The embodiment of the application provides a map motion track animation implementation method, which comprises the following steps: the method comprises the steps of obtaining a map example and a motion path, wherein the motion path is a planned path generated in the map example based on a plurality of preset coordinate points; and calling an SVG operation application program interface, and generating a traveling animation of the motion path in the map example based on the motion path, wherein the traveling animation is a dynamic image sequentially connecting the preset coordinate points through extension and bending of lines.

In the implementation process, the preset coordinate points are sequentially connected through lines in sequence, the connection process is subjected to animation display, the sequence of the preset points in the motion path can be clearly displayed, so that a user can visually and clearly obtain the sequence of reaching the preset points in the motion path, and path planning is facilitated for the user.

Optionally, before the obtaining the map instance and the motion path, the method includes: creating a browser page file; and adding a container for placing the map instance in the browser page file.

In the implementation process, the browser page file is created to facilitate storage of the container and the map instance, so that map operation and browsing are performed by a user through the browser, and convenience is improved.

Optionally, the obtaining the map instance and the motion path includes: introducing the map instance into the browser page file; setting a plurality of longitude and latitude coordinate points in the map example; taking a broken line generated based on the plurality of longitude and latitude coordinate points as the motion path; adding the motion path to the container.

In the implementation process, the motion path is added into the container, so that the motion path added into the container can be called conveniently when path animation display is carried out.

Optionally, the invoking SVG manipulation application program interface generating a travel animation of the motion path in the map instance based on the motion path includes: setting a central coordinate in the map example, and establishing a map coordinate system based on the central coordinate; based on the map coordinate system, converting the coordinates of the longitude and latitude coordinate points into map coordinates in the map coordinate system to obtain a plurality of corresponding map coordinates; setting the style of each longitude and latitude coordinate point; passing a plurality of map coordinates into a method function in the application program interface to generate the travel animation.

In the implementation process, the coordinates of the longitude and latitude coordinate points are converted into map coordinates, so that a movement path taking the map coordinates as a reference is conveniently displayed in the map example, the style of the coordinate points is highlighted, and the cartoon is more visual.

Optionally, the passing a plurality of map coordinates into a method function in the application program interface to generate the travel animation comprises: setting an execution time of the travel animation; and generating the animation of the motion path by utilizing the method function based on the longitude and latitude coordinate points, the style of the longitude and latitude coordinate points and the execution time.

In the implementation process, the animation of the motion path can be set according to actual needs, so that the flexibility of animation display of the motion path can be improved.

Optionally, after invoking an SVG manipulation application program interface to generate a travel animation of the motion path in the map instance based on the motion path, the method comprises: deleting or retaining the motion trail.

In the implementation process, the generated motion trail can be reserved or deleted according to the actual needs of the user, so that the user can conveniently select to reserve or delete the generated path when planning the path.

The embodiment of the present application further provides a map motion trajectory animation implementation apparatus, where the apparatus includes: the map generation device comprises an acquisition module, a processing module and a display module, wherein the acquisition module is used for acquiring a map example and a motion path, and the motion path is a planned path generated in the map example based on a plurality of preset coordinate points; and the calling module is used for calling an SVG operation application program interface, generating a traveling animation of the motion path in the map example based on the motion path, wherein the traveling animation is a dynamic image sequentially connecting the preset coordinate points through extension and bending of lines.

Optionally, the apparatus further comprises: the creating module is used for creating a browser page file; and adding a container for placing the map instance in the browser page file.

In the implementation process, the browser page file is created to facilitate storage of the container and the map instance.

Optionally, the obtaining module is specifically configured to introduce the map instance into the browser page file; setting a plurality of longitude and latitude coordinate points in the map example; taking a broken line generated based on the plurality of longitude and latitude coordinate points as the motion path; adding the motion path to the container.

In the implementation process, the motion path is added into the container, so that the motion path added with silence in the container can be called when path animation display is carried out.

Optionally, the calling module is specifically configured to set a center coordinate in the map instance, and establish a map coordinate system based on the center coordinate; converting the coordinates of the longitude and latitude coordinate points into map coordinates in the map coordinate system based on the map coordinate system to obtain a plurality of corresponding map coordinates; setting the style of each longitude and latitude coordinate point; passing a plurality of map coordinates into a method function in the application program interface, resulting in the travel animation.

In the implementation process, the coordinates of the latitude and longitude coordinate points are converted into map coordinates, so that the movement path is conveniently displayed in the map example, and an application program interface is conveniently called to obtain the animation of the movement path.

Optionally, the invoking module is further specifically configured to set an execution time of the travel animation; and generating the animation of the motion path by utilizing the method function based on the longitude and latitude coordinate points, the style of the longitude and latitude coordinate points and the execution time.

Optionally, the apparatus further comprises: and the processing module is used for deleting or reserving the motion trail.

In the implementation process, the generated motion trajectory can be reserved or deleted according to the actual needs of the user, so that the user can conveniently select to reserve or delete the generated path when planning the path.

The present embodiment also provides an electronic device, where the electronic device includes a memory and a processor, where the memory stores program instructions, and the processor executes the program instructions to perform the steps in any one of the above methods.

The present embodiment also provides a storage medium, in which computer program instructions are stored, and when the computer program instructions are executed by a processor, the steps in any one of the above methods are executed.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and that those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

Fig. 1 is a flowchart of a method for implementing a map motion trajectory animation according to an embodiment of the present application.

Fig. 2 is a flowchart of another map motion trajectory animation implementation method according to an embodiment of the present application.

Fig. 3 is a flowchart for acquiring a map example and a movement path according to an embodiment of the present disclosure.

Fig. 4 is a flowchart for invoking an SVG manipulation application program interface and generating a travel animation of the motion path in the map instance based on the motion path according to an embodiment of the present application.

Fig. 5 is a flowchart of a method function for transferring a set of all break point coordinates into the application program interface to obtain the travel animation according to an embodiment of the present application.

Fig. 6 is a schematic diagram of a device for implementing animation of a map motion trajectory according to an embodiment of the present application.

Icon: 60-a map motion track animation realization device; 601-an obtaining module; 602-calling a module; 603-a creation module; 604-processing module.

Detailed Description

The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.

In the description of the present application, it is noted that the terms "first", "second", and the like are used merely for distinguishing between descriptions and are not intended to indicate or imply relative importance.

Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by the practice of the embodiments of the application. The objectives and other advantages of the application may be realized and attained by the structure particularly pointed out in the written description and drawings.

An embodiment of the present application provides a method for positioning an initial position of a rotor of a motor, please refer to fig. 1, where fig. 1 is a flowchart of a method for implementing a map motion trajectory animation provided in an embodiment of the present application, the method includes the following steps:

step S1: the method comprises the steps of obtaining a map example and a motion path, wherein the motion path is a planned path generated in the map example based on a plurality of preset coordinate points.

The map example in step S1 may be understood as a whole or local map of a certain area, for example, a map of a hai lake area in beijing may be used as one map example, and several points of the map example are arbitrarily selected as preset coordinate points in the obtained map example.

Step S2: and calling an SVG operation application program interface, and generating a moving animation of the moving path in the map example based on the moving path, wherein the moving animation is a dynamic image sequentially connecting a plurality of preset coordinate points through extension and bending of lines.

Alternatively, in step S2, the application program interface may be snap, SVG (Scalable vector graphics), which is an XML (extensible markup Language) based markup Language for describing two-dimensional vector graphics. In essence, SVG is a Web technology solution that can be used to create interactive, well-looking, resolution-independent vector graphics on any size screen, as is HTML (HyperText Markup Language) versus text. Because SVG is an XML file, two models for XML programming, DOM (Document Object Model) and SAX (Simple API for XML, an alternative method for XML parsing, which is both an interface and a software package), are also applicable to it. Because SVG is designed for the internet, accessing it through Javascript and DOM is the most important application mode. HTML can be dynamically modified through Javascript and DOM, as well as pictures can be dynamically created, modified, and deleted in the browser. Because the SVG is based on XML, unprecedented powerful dynamic interactive images can be manufactured. I.e., SVG images, can respond differently to user actions, such as highlighting, sound effects, special effects, animations, etc.

Compared to other image formats (such as JPEG and GIF), the advantage of using SVG is:

SVG images can be created and modified by a text editor, can be searched, indexed, scripted or compressed, are scalable, can be printed at any resolution with high quality, and can be enlarged without degradation of image quality.

SVG is an SVG animation content manipulation API specially created for modern browsers, and supports functions of clipping, masking, texturing, gradient, grouping and the like. SVG can implement SVG functionality by virtue of a rich animation library and easy event handling.

The method has the advantages that the preset coordinate points are sequentially connected through the lines in sequence, animation display is carried out in the connection process, the sequence of the preset points in the motion path can be clearly displayed, so that a user can visually and clearly obtain the sequence of reaching the preset points in the motion path, and path planning is facilitated for the user.

Referring to fig. 2, fig. 2 is a flowchart of another map motion trajectory animation implementation method provided in an embodiment of the present application. Before obtaining the map instance and the motion path, the method comprises the following steps:

step S3: a browser page file is created.

Step S4: and adding a container for placing the map instance in the browser page file.

It will be appreciated that creating a browser page file facilitates storing the container and map instance. The container for placing the map instance can be an SVG container for accommodating single or multiple SVG objects to present SVG rendering, erasing, morphing and other animation effects. SVG only appears as static vector graphics if it does not rely on SVG containers. The basic usage is that objects are selected first, blank object areas are boxed, and then single or multiple SVG objects are added into a container.

By modifying the basic attributes such as the size, the position, the rotation center, the rotation angle and the like of the attribute window of the SVG object, the dynamic change of the corresponding attributes can be realized. In addition, the 3D overturning effect can be realized through X-axis rotation and Y-axis rotation. By adjusting a CSS (Cascading Style Sheets) dynamic filter, dynamic changes of object blurriness and shadow effect attributes can be realized.

Through the SVG container object, the drawing and erasing effects of a single SVG graph and the deformation effects of a plurality of SVG objects can be realized. All objects in the default SVG container participate in morphing animations. The animation effect can be defined by setting the deformation duration, the deformation effect and the animation type of each SVG object.

To realize the graphic drawing effect, a certain SVG object in the SVG container objects needs to be selected, a 'drawing appearance' attribute is opened in an attribute column, and the effect of drawing the appearance animation is defined by defining the starting point, the end point, the drawing direction, the drawing time length and the animation type of the drawing and whether the time delay exists. Similarly, an erase disappearance animation effect may be defined.

For example, as an embodiment, the code for implementing step S3 and step S4 may be as follows:

<！DOCTYPE html>

<html>

<head>

body,html,#allmap{width:100％；height:100％；overflow:hidden；margin:0；

font-family: "Microsoft elegant Black"; }

</style>

src＝"http://api.map.baidu.com/api？v＝2.0&ak＝dcqtCFS46bTtSDPBGvlnlTbG"></script>

<scriptsrc＝"snap.svg.js"></script>

< title > adding a plurality of marking points </title > < title >

</head>

<body>

</body>

</html>

Referring to fig. 3, fig. 3 is a flowchart for obtaining a map example and a motion path according to an embodiment of the present application. Alternatively, step S1 may be divided into the following sub-steps:

step S11: and introducing a map example into the browser page file.

Step S12: a plurality of latitude and longitude coordinate points are set in the map example.

Step S13: and taking a broken line generated based on the plurality of longitude and latitude coordinate points as a motion path.

Step S14: adding a motion path to the container.

It can be understood that the real and effective longitude and latitude coordinate points are selected during the actual path planning. The user can obtain the longitude and latitude coordinates of any point in the obtained map example through the search engine. As an embodiment, in the map example, 5 points are randomly selected to obtain longitude and latitude coordinates of the 5 points, that is, longitude and latitude coordinate points are obtained. Adding motion paths to the container facilitates invoking the motion paths already added in the container when performing a path animation.

referring to fig. 4, fig. 4 is a flowchart of invoking an SVG manipulation application program interface and generating a travel animation of the motion path in the map instance based on the motion path according to an embodiment of the present application. Optionally, step S2 may be specifically divided into the following sub-steps:

step S21: and setting central coordinates in the map example, and establishing a map coordinate system based on the central coordinates.

Step S22: and converting the coordinates of the longitude and latitude coordinate points into map coordinates in a map coordinate system based on the map coordinate system to obtain a plurality of corresponding map coordinates.

Step S23: and setting the style of each longitude and latitude coordinate point.

Step S24: passing a plurality of map coordinates into a method function in the application program interface to generate a travel animation.

It is understood that the center coordinates are set in the map example to obtain the map coordinates in the map coordinate system by using the coordinates of the longitude and latitude coordinate points as the reference of the center coordinates, and the longitude and latitude coordinate points can find the corresponding positions in the map coordinate system.

Optionally, the pattern for setting the longitude and latitude coordinate points may be the color of the longitude and latitude coordinate points and the shape of the longitude and latitude coordinate points, and as an embodiment, the shape of the longitude and latitude coordinate points may be designed to be a hollow origin. The design of these patterns can be set according to personal preference and actual conditions.

For example, as an embodiment, the code for implementing step S21, step S22, step S23, and step S24 may be as follows:

referring to fig. 5, fig. 5 is a flowchart of a method function for passing a set of all break point coordinates into the application program interface to obtain the travel animation according to the embodiment of the present application. Optionally, step S24 is specifically divided into the following sub-steps:

step S24.1: the execution time of the travel animation is set.

Step S24.2: and generating the animation of the motion path by using the method function based on the longitude and latitude coordinate points, the style of the longitude and latitude coordinate points and the execution time.

It can be understood that the execution time of the moving animation can be set according to actual needs, and the animation of the moving path can be set according to actual needs, so that the flexibility of animation display of the moving path can be improved.

For example, as an embodiment, the method function may be an animation function in the application program interface snap.

Optionally, after invoking the SVG manipulation application program interface and generating a travel animation of the motion path in the map instance based on the motion path, the map motion trajectory animation implementation method further includes:

step S5: deleting or retaining the motion trail. Alternatively, the code implementing step S24.1, step S24.2, step S5 may be as follows:

it is to be understood that it may be convenient for the user to retain the generated motion trajectories or delete the generated motion trajectories as desired.

Referring to fig. 6, fig. 6 is a schematic diagram of a map motion trajectory animation implementation apparatus according to an embodiment of the present application.

In order to better implement the map movement track animation implementation method provided by the embodiment, the embodiment further provides a map movement track animation implementation device 60. The map movement trajectory animation realization device 60 includes:

the obtaining module 601 is configured to obtain a map instance and a motion path, where the motion path is a planned path generated in the map instance based on a plurality of preset coordinate points;

and the calling module 602 is used for calling the SVG operation application program interface, generating a moving animation of the moving path in the map example based on the moving path, wherein the moving animation is a dynamic image sequentially connecting a plurality of preset coordinate points through extension and bending of lines.

Optionally, the map movement path animation implementation apparatus 60 further includes a creating module 603, configured to create a browser page file; and adding a container for placing the map instance in the browser page file.

Optionally, the obtaining module 601 is specifically configured to introduce the map instance into a browser page file; setting a plurality of longitude and latitude coordinate points in a map example; taking a broken line generated based on a plurality of longitude and latitude coordinate points as a motion path; adding a motion path to the container.

Optionally, the invoking module 602 is specifically configured to set a center coordinate in the map instance, and establish a map coordinate system based on the center coordinate; converting the coordinates of the longitude and latitude coordinate points into map coordinates in a map coordinate system based on the map coordinate system to obtain a plurality of corresponding map coordinates; setting the style of each longitude and latitude coordinate point; a plurality of map coordinates are passed into a method function in an application program interface to generate a travel animation.

Optionally, the invoking module 602 is further specifically configured to set an execution time of the traveling animation; and generating the animation of the motion path by using the method function based on the longitude and latitude coordinate points, the style of the longitude and latitude coordinate points and the execution time.

Optionally, the map motion trail animation implementation device 60 further includes a processing module 604 for deleting or retaining the motion trail.

Alternatively, the electronic device may be a Personal Computer (PC), a tablet PC, a smart phone, a Personal Digital Assistant (PDA), or other electronic devices.

To sum up, the embodiment of the present application provides a method and an apparatus for implementing a map motion trajectory animation, an electronic device, and a storage medium, where the method includes: the method comprises the steps of obtaining a map example and a motion path, wherein the motion path is a planned path generated in the map example based on a plurality of preset coordinate points; and calling an SVG operation application program interface, and generating a traveling animation of the motion path in the map example based on the motion path, wherein the traveling animation is a dynamic image sequentially connecting the preset coordinate points through extension and bending of lines.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus may be implemented in other manners. The apparatus embodiments described above are merely illustrative, and for example, the block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of devices according to various embodiments of the present application. In this regard, each block in the block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams, and combinations of blocks in the block diagrams, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

In addition, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Therefore, the present embodiment further provides a readable storage medium, in which computer program instructions are stored, and when the computer program instructions are read and executed by a processor, the computer program instructions perform the steps of any of the block data storage methods. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.

The above description is only a preferred embodiment of the present application and is not intended to limit the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A map motion trajectory animation implementation method is characterized by comprising the following steps:

the method comprises the steps of obtaining a map example and a motion path, wherein the motion path is a planned path generated in the map example based on a plurality of preset coordinate points;

and calling an SVG operation application program interface, and generating a traveling animation of the motion path in the map example based on the motion path, wherein the traveling animation is a dynamic image sequentially connecting the preset coordinate points through extension and bending of lines.

2. The method of claim 1, wherein prior to said obtaining the map instance and the movement path, the method further comprises:

creating a browser page file;

and adding a container for placing the map instance in the browser page file.

3. The method of claim 2, wherein obtaining the map instance and the motion path comprises:

introducing the map instance into the browser page file;

setting a plurality of longitude and latitude coordinate points in the map example, wherein a broken line formed by the longitude and latitude coordinate points is the motion track;

adding the motion profile to the container.

4. The method of claim 3, wherein said invoking SVG manipulation application program interface, generating a travel animation of the motion path in the map instance based on the motion path, comprises:

setting a central coordinate in the map example, and establishing a map coordinate system based on the central coordinate;

converting the coordinates of the longitude and latitude coordinate points into map coordinates in the map coordinate system based on the map coordinate system to obtain a plurality of corresponding map coordinates;

setting the style of each longitude and latitude coordinate point;

passing a plurality of map coordinates into a method function in the application program interface to generate the travel animation.

5. The method of claim 4, wherein said passing a plurality of map coordinates into a method function in the application program interface to generate the travel animation comprises:

setting an execution time of the travel animation;

and generating the animation of the motion trail by utilizing the method function based on the longitude and latitude coordinate points, the style of the longitude and latitude coordinate points and the execution time.

6. The method of claim 1, after invoking an SVG manipulation application program interface to generate a travel animation of the motion trajectory in the map instance based on the motion trajectory, the method comprising:

deleting or retaining the motion trail.

7. A map motion track animation realization device is characterized by comprising:

the map generation device comprises an acquisition module, a processing module and a display module, wherein the acquisition module is used for acquiring a map example and a motion path, and the motion path is a planned path generated in the map example based on a plurality of preset coordinate points;

and the calling module is used for calling an SVG operation application program interface, generating a traveling animation of the motion path in the map example based on the motion path, wherein the traveling animation is a dynamic image sequentially connecting the preset coordinate points through extension and bending of lines.

8. The apparatus of claim 7, further comprising:

and the animation processing module is used for deleting or reserving the motion trail.

9. An electronic device comprising a memory having stored therein program instructions and a processor that, when executed, performs the steps of the method of any of claims 1-6.

10. A storage medium having stored thereon computer program instructions for executing the steps of the method according to any one of claims 1 to 6 when executed by a processor.