Web operating system local map application method and device based on cairo plug-in

Abstract

The invention discloses a cairo plug-in-based Web operating system local map application method and device, and belongs to the technical field of Web operating systems. The method comprises the following steps: deploying a map database, a map style sheet and a font related file to terminal equipment to lay a resource foundation for offline operation; the third-party C + + map library is subjected to sandbox processing, code and data access isolation is achieved, and system safety is guaranteed; then, an osm-cairo module is written, and a DrawMapWrapper tool class containing a map style storage and operation function is created; compiling a map plug-in source code, realizing a map interactive interface and compiling the map plug-in source code into a cairo dynamic plug-in; and finally, compiling a Web map application, and realizing map rendering and related operation by dynamically loading plug-ins and communicating.

Description

Technical Field

[0001] This application relates to the field of Web operating system technology, and in particular to a method and apparatus for local map application on a Web operating system based on the Cairo plugin. Background Technology

[0002] With the widespread adoption of web operating systems, user demand for local map applications is growing. This demands not only a smooth browsing and interactive experience but also support for offline use scenarios (such as navigation and location lookup in offline environments) to adapt to mobile and embedded devices. However, current web applications using third-party map rendering libraries face significant technical bottlenecks. Due to the differences between the web environment and the native C / C++ language runtime environment, the commonly used technical approaches have insurmountable flaws and cannot simultaneously meet the four core requirements of performance, user experience, compatibility, and security.

[0003] There are four main implementation paths in the existing technology. The first is to compile the C / C++ map library into a WebAssembly (WASM) module and interact with WASM through JavaScript. However, this method is difficult to debug, has a large package size, requires manual memory management, and has poor browser compatibility. The second is to wrap the C / C++ map library as an HTTP service in Node / C++ on the backend and have the frontend call it remotely. This solution depends on the network, is prone to lag, cannot be offline, and has high backend concurrency pressure. The third is to integrate the C / C++ map library into the App shell and communicate with the Web through JSBridge. However, this method requires maintaining two sets of communication protocols, which has high development and maintenance costs, asynchronous lifecycles, and is prone to memory leaks or crashes. The fourth is to place the native map and H5 page on different WebViews and display them on top of each other, synchronizing their states through a message bus. However, multiple WebViews on top of each other will form information silos, have limited hierarchy, and not share memory. They are prone to frame drops on low-end devices, and complex interactions are difficult to implement.

[0004] In summary, existing web map application technologies suffer from a triangular contradiction between performance, user experience, and compatibility. Prioritizing performance at the expense of compatibility, or prioritizing development experience and compatibility, fails to meet the demands for offline operation and smooth interaction. There is currently no ideal solution that is lightweight, low-latency, cross-platform, and can securely call third-party C / C++ map libraries. New methods are urgently needed to overcome the barriers between web applications and native C / C++ map libraries, simultaneously achieving offline operation, secure isolation, high-performance rendering, and adaptation to the evolving needs of web operating systems. Summary of the Invention

[0005] This application provides a method and apparatus for local map application in a web operating system based on the Cairo plugin. The technical solution is as follows: On the one hand, a method for local map application in a web operating system based on the Cairo plugin is provided, the method comprising: Deploy map resources and fonts to terminal devices; Sandboxing of third-party C++ map libraries; Write the osm-cairo module; Write the source code for the map plugin and implement the map browsing and interaction interfaces. Compile the map plugin source code into a Cairo plugin; Develop a web map application that communicates with the Cairo plugin to perform map rendering and related operations.

[0006] Optionally, deploying map resources and fonts to terminal devices includes: The map database is pushed to the terminal device. The map database is a binary format generated by the libosmscout Import tool. The map database includes a dat file storing the original data of map elements, an idx index file, and an idmapID mapping table. The map style sheet is pushed to the terminal device. The map style sheet is a libosmscout map style sheet file used to control map information. The font-related files are pushed to the terminal device, including fonts.conf and conf.d. The fonts.conf is pushed to the system / etc / directory of the terminal device, and the conf.d is pushed to the system / etc / fonts / directory of the terminal device.

