Method for drawing ship icons in nautical chart based on Canvas

Abstract

The invention discloses a method for drawing a ship icon in a sea chart based on Canvas. The method comprises the following steps: collecting basic data of a ship; acquiring a ship shape according to the ship state; obtaining the color of the ship shape according to the ship type; converting the longitude and latitude coordinates of the ship position into canvas coordinates; and drawing a ship icon on the sea chart according to the canvas coordinates, the ship shape and the color of the ship shape. According to the method for drawing the ship icon in the nautical chart based on the Canvas, key information such as the type, the speed and the course of the ship is visually reflected on the icon, the visual layering sense of the nautical chart can be enhanced, the ship information can be clear at a glance, and therefore the participation degree and the satisfaction degree of users are greatly improved.

Description

Technical Field

[0001] The present invention relates to the field of shipping and ship monitoring, and in particular to a method for drawing a ship icon in a nautical chart based on Canvas. Background Art

[0002] In projects centered on shipping, using nautical charts to accurately present various types of ships is not only a basic requirement, but also a key link to improve user experience. However, existing technologies often use a single icon to depict all ships, which fails to meet the high standards of visual recognition and information communication. This not only weakens the intuitiveness of the interface, but also limits users' rapid identification of ship types. At present, most projects in the field of shipping and ship monitoring have a significant limitation - when marking ships on maps, they often use a unified icon or "sprinkle" method. This approach ignores the differences between ships, such as type, speed and heading. Key information is not intuitively reflected on the icon. Users usually need to go through additional interactive steps, such as manually clicking on icons, to obtain these specific details. This process undoubtedly increases the difficulty and time cost of information acquisition, and reduces the overall user experience and efficiency. Therefore, it has become a top priority to explore how to cleverly use color, contour design, and dynamically display real-time data such as speed and heading to vividly depict each ship. Summary of the invention

[0003] In order to solve the problem in the prior art that a single icon is used to describe ships, the differences between ships are ignored, resulting in increased difficulty and time cost in obtaining ship information, the present invention proposes a method for drawing ship icons in a nautical chart based on Canvas, which intuitively reflects key information such as ship type, speed and heading on the icon, which not only enhances the visual hierarchy of the nautical chart, but also makes the ship information clear at a glance, thereby greatly improving user participation and satisfaction.

[0004] The specific plan is as follows:

[0005] A method for drawing a ship icon in a nautical chart based on Canvas, comprising:

[0006] S1: Obtain basic ship data; the basic ship data includes ship name, maritime mobile service identification code, ship type, ship length, ship width, ship status, ship speed, ship heading, ship latitude and longitude coordinates, ship rotation direction and angle, and signal update time;

[0007] S2: Constructing the coordinates of the ship shape based on the ship status: logically processing the ship status in S1 to obtain the ship shape and the coordinates of the ship shape in the XY coordinate axis; the logical processing is to determine the ship shape and size according to the ship status, the chart zoom level, the ship length, and the ship width;

[0008] S3: Determine the ship type and classify the type based on color: Determine the type of the ship in S1 to obtain the color value of the ship;

[0009] S4: Get ship icon: fill the S2 ship shape with color to obtain a colored ship shape; the ship types include: container ship, cargo ship, hazardous chemical ship, passenger ship, law enforcement ship, official ship, engineering ship, other, unknown, signal lost;

[0010] S5: Construct the relative pixel coordinates of the ship based on the ship position: Use the latLngToContainerPoint and latLngToLayerPoint methods of leaflet to convert the longitude and latitude coordinates of the ship in S1 into the relative pixel coordinates on the nautical chart to obtain the relative pixel coordinates of the ship;

[0011] S6: Draw the S4 colored ship shapes onto the chart using Canvas and S5 ship relative pixel coordinates.

[0012] Preferably, the method for obtaining the ship shape according to logical processing is:

[0013] S21: selecting a method for drawing the ship shape according to the zoom level of the nautical chart; drawing the ship shape according to the drawing method for drawing the ship shape, and obtaining the ship shape and the coordinates of the ship shape in the XY coordinate axis;

