Web browser nautical chart rendering implementation method and system based on vector data

Abstract

The invention provides a web browser nautical chart rendering method and system based on vector data. The method comprises the steps that S1, nautical chart data in an S-57 format are analyzed through a vector geographic space data conversion library and imported into a PostgreSQL database; s2, the data in the PostgreSQL database is published as a vector slicing service by means of a GeoServer; s3, calling a vector slicing service through an HTTP (Hyper Text Transport Protocol) request based on a Web browser, and obtaining related chart data; s4, the browser processes the obtained related chart data based on the read style file and the icon elf chart to obtain a standard chart; wherein the style file comprises a rendering style for explaining each nautical chart element and related nautical chart data obtained based on rendering style processing.

Description

Technical Field

[0001] The present invention relates to the field of geographic information systems and Web development technology, and in particular to a method and system for implementing web browser rendering of nautical charts based on vector data. Background Art

[0002] Traditional nautical chart rendering relies primarily on raster images. While this method was able to meet basic chart display requirements under previous hardware and software environments, its limitations have become increasingly apparent with technological advancements. Raster images are typically pre-generated, fixed-resolution images, which means they can appear blurry or unclear at different zoom levels. Furthermore, raster image files are typically large, consuming significant bandwidth during network transmission, resulting in slow loading times. This significantly impacts the user experience, especially over poor network conditions.

[0003] On the other hand, raster images lack interactivity. Users cannot perform dynamic operations on the map, such as real-time queries, object clicks, and attribute display. This is a significant drawback for professional applications that require precise operations and real-time data updates. With the rapid development of Internet technology and the popularization of geographic information systems (GIS), the demand for online nautical chart services is growing, not only among ordinary users but also among users in professional fields such as navigation, ocean research, and environmental monitoring.

[0004] These users require more efficient solutions that provide fast-loading and highly interactive map experiences to meet their application needs on various devices. This is especially true for professional equipment such as ship navigation systems and ocean monitoring instruments, where real-time and interactivity are key requirements.

[0005] Patent document CN112085824A (application number: 202010984697.6) discloses a real-time ocean rendering system and method based on spatial multi-scale reconstruction, including: an ocean data gridding module, a spatial multi-scale reconstruction module, a real-time response module, a data reorganization module, and a data rendering module. It uses encoding compression LOD multi-level details to spatially reconstruct the gridded ocean data, and uses Mortan encoding rules to compress the data to slow down system memory consumption; at the same time, the LOD multi-level detail technology model is used to convert rasterized ocean data into vector data, ensuring that image rendering will not be distorted due to changes in browser scale; a data response strategy is used to capture changes in viewpoint range in real time, reduce the loading of invalid nodes, and improve rendering efficiency; a data reorganization method and an adaptive image rendering method are used to pull and render layer data within the viewpoint range to achieve real-time visual rendering of the layer. Summary of the Invention

[0006] In view of the defects in the prior art, the purpose of the present invention is to provide a method and system for rendering nautical charts in a web browser based on vector data.

[0007] According to the present invention, a method for rendering a nautical chart in a web browser based on vector data is provided, comprising:

[0008] Step S1: Parse and import the S-57 format nautical chart data into the PostgreSQL database through the vector geospatial data conversion library;

[0009] Step S2: Use GeoServer to publish the data in the PostgreSQL database as a vector tile service;

[0010] Step S3: calling the vector tile service through HTTP request based on the web browser to obtain relevant nautical chart data;

[0011] Step S4: The browser processes the obtained relevant nautical chart data based on the read style file and the icon sprite image to obtain a standard nautical chart;

[0012] The style file includes a description of the rendering style of each nautical chart element, and the relevant nautical chart data obtained is processed based on the rendering style.

[0013] Preferably, the step S1 includes:

[0014] Step S1.1: Obtain an S-57 standard electronic nautical chart file, and group the chart data in the S-57 standard electronic nautical chart file according to scale;

[0015] Step S1.2: Use GDAL to parse and import the grouped chart data into the PostgreSQL database;

[0016] When importing chart data into a PostgreSQL database, create a corresponding schema based on the scale, and import charts of the same scale into the same schema.

[0017] Preferably, the step S2 comprises: in the process of publishing the data in the PostgreSQL database as a vector tile service using GeoServer, creating a corresponding layer and adding hierarchical information in the layer;

[0018] The layer represents a specific type of geographic data set; the hierarchical information represents the level information of the map slice, which can be added to the layer name or layer attribute field; so as to call the vector slice service to obtain the relevant nautical chart data and the corresponding level information.