[0007] Optionally, the sandboxing process for the third-party C++ map library includes: Sandboxing is performed on third-party map libraries and their dependent libraries, including libosmscout and libcairo. The sandboxing process includes: Compile the source code of the third-party C++ map library into a wasm file; The wasm file is converted into a C file to achieve code and data access isolation between the third-party C++ map library and the web application. The third-party C++ map library includes libosmscout, libcairo, and their dependent libraries.

[0008] Optionally, writing the osm-cairo module includes: Call the sandboxed interfaces of libosmscout and libcairo to create the map auxiliary utility class DrawMapWrapper; The DrawMapWrapper is used to construct a map-related database, which stores the styles used when drawing the map and the map operation functions.

[0009] Optionally, the step of writing the map plugin source code and encoding the map browsing and interaction interface includes: The source files of the map plugin's source code call DrawMapWrapper.h and MapPainterCairo.h; Implement the plugin instance related interfaces on the plugin side, and obtain the local window object drawn by the HTML page of the Web application through the system plugin module; Create a Cairo canvas and a Cairo drawing context. Specifically, the Cairo canvas is created by binding the raw pixel buffer of the local window of the terminal device by calling the Cairo_image_surface_create_for_data() method, and the Cairo drawing context is created by calling the Cairo_create() method. Map parameters are parsed and cached. These map parameters include map database path, style sheet path, image width, image height, latitude, longitude, zoom level, and image path. The parsing and caching are implemented using the DrawMapWrapper class. Call the OpenDatabase() method of DrawMapWrapper to open the map database and obtain a database handle available to libosmscout. Call the LoadData() method of DrawMapWrapper to load one screen of map data into the terminal device's memory. A paintbrush is created using the DrawMap() method of the MapPainterCairo class, where the parameter of the DrawMap() method is the style configuration provided by DrawMapWrapper. By combining the map drawing methods of the MapPainterCairo class and the translation, zoom, and rotation methods of the DrawMapWrapper class, a map browsing and interaction interface is implemented. Register the plugin-side message processing interface HandleMessage(), which is used to receive and process messages sent by the Web map application via postMessage(), and call the corresponding map browsing and interaction interfaces according to the message fields.

[0010] Optionally, compiling the map plugin source code into a Cairo plugin includes: The Cailo plugin is obtained by building all source code into a dynamic library using CMake. The source code includes the C source code and header files corresponding to the map plugin source code, the C source code and header files of the system plugin module, the C source code and header files of the sandboxed pango library, the C source code and header files of the sandboxed Cailo library, the C source code and header files of the sandboxed pixman library, and the C source code and header files of the sandboxed libosmscout library. During the construction of the dynamic library, the nativewindow-related library is linked to provide the Cairo plugin with the ability to access the graphics buffer associated with the surface.

[0011] Optionally, the step of developing a web map application, which communicates with the Cairo plugin to implement map rendering and related operations, includes: The web map application is written in native JavaScript code or a front-end JavaScript framework; Place the cairo plugin and its related libraries in the lib directory of the Web map application; Dynamically create in the JavaScript code of a web map application <embed> Tags or <object>The label, the <embed> Tags or <object>The type attribute of the tag is set as "application / bp-plugin", and the loadfrom attribute is set as the cairo plug-in name to load the cairo plug-in; The plug-in state monitoring interface provided by the system plug-in module is called to monitor the loading state of the cairo plug-in, when the loading state is "loaded", a message is sent to the cairo plug-in through postMessage(), and then a map related interface in the cairo plug-in is called to realize map rendering and related operations.

