A cross-platform Tianditu component encapsulation method and apparatus based on the uni-app X framework

Abstract

The application relates to the technical field of cross-platform application development, in particular to a cross-platform map component packaging method and device based on a uni-app X framework, which realizes unified packaging and calling of Android, iOS and Hongmeng multi-platform map components by constructing a four-layer packaging framework including an application layer, a communication layer, a WebView layer and a platform adaptation layer. The application layer completes component initialization, instruction verification and standardized processing; the communication layer realizes data interaction and coordinate conversion; the WebView layer executes map API loading, instance management, overlay rendering and event listening; the platform adaptation layer completes cross-platform permission management, WebView container adaptation and GPS position acquisition; finally, the application layer integrates data and packages TelchinaTdtUnix components to return results. The application solves the problems of poor adaptability, chaotic permission management and low interaction efficiency of the existing cross-platform map components, and improves the cross-platform compatibility, stability and development efficiency of the components.

Description

Technical Field

[0001] This invention relates to the field of geographic information service cross-platform development technology, and in particular to a cross-platform Tianditu component encapsulation method and apparatus based on the uni-app X framework. Background Technology

[0002] With the rapid development of mobile internet and IoT technologies, the demand for geographic information services in various mobile applications (such as smart cities, traffic navigation, and logistics monitoring) is increasing. Tianditu, as a national geographic information public service platform, provides high-precision map data covering the entire country and rich service interfaces (such as positioning, route planning, and POI query), making it an important choice for integrating geographic information functions into mobile applications.

[0003] However, in cross-platform mobile application development scenarios, developers face significant challenges: traditional map components are typically developed for specific platforms (e.g., native Android components are based on Java / Kotlin, native iOS components are based on Objective-C / Swift, and web components are based on HTML+JavaScript), failing to achieve true cross-platform reuse. This forces development teams to repeatedly develop similar map functions for different platforms, increasing development cycles and maintenance costs, and easily leading to inconsistencies in functionality and difficulties in version synchronization due to platform differences.

[0004] Meanwhile, the map API interface designs differ significantly across platforms (e.g., the interface parameters and calling methods of the Android Tianditu SDK and the iOS Tianditu SDK are different), lacking a unified interface specification. Developers need to learn multiple APIs, resulting in poor code reusability. In addition, different map services and devices use different coordinate systems (e.g., GPS devices output WGS84 coordinates, while Tianditu uses GCJ02 coordinates). Existing solutions require developers to manually handle coordinate conversions, increasing development complexity. The location permission handling mechanisms also differ across platforms (e.g., Android 13 and above require requesting precise location permissions, while iOS requires declaring the purpose of permissions through a Privacy description file). Existing solutions lack a unified permission management encapsulation, leading to complex and inconsistent permission handling logic.

[0005] In recent years, the uni-app X framework, as a new generation of cross-platform development framework, adopts the UTS (UniTypeScript) language, offering better performance and type safety features, and achieving true native rendering. Unlike traditional uni-app frameworks that rely on WebView rendering, uni-app X abandons the WebView rendering mode and turns to a native rendering architecture. This architectural upgrade makes the traditional WebView-based render.js solution no longer suitable: render.js, designed based on the WebView rendering architecture, cannot adapt to uni-app X's native rendering mode; the dual rendering mechanism relying on WebView leads to performance degradation and excessive memory consumption; using traditional JavaScript lacks the strong type checking and compile-time optimization of the UTS language; it requires maintaining two sets of code, Vue components and render.js scripts, resulting in high maintenance difficulty; and render.js runs in an independent rendering process, making debugging and troubleshooting difficult. Currently, there is a lack of native map component support for the uni-app X framework on the market, failing to meet the needs of cross-platform mobile applications for efficient and stable map functionality.

[0006] Therefore, this invention proposes a cross-platform Tianditu component encapsulation and device based on the uni-app X framework to solve the above problems. Summary of the Invention

[0007] To address the shortcomings of existing technologies, this invention develops a cross-platform map component encapsulation method and device based on the uni-app X framework. This invention can overcome the problems of poor platform compatibility of map components, high development and maintenance costs, inability to adapt to the native rendering architecture of uni-app X, complex coordinate processing, and inconsistent permission management in existing technologies.

[0008] On the one hand, the technical solution of this invention to solve the technical problem is a cross-platform Tianditu component encapsulation method based on the uni-app X framework, which includes the following steps:

[0009] S1. Developers can send instructions containing method names, parameter objects, and callback functions through mobile applications on Android, iOS, or HarmonyOS platforms to call the TelchinaTdtUnix Tianditu cross-platform encapsulation component.

[0010] S2. Based on the uni-appX cross-platform application development engine, a cross-platform Tianditu component encapsulation framework is built, which includes an application layer, a communication layer, a WebView layer, and a platform adaptation layer.

[0011] S3. The application layer receives the instructions from S1, first performs component initialization, then verifies and preprocesses the call instructions, and transmits the processing results to the communication layer and the platform adaptation layer respectively.

[0012] S4. The communication layer receives standardized instructions from the application layer and performs message queue management, data serialization, asynchronous call processing, and error retry mechanism operations respectively. After automatically converting the coordinate system output results of each operation, it is input to the WebView layer and also sent back to the application layer.

[0013] The S5 WebView layer parses the standardized message object transmitted by the communication layer after coordinate transformation through the HTML page container, presents the corresponding page according to the different running platforms, performs map operations and sends the operation results back to the communication layer, which then processes them and sends them back to the application layer.

[0014] S6. The platform adaptation layer receives the output from the application layer, calls the corresponding platform permission system according to the permission status, performs platform adaptation, selects the component to load the HTML page container, obtains the GPS location through the adaptation component and sends it back to the application layer.

[0015] S7 integrates the location data returned by the application layer and the execution results returned by the communication layer, encapsulates the TelchinaTdtUnix component containing the final results, and returns the encapsulated results to the developers.

[0016] The specific operations at the application layer are as follows:

[0017] (1) During component initialization, the attribute interface, event interface and permission status of the TelchinaTdtUnix component are defined and managed;

[0018] (2) After initialization, define a parameter validation class to receive instructions from the developer and perform method name validation, required parameter validation, parameter type validation and conversion, parameter preprocessing and formatting operations;

[0019] (3) Output the standardized parameter object, callback function and permission status, and input them into the communication layer and platform adaptation layer respectively.

[0020] The component initialization process is as follows:

[0021] The attribute parameters defined in the attribute interface include the Tianditu API key, map container height, map center point coordinates, map zoom level, and coordinate projection system, and default values ​​are set.

[0022] The events defined in the event interface include map loading complete event, map click event, location retrieval success event, and location retrieval failure event. All events return an empty type.

[0023] Permission status management is implemented through a permission management class, which includes permission status control members and permission status retrieval members. It also includes a permission branch processing class and a permission guidance class, which includes pop-up display members and jump setting members.

[0024] The specific operations in the communication layer are as follows:

[0025] The communication layer includes a message queue management module, a data serialization module, an asynchronous call processing module, and an error retry mechanism module;

[0026] The message queue management module is used to independently process concurrent requests and match results.

[0027] The data serialization module is used for the conversion between application-layer standardized JavaScript objects and JSON format strings;

[0028] The asynchronous call handling module is used to avoid blocking the main thread and provide a unified asynchronous operation interface;

[0029] The error retry mechanism module is used to automatically retry requests when the network is unstable or there is a temporary failure.

[0030] The specific operations in the WebView layer are as follows:

[0031] (1) Receive and parse instructions from the communication layer through the HTML page container, execute the corresponding events after receiving the instructions, and restore the received instructions to an operable object format, and then convert them into operations that can be executed by the WebView layer;

[0032] (2) Perform map function operations, including loading the Tianditu application programming interface API, managing map instances, rendering overlays, and handling event listeners;

[0033] The Tianditu API loading operation is used to import the map rendering and service capabilities provided by Tianditu; the map instance management operation is used to initialize the display and interaction of Tianditu; the overlay rendering operation is used to visualize and annotate the map; and the event listener handling operation is used to pass map interaction events across layers.

[0034] (3) The results of map function operation are encapsulated and then sent back to the communication layer. The communication layer processes the encapsulated results and then sends them back to the application layer.

[0035] The operations in the platform adaptation layer are as follows:

[0036] (1) Cross-platform unified permission management is carried out through the permission management module, which includes a permission status check unit and a permission request unit;

[0037] The permission status check unit determines whether map functionality is provided by checking the permission status flag; the permission request form calls the platform's permission request interface according to the platform type. On the Android platform, the precise location permission flag is passed through the permission request interface; on the iOS platform, the authorization request interface during use is called through the location manager; and on the HarmonyOS platform, the location permission flag is passed through the permission request interface.