[0014] S22: Calculate the length of the extension line of the ship according to the ship speed, and draw the extension line into the ship shape in S21 to obtain a new ship shape; the direction of the extension line represents the ship heading, and the length of the extension line represents the ship speed;

[0015] S23: According to the rotation direction and angle of the ship in S1, the new ship shape obtained in S22 is rotated to obtain the rotated ship shape and the coordinates of the rotated ship shape in the XY coordinate axis; if the rotation angle of the ship is greater than the specified value, the extension line of the ship shape is bent in the rotation direction to provide a turning prompt.

[0016] Preferably, the method of selecting the shape of the ship to be drawn according to the zoom level of the nautical chart is:

[0017] When the chart zoom level is less than or equal to a, only the number of ships in the current area is displayed;

[0018] When the chart zoom level is greater than a and less than b, the ship shape is drawn according to the ship status;

[0019] When the chart zoom level is equal to b, large ships are drawn according to their actual size; other large and small ships are drawn according to their status;

[0020] When the chart zoom ratio is greater than b, all ships are drawn in ship shape according to their actual ship sizes.

[0021] Preferably, the method for drawing the ship shape according to the ship status is: matching the ship status with the default ship shape to obtain the ship shape corresponding to the ship status and the coordinates of the ship shape in the XY coordinate axis; the default ship shape includes: ships in navigation, anchored ships, patrol boats and patrol boat SUB points, fishing boats and fishing boat lines; the ship status includes: sailing, stationary; the ship shapes of the patrol boats and fishing boats in the nautical chart are always drawn according to the default ship shape, and are not affected by the ship status and the zoom level of the nautical chart.

[0022] Preferably, drawing the ship shape according to the actual ship type is to use the ship length, ship width, and layer scaling ratio as parameters to calculate the size data of the ship in the current layer; drawing the ship shape according to the size data to obtain the ship shape and the coordinates of the ship shape in the XY coordinate axis.

[0023] Preferably, the extension line calculation rule is:

[0024] Extension line length = ship speed * time / chart scaling

[0025] The extension line length needs to be within the specified range, and the time is the specified ship travel time.

[0026] Preferably, the rotation of the ship shape is performed by calculating the coordinates of the ship shape in the XY coordinate axis through the sine and cosine theorems and the rotation angle of the ship to obtain the rotated coordinates; and the rotated ship shape is drawn through the rotated coordinates.

[0027] Preferably, the method of drawing the ship shape onto the nautical chart in S6 is:

[0028] S61: using L.canvas provided by Leaflet to create a canvas at the relative pixel coordinate position of the ship in S5; the canvas uses an XY coordinate system;

[0029] S62: Use L.polyline to draw the ship shape on the canvas created in S61 according to the coordinates of the ship shape in S2 in the XY coordinate axis;

[0030] S63: Fill the ship shape drawn in S62 with color according to the ship color in S3;

[0031] S64: Color filling is completed and the ship shape is added to the chart successfully.

[0032] Preferably, after the ship shape is successfully drawn on the nautical chart and the chart zoom ratio is greater than or equal to m, a ship information label is marked in a designated area next to the ship shape to describe the ship icon; the ship label includes the ship name; when the mouse arrow hovers over the ship shape, the water mobile service identification code, ship name, ship speed, ship heading, and signal update time are displayed; when the mouse arrow clicks on the ship shape, a pop-up box displays all basic data of the ship.

[0033] Preferably, the method of labeling the ship information is:

[0034] A1: Get the size and position of the occupied rectangular area according to the relative pixel coordinates of the S5 ship and the set label width and height;

[0035] A2: Determine whether the position of the rectangular area in A1 overlaps with the position of the rectangular area already existing on the nautical chart; if there is no position overlap, store it in the label library; if there is a position overlap, change the position of the rectangular area until there is no overlap;

[0036] A3: Draw a rectangular area to the position of the rectangular area determined by A2, and fill the rectangular area with ship information labels corresponding to the ship shape.