[0019] Preferably, the layers can be grouped according to levels to create multiple layer groups to facilitate layer management.

[0020] Preferably, enable the GeoServer cache function to reduce the service data processing pressure when the browser requests the same layer.

[0021] Preferably, the step S4 includes: the browser selects openlayers or leaflet map framework based on the read style file and icon sprite image to process the acquired relevant nautical chart data to obtain a standard nautical chart.

[0022] Preferably, the method further comprises: the browser interacting with the nautical chart via HTTP request service based on the rendered standard nautical chart;

[0023] Among them, the business service is to add, delete, modify and query the PostgreSQL chart service through the PostGIS extension, and render the results in the browser.

[0024] According to the present invention, a web browser rendering nautical chart system based on vector data is provided, comprising:

[0025] Module M1: Parse and import S-57 format nautical chart data into PostgreSQL database using vector geospatial data conversion library;

[0026] Module M2: Use GeoServer to publish data in the PostgreSQL database as a vector tile service;

[0027] Module M3: Call the vector tile service through HTTP request based on the web browser to obtain relevant nautical chart data;

[0028] Module M4: The browser processes the obtained relevant chart data based on the read style file and icon sprite image to obtain a standard chart;

[0029] The style file includes a description of the rendering style of each nautical chart element, and the relevant nautical chart data obtained is processed based on the rendering style.

[0030] Preferably, the module M1 includes:

[0031] Module M1.1: Obtain the S-57 standard electronic nautical chart file and group the chart data in the S-57 standard electronic nautical chart file according to scale;

[0032] Module M1.2: Use GDAL to parse and import grouped chart data into a PostgreSQL database;

[0033] When importing chart data into a PostgreSQL database, create a corresponding schema based on the scale, and import charts of the same scale into the same schema.

[0034] Preferably, the module M2 comprises: in the process of publishing the data in the PostgreSQL database as a vector tile service using GeoServer, creating a corresponding layer and adding hierarchical information in the layer;

[0035] Among them, the layer represents a specific type of geographic data set; the hierarchical information represents the level information of the map slice, which can be added to the layer name or layer attribute field; so as to call the vector slice service to obtain related nautical chart data and corresponding level information; the layers can be grouped according to the hierarchy and multiple layer groups can be established to facilitate the management of the layers.

[0036] Enable GeoServer caching to reduce data processing pressure when browsers request the same layer.

[0037] Preferably, the module M4 includes: the browser selects openlayers or leaflet map framework based on the read style file and icon sprite image to process the acquired relevant nautical chart data to obtain a standard nautical chart.

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

[0039] 1. The present invention achieves efficient map rendering through a slicing method based on vector data, and can customize display content according to user needs;

[0040] 2. The present invention realizes smooth map display during user interaction based on the technical features of lightweight transmission and on-demand loading of vector data slices, Geoserver caching mechanism and browser-side optimized rendering; more specifically, vector data slices are smaller in file size and faster in transmission than raster image slices, and are loaded on demand, requesting only slices for the current view; browser-side rendering optimization (OpenLayers / Leaflet framework + style file + sprite) enables dynamic client-side style switching and accelerated graphics drawing. Compared with raster slices, if the user switches themes, they need to re-request raster image slices and render them through HTTP requests, but vector slices do not need to be re-requested, only the style files need to be reloaded; using the GeoServer caching mechanism, the pressure on the server side of repeated requests can be reduced, ensuring a quick response during user interaction. After the caching mechanism is enabled, when the browser requests the same slice, Geoserver will directly return the cached slice without entering the processing flow, so the response speed will be improved;

[0041] 3. The present invention can achieve click-to-query attribute information through feature-level interaction and business services, breaking through the static limitations of traditional raster data and improving interactivity;

[0042] 4. The present invention achieves efficient processing of large-scale data through data hierarchical storage, lightweight transmission of vector tiles, and server-side caching. Combining the PostgreSQL+PostGIS expansion capabilities with browser rendering framework optimization, this ensures real-time rendering and high concurrency support for user operations on massive amounts of data, meeting the needs of professional scenarios. More specifically, data hierarchical storage refers to grouping schemas by scale when storing data hierarchically in PostgreSQL, allowing for rapid location of queried objects when querying through business services.

[0043] 5. The method and system for implementing web browser rendering of nautical charts based on vector data provided by the present invention will significantly reduce bandwidth usage during chart rendering, while also providing high-quality images and rich interactive functions, offering users an efficient and reliable solution.