[0038] The authorization result from the user is received through the callback mechanism of the permission request, and the permission status identifier variable is updated.

[0039] (2) The platform adaptation layer provides a unified HTML page rendering capability for different platforms in the WebView container;

[0040] (3) Obtain the user's current location information and unify the location data format through the location service module. The location service module includes an API call unit, a platform native positioning unit, and a location data processing unit.

[0041] 1) The API call unit obtains the device location through the browser and calls the browser's geolocation retrieval interface in the HTML page of the WebView layer;

[0042] 2) The platform's native positioning unit calls the platform's underlying positioning service. The Android platform obtains the device location through GPS, network, and sensor methods by integrating a positioning provider or location manager. The iOS platform obtains the device location through GPS, Wi-Fi, and cellular network methods by location manager. The HarmonyOS platform obtains the device location through GPS and network methods by geolocation manager.

[0043] After the platform's native positioning unit obtains the device's GPS coordinates, it returns a location object through a callback mechanism. The location object contains a coordinate sub-object and a timestamp field. The coordinate sub-object includes latitude, longitude, and precision fields.

[0044] The location data processing unit standardizes the format of location data, extracts latitude and longitude data from the coordinate sub-object of the location object, and converts the latitude and longitude into an array format, represented as [longitude, latitude].

[0045] The specific operation of S7 is as follows:

[0046] The application layer receives location data returned by the platform adaptation layer and execution results returned by the communication layer. It integrates and processes the received data, encapsulates the processed data into reactive state variables of the TelchinaTdtUnix component, triggers view updates through the reactive system, and returns the encapsulated results to the developer through method return values ​​or event emission mechanisms.

[0047] On the other hand, the present invention also provides a cross-platform Tianditu component encapsulation device based on the uni-app X framework, used to execute a cross-platform Tianditu component encapsulation method based on the uni-app X framework, including:

[0048] Framework building module: Used to build a cross-platform Tianditu component encapsulation framework based on the uni-app X cross-platform application development engine, including application layer, communication layer, WebView layer and platform adaptation layer;

[0049] Instruction receiving and preprocessing module: Used to receive instructions sent by developers, and perform component initialization, instruction verification and preprocessing;

[0050] Communication processing module: used to perform message queue management, data serialization, asynchronous call processing and error retry mechanism operations, as well as automatic coordinate system conversion;

[0051] Map operation execution module: used to parse standardized message objects, perform map operations, and return the execution results;

[0052] Platform Adaptation and Location Module: Used for platform permission management, platform adaptation, and GPS location acquisition;

[0053] Data integration and encapsulation module: Used to integrate location data and execution results, encapsulate the TelchinaTdtUnix component and return the results.

[0054] The effects described in the invention are merely those of the embodiments, and not all the effects of the invention. The above technical solutions have the following advantages or beneficial effects:

[0055] This invention, through the uni-app X framework and layered architecture design, enables a single UTS codebase to support Android, iOS, and HarmonyOS platforms simultaneously, eliminating the need for repetitive development for different platforms and resolving the poor platform compatibility issues of traditional map components. By providing a unified API interface, it shields the underlying platform differences, eliminating the need for developers to learn multiple platform APIs, thereby improving code reusability and development efficiency. The core business logic of this invention can be reused across platforms, reducing maintenance costs and avoiding the problem of version inconsistency across multiple platforms. This invention adopts a native rendering architecture adapted to uni-app X, abandoning the WebView rendering dependency of the traditional render.js solution. Through a hybrid architecture of "UTS component + WebView + platform adaptation," it perfectly adapts to the native rendering mode of uni-app X, solving problems such as rendering incompatibility, performance bottlenecks, lack of type safety, high maintenance difficulty, and debugging difficulties of the render.js solution. A unified permission management mechanism simplifies the permission application and state handling logic for different platforms, thereby improving development efficiency and user experience. Attached Figure Description

[0056] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used together with the embodiments of the invention to explain the invention and do not constitute a limitation thereof.

[0057] Figure 1 This is a schematic diagram of the method flow of the present invention. Detailed Implementation

[0058] To clearly illustrate the technical features of this solution, the invention will be described in detail below through specific implementation methods and in conjunction with the accompanying drawings.

[0059] Example 1

[0060] like Figure 1 As shown, a method for encapsulating a cross-platform Tianditu component based on the uni-app X framework includes the following steps:

[0061] S1. Developers can send instructions containing method names, parameter objects, and callback functions through mobile applications on Android, iOS, or HarmonyOS platforms to call the TelchinaTdtUnix Tianditu cross-platform encapsulation component.

[0062] S2. Based on the uni-appX cross-platform application development engine, a cross-platform Tianditu component encapsulation framework is built, which includes an application layer, a communication layer, a WebView layer, and a platform adaptation layer.

[0063] S3. The application layer receives the instructions from S1, first performs component initialization, then verifies and preprocesses the call instructions, and transmits the processing results to the communication layer and the platform adaptation layer respectively.

[0064] S4. The communication layer receives standardized instructions from the application layer and performs message queue management, data serialization, asynchronous call processing, and error retry mechanism operations respectively. After automatically converting the coordinate system output results of each operation, it is input to the WebView layer and also sent back to the application layer.

[0065] The S5 WebView layer parses the standardized message object transmitted by the communication layer after coordinate transformation through the HTML page container, presents the corresponding page according to the different running platforms, performs map operations and sends the operation results back to the communication layer, which then processes them and sends them back to the application layer.

[0066] S6. The platform adaptation layer receives the output from the application layer, calls the corresponding platform permission system according to the permission status, performs platform adaptation, selects the component to load the HTML page container, obtains the GPS location through the adaptation component and sends it back to the application layer.

[0067] S7 integrates the location data returned by the application layer and the execution results returned by the communication layer, encapsulates the TelchinaTdtUnix component containing the final results, and returns the encapsulated results to the developers.

[0068] In a specific implementation, the application layer operations are as follows:

[0069] (1) During component initialization, the attribute interface, event interface and permission status of the TelchinaTdtUnix component are defined and managed;

[0070] (2) After initialization, define a parameter validation class to receive instructions from the developer and perform method name validation, required parameter validation, parameter type validation and conversion, parameter preprocessing and formatting operations;

[0071] (3) Output the standardized parameter object, callback function and permission status, and input them into the communication layer and platform adaptation layer respectively.

[0072] In a specific implementation, the component initialization process is as follows:

[0073] The attribute parameters defined in the attribute interface include the Tianditu API key, map container height, map center point coordinates, map zoom level, and coordinate projection system, and default values ​​are set.

[0074] The events defined in the event interface include map loading complete event, map click event, location retrieval success event, and location retrieval failure event. All events return an empty type.

[0075] Permission status management is implemented through a permission management class, which includes permission status control members and permission status retrieval members. It also includes a permission branch processing class and a permission guidance class, which includes pop-up display members and jump setting members.

[0076] In a specific implementation, the operations in the communication layer are as follows:

[0077] The communication layer includes a message queue management module, a data serialization module, an asynchronous call processing module, and an error retry mechanism module;

[0078] The message queue management module is used to independently process concurrent requests and match results.

[0079] The data serialization module is used for the conversion between application-layer standardized JavaScript objects and JSON format strings;

[0080] The asynchronous call handling module is used to avoid blocking the main thread and provide a unified asynchronous operation interface;

[0081] The error retry mechanism module is used to automatically retry requests when the network is unstable or there is a temporary failure.

[0082] In a specific implementation, the specific operations within the WebView layer are as follows:

[0083] (1) Receive and parse instructions from the communication layer through the HTML page container, execute the corresponding events after receiving the instructions, and restore the received instructions to an operable object format, and then convert them into operations that can be executed by the WebView layer;

[0084] (2) Perform map function operations, including loading the Tianditu application programming interface API, managing map instances, rendering overlays, and handling event listeners;

[0085] 1) Loading the Tianditu Application Programming Interface (API): Introducing the map rendering and service capabilities provided by Tianditu, obtaining the map key and functional module configuration parameters through the URL parameter parsing mechanism, dynamically creating script tags and setting the resource address of the Tianditu API, inserting the script tags into the HTML document structure to trigger the browser to load the Tianditu API script, listening for the script loading completion event to confirm the API ready status, and loading the extended function library as needed according to the functional configuration parameters;

[0086] 2) Map Instance Management: Initialize the display and interaction of Tianditu. Create a map instance through the map builder and pass in the HTML container identifier and configuration object. The configuration object includes coordinate projection system, zoom level and center point coordinate parameters. If the center point is not specified, the current GPS location of the user is obtained through the positioning function. The positioning function internally calls the browser positioning interface to obtain the device's geographical location. Configure the center coordinates and zoom level of the map through the center point setting method of the map instance to complete the initial rendering.