[0037] Beneficial effects:

[0038] The present invention proposes a method for drawing ship icons in a nautical chart based on Canvas, which solves the problem in the prior art that a single icon is used to describe the ship, ignoring the differences between ships, resulting in increased difficulty and time cost in obtaining ship information. It can not only enhance the visual hierarchy of the nautical chart, but also make the ship information clear at a glance, thereby greatly improving user participation and satisfaction.

[0039] The present invention uses a variety of colors to distinguish different types of ships. For example, cargo ships, tankers, passenger ships, fishing boats, etc. use different colors, so that users can recognize different types of ships at a glance. By using a variety of shapes to distinguish ships in different states, the change of icons (such as static and dynamic icons) can be used to indicate whether the ship is sailing, anchored or in other states, thereby increasing the amount of information and visual recognition. The shape of the ship is drawn according to the length and width of the ship. As the map is zoomed in, the ship icon is enlarged in proportion to display a more accurate ship outline, enhancing spatial perception and information accuracy. Users can intuitively feel the relative sizes of different ships, which helps to assess the distance between ships and potential collision risks.

[0040] The direction and length of the extension line reflect the dynamic information of the ship, such as heading and speed, to help users predict the future position of the ship; by scaling, the relative sizes of different ships can be directly felt, which can help users more intuitively understand the size and other parameter status of the ship. In this way, the nautical chart can not only provide location information, but also become a powerful tool for analyzing and managing maritime traffic, especially in busy ports or waterways. Such details are crucial to avoiding collisions and optimizing route planning.

[0041] By displaying key parameters such as the ship name directly next to the ship icon at high resolution, no additional clicks or queries are required. Click on the ship to view detailed information about the ship. The ship data is layered, with different zoom levels showing data of different levels of detail. Only key information is displayed at low zoom levels, while more details are shown at high zoom levels. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 The present invention is a flow chart of a method for drawing ship icons in a nautical chart based on Canvas.

[0043] Figure 2 This is a diagram of the default ship shape.

[0044] Figure 3 Schematic diagram of the ship shape corresponding to the ship status.

[0045] Figure 4 The present invention is a schematic diagram of a ship showing a method for drawing a ship icon in a nautical chart based on Canvas.

[0046] Figure 5 A schematic diagram of the shape of a ship drawn onto a nautical chart.

[0047] Figure 6 To draw a flow chart for ship information labeling.

[0048] Figure 7 This is a schematic diagram of the ship shape when the chart zoom level is high.

[0049] Figure 8 This is a schematic diagram of ship aggregation when the chart zoom level is less than or equal to 11.

[0050] Fig. 9 This is a schematic diagram of the ship shape when the chart zoom level is 12.

[0051] Fig.10 This is a schematic diagram of the ship shape when the chart zoom level is 13 and 14.

[0052] Fig.11 This is a schematic diagram of the ship shape when the chart zoom level is 15. DETAILED DESCRIPTION

[0053] A method for drawing ship icons on a nautical chart based on Canvas. The specific process is as follows: Figure 1 As shown, including:

[0054] S1: Obtain basic ship data; the basic ship data includes ship name, maritime mobile service identification code, ship type, ship length, ship width, ship status, ship speed, ship heading, ship latitude and longitude coordinates, ship rotation direction and angle, and signal update time;

[0055] S2: Constructing the coordinates of the ship shape based on the ship status: logically processing the ship status in S1 to obtain the ship shape and the coordinates of the ship shape in the XY coordinate axis; the logical processing is to determine the ship shape and size according to the ship status, the chart zoom level, the ship length, and the ship width;

[0056] S3: Determine the ship type and classify the type based on color: Determine the type of the ship in S1 to obtain the color value of the ship;

[0057] S4: Get ship icon: fill the S2 ship shape with color to obtain a colored ship shape; the ship types include: container ship, cargo ship, hazardous chemical ship, passenger ship, law enforcement ship, official ship, engineering ship, other, unknown, signal lost;