[0044] 6. The present invention uses GDAL to import S-57 nautical chart data into a PostgreSQL database, combines it with GeoServer to publish vector slices, and performs efficient rendering on the browser side. It can support dynamic interactive display of nautical chart data, provide accurate rendering of geographic information and graphic elements, and meet the needs of modern Web applications for efficient data transmission and high-quality rendering. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0046] Figure 1 Flowchart of a method for rendering nautical charts for web browsers based on vector data.

[0047] Figure 2 It is an interactive chart. DETAILED DESCRIPTION

[0048] The present invention will be described in detail below with reference to specific embodiments. The following examples will help those skilled in the art to further understand the present invention, but are not intended to limit the present invention in any form. It should be noted that, for those skilled in the art, several changes and improvements can be made without departing from the scope of the present invention. These all fall within the scope of protection of the present invention.

[0049] Example 1

[0050] According to the method for rendering nautical charts by a web browser based on vector data provided by the present invention, Figures 1 to 2 As shown, the method specifically includes:

[0051] Step S1: Obtain an S-57 standard electronic nautical chart file from an official or authorized nautical chart data provider;

[0052] This embodiment ensures the integrity, currency, and legality of the data. After acquisition, the chart files are grouped by scale for subsequent grouping. According to the standard chart file naming convention, the third digit of the file name is the chart editing scale.

[0053] Step S2: Using a vector geospatial database, in this embodiment, GDAL is used to parse the S-57 file. The vector data is extracted using GDAL's ogr2ogr tool and stored in a PostgreSQL database. PostGIS extensions are used to support geospatial data types and operations. When importing the chart file into the PostgreSQL database, a corresponding schema can be created based on the scale grouping results for subsequent operations. Each table in the schema represents a layer (such as buoys, lights, rocks, etc.).

[0054] Step S3: Deploy GeoServer as the chart service platform and download the vector tile plug-in for the GeoServer platform. After logging in to GeoServer, connect to the database through the Storage Repository tab. On the Layers tab, publish the vector data in the database as a Web Map Tile Service (WMTS). Configure the service to support efficient vector tile transmission, ensuring fast response and high-quality rendering at different zoom levels.

[0055] Step S4: On the browser side, call the WMTS slice through a map library such as OpenLayers or Leaflet.

[0056] Step S5: The browser reads the style file and icon sprite as required. The style file describes the rendering style of each chart element (divided into three data types: point, line, and surface). The sprite is a picture composed of all chart icons in a unified arrangement. There is one style file and one sprite for each mode (such as day, dusk, and night).

[0057] Step S6: The browser renders a standard chart according to the style. The process is as follows:

[0058] For example, during rendering, when the user selects Daylight-Simple mode, the browser performs the following steps:

[0059] Steps for reading the style file: First, the browser reads the chart element style information in day mode from the style file, including specific style settings such as color, line type, and fill.

[0060] Loading sprite sheet steps: Next, the browser loads the day mode sprite sheet, which is an image file containing all the chart icons, with each icon arranged in order.

[0061] Select the layer list step: Based on the Simple Mode configuration table, the browser determines the layer list to be rendered. Simple Mode may filter out some unnecessary layers to simplify the display.

[0062] Rendering steps: If an icon needs to be displayed when the layer is rendered, the browser will find and extract the icon based on the x, y coordinates of the icon in the sprite, and then draw it on the map.

[0063] By following these steps, the browser can effectively render the chart display in accordance with the user's selected day-simple mode.

[0064] Step S7: The browser interacts with the backend service through HTTP requests. This service is responsible for performing add, delete, modify, and query operations on the chart data in the PostgreSQL database, enabling dynamic data updates. For example, users can mark locations, add annotations, or query chart information.

[0065] The present invention also provides a web browser rendering nautical chart system based on vector data. The web browser rendering nautical chart system based on vector data can be implemented by executing the process steps of the web browser rendering nautical chart method based on vector data. That is, those skilled in the art can understand the web browser rendering nautical chart method based on vector data as a preferred implementation of the web browser rendering nautical chart system based on vector data.

[0066] Those skilled in the art will appreciate that, in addition to implementing the system, device, and various modules provided by the present invention in purely computer-readable program code, it is entirely possible to implement the same program in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, embedded microcontrollers, and the like by logically programming the method steps. Therefore, the system, device, and various modules provided by the present invention can be considered a hardware component, and the modules included therein for implementing various programs can also be considered structures within the hardware component; the modules for implementing various functions can also be considered both software programs for implementing the method and structures within the hardware component.