[0087] 3) Overlay Rendering: Visualize and annotate the map. Based on the type identifier value in the overlay data object, call the corresponding Tianditu API constructor. If the type is a point marker, create a point marker object; if the type is a polyline, create a polyline object; if the type is a polygon, create a polygon object; if the type is a circle, create a circle object. If it contains coordinate information and the coordinate transformation identifier is true, call the coordinate transformation function to perform the conversion from WGS84 to GCJ02 coordinate system. The coordinate transformation function determines whether the coordinates are within China by the latitude and longitude range. For coordinates within China, perform a coordinate encryption algorithm based on ellipsoid parameters and eccentricity to calculate the offset. Render the overlay object onto the map using the overlay addition method of the map instance. Store the overlay object reference along with the unique identifier in a global array for unified management.

[0088] 4) Event Listener Processing: Perform cross-layer transmission of map interaction events. Register listeners for map interaction events through the event listener registration interface of the map instance. The event types to be listened to include single click, double click, touch start, zoom end, and drag end events. Extract key data from the event object in the callback function, construct a standardized event message object containing event type, event name, latitude and longitude coordinates, pixel coordinates, and timestamp fields, and send the event data to the communication layer through the message sending interface.

[0089] (3) The results of map function operation are encapsulated and then sent back to the communication layer. The communication layer processes the encapsulated results and then sends them back to the application layer.

[0090] In a specific implementation, the operations in the platform adaptation layer are as follows:

[0091] (1) Cross-platform unified permission management is carried out through the permission management module, which includes a permission status check unit and a permission request unit;

[0092] The permission status check unit determines whether map functionality is provided by checking the permission status flag; the permission request form calls the platform's permission request interface according to the platform type. On the Android platform, the precise location permission flag is passed through the permission request interface; on the iOS platform, the authorization request interface during use is called through the location manager; and on the HarmonyOS platform, the location permission flag is passed through the permission request interface.

[0093] The authorization result from the user is received through the callback mechanism of the permission request, and the permission status identifier variable is updated.

[0094] (2) The platform adaptation layer provides a unified HTML page rendering capability for different platforms in the WebView container;

[0095] (3) Obtain the user's current location information and unify the location data format through the location service module. The location service module includes an API call unit, a platform native positioning unit, and a location data processing unit.

[0096] 1) The API call unit obtains the device location through the browser and calls the browser's geolocation retrieval interface in the HTML page of the WebView layer;

[0097] 2) The platform's native positioning unit calls the platform's underlying positioning service. The Android platform obtains the device location through GPS, network, and sensor methods by integrating a positioning provider or location manager. The iOS platform obtains the device location through GPS, Wi-Fi, and cellular network methods by location manager. The HarmonyOS platform obtains the device location through GPS and network methods by geolocation manager.

[0098] After the platform's native positioning unit obtains the device's GPS coordinates, it returns a location object through a callback mechanism. The location object contains a coordinate sub-object and a timestamp field. The coordinate sub-object includes latitude, longitude, and precision fields.

[0099] The location data processing unit standardizes the format of location data, extracts latitude and longitude data from the coordinate sub-object of the location object, and converts the latitude and longitude into an array format, represented as [longitude, latitude].

[0100] In a specific implementation, the operation of S7 is as follows:

[0101] The application layer receives location data returned by the platform adaptation layer and execution results returned by the communication layer. It integrates and processes the received data, encapsulates the processed data into reactive state variables of the TelchinaTdtUnix component, triggers view updates through the reactive system, and returns the encapsulated results to the developer through method return values ​​or event emission mechanisms.

[0102] Example 2

[0103] A cross-platform Tianditu component encapsulation device based on the uni-app X framework, used to execute a cross-platform Tianditu component encapsulation method based on the uni-app X framework, including:

[0104] Framework building module: Used to build a cross-platform Tianditu component encapsulation framework based on the uni-app X cross-platform application development engine, including application layer, communication layer, WebView layer and platform adaptation layer;

[0105] Instruction receiving and preprocessing module: Used to receive instructions sent by developers, and perform component initialization, instruction verification and preprocessing;

[0106] Communication processing module: used to perform message queue management, data serialization, asynchronous call processing and error retry mechanism operations, as well as automatic coordinate system conversion;

[0107] Map operation execution module: used to parse standardized message objects, perform map operations, and return the execution results;

[0108] Platform Adaptation and Location Module: Used for platform permission management, platform adaptation, and GPS location acquisition;