[0058] S5: Construct the relative pixel coordinates of the ship based on the ship position: Use the latLngToContainerPoint and latLngToLayerPoint methods of leaflet to convert the longitude and latitude coordinates of the ship in S1 into the relative pixel coordinates on the nautical chart to obtain the relative pixel coordinates of the ship;

[0059] S6: Draw the S4 colored ship shapes onto the chart using Canvas and S5 ship relative pixel coordinates.

[0060] The specific method is:

[0061] 1. First, draw the default ship shape. The default ship shape is as follows: Figure 2 shown.

[0062] 2. Match the ship shape according to the ship status. The ship shape corresponding to the ship status is as follows: Figure 3 As shown in the figure. For example, a ship is sailing, and the matching shape is a triangle. Figure 4 (a) shown.

[0063] 3. Match the ship color according to the ship type. The ship color values ​​corresponding to the ship type are shown in Table 2. For example, a cargo ship that is sailing is matched to green. Figure 4 (b) as shown.

[0064] Table 2 Ship color values ​​corresponding to ship types

[0065] Vessel Type Color Value container ship #ffff00 cargo ship #00ff00 Hazardous chemicals ship #ff0000 passenger ship #d6a31d Law enforcement ship #4000ff Engineering Ship #c3e41b other #55e1db unknown #2cafb2 Signal loss #96928f

[0066] 4. According to the speed of the ship, the extension line of the ship is highlighted. The effect is as follows: Figure 4 (c) is shown. The rule for calculating the extension line is: speed*time / chart scale. To prevent junk data from affecting the extension line, a maximum and minimum value are set for the extension line. Based on the speed and the above rules, the following figure can be obtained.

[0067] 5. According to the rotation direction and angle of the ship, the obtained ship shape can be rotated, and according to the sine and cosine theorems, the rotated coordinates can be re-obtained and drawn. The conversion method is as follows:

[0068] *@param center: rotation center point

[0069] *@param point: the point to be rotated

[0070] *@param angleDeg: rotation angle

[0071] const angleRad=(angleDeg*Math.PI) / 180;

[0072] const[py,px]=point;

[0073] const[cy,cx]=center;

[0074] const x2=Math.cos(angleRad)*(px-cx)-Math.sin(angleRad)*(py-cy)+cx;

[0075] const y2=Math.sin(angleRad)*(px-cx)+Math.cos(angleRad)*(py-cy)+cy;

[0076] return[x2,y2];

[0077] Through the above method, a rotated ship shape can be obtained, and the effect diagram is as follows Figure 4 (d) As shown; if it is a large angle turn, a turning prompt is given to the ship; the above result is a cargo ship that is sailing and turning right sharply, the effect diagram is as follows Figure 4 (e) as shown.

[0078] 6. Combined with the ship's position, convert the longitude and latitude information into the position of the X, Y coordinate system.

[0079] Use the latLngToContainerPoint and latLngToLayerPoint methods of Leaflet to convert geographic coordinates (latitude and longitude) into layer coordinates (relative pixel coordinates on the map). Then draw the resulting ship graphics to the location of this coordinate.

[0080] Specifically, the method of drawing on the chart is as follows: Leaflet officially supports using Canvas to draw shapes on the layer. Here, we get the relative pixel coordinates calculated by S5, use the L.canvas method provided by Leaflet to create a canvas, use the L.polyline method to draw line segments, and draw different shapes based on the S5 relative pixel coordinates and render them on the canvas. At this point, the ship is drawn on the chart, and the effect is as follows Figure 5 As shown. The benefit of using canvas for drawing is that it has superior performance. For complex graphics rendering, canvas is usually more efficient than traditional DOM operations. This is especially important for processing a large number of data points (such as the positions of multiple ships, ocean currents, etc.) because it can maintain a smooth user experience.

[0081] 7. If the chart is zoomed in to a specific layer, you can also draw the ship name next to the ship, and the effect diagram is as follows Figure 4 (f) is shown. The drawing process is as follows Figure 6 shown.