[0067] The above describes specific embodiments of the present invention. It should be understood that the present invention is not limited to the specific embodiments described above, and those skilled in the art may make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. The embodiments of this application and the features in the embodiments may be combined with each other in any manner unless there is a conflict.

Claims

1. A method for rendering nautical charts using a web browser based on vector data, characterized in that: include: Step S1: Parse and import the S-57 format nautical chart data into the PostgreSQL database through the vector geospatial data conversion library; Step S2: Use GeoServer to publish the data in the PostgreSQL database as a vector tile service; Step S3: calling the vector tile service through HTTP request based on the web browser to obtain relevant nautical chart data; Step S4: The browser processes the obtained relevant nautical chart data based on the read style file and the icon sprite image to obtain a standard nautical chart; The style file includes a description of the rendering style of each nautical chart element, and the relevant nautical chart data obtained is processed based on the rendering style.

2. The method for rendering nautical charts using a web browser based on vector data according to claim 1, characterized in that: The step S1 comprises: Step S1.1: Obtain an S-57 standard electronic nautical chart file, and group the chart data in the S-57 standard electronic nautical chart file according to scale; Step S1.2: Use GDAL to parse and import the grouped chart data into the PostgreSQL database; When importing chart data into a PostgreSQL database, create a corresponding schema based on the scale, and import charts of the same scale into the same schema.

3. The method for rendering nautical charts using a web browser based on vector data according to claim 1, characterized in that: The step S2 includes: in the process of publishing the data in the PostgreSQL database as a vector tile service using GeoServer, creating a corresponding layer and adding hierarchical information to the layer; Among them, the layer represents a specific type of geographic data set; the hierarchical information represents the level information of the map slice, which can be added to the layer name or layer attribute field to call the vector slice service to obtain related nautical chart data and corresponding level information; the layers can be grouped according to the hierarchy to establish multiple layer groups for layer management.

4. The method for rendering nautical charts using a web browser based on vector data according to claim 3, characterized in that: The method also includes: starting the GeoServer cache function to reduce service data processing pressure when the browser requests the same layer.

5. The method for rendering nautical charts using a web browser based on vector data according to claim 1, characterized in that: The step S4 includes: the browser selects openlayers or leaflet map framework based on the read style file and icon sprite image to process the acquired relevant nautical chart data to obtain a standard nautical chart.

6. The method for rendering nautical charts using a web browser based on vector data according to claim 1, characterized in that: The method further includes: the browser interacting with the nautical chart via an HTTP request service based on the rendered standard nautical chart; Among them, the business service is to add, delete, modify and query the PostgreSQL chart service through the PostGIS extension, and render the results in the browser.

7. A web browser rendering chart system based on vector data, characterized in that: include: Module M1: Parse and import S-57 format nautical chart data into PostgreSQL database using vector geospatial data conversion library; Module M2: Use GeoServer to publish data in the PostgreSQL database as a vector tile service; Module M3: Call the vector tile service through HTTP request based on the web browser to obtain relevant nautical chart data; Module M4: The browser processes the obtained relevant chart data based on the read style file and icon sprite image to obtain a standard chart; The style file includes a description of the rendering style of each nautical chart element, and the relevant nautical chart data obtained is processed based on the rendering style.

8. The web browser rendering chart system based on vector data according to claim 7 is characterized in that: The module M1 includes: Module M1.1: Obtain the S-57 standard electronic nautical chart file and group the chart data in the S-57 standard electronic nautical chart file according to scale; Module M1.2: Use GDAL to parse and import grouped chart data into a PostgreSQL database; When importing chart data into a PostgreSQL database, create a corresponding schema based on the scale, and import charts of the same scale into the same schema.

9. The web browser rendering nautical chart system based on vector data according to claim 7, characterized in that: The module M2 includes: in the process of publishing the data in the PostgreSQL database as a vector tile service using GeoServer, creating a corresponding layer and adding hierarchical information to the layer; The layer represents a specific type of geographic data set; the level information represents the level information of the map slice, which can be added to the layer name or layer attribute field to call the vector tile service to obtain related nautical chart data and corresponding level information; the layers can be grouped according to the level to establish multiple layer groups for layer management; Enable GeoServer caching to reduce data processing pressure when browsers request the same layer.

10. The web browser rendering nautical chart system based on vector data according to claim 7, characterized in that: The module M4 includes: the browser selects openlayers or leaflet map framework to process the acquired relevant nautical chart data based on the read style file and icon sprite image to obtain a standard nautical chart.

Images