[0109] Data integration and encapsulation module: Used to integrate location data and execution results, encapsulate the TelchinaTdtUnix component and return the results.

[0110] Example 3

[0111] In the street light management system, a unified Tianditu function needs to be implemented on the three platforms of Android, iOS and HarmonyOS, including street light location marking, inspection route planning, real-time positioning, etc.

[0112] The challenges to overcome in implementing this feature include: the lack of readily available Tianditu components under the uni-app X framework; the obsolescence of the traditional renderjs solution, requiring a completely new cross-layer communication mechanism; the need to support high-concurrency labeling of 500+ street light devices; and the necessity to support the HarmonyOS platform to meet domestic requirements.

[0113] To address the aforementioned issues, the four-layer architecture scheme of this invention (application layer, communication layer, WebView layer, and platform adaptation layer) successfully enables cross-platform encapsulation of Tianditu within the uni-app X framework. The specific core technical achievements are as follows:

[0114] The four-layer architecture proposed in this invention successfully solves the cross-layer communication problem under the uni-app X framework, as shown in Table 1.

[0115] Table 1. Actual Measured Results of the Architecture

[0116]

[0117] The smart street light management system covers 500+ street light devices and is used by 50+ maintenance personnel. After 6 months of actual operation, its functional integrity is shown in Table 2, its stability and reliability are shown in Table 3, and its user experience is shown in Table 4.

[0118] Table 2. Functional Integrity Test Results in the Smart Street Light Management System

[0119]

[0120] Table 3. Stability and Reliability Data Results of the Smart Street Light Management System

[0121]

[0122] Table 4 User Experience Improvement Data

[0123]

[0124] The results of development efficiency and economic benefits are shown in Tables 5 to 7.

[0125] Table 5 Development Efficiency Comparison Table

[0126]

[0127] Table 6 Economic Benefit Analysis Table

[0128]

[0129] Table 7 Long-Term Value Analysis Table

[0130]

[0131] In summary, addressing the inapplicability of traditional solutions under the uni-app X framework, a novel solution is proposed. Its layered architecture—comprising the application layer, communication layer, WebView layer, and platform adaptation layer—is currently the only Tianditu cross-platform component fully supporting the uni-app X framework. Real-world testing shows an 80% code reuse rate and a 75% reduction in maintenance costs. Compared to traditional WebView solutions, initialization speed is improved by 55%, rendering speed by 59%, concurrency handling by 900%, message loss rate by 99.9%, UI smoothness by 97%, and memory usage by 45%. The crash rate is 0.02%, five times better than industry standards, with a 99.7% request success rate and 99.99% coordinate accuracy. Zero memory leaks were observed in six months of actual operation. The development cycle is shortened by 61%, code volume is reduced by 67%, maintenance costs are reduced by 75%, and feature iteration speed is increased by 3 times. Over three years, this can save 331,000 yuan, a 73% reduction, significantly lowering long-term maintenance costs and resulting in a high return on investment.

[0132] This invention successfully solves the technical challenge of cross-platform encapsulation of Tianditu under the uni-app X framework, achieving significant results in terms of performance, reliability, development efficiency, and economic benefits. It has high practical and promotional value, and provides a mature solution for the development of map applications under the uni-app X framework.

[0133] Although the specific embodiments of the invention have been described above in conjunction with the accompanying drawings, this is not intended to limit the scope of protection of the invention. Based on the technical solutions of the invention, various modifications or variations that can be made by those skilled in the art without creative effort are still within the scope of protection of the invention.

Claims