[0082] (I) According to the ship position and the width and height of the label, the occupied rectangular area and the canvas position can be obtained. The default is the 45-degree area of ​​the ship center.

[0083] The default offset positions are three places, namely upper right, lower right, and upper left.

[0084]

[0085] (II) Get the rectangular area

[0086]

[0087]

[0088] (III) Determine whether there is overlap in rectangular areas

[0089]

[0090] If it can be used, it is stored in the tag library _rectBounds

[0091] If it is not available, loop to the next position until a usable position is found

[0092] (IV) After finding the location, draw the rectangular area occupied by the label to the designated location of the ship. As shown in the following figure:

[0093] 8. If you zoom in to a larger layer, the ship will be drawn according to the ship type. The drawing method is to use the ship's length, ship width, layer scaling, etc. as parameters to calculate the size of the ship. According to the above drawing method, draw the shape and color of the ship and draw it on the canvas. Combined with the chart layer to achieve the effect of drawing a ship, the effect is as follows Figure 7 shown.

[0094] The conversion method is as follows:

[0095]

[0096]

[0097] Through the above method, a high-level ship shape can be obtained.

[0098] Specifically, the ship shapes displayed are different at different chart zoom levels. The ship shapes at each chart zoom level are as follows:

[0099] At level 11 and below, a ship aggregation diagram will be displayed, which only shows the number of ships in the area. Figure 8 As shown;

[0100] 12 levels Draw the shape of the ship onto the layer according to the ship status. The effect is as follows Fig. 9 As shown;

[0101] Levels 13 and 14 draw the ship shape according to the ship status, and draw the ship name label on the ship shape. The effect is as follows Fig.10 As shown;

[0102] 15-level drawing redraws the shape of the large ship according to the length and width of the ship, and draws the shape of other large and small ships according to the ship status. At the same time, draw the ship name label on the ship shape. The effect is as follows Fig.11 As shown;

[0103] For levels 16 and above, the ship shape is drawn according to the length and width of the ship, and the ship name label is drawn on the ship shape.

[0104] Finally, it should be noted that the above is only used to illustrate the technical solution of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred arrangement scheme, a person skilled in the art should understand that the technical solution of the present invention can be modified or replaced by equivalents without departing from the spirit and scope of the technical solution of the present invention.

Claims

1. A method for drawing a ship icon in a nautical chart based on Canvas, characterized in that: include: S1: Obtain basic ship data; the basic ship data includes ship name, maritime mobile service identification code, ship type, ship length, ship width, ship status, ship speed, ship heading, ship latitude and longitude coordinates, ship rotation direction and angle, and signal update time; S2: Constructing the coordinates of the ship shape based on the ship status: logically processing the ship status in S1 to obtain the ship shape and the coordinates of the ship shape in the XY coordinate axis; the logical processing is to determine the ship shape and size according to the ship status, the chart zoom level, the ship length, and the ship width; S3: Determine the ship type and classify the type based on color: Determine the type of the ship in S1 to obtain the color value of the ship; S4: Get ship icon: fill the S2 ship shape with color to obtain a colored ship shape; the ship types include: container ship, cargo ship, hazardous chemical ship, passenger ship, law enforcement ship, official ship, engineering ship, other, unknown, signal lost; S5: Construct the relative pixel coordinates of the ship based on the ship position: Use the latLngToContainerPoint and latLngToLayerPoint methods of leaflet to convert the longitude and latitude coordinates of the ship in S1 into the relative pixel coordinates on the nautical chart to obtain the relative pixel coordinates of the ship; S6: Draw the S4 colored ship shapes onto the chart using Canvas and S5 ship relative pixel coordinates.

2. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 1, characterized in that: The method for obtaining the ship shape according to logical processing is: S21: selecting a method for drawing the ship shape according to the zoom level of the nautical chart; drawing the ship shape according to the drawing method for drawing the ship shape, and obtaining the ship shape and the coordinates of the ship shape in the XY coordinate axis; S22: Calculate the length of the extension line of the ship according to the ship speed, and draw the extension line into the ship shape in S21 to obtain a new ship shape; the direction of the extension line represents the ship heading, and the length of the extension line represents the ship speed; S23: According to the rotation direction and angle of the ship in S1, the new ship shape obtained in S22 is rotated to obtain the rotated ship shape and the coordinates of the rotated ship shape in the XY coordinate axis; if the rotation angle of the ship is greater than the specified value, the extension line of the ship shape is bent in the rotation direction to provide a turning prompt.

3. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 2, characterized in that: The method of selecting the ship shape to be drawn according to the zoom level of the nautical chart is as follows: When the chart zoom level is less than or equal to a, only the number of ships in the current area is displayed; When the chart zoom level is greater than a and less than b, the ship shape is drawn according to the ship status; When the chart zoom level is equal to b, large ships are drawn according to their actual size; Other large and small ships are drawn in ship shape according to their status; When the chart zoom ratio is greater than b, all ships are drawn in ship shape according to their actual ship sizes.

4. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 3, characterized in that: The method for drawing the ship shape according to the ship state is as follows: matching the ship state with the default ship shape to obtain the ship shape corresponding to the ship state and the coordinates of the ship shape in the XY coordinate axis; The default ship shapes include: ships in sailing, anchored ships, patrol boats and patrol boat SUB points, fishing boats and fishing boat lines; the ship status includes: sailing and stationary; the ship shapes of the patrol boats and fishing boats in the nautical chart are always drawn according to the default ship shapes and are not affected by the ship status and the chart zoom level.

5. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 3, characterized in that: The method of drawing the ship shape according to the actual ship type is to use the ship length, ship width and layer scaling ratio as parameters to calculate the size data of the ship in the current layer; draw the ship shape according to the size data to obtain the ship shape and the coordinates of the ship shape in the XY coordinate axis.

6. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 2, characterized in that: The extension line calculation rule is: Extension line length = ship speed * time / chart scaling ratio, where the extension line length needs to be within the specified range and the time is the specified ship travel time.

7. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 2, characterized in that: The rotation of the ship shape is to calculate the coordinates of the ship shape in the XY coordinate axis through the sine and cosine theorems and the rotation angle of the ship to obtain the rotated coordinates; and the rotated ship shape is drawn through the rotated coordinates.

8. A method for drawing ship icons in a nautical chart based on Canvas according to claim 1, characterized in that: S6 The method of drawing the ship shape on the nautical chart is: S61: using L.canvas provided by Leaflet to create a canvas at the relative pixel coordinate position of the ship in S5; the canvas uses an XY coordinate system; S62: Use L.polyline to draw the ship shape on the canvas created in S61 according to the coordinates of the ship shape in S2 in the XY coordinate axis; S63: Fill the ship shape drawn in S62 with color according to the ship color in S3; S64: Color filling is completed and the ship shape is added to the chart successfully.

9. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 1, characterized in that: After the ship shape is successfully drawn on the nautical chart, and when the chart zoom ratio is greater than or equal to m, a ship information label is marked in the designated area next to the ship shape to illustrate the ship icon; the ship label includes the ship name; when the mouse arrow hovers over the ship shape, the water mobile service identification code, ship name, ship speed, ship heading, and signal update time are displayed; when the mouse arrow clicks on the ship shape, a pop-up box displays all basic data of the ship.

10. A method for drawing a ship icon in a nautical chart based on Canvas according to claim 9, characterized in that: The method of labeling the ship information is as follows: A1: Get the size and position of the occupied rectangular area according to the relative pixel coordinates of the S5 ship and the set label width and height; A2: Determine whether the position of the rectangular area in A1 overlaps with the position of the rectangular area already existing on the nautical chart; if there is no position overlap, store it in the label library; if there is a position overlap, change the position of the rectangular area until there is no overlap; A3: Draw a rectangular area to the position of the rectangular area determined by A2, and fill the rectangular area with ship information labels corresponding to the ship shape.

Images