[0012] In another aspect, a cairo plug-in based Web operating system local map application device is provided, the device comprises: A preprocessing module is configured to deploy map resources and fonts to a terminal device; A sandboxing module is configured to sandbox a third-party C++ map library; A module writing module is configured to write an osm-cairo module; A plug-in writing module is configured to write map plug-in source code, and encode to realize map browsing and interactive interfaces; A plug-in compiling module is configured to compile the map plug-in source code into a cairo plug-in; A Web application writing module is configured to write a Web map application, the Web map application communicates with the cairo plug-in to realize map rendering and related operations.

[0013] In another aspect, a computer readable storage medium is provided, the computer readable storage medium stores a computer program, the computer program is loaded and executed by a processor to realize the cairo plug-in based Web operating system local map application method as described above.

[0014] This application discloses a method for local map applications on a web operating system based on the Cairo plugin, aiming to solve the problems of existing web map applications being unable to securely and efficiently call third-party map libraries written in C / C++, lacking offline running capabilities, and having poor performance. This method first deploys the map database, map style sheets, and font-related files to the terminal device, laying the resource foundation for offline operation. Then, it sandboxes the third-party C++ map library to isolate code and data access, ensuring system security. Next, it writes the osm-cairo module, creating the DrawMapWrapper utility class containing map style storage and operation functions. Then, it writes the map plugin source code, implementing different interactive interfaces for map browsing and compiling it into a Cairo dynamic plugin. Finally, it writes the web map application, dynamically loading and communicating with the plugin to achieve map rendering and related operations. This method enables web map applications to have complete offline running capabilities, breaking through the technical bottleneck of web applications calling C / C++ map libraries, while balancing rendering performance and system security, and is suitable for various web operating system terminal devices. Attached Figure Description

[0015] Figure 1 A flowchart illustrating a method for applying local maps in a web operating system based on the Cairo plugin is shown. Figure 2 A schematic diagram illustrating the interaction logic between a Web map application and the Cairo plugin is shown. Figure 3 This diagram illustrates the entire development process of a local map application for a web operating system based on the Cairo plugin. Detailed Implementation

[0016] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0017] In this article, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0018] Example 1

[0019] like Figure 1 The diagram illustrates a flowchart of a method for applying a local map on a web operating system based on the Cairo plugin. This application provides a method for applying a local map on a web operating system based on the Cairo plugin, the method comprising: Step 101: Deploy map resources and fonts to the terminal device.

[0020] In one possible implementation, step 101 includes the following.

[0021] S11, push the map database to the terminal device. The map database is a binary format generated by the libosmscout Import tool. The map database includes a dat file storing the original data of map elements, an idx index file, and an idmapID mapping table.

[0022] S12, push the map style sheet to the terminal device. The map style sheet is a libosmscout map style sheet file used to control map information, such as layer order, color, line type and font.

[0023] S13, push the font-related files to the terminal device, wherein the font-related files include fonts.conf and conf.d, the fonts.conf is pushed to the system / etc / directory of the terminal device, and the conf.d is pushed to the system / etc / fonts / directory of the terminal device.

[0024] Specifically, first, connect the computer to the terminal device using a USB cable. Then, run the resource deployment script directly in the computer's terminal command line to quickly and easily deploy map resources, fonts, and other resources to the terminal device. The script will first create an "osm" folder in the terminal device's "data" directory. This folder will be used to store map-related resource files.

[0025] The script then divides the resource files into three parts and pushes them to the terminal device. The first part is the map database (corresponding to S11), which is a binary file converted from the raw data of OpenStreetMap using libosmscout's Import tool. It includes a .dat file (storing raw data such as nodes and roads), an .idx file (index file for easy and fast data retrieval), and an .idmap (ID mapping table). For example, if displaying a map of Hunan Province in a web application, the Hunan Province map database will be pushed to the / data / osm / hunan-latest directory on the terminal device. The second part is the map style sheet (corresponding to S12), which is a standard specific to libosmscout. The first part, OSS, needs to be pushed to the / data / osm / stylesheets directory on the device. This file is used to control the layer order (e.g., drawing the background before the roads), colors (main roads are set to orange-red #FF6B35, and the background is light gray #F5F5F5), line styles (solid lines for main roads, dashed lines for sidewalks), fonts, etc. The third part is the font-related files (corresponding to S13). Push fonts.conf to the / system / etc / directory, conf.d to / system / etc / fonts / , and push font files such as Source Han Sans to / system / fonts / for displaying text on the map.