1. A method for encapsulating a cross-platform Tianditu component based on the uni-app X framework, characterized by the following steps: as follows: S1. Developers can send instructions containing method names, parameter objects, and callback functions through mobile applications on Android, iOS, or HarmonyOS platforms to call the TelchinaTdtUnix Tianditu cross-platform encapsulation component. S2. Based on the uni-appX cross-platform application development engine, build the TelchinaTdtUnix Tianditu cross-platform encapsulation component framework, which includes an application layer, a communication layer, a WebView layer, and a platform adaptation layer; S3. The application layer receives the instructions from S1, first performs component initialization, then verifies and preprocesses the call instructions, and transmits the processing results to the communication layer and the platform adaptation layer respectively. The specific operations at the application layer are as follows: (1) During component initialization, the attribute interface, event interface and permission status of the TelchinaTdtUnix Tianditu cross-platform encapsulation component are defined and managed; (2) After initialization, define a parameter validation class to receive instructions from the developer and perform method name validation, required parameter validation, parameter type validation and conversion, parameter preprocessing and formatting operations; (3) Output the standardized parameter object, callback function and permission status, and input them to the communication layer and platform adaptation layer respectively; S4. The communication layer receives the processing results output by the application layer, performs message queue management, data serialization, asynchronous call processing, and error retry mechanism operations respectively, and after automatically converting the coordinate system output results of each operation, inputs them to the WebView layer and also sends them back to the application layer. The S5 WebView layer parses the standardized message object transmitted by the communication layer after coordinate transformation through the HTML page container, presents the corresponding page according to the different running platforms, performs map operations and sends the operation results back to the communication layer, which then processes them and sends them back to the application layer. Perform map operations, including loading the Tianditu application programming interface (API), managing map instances, rendering overlays, and handling event listeners; The Tianditu API loading operation is used to import the map rendering and service capabilities provided by Tianditu; the map instance management operation is used to initialize the display and interaction of Tianditu; the overlay rendering operation is used to visualize and annotate the map; and the event listener handling operation is used to pass map interaction events across layers. S6. The platform adaptation layer receives the output from the application layer, calls the corresponding platform permission system according to the permission status, performs platform adaptation, selects the component to load the HTML page container, obtains the GPS location through the adaptation component and sends it back to the application layer. S7 integrates the location data returned by the application layer and the execution results returned by the communication layer, encapsulates the TelchinaTdtUnix Tianditu cross-platform encapsulation component containing the final results, and returns the encapsulation results to the developers.

2. The method for encapsulating a cross-platform Tianditu component based on the uni-app X framework according to claim 1, characterized in that, The component initialization process is as follows: The attribute parameters defined in the attribute interface include the Tianditu API key, map container height, map center point coordinates, map zoom level, and coordinate projection system, and default values ​​are set. The events defined in the event interface include map loading complete event, map click event, location retrieval success event, and location retrieval failure event. All events return an empty type. Permission status management is implemented through a permission management class, which includes permission status control members and permission status retrieval members. It also includes a permission branch processing class and a permission guidance class, which includes pop-up display members and jump setting members.

3. The method for encapsulating a cross-platform Tianditu component based on the uni-app X framework according to claim 1, characterized in that, The specific operations in the communication layer are as follows: The communication layer includes a message queue management module, a data serialization module, an asynchronous call processing module, and an error retry mechanism module; The message queue management module is used to independently process concurrent requests and match results. The data serialization module is used for the conversion between application-layer standardized JavaScript objects and JSON format strings; The asynchronous call handling module is used to avoid blocking the main thread and provide a unified asynchronous operation interface; The error retry mechanism module is used to automatically retry requests when the network is unstable or there is a temporary failure.

4. The method for encapsulating a cross-platform Tianditu component based on the uni-app X framework according to claim 1, characterized in that, The specific operations in the WebView layer are as follows: (1) Receive and parse the standardized message object transmitted by the communication layer through the HTML page container after coordinate transformation, execute the corresponding event after receiving the standardized message object, and restore the received standardized message object to an operable object format, and then convert it into an operation that can be executed by the WebView layer; (2) Perform map operations, including loading the Tianditu application programming interface (API), managing map instances, rendering overlays, and handling event listeners; 1) Loading the Tianditu Application Programming Interface (API): Introducing the map rendering and service capabilities provided by Tianditu, obtaining the map key and functional module configuration parameters through the URL parameter parsing mechanism, dynamically creating script tags and setting the resource address of the Tianditu API, inserting the script tags into the HTML document structure to trigger the browser to load the Tianditu API script, listening for the script loading completion event to confirm the API ready status, and loading the extended function library as needed according to the functional configuration parameters; 2) Map Instance Management: Initialize the display and interaction of Tianditu. Create a map instance through the map builder and pass in the HTML container identifier and configuration object. The configuration object includes coordinate projection system, zoom level and center point coordinate parameters. If the center point is not specified, the current GPS location of the user is obtained through the positioning function. The positioning function internally calls the browser positioning interface to obtain the device's geographical location. Configure the center coordinates and zoom level of the map through the center point setting method of the map instance to complete the initial rendering. 3) Overlay Rendering: Visualize and annotate the map. Based on the type identifier value in the overlay data object, call the corresponding Tianditu API constructor. If the type is a point marker, create a point marker object; if the type is a polyline, create a polyline object; if the type is a polygon, create a polygon object; if the type is a circle, create a circle object. If it contains coordinate information and the coordinate transformation identifier is true, call the coordinate transformation function to perform the conversion from WGS84 to GCJ02 coordinate system. The coordinate transformation function determines whether the coordinates are within China by the latitude and longitude range. For coordinates within China, perform a coordinate encryption algorithm based on ellipsoid parameters and eccentricity to calculate the offset. Render the overlay object onto the map using the overlay addition method of the map instance. Store the overlay object reference along with the unique identifier in a global array for unified management. 4) Event Listener Processing: Perform cross-layer transmission of map interaction events. Register listeners for map interaction events through the event listener registration interface of the map instance. The event types to be listened to include single click, double click, touch start, zoom end, and drag end events. Extract key data from the event object in the callback function, construct a standardized event message object containing event type, event name, latitude and longitude coordinates, pixel coordinates, and timestamp fields, and send the event data to the communication layer through the message sending interface. (3) The map operation execution result is encapsulated and then sent back to the communication layer. The communication layer processes the encapsulated result and then sends it back to the application layer.

5. The method for encapsulating a cross-platform Tianditu component based on the uni-app X framework according to claim 1, characterized in that, The operations in the platform adaptation layer are as follows: (1) Cross-platform unified permission management is carried out through the permission management module, which includes a permission status check unit and a permission request unit; The permission status check unit determines whether map functionality is provided by checking the permission status flag. The permission request unit calls the platform's permission request interface based on the platform type. On the Android platform, the precise location permission identifier is passed through the permission request interface. On the iOS platform, the authorization request interface during use is called through the location manager. On the HarmonyOS platform, the location permission identifier is passed through the permission request interface. The authorization result from the user is received through the callback mechanism of the permission request, and the permission status identifier variable is updated. (2) The platform adaptation layer provides a unified HTML page rendering capability for different platforms in the WebView container; (3) Obtain the user's current location information and unify the location data format through the location service module. The location service module includes an API call unit, a platform native positioning unit, and a location data processing unit. 1) The API call unit obtains the device location through the browser and calls the browser's geolocation retrieval interface in the HTML page of the WebView layer; 2) The platform's native positioning unit calls the platform's underlying positioning service. The Android platform obtains the device location through GPS, network, and sensor methods by integrating a positioning provider or location manager. The iOS platform obtains the device location through GPS, Wi-Fi, and cellular network methods by location manager. The HarmonyOS platform obtains the device location through GPS and network methods by geolocation manager. After the platform's native positioning unit obtains the device's GPS coordinates, it returns a location object through a callback mechanism. The location object contains a coordinate sub-object and a timestamp field. The coordinate sub-object includes latitude, longitude, and precision fields. The location data processing unit standardizes the format of location data, extracts latitude and longitude data from the coordinate sub-object of the location object, and converts the latitude and longitude into an array format, represented as [longitude, latitude].

6. The method for encapsulating a cross-platform Tianditu component based on the uni-app X framework according to claim 1, characterized in that, The specific operation of S7 is as follows: The application layer receives location data returned by the platform adaptation layer and execution results returned by the communication layer. It integrates and processes the received data, encapsulates the processed data into reactive state variables of the TelchinaTdtUnix Tianditu cross-platform encapsulation component, triggers view updates through the reactive system, and returns the encapsulation results to the developer through method return values ​​or event emission mechanisms.

7. A cross-platform Tianditu component encapsulation device based on the uni-app X framework, used to execute the cross-platform Tianditu component encapsulation method based on the uni-app X framework as described in any one of claims 1 to 6, characterized in that, include: Framework building module: Used to build the TelchinaTdtUnix Tianditu cross-platform encapsulation component framework based on the uni-app X cross-platform application development engine, including application layer, communication layer, WebView layer and platform adaptation layer; Instruction receiving and preprocessing module: Used to receive instructions sent by developers, and perform component initialization, instruction verification and preprocessing; Communication processing module: used to perform message queue management, data serialization, asynchronous call processing and error retry mechanism operations, as well as automatic coordinate system conversion; Map operation execution module: used to parse standardized message objects, perform map operations, and return the execution results; Platform Adaptation and Location Module: Used for platform permission management, platform adaptation, and GPS location acquisition; Data integration and encapsulation module: Used to integrate location data and execution results, encapsulate the TelchinaTdtUnix Tianditu cross-platform encapsulation component and return the results.

Images