[0026] Step 102: Sandbox the third-party C++ map library.

[0027] Sandboxing is performed on third-party map libraries and their dependent libraries, including libosmscout and libcairo.

[0028] The sandboxing process includes: S21, compile the source code of the third-party C++ map library into a wasm file; S22, the wasm file is converted into a C file to achieve code and data access isolation between the third-party C++ map library and the web application, wherein the third-party C++ map library includes libosmscout, libcairo and its dependent libraries.

[0029] The sandboxing process in this step is primarily for security, preventing these libraries from arbitrarily accessing system resources. The libraries to be processed include the core libosmscout (for parsing map data) and libcairo (for 2D graphics), as well as dependent libraries like pango (for font layout) and pixman (for pixel manipulation) (corresponding to S21). First, the wasm tool provided by the sandboxing module is used to compile the source code of these libraries into wasm files, such as libosmscout.wasm; then, the wasm2c tool provided by the sandboxing module is used to convert the wasm files into C files, such as libosmscout.wasm.c (corresponding to S22). Through sandboxing, the code and data access between third-party libraries and the application are isolated.

[0030] Step 103: Write the osm-cairo module.

[0031] S31, call the sandboxed interfaces of libosmscout and libcairo to create the map auxiliary utility class DrawMapWrapper; S32, construct a map-related database through the DrawMapWrapper. The map-related database stores the styles and map operation functions used when drawing the map. The styles include fonts, icons, and backgrounds. The map operation functions include translation functions, zoom functions, rotation functions, etc.

[0032] Write the osm-cairo module to create the map auxiliary utility class DrawMapWrapper, providing the interfaces required for the map drawing process. Write the DrawMapWrapper.h header file, which includes libosmscout and libcairo header files, and defines variables and functions such as the database handle and drawing context. Write the DrawMapWrapper.cpp file (corresponding to S31), which calls the sandboxed libosmscout and libcairo interfaces from step 102 to implement functions such as map parameter parsing, opening the database, and loading map data.

[0033] Step 104: Write the map plugin source code and implement the map browsing and interaction interface.

[0034] In one possible implementation, step 104 includes the following.

[0035] S41, DrawMapWrapper.h and MapPainterCairo.h are called in the source files of the map plugin source code; S42 implements the plugin instance related interfaces on the plugin side and obtains the local window object drawn by the Web application Html page through the system plugin module; S42, create a Cairo canvas and a Cairo drawing context, wherein the Cairo canvas is created by binding the raw pixel buffer of the local window of the terminal device by calling the Cairo_image_surface_create_for_data() method, and the Cairo drawing context is created by calling the Cairo_create() method; S43, Parse and cache map parameters, including map database path, style sheet path, image width, image height, latitude, longitude, zoom factor, and image path. The parsing and caching is implemented through the DrawMapWrapper class. S44, call the OpenDatabase() method of DrawMapWrapper to open the map database to obtain the database handle available to libosmscout, and call the LoadData() method of DrawMapWrapper to load one screen of map data into the terminal device memory; S45, a paintbrush is created using the DrawMap() method of the MapPainterCairo class, where the parameter of the DrawMap() method of the MapPainterCairo class is the style configuration provided by DrawMapWrapper; S45 combines the map drawing methods of the MapPainterCairo class and the translation, zoom, and rotation methods of the DrawMapWrapper class to implement map browsing and interactive interfaces; S46. Register the plugin-side message processing interface HandleMessage(). HandleMessage() is used to receive and process messages sent by the Web map application through postMessage(), and call the corresponding map browsing and interaction interfaces according to the message fields.

[0036] In summary, firstly, in the source file gis_plugin.cpp of the map plugin, include header files such as DrawMapWrapper.h and MapPainterCairo.h. Then, implement the plugin instance-related interfaces on the plugin side, including plugin instance initialization, instance creation processing, instance destruction, and other interfaces, and obtain the local window object drawn by the web application's HTML page through the system plugin module.

[0037] Next, the Cairo-related canvas and drawing context are created. Specifically, the `cairo_image_surface_create_for_data()` method is called to bind the local window's raw pixel buffer obtained through the system plugin module to Cairo and create the Cairo canvas. Then, the `cairo_create()` method is used to create the drawing context, and all subsequent drawing operations are based on this context (corresponding to S42). Following this, map parameters are parsed and cached. Map parameters include the absolute path of the map database on the terminal, such as ` / data / osm / hunan-latest`, the stylesheet path ` / data / osm / stylesheets / standard.oss`, the image width of 1920px, height of 1080px, initial latitude of 28.2379°N, longitude of 112.9400°E, scaling factor of 15, and the generated image path ` / data / osm / gis.png`. These are all parsed through the `DrawMapWrapper` class and stored in the corresponding member variables of the class, which can be accessed directly later (corresponding to S43).

[0038] After the parameters are parsed and cached, map data is loaded. First, the `OpenDatabase()` method of `DrawMapWrapper` is called to open the map database and obtain a database handle that libosmscout can directly use. This handle can be used to query data later. Then, the `LoadData()` method is called to load the map data within one screen's range centered on the initial latitude and longitude into the terminal memory. This way, real-time database access is not required during rendering, facilitating fast rendering (corresponding to S44). Next, a paintbrush is created by calling the `DrawMap()` method of the `MapPainterCairo` class. The parameters use the style configuration provided by `DrawMapWrapper`, such as the main road color #FF6B35, line width 2px, and text using Source Han Sans 14px. This gives the paintbrush the corresponding drawing style (corresponding to S45).

[0039] Finally, implement the map browsing and interaction interfaces, such as the drawing interface RenderMap(), which calls the DrawMap() method of the MapPainterCairo class to draw the map data in memory onto the canvas according to the style using the previously created drawing context; the panning interface Pan(), which calls the PanMap() method of DrawMapWrapper, passing in the horizontal and vertical offsets, such as dx=-50, dy=0 indicating a leftward shift of 50px, and then calling RenderMap() to redraw the panned map, so you can see the map position has changed; scaling and rotation are similar, zooming in or out, rotating clockwise or counterclockwise are specified by the "action" parameter in the passed message field, and the "factor" parameter specifies the scaling factor or rotation angle. After processing the scaling or rotation operations, it is also necessary to call the RenderMap() method to update the drawing (corresponding to S46). Finally, the HandleMessage() interface on the plugin side needs to be registered. This interface is used to receive and process messages dispatched by the web application via postMessage(). For example, if the message {"action":"zoom-in","factor":20} is received, the "action" parameter is used to parse out that it is a zoom-in operation, and the HandleZoomIn() zoom-in interface is called with the "factor" parameter value passed in to zoom in on the map.

[0040] Step 105: Compile the map plugin source code into a Cairo plugin.

[0041] In one possible implementation, step 105 includes the following.

[0042] S51, using CMake, all source code is built into a dynamic library to obtain the cairo plugin. The source code includes the C source code and header files corresponding to the map plugin source code, the C source code and header files of the system plugin module, the C source code and header files of the sandboxed pango library, the C source code and header files of the sandboxed cairo library, the C source code and header files of the sandboxed pixman library, and the C source code and header files of the sandboxed libosmscout library. S52, during the construction of the dynamic library, link the nativewindow related library to provide the Cairo plugin with the ability to access the graphics buffer associated with the surface.

[0043] In summary, this method uses CMake to compile the map plugin source code into a Cairo plugin. First, a CMakeLists.txt configuration file is written, specifying the compilation target as a dynamic library, the plugin name as gis_plugin, and including the map plugin's gis_plugin.cpp, the sandboxed libosmscout.wasm.c, libcairo.wasm.c, pango.wasm.c, and pixman.wasm.c when setting the source code path. The header file directory path must include the header file paths for system plugin modules, jsoncpp, etc. (corresponding to S51). Simultaneously, the nativewindow-related dynamic libraries need to be linked in the CMakeLists.txt configuration file. Finally, the dynamic library is compiled by executing the compilation script.

[0044] Step 106: Develop a Web map application that communicates with the Cairo plugin to perform map rendering and related operations.

[0045] In one possible implementation, step 106 includes the following.

[0046] S61, the Web map application is written in native JavaScript code or a front-end JavaScript framework, and the front-end JavaScript framework includes Vue framework, React framework, etc. S62, Place the cairo plugin and its related libraries in the lib directory of the Web map application; S63, dynamically created in the JavaScript code of a web map application. <embed> Tags or <object>Labels, said <embed> Labels or <object>The type attribute of the tag is set to "application / bp-plugin", and the loadfrom attribute is set to the cairo plug-in name to load the cairo plug-in; S64, call the listening interface provided by the system plug-in module to listen to the loading state of the cairo plug-in, when the loading state is "loaded", send a message to the cairo plug-in through postMessage(), and call the map-related interface in the cairo plug-in to realize map rendering and related operations, including map translation, scaling, rotation, etc.

[0047] In summary, write a Web map application, communicate with the cairo plug-in to realize map-related functions. The Web application can be written in native JavaScript or implemented using front-end frameworks such as Vue and React. For example, when using Vue, the code is organized according to the Vue project structure (corresponding to S61). First, place the compiled cairo plug-in and plug-in dependent library files under the lib directory of the Web map application to facilitate access to the plug-in by the system plug-in module (corresponding to S62).

[0048] Then write JavaScript code to dynamically create plug-in tags and plug-in instances to communicate with the cairo plug-in. One plug-in tag creates one plug-in instance, and the plug-in tag can be <embed> a tag or <object>Tag. Add a type attribute to the tag with the value application / bp-plugin and a loadfrom attribute with the value of the name of the cairo plugin, gis_plugin. When the <embed> or <object>When the tag is a system plug-in module, the system plug-in module will determine whether the tag is used for the system plug-in module through the type attribute, and then load the dynamic library (here, the cairo plug-in) through the value of the loadfrom attribute (S63). After loading, the loading state of the plug-in instance (here, the cairo plug-in) is determined by calling pluginState, and when the plug-in is not in the loaded state, the onpluginstatechange interface of the plug-in is called. When the plug-in state changes to loaded, it means that the plug-in has been successfully loaded, and the application can communicate and interact with the cairo plug-in. At this time, the postMessage() sending message interface is called, and the message field corresponding to the interface provided by the plug-in and the field value are input into the interface, for example, when the message field action is set to "zoom-in", the map zoom-in interface in the plug-in library is called to realize the map zoom-in function. The implementation of the map display, translation, rotation and other functions is consistent with the zoom-in function. After the plug-in is loaded, the corresponding message is sent to the plug-in (S64).

[0049] As shown in Figure 2 , the figure shows the interaction logic diagram of the Web map application and the cairo plug-in. The Web map application transmits operation instructions (such as zooming and panning) to the system plug-in module through the "sending message interface", and the system plug-in module forwards the instructions to the cairo plug-in through the "message processing interface". The cairo plug-in calls the third-party library (such as the sandboxed map and drawing library) to complete the map rendering or interactive operation.

[0050] Figure 3 A development whole process diagram of a Web operating system local map application based on the cairo plug-in is shown. The map resources, fonts, etc. are deployed to the terminal through the "preprocessing module"; the third-party library is processed into a safe sandboxed library through the "sandboxing module"; the "module writing module" develops the osm-cairo module based on the sandboxed library; the "plug-in writing module" combines the osm-cairo module, the sandboxed library and the system plug-in module to write the plug-in source code; the "plug-in compiling module" compiles the source code into the cairo plug-in; and finally, the "Web application writing module" combines the system plug-in module to develop the Web map application, and realizes communication with the cairo plug-in.

[0051] The embodiment of the application discloses a Web operating system local map application method based on a cairo plug-in, and aims to solve the problems of the existing Web map application, such as the inability to safely and efficiently call a third-party map library written in C / C++, the lack of offline running capability, and poor performance experience. The method first deploys a map database map style sheet and font related files to a terminal device, lays a resource foundation for offline running, then performs sandboxing processing on a third-party C++ map library, realizes code and data access isolation to guarantee system safety, subsequently writes an osm-cairo module, creates a DrawMapWrapper tool class containing a map style storage and operation function, then writes map plug-in source code, realizes different interactive interfaces for map browsing, and compiles into a cairo dynamic plug-in, and finally writes a Web map application, dynamically loads the plug-in and communicates, and realizes map rendering and related operations. The method enables the Web map application to have complete offline running capability, breaks through the technical bottleneck of calling a C / C++ map library in a Web application, and simultaneously takes into account rendering performance and system safety, and is suitable for various Web operating system terminal devices.

[0052] Embodiment 2

[0053] In addition, a Web operating system local map application device based on a cairo plug-in is also provided, and the device comprises: A preprocessing module is configured to deploy map resources and fonts to a terminal device. A sandboxing module is configured to perform sandboxing processing on a third-party C++ map library. A module writing module is configured to write an osm-cairo module. A plug-in writing module is configured to write map plug-in source code, and encode to realize map browsing and interactive interfaces. A plug-in compiling module is configured to compile the map plug-in source code into a cairo plug-in. A Web application writing module is configured to write a Web map application, the Web map application communicates with the cairo plug-in, realizes map rendering and related operations.

[0054] The above embodiment serial numbers of the application are only for description, and do not represent the advantages and disadvantages of the embodiments.

[0055] Those skilled in the art can understand that all or part of the steps of the above embodiments can be completed by hardware, or by a program instructing related hardware to complete, and the program can be stored in a computer readable storage medium. The storage medium mentioned above can be a read-only memory, a disk or an optical disk. The above is only an optional embodiment of the application, and does not limit the application. Any modification, equivalent replacement, improvement, etc. within the spirit and principle of the application shall be included in the protection scope of the application.< / object> < / object> < / object> < / object> < / object> < / object>

Claims

1. A method for a cairo plug-in based web operating system native map application, characterized in that, The method comprises: Deploying map resources and fonts to a terminal device; Sandboxing a third-party C++ map library; Writing an osm-cairo module; Writing map plug-in source code to implement map browsing and interactive interfaces; Compiling the map plug-in source code into a cairo plug-in; Writing a Web map application that communicates with the cairo plug-in to implement map rendering and related operations.

2. The method of claim 1, wherein, The deployment of map resources and fonts to the terminal device comprises: Pushing a map database into the terminal device, wherein the map database is in a binary format generated by an Import tool of libosmscout, and the map database comprises a dat file storing original data of map elements, an idx index file, and an idmap ID mapping table; Pushing a map style sheet into the terminal device, wherein the map style sheet is a map style sheet file of libosmscout and is used to control information of a map; Pushing font-related files into the terminal device, wherein the font-related files comprise fonts.conf and conf.d, the fonts.conf is pushed into a system / etc / directory of the terminal device, and the conf.d is pushed into a system / etc / fonts / directory of the terminal device.

3. The method of claim 1, wherein, The sandboxing of the third-party C++ map library comprises: Sandboxing a third-party map library and dependent libraries of the third-party map library, wherein the third-party map library comprises libosmscout and libcairo. The sandboxing process comprises: Compiling source code of the third-party C++ map library into a wasm file; Converting the wasm file into a C file to isolate code and data access of the third-party C++ map library and a Web application, wherein the third-party C++ map library comprises the libosmscout, the libcairo, and dependent libraries.

4. The method of claim 1, wherein, The writing of the osm-cairo module comprises: Calling interfaces of sandboxed libosmscout and libcairo to create a map auxiliary tool class DrawMapWrapper; Constructing a map-related database through the DrawMapWrapper, wherein the map-related database stores styles and map operation functions during map drawing.

5. The method of claim 1, wherein, The writing of the map plug-in source code to implement map browsing and interactive interfaces comprises: Calling DrawMapWrapper.h and MapPainterCairo.h in a source file of the map plug-in source code; Implementing plug-in instance-related interfaces of a plug-in end and obtaining a local window object drawn by a Web application Html page through a system plug-in module; creating a cairo canvas and a cairo drawing context, wherein the cairo canvas is created by binding a raw pixel buffer of a native window of a terminal device to create the cairo canvas by calling a cairo_image_surface_create_for_data() method, and the cairo drawing context is created by calling a cairo_create() method; parsing and caching map parameters, including a map database path, a style sheet path, an image width, an image height, a latitude, a longitude, a zoom factor, and an image path, by using a DrawMapWrapper class; opening a map database by calling an OpenDatabase() method of the DrawMapWrapper class to obtain a database handle available for libosmscout, and loading one-screen map data into a memory of the terminal device by calling a LoadData() method of the DrawMapWrapper class; creating a brush by using a DrawMap() method of a MapPainterCairo class, wherein the DrawMap() method of the MapPainterCairo class takes a style configuration provided by the DrawMapWrapper as a parameter; implementing map browsing and interactive interfaces by combining a map drawing method of the MapPainterCairo class and a panning, zooming, and rotating method of the DrawMapWrapper class; registering a plugin-side message processing interface HandleMessage(), which is used to receive and process messages sent by a Web map application by using postMessage(), and to call corresponding map browsing and interactive interfaces according to message fields.

6. The method of claim 1, wherein, The compiling of the map plugin source code into the cairo plugin comprises: building all source codes into a dynamic library by using a CMake method to obtain the cairo plugin, wherein the all source codes include C source codes and header files corresponding to the map plugin source code, C source codes and header files of a system plugin module, C source codes and header files of a sandboxed pango library, C source codes and header files of a sandboxed cairo library, C source codes and header files of a sandboxed pixman library, and C source codes and header files of a sandboxed libosmscout library; in the process of building the dynamic library, linking a native window related library to provide the cairo plugin with the ability to access a graphic buffer associated with a surface.

7. The method of claim 1, wherein, The Web map application is written in native JavaScript code or a front-end JavaScript framework, communicates with the cairo plugin, and implements map rendering and related operations. The Web map application is written in native JavaScript code or a front-end JavaScript framework, communicates with the cairo plugin, and implements map rendering and related operations. The cairo plugin and related libraries of the cairo plugin are placed under a lib directory of the Web map application. Dynamic creation in JavaScript code of a Web Map application <embed> tag or <object>Labels, said <embed> Labels or <object>The type attribute of the tag is set to "application / bp-plugin" and the loadfrom attribute is set to the cairo plug-in name to load the cairo plug-in; The plug-in state monitoring interface provided by the system plug-in module is called to monitor the loading state of the cairo plug-in, when the loading state is "loaded", a message is sent to the cairo plug-in through postMessage(), and then a map related interface in the cairo plug-in is called to realize map rendering and related operations.

8. A cairo plug-in based web operating system native map application apparatus, characterized by, The device comprises: A preprocessing module is configured to deploy map resources and fonts to a terminal device. A sandboxing module is configured to sandbox a third-party C++ map library. A module compiling module is configured to compile an osm-cairo module. A plug-in compiling module is configured to compile the map plug-in source code into a cairo plug-in. A Web application compiling module is configured to compile a Web map application, which communicates with the cairo plug-in to realize map rendering and related operations. The computer readable storage medium stores a computer program, which is loaded and executed by the processor to realize the method for a cairo plug-in based Web operating system local map application according to any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, ​ < / object> < / object>

Images