Local three-dimensional tile data browser loading method and system based on service worker interception

Abstract

The application provides a local three-dimensional tile data browser loading method and system based on ServiceWorker interception, and belongs to the technical field of browser offline loading schemes of 3DTiles format tile data. The method comprises the following steps: listening to a browser page loading event, registering a ServiceWorker and waiting for an active state, performing a query operation on a CacheAPI after activation, detecting whether a three-dimensional tile set entry file cache entry exists, and generating cache detection result data; a browser security mechanism restricts direct access of a webpage to a local file, and a three-dimensional engine (such as Cesium) requests a tile through an HTTP protocol. Through the technical combination of ServiceWorker interception of an HTTP request, CacheAPI caching of a local file and virtual URL path mapping, the three-dimensional engine can access the local file through a standard HTTP request format, and the sandbox restriction is broken while no native layer bridge is introduced.

Description

Technical Field

[0001] This invention proposes a method and system for loading local 3D tile data in a browser based on ServiceWorker interception, belonging to the technical field of browser-side offline loading solutions for 3DTiles format tile data. Background Technology

[0002] In applications such as digital twins, smart cities, low-altitude drones, and geographic information visualization, 3D tile data, as the mainstream format for carrying 3D geospatial data, is increasingly demanding for offline loading and browser-side rendering. In practice, users often need to quickly preview locally stored 3D tile datasets in a browser environment, rather than uploading the data to a remote server for processing.

[0003] Most existing offline 3D tile loading solutions rely on native applications or backend services (e.g., CN121742949A). Some solutions map the offline tile storage directory to an embedded HTTP server on the mobile device, load the rendering engine's entry page using WebView, and then use a multi-threaded scheduling unit to download tile data in parallel and write it to the local directory. The rendering engine then requests tiles from the embedded HTTP server based on the current view to complete the 3D offline rendering. This type of solution requires starting the embedded HTTP server on the Android device, relies on a hybrid architecture of native applications and WebView, cannot run in a pure browser environment, requires users to install specific applications to use, has high deployment costs, and is difficult to adapt across platforms. Another solution addresses the problem that browser security sandbox mechanisms make it difficult for web pages to actively obtain local files (e.g., CN117194830A), by converting the local path into a local file protocol address, with WebView intercepting local file requests initiated by the web page and returning the file based on a pre-built mapping library. This type of solution relies on native layer bridging and pre-built URL-to-local file mapping relationships, and cannot support a pure frontend operation process where users select local folders in real time and load them immediately.

[0004] At the front-end rendering level of 3D tile data, existing technologies mostly adopt a front-end-back-end collaborative approach (such as CN121904299A and CN122049259A). The back-end server generates and returns a 3D tile set based on the viewport range and level of detail parameters. The front-end rendering engine loads the tile set and combines it with business indicator data for 3D visualization. Some solutions, for large-scale 3D tile data, convert the OSGB model to 3DTiles format and use HBase and Redis caching mechanisms and a batch asynchronous loading strategy for digital sandbox display. All of these solutions rely on the back-end server to generate or cache tile data. The browser lacks a local caching persistence mechanism, requiring users to re-request or re-upload data each time they access the page. After refreshing the page, users need to select the folder or re-upload, resulting in a poor user experience. Furthermore, existing solutions involve multiple technical aspects such as Android native application development, embedded HTTP server deployment, and back-end database configuration, resulting in a complex technology stack and high maintenance costs, making it difficult to meet the actual needs of rapid verification or lightweight deployment.

[0005] Furthermore, the browser's security sandbox mechanism severely restricts webpage access to local files. 3D rendering engines request tile data via the HTTP protocol, but local files cannot be directly accessed by this HTTP request. Existing solutions to overcome sandbox restrictions all require the introduction of native layer interaction or pre-configured mappings, lacking the complete capability for users to independently select folders in a pure browser environment, with the system automatically traversing the cache and rendering in real-time. Therefore, there is an urgent need for a pure front-end architecture method for loading local 3D tile data that can overcome browser sandbox restrictions with zero installation and zero backend dependencies, while providing cache persistence and automatic loading capabilities. Summary of the Invention

[0006] This invention provides a method and system for loading local 3D tile data using a ServiceWorker-based interceptor, in order to solve the problems mentioned in the background section above: The present invention proposes a local 3D tile data browser loading method based on ServiceWorker interception, the method comprising: S1. Listen for browser page loading events, register a ServiceWorker and wait for activation. After activation, perform a query operation on the CacheAPI to check if there is a cache entry for the 3D tile set entry file and generate cache detection result data. S2. Determine the cache detection result data. If it is determined that there is a valid cache entry, generate an automatic loading trigger signal directly. If it is determined that there is no valid cache entry, respond to the user-triggered folder selection operation, call the file system integration interface to obtain the directory handle of the target folder, recursively traverse all subdirectories and files under the directory handle, read the binary data stream of each file, encapsulate the binary data stream into a response object using the file relative path as the index key and store it in CacheAPI, and generate a file traversal completion signal. S3. In response to the file traversal completion signal, query the CacheAPI again to see if there is a cache entry for the 3D tile set entry file. If the query result is missing, generate an error message and terminate the process. If the query result is present, generate a data validity verification pass signal. S4. In response to the data validity verification pass signal, call the 3D rendering engine interface, pass in the preset virtual URL prefix and the 3D tile set entry file path, and generate a tile loading request sequence. S5. Intercept each HTTP request in the tile loading request sequence, extract the relative path part of the request path, and perform a matching search in CacheAPI using the relative path as the query key. If the corresponding response object is found, return the file content; otherwise, return an error response. The S6 3D rendering engine receives the returned tile file content, parses it, constructs the scene, controls the camera viewpoint to position it in the model area, and generates scene rendering completion status and statistics on the number of cached files.

[0007] This invention proposes a system for implementing a local 3D tile data browser loading method based on ServiceWorker interception as described above, the system comprising: Folder selection module: In response to a user-triggered folder selection operation, it calls the browser's FileSystemAccessAPI's showDirectoryPicker method to obtain the FileSystemDirectoryHandle of the target folder; based on this directory handle, it generates entry data for subsequent file traversal and passes this entry data to the file traversal cache module; The file traversal cache module receives the FileSystemDirectoryHandle passed by the folder selection module, recursively traverses all subdirectories and files corresponding to the handle, reads the binary content of each file, infers the Content-Type header information based on the file extension, stores the file relative path as the key and the file content Response containing the Content-Type as the value in the CacheAPI, and generates a file traversal completion signal and cache write data. The 3D rendering engine responds to the data validity verification signal by calling the Cesium3DTileset.fromUrl interface, passing in the preset virtual URL prefix and the path to the 3D tile set entry file; based on this path, it initiates an HTTP request sequence, requesting the 3D tile data file format of each level in turn according to the tile index structure in the 3D tile set entry file, generating a tile loading request sequence; Request interception module: Registers ServiceWorker's fetch event listener to intercept all HTTP requests that begin with a preset virtual URL prefix; extracts the relative path portion after the virtual prefix in the request path, and passes this relative path as the cache query key to the cache matching module to generate request interception and query key transmission data; Cache matching module: Receives the cache query key passed by the request interception module, opens the specified cache storage space of CacheAPI; performs matching retrieval with the query key as the index; if a corresponding Response exists, it returns the file content; if not, it returns a 404 error response and generates cache matching result data. The cache storage module receives the binary content (Response) of the file traversal cache module, establishes a one-to-one mapping relationship between cache entries and Responses using the file relative path as the key, and each Response contains file data and Content-Type header information; it responds to the query request of the cache matching module, performs matching retrieval based on the relative path query key, returns the corresponding Response or null value, and generates cache storage and response data.

[0008] Beneficial effects of this invention: (1) Pure browser front-end architecture, zero installation, zero back-end dependencies: Existing technologies (CN121742949A) require starting an embedded HTTP server on the Android device, relying on a hybrid architecture of native applications and WebView; CN117194830A relies on a pre-built mapping library in the native application. This invention only requires static web page files (HTML, JavaScript, ServiceWorker scripts) to be deployed to an HTTPS server, without requiring the installation of any applications, configuration of a backend server, or starting an embedded HTTP service. Users can use it simply by opening a webpage, with high cross-platform compatibility and extremely low deployment costs.

[0009] (2) Bypassing browser security sandbox restrictions to enable local file HTTP request access: Browser security mechanisms restrict web pages from directly accessing local files, while 3D engines (such as Cesium) request tiles via the HTTP protocol. This invention uses a combination of techniques—ServiceWorker intercepting HTTP requests, CacheAPI caching local files, and virtual URL path mapping—to enable 3D engines to access local files via standard HTTP request formats, overcoming sandbox restrictions without introducing native layer bridging.

[0010] (3) Users select folders in real time, and the files are loaded and rendered instantly: Existing technologies (CN121742949A) require tiles to be pre-downloaded to a fixed directory; CN117194830A requires a pre-configured mapping library. This invention calls the `showDirectoryPicker` method of the `FileSystemAccessAPI`, allowing users to select any local folder in real time. The system immediately traverses and caches the files, achieving instant loading and rendering without preprocessing or pre-configuration.

[0011] (4) Cache persistence, select persistent availability once: Existing web-based solutions rely on backend server caching, requiring users to re-request or upload data each time they visit the site. This invention utilizes a browser-side local caching mechanism: it employs CacheAPI as the HTTP request / response cache storage for local caching of 3D engine tile data; and it uses IndexedDB to persistently store folder handle metadata for automatic cache rebuilding across sessions. When the page is refreshed or reopened, it automatically detects and loads cached data, achieving a user experience of one-time selection and persistent availability.

[0012] (5) Extremely simple deployment, compatible with any HTTPS static hosting service: The solution of this invention requires only three static files (index.html, main.js, sw.js) and can be deployed to any HTTPS static hosting service such as GitHub Pages, Vercel, and Netlify. It requires no server-side configuration, no database support, and no native application development, making it suitable for scenarios such as rapid verification, lightweight deployment, and demonstration. Attached Figure Description

[0013] Figure 1 This is a flowchart of the method described in this invention; Figure 2 This is a schematic diagram of the system described in this invention. Detailed Implementation

[0014] The preferred embodiments of the present invention will be described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0015] One embodiment of the present invention, such as Figure 1 As shown, a method for loading local 3D tile data in a browser based on ServiceWorker interception is described, the method comprising: S1. Listen for browser page loading events, register a ServiceWorker and wait for activation. After activation, perform a query operation on the CacheAPI to check if there is a cache entry for the 3D tile set entry file and generate cache detection result data. S2. Determine the cache detection result data. If it is determined that there is a valid cache entry, generate an automatic loading trigger signal directly. If it is determined that there is no valid cache entry, respond to the user-triggered folder selection operation, call the file system integration interface to obtain the directory handle of the target folder, recursively traverse all subdirectories and files under the directory handle, read the binary data stream of each file, encapsulate the binary data stream into a response object using the file relative path as the index key and store it in CacheAPI, and generate a file traversal completion signal. S3. In response to the file traversal completion signal, query the CacheAPI again to see if there is a cache entry for the 3D tile set entry file. If the query result is missing, generate an error message and terminate the process. If the query result is present, generate a data validity verification pass signal. S4. In response to the data validity verification pass signal, call the 3D rendering engine interface, pass in the preset virtual URL prefix and the 3D tile set entry file path, and generate a tile loading request sequence. S5. Intercept each HTTP request in the tile loading request sequence, extract the relative path part of the request path, and perform a matching search in CacheAPI using the relative path as the query key. If the corresponding response object is found, return the file content; otherwise, return an error response. The S6 3D rendering engine receives the returned tile file content, parses it, constructs the scene, controls the camera viewpoint to position it in the model area, and generates scene rendering completion status and statistics on the number of cached files.

[0016] The working principle and effects of the above technical solution are as follows: By intercepting requests using ServiceWorker and caching via CacheAPI, the convenience of loading local 3D tiles is improved, allowing users to use them directly in their browsers without installing any applications. Deployment complexity is reduced, requiring only static web page files to run, saving the development and maintenance costs of backend servers and native applications. Data privacy protection is enhanced, as all file reading and caching are completed locally and are not uploaded to any server. The hassle of repetitive user operations is reduced, as cached data is automatically loaded when the page is refreshed or reopened, eliminating the need to repeatedly select folders. Cross-platform adaptation challenges caused by relying on native applications are avoided, as are browser sandbox restrictions preventing direct access to local files. This solution satisfies users' need for quick previewing of local 3D data while ensuring that data remains on the local device throughout the process.

[0017] In one embodiment of the present invention, S1 includes: S11. Listen to the browser's DOMContentLoaded event, trigger the ServiceWorker registration process, wait for the registration to complete and enter the activation state, and generate the ServiceWorker activation state signal. S12. After activation, perform initialization operations on CacheAPI, create a cache storage space with the specified name, and generate a cache storage space initialization completion signal; S13. Query whether there is a cache entry for the 3D tile set entry file in the cache storage space, record the query results, and generate cache entry existence detection data; S14. Mark the existence detection data of cache entries. If they exist, mark them as valid cache; if they do not exist, mark them as invalid cache, and generate cache detection result data.

[0018] The working principle and effects of the above technical solution are as follows: By listening to browser page load events and promptly registering ServiceWorkers and waiting for activation, the response efficiency of subsequent cache queries and request interception is improved, avoiding the problem of loading process lag caused by ServiceWorkers not being ready. Upon activation, the CacheAPI is immediately initialized and a cache space with a specified name is created, reducing the risk of multiple caches being confused and enhancing the isolation of cached data. The cache entries of the 3D tile set entry file are queried in advance and their validity is marked, reducing the tedious operation of users repeatedly selecting folders and avoiding the situation where invalid folders are mistakenly loaded. This not only quickly triggers the automatic loading process to improve efficiency but also accurately identifies the cache status to prevent erroneous data from entering the rendering stage.

[0019] In one embodiment of the present invention, S2 includes: S21. Determine the cache detection result data. If it is marked as valid cache, generate an automatic loading trigger signal and skip the folder selection process. S22. If marked as invalid cache, in response to the user-triggered folder selection operation, call the showDirectoryPicker method of the file system integration interface, obtain the FileSystemDirectoryHandle of the target folder, generate a directory handle and obtain the completion signal. S23. Recursively traverse all subdirectories and files based on directory handles, call the getFile method for each file entry to obtain a File object, read the binary data stream, and generate a collection of file binary data streams. S24. Using the file relative path as the index key, encapsulate each binary data stream with a response object containing a Content-Type header, store it in the specified cache storage space of CacheAPI, and generate a file traversal completion signal.

[0020] The working principle and effects of the above technical solution are as follows: By intelligently judging the cache detection results, the loading efficiency of 3D tile data is effectively improved. When a valid cache is detected, the cumbersome selection process can be skipped and the process can be started directly. This reduces the user's interaction cost, eliminating the repetitive work of reselecting a folder every time the page is opened. It enhances the security of local file access by obtaining directory handles through calling standard file system integration interfaces, avoiding the permission barriers that prevent browsers from directly reading local paths in traditional methods. It reduces traversal omissions caused by complex folder structures, ensuring that all subdirectory files are fully captured through recursive traversal. It avoids rendering crashes caused by missing entry files, ensuring that all data entering the loading process is valid data. It improves the smoothness of the experience for existing users through automatic loading, while ensuring a high success rate for new users' first use through manual selection.

[0021] In one embodiment of the present invention, step S23 includes: The `entries` method is called based on the directory handle to obtain all iterators of entries in the current directory. Each entry contains a category identifier and name information, generating a set of directory entry iterators. For each entry in the directory entry iterator set, determine its category. If it is determined to be a subdirectory, recursively call the traversal process to enter the next level of directory. If it is determined to be a file, enter the file processing branch and generate the entry classification processing result. Call the getFile method on the file entry in the file processing branch to obtain the corresponding File object instance and generate a collection of File objects; For each File object instance, call the arrayBuffer method to read the complete binary data stream and generate a single file binary data stream; All individual file binary data streams are aggregated in hierarchical order according to the original directory structure to generate a complete set of file binary data streams.

[0022] The working principle and effects of the above technical solution are as follows: By calling the `entries` method to obtain an iterator for directory entries, the accuracy of folder traversal is improved, enabling complete capture of file and subdirectory information at each level. The risk of data omission due to excessively deep directory levels is reduced, and recursive traversal ensures that no nested files are missing. The standardization of the file reading process is enhanced; each entry is first classified and then processed separately, avoiding misclassifying subdirectories as files and causing reading failures. The generation of invalid data is reduced; the `getFile` method is only called for file-type entries, preventing erroneous operations on non-file resources. Tile parsing errors caused by incomplete binary data streams are avoided; the `arrayBuffer` method reads complete data at once, ensuring the correct model structure during rendering. It can flexibly handle complex folder structures organized arbitrarily by users while maintaining the original directory hierarchy, ensuring the accuracy of subsequent path indexing.

[0023] In one embodiment of the present invention, S3 includes: S31. In response to the file traversal completion signal, query again whether there is a 3D tile set entry file cache entry in the specified cache storage space of CacheAPI, and generate secondary query result data; S32. Determine the results of the second query. If the query result is missing, generate an error message and terminate the current process, releasing the cached resources that have been occupied. S33. If the query result is found to exist, verify the format integrity of the 3D tile set entry file, check whether it contains a valid tile index structure, and generate a format integrity verification pass signal. S34. Mark the format integrity verification pass signal to generate a data validity verification pass signal.

[0024] The working principle and effects of the above technical solution are as follows: By querying the entry file in the cache again after file traversal, the accuracy of cache validity verification is improved, avoiding misjudgments caused by accidental omissions during the first query. If the entry file is found to be missing, the process is immediately terminated and the occupied cache resources are released, reducing the consumption of invalid resources and preventing subsequent loading processes from crashing due to incomplete data. Further verification of the format integrity of existing entry files and checking the validity of the tile index structure enhances the reliability of the data to be loaded and reduces the probability of structural errors during parsing. Marking the format verification pass signal ensures that only qualified data enters the rendering stage and quickly triggers subsequent loading processes, improving overall operating efficiency.

[0025] In one embodiment of the present invention, step S4 includes: S41. In response to the data validity verification pass signal, call the Cesium3DTileset.fromUrl interface of the 3D rendering engine, pass in the preset virtual URL prefix and the 3D tile set entry file path, and generate a tile loading request sequence; S42. Configure the parameters of the tile loading request sequence, set the maximumScreenSpaceError parameter to a high-precision value in the range of 2 to 4, set the maximumMemoryUsage parameter to a memory limit value in the range of 512 to 1024, and generate the configured tile loading request sequence. S43. Preprocess the configured tile loading request sequence, parse the tile hierarchy structure in the entry file, and generate a list of HTTP request paths for each level of tile; S44. Concatenate the list of HTTP request paths for each level of tile with the virtual URL prefix to generate a complete tile loading request sequence.

[0026] The working principle and effects of the above technical solution are as follows: By verifying the validity of response data through signals and calling the 3D rendering engine interface, the accuracy of rendering requests is improved, allowing the engine to correctly identify the entry point of local 3D tile data. Browser sandbox restrictions on local file access are reduced, and virtual URL prefixes bypass the permission barrier for directly reading local paths. The rationality of parameter configuration is enhanced, setting the maximum screen space error to a high-precision range of 2 to 4, while controlling the memory usage limit within a reasonable range of 512 to 1024, ensuring model detail while avoiding resource waste. Invalid requests are reduced; after preprocessing and parsing the hierarchical structure of the entry file, the generated path list consists entirely of valid tiles, eliminating meaningless requests. 404 responses caused by path concatenation errors are avoided, as the complete request sequence can accurately match cached entries in the cache. This satisfies the rendering requirements of high-precision 3D models while preventing excessive memory usage from causing page lag.

[0027] In one embodiment of the present invention, S44 includes: Obtain the list of HTTP request paths for each layer of tiles generated by preprocessing, where each path corresponds to the storage location of the tile file in the local folder, and generate a set of layer tile paths; Read the preset virtual URL prefix string, verify whether the prefix format conforms to the absolute path specification that starts with a forward slash, and generate a standardized virtual URL prefix; Each relative path in the hierarchical tile path set is concatenated with a standardized virtual URL prefix, and a prefix string is added before each relative path to generate a list of tile request paths with prefixes. Bind the list of tile request paths at each level with the metadata information of the tile loading request to generate a complete sequence of tile loading requests containing the path and request method.

[0028] The working principle and effects of the above technical solution are as follows: By obtaining the hierarchical tile path list and validating the virtual URL prefix format, the standardization of request paths is improved, ensuring that each path conforms to the syntax requirements of HTTP requests. This reduces the probability of 404 responses caused by path concatenation errors, preventing invalid requests from consuming network resources. It enhances the matching degree between requests and cached entries in the cache, ensuring that the concatenated path accurately corresponds to the locally stored tile file. It reduces the number of illegal paths entering the loading process by removing non-compliant entries, ensuring the validity of subsequent requests. It avoids engine parsing anomalies caused by prefix format errors, preventing rendering process interruptions. Ultimately, it allows the 3D rendering engine to successfully initiate compliant requests and ensures that the ServiceWorker accurately intercepts and returns the corresponding cached data, improving overall loading efficiency.

[0029] In one embodiment of the present invention, step S5 includes: S51. Intercept each HTTP request in the tile loading request sequence, detect whether the request path starts with a preset virtual URL prefix, and generate a request path prefix matching result. S52. For requests with a positive result for matching the request path prefix, extract the relative path portion after the virtual URL prefix in the request path and generate a relative path lookup key. S53. Using the relative path query key as an index, perform a matching search in the specified cache storage space of CacheAPI to generate search result data; S54. Determine the search results data. If the corresponding response object is found, return a response containing the file content and the Content-Type header. If not found, return a 404 error response.

[0030] The working principle and effects of the above technical solution are as follows: By intercepting tile loading requests through prefix matching, the targeting of ServiceWorker's request processing is improved, avoiding interference from irrelevant network requests with the local data reading process. Permission barriers encountered by the browser engine when directly accessing local files are reduced, and the virtual path mechanism bypasses sandbox security restrictions. The accuracy of cache retrieval is enhanced by using relative paths as query keys to ensure precise correspondence with storage keys in the CacheAPI. Invalid network round-trip requests are reduced, with all matching requests responding in the local cache without connecting to a remote server. Rendering interruptions caused by path resolution errors or cache missing data are avoided, as a 404 response allows the engine to quickly handle exceptions. This allows the 3D rendering engine to load local tile data like accessing ordinary network resources, while ensuring that data flows locally throughout the entire process, completely eliminating the privacy leakage risks associated with data uploads.

[0031] In one embodiment of the present invention, S53 includes: Process the relative path lookup key, open the specified cache storage space with the predefined cache identifier in the CacheAPI, and generate a cache storage space access handle; Based on the cache storage space access handle, and using the relative path query key as the index key, a key-value matching retrieval operation is performed in the cache storage space to generate preliminary retrieval results; The existence of the preliminary search results is checked to see if any response object entries corresponding to the index key are found, and an entry existence determination result is generated. Based on the existence determination result of the entry, if a corresponding response object entry exists, the response object data in that entry is extracted to generate successfully matched search result data; if no corresponding response object entry exists, unmatched search result data is generated.

[0032] The working principle and effects of the above technical solution are as follows: By processing relative path query keys and opening specified cache spaces, the accuracy of key-value matching retrieval is improved, allowing each query to quickly locate the corresponding storage area. This reduces the time spent on cache lookups, eliminating the need for blind traversal across multiple cache spaces and saving processing resources. It enhances the reliability of the retrieval process, ensuring the correctness of the data source at each step and reducing misjudgments. It avoids retrieval failures caused by cache space confusion, preventing erroneous responses from affecting the rendering process. It can quickly match cached tile files while ensuring consistency between the retrieval results and the actual storage, resulting in more accurate subsequent responses.

[0033] In one embodiment of the present invention, step S6 includes: S61: The 3D rendering engine receives the returned tile file content, parses it, constructs a 3D scene model, and generates a scene model construction completion signal. S62. Control the camera viewpoint to automatically locate the center area of ​​the 3D scene model, adjust the camera parameters to the best viewing angle, and generate a camera positioning completion signal. S63. Count the number of cached files in CacheAPI, calculate the storage space occupied by the cache, and generate statistics on the number of cached files; S64. Display the scene rendering completion status and cached file count statistics on the page interface, and generate final loading completion feedback.

[0034] The working principle and effects of the above technical solution are as follows: By receiving and parsing tile file content through a 3D rendering engine, the automation of scene construction is improved, eliminating the tedious manual intervention of model loading. It reduces user anxiety while waiting for the model to display, as the camera automatically positions itself in the center area, instantly presenting the 3D data. It enhances the practicality of cache statistics, calculating the number of files and occupied space in real time, allowing users to clearly understand their local storage usage. It reduces the hassle of repeatedly selecting folders after page refreshes, ensuring that cached data is continuously retained and readily available. It avoids accidental operations caused by unclear loading status, with a clear interface displaying progress and statistics, making the user experience more reassuring. It allows users to quickly view 3D model details and intuitively grasp the distribution of cached resources, balancing both display effects and storage management needs.

[0035] In one embodiment of the present invention, S63 includes: Access the specified cache storage space with the predefined cache identifier in the CacheAPI, traverse all the response object entries stored therein, and generate a set of cache entries; Count each entry in the cache entry set one by one, sum them up to get the total number of cached files, and generate a file count result; Read the Content-Length header field of each response object in the cache entry set, extract the byte value corresponding to each field, add all the byte values ​​together, and generate the total cache space size. The file count statistics and the total cache space usage are formatted and converted, then concatenated into a composite string containing the count and size to generate cached file count statistics.

[0036] The working principle and effects of the above technical solution are as follows: By traversing and counting each response object entry in the CacheAPI, the accuracy of cache file statistics is improved, allowing users to clearly understand the number of 3D tiles in local storage. It reduces user concerns about cache space usage by calculating the total number of bytes by reading the Content-Length field, accurately reflecting storage usage. It enhances the transparency of cache management; the formatted and converted compound string simultaneously displays the number and size of files, making the information presentation more intuitive. It reduces duplicate loading issues caused by ambiguous cache data, allowing users to determine whether to clean up or change the data source based on the statistical results. It avoids loading failures caused by cache overflow or insufficient storage space, allowing for timely resource release by knowing the usage status in advance. It enables users to understand the cache scale in real time and assists in optimizing local storage allocation, balancing ease of use and resource management efficiency.

[0037] One embodiment of the present invention further includes a cross-session cache reconstruction step: after the initial file traversal cache is completed, the handle of the user-selected folder is persistently stored in the IndexedDB database; upon the next page load, the folder handle is read from IndexedDB, and the folder is traversed again based on the handle to rebuild the cache entries in the CacheAPI, thereby achieving cross-session cache data recovery. It also includes a data type detection step: identifying the 3D tile data type of the user-selected folder, including point cloud tiles and tilted model tiles; setting the corresponding Content-Type response header according to the identified data type, with 3D tiles corresponding to application / octet-stream; and calling the Cesium3DTileset interface to load the 3D tile data.

[0038] The working principle and effects of the above technical solution are as follows: The cross-session cache reconstruction step improves cache reuse efficiency, eliminating the need for users to reselect and traverse folders when opening the page again, reducing the cost of repetitive operations, enhancing the continuity of cross-session use, and reducing the waiting time for repeated loading. The data type detection step improves the accuracy of 3D tile loading, automatically identifying different tile types such as point clouds and tilted models and setting the correct response headers, avoiding rendering failures caused by Content-Type errors, enhancing the system's compatibility with different tile formats, and reducing runtime anomalies caused by type mismatches. The combination of these two steps ensures the continuity of local data processing and improves the stability of 3D scene loading, making user operations smoother and more efficient.

[0039] One embodiment of the present invention provides a system for implementing the local 3D tile data browser loading method based on ServiceWorker interception as described above. Figure 2 As shown, the system includes: Folder selection module: In response to a user-triggered folder selection operation, it calls the browser's FileSystemAccessAPI's showDirectoryPicker method to obtain the FileSystemDirectoryHandle of the target folder; based on this directory handle, it generates entry data for subsequent file traversal and passes this entry data to the file traversal cache module; The file traversal cache module receives the FileSystemDirectoryHandle passed by the folder selection module, recursively traverses all subdirectories and files corresponding to the handle, reads the binary content of each file, infers the Content-Type header information based on the file extension, stores the file relative path as the key and the file content Response containing the Content-Type as the value in the CacheAPI, and generates a file traversal completion signal and cache write data. The 3D rendering engine responds to the data validity verification signal by calling the Cesium3DTileset.fromUrl interface, passing in the preset virtual URL prefix and the path to the 3D tile set entry file; based on this path, it initiates an HTTP request sequence, requesting the 3D tile data file format of each level in turn according to the tile index structure in the 3D tile set entry file, generating a tile loading request sequence; Request interception module: Registers ServiceWorker's fetch event listener to intercept all HTTP requests that begin with a preset virtual URL prefix; extracts the relative path portion after the virtual prefix in the request path, and passes this relative path as the cache query key to the cache matching module to generate request interception and query key transmission data; Cache matching module: Receives the cache query key passed by the request interception module, opens the specified cache storage space of CacheAPI; performs matching retrieval with the query key as the index; if a corresponding Response exists, it returns the file content; if not, it returns a 404 error response and generates cache matching result data. The cache storage module receives the binary content (Response) of the file traversal cache module, establishes a one-to-one mapping relationship between cache entries and Responses using the file relative path as the key, and each Response contains file data and Content-Type header information; it responds to the query request of the cache matching module, performs matching retrieval based on the relative path query key, returns the corresponding Response or null value, and generates cache storage and response data.

[0040] The working principle and effects of the above technical solution are as follows: Modular division of labor and collaboration improves the overall efficiency of local 3D tile loading, with each module focusing on a single responsibility, making the process clearer and smoother. It reduces the difficulty of system deployment and maintenance; the pure front-end architecture eliminates the need for back-end server and database configuration, allowing direct use upon opening a webpage. It enhances user data security; the file traversal caching module stores all data in the CacheAPI, the entire process is completed locally without any external information transmission. It reduces user operation waiting time; the request interception and cache matching modules work together to allow the engine to instantly obtain local data, avoiding network latency. It avoids browser sandbox restrictions on local file access; the virtual URL and path index mapping cleverly bypasses the permission barriers for directly reading paths. It allows ordinary users to easily preview complex 3D models and allows developers to quickly verify data effects, balancing ease of use and flexibility.

[0041] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A method for loading local 3D tile data in a browser based on ServiceWorker interception, characterized in that, The method includes: S1. Listen for browser page loading events, register a ServiceWorker and wait for activation. After activation, perform a query operation on the CacheAPI to check if there is a cache entry for the 3D tile set entry file and generate cache detection result data. S2. Determine the cache detection result data. If it is determined that there is a valid cache entry, generate an automatic loading trigger signal directly. If it is determined that there is no valid cache entry, respond to the user-triggered folder selection operation, call the file system integration interface to obtain the directory handle of the target folder, recursively traverse all subdirectories and files under the directory handle, read the binary data stream of each file, encapsulate the binary data stream into a response object using the file relative path as the index key and store it in CacheAPI, and generate a file traversal completion signal. S3. In response to the file traversal completion signal, query the CacheAPI again to see if there is a cache entry for the 3D tile set entry file. If the query result is missing, generate an error message and terminate the process. If the query result is present, generate a data validity verification pass signal. S4. In response to the data validity verification pass signal, call the 3D rendering engine interface, pass in the preset virtual URL prefix and the 3D tile set entry file path, and generate a tile loading request sequence. S5. Intercept each HTTP request in the tile loading request sequence, extract the relative path part of the request path, and perform a matching search in CacheAPI using the relative path as the query key. If the corresponding response object is found, return the file content; otherwise, return an error response. The S6 3D rendering engine receives the returned tile file content, parses it, constructs the scene, controls the camera viewpoint to position it in the model area, and generates scene rendering completion status and statistics on the number of cached files.

2. The method for loading local 3D tile data via browser based on ServiceWorker interception as described in claim 1, characterized in that, S1 includes: S11. Listen to the browser's DOMContentLoaded event, trigger the ServiceWorker registration process, wait for the registration to complete and enter the activation state, and generate the ServiceWorker activation state signal. S12. After activation, perform initialization operations on CacheAPI, create a cache storage space with the specified name, and generate a cache storage space initialization completion signal; S13. Query whether there is a cache entry for the 3D tile set entry file in the cache storage space, record the query results, and generate cache entry existence detection data; S14. Mark the existence detection data of cache entries. If they exist, mark them as valid cache; if they do not exist, mark them as invalid cache, and generate cache detection result data.

3. The method for loading local 3D tile data based on ServiceWorker interception according to claim 1, characterized in that, S2 includes: S21. Determine the cache detection result data. If it is marked as valid cache, generate an automatic loading trigger signal and skip the folder selection process. S22. If marked as invalid cache, in response to the user-triggered folder selection operation, call the showDirectoryPicker method of the file system integration interface, obtain the FileSystemDirectoryHandle of the target folder, generate a directory handle and obtain the completion signal. S23. Recursively traverse all subdirectories and files based on directory handles, call the getFile method for each file entry to obtain a File object, read the binary data stream, and generate a collection of file binary data streams. S24. Using the file relative path as the index key, encapsulate each binary data stream with a response object containing a Content-Type header, store it in the specified cache storage space of CacheAPI, and generate a file traversal completion signal.

4. The method for loading local 3D tile data based on ServiceWorker interception according to claim 3, characterized in that, S23 includes: The `entries` method is called based on the directory handle to obtain all iterators of entries in the current directory. Each entry contains a category identifier and name information, generating a set of directory entry iterators. For each entry in the directory entry iterator set, determine its category. If it is determined to be a subdirectory, recursively call the traversal process to enter the next level of directory. If it is determined to be a file, enter the file processing branch and generate the entry classification processing result. Call the getFile method on the file entry in the file processing branch to obtain the corresponding File object instance and generate a collection of File objects; For each File object instance, call the arrayBuffer method to read the complete binary data stream and generate a single file binary data stream; All individual file binary data streams are aggregated in hierarchical order according to the original directory structure to generate a complete set of file binary data streams.

5. The method for loading local 3D tile data via browser based on ServiceWorker interception according to claim 1, characterized in that, The S3 includes: S31. In response to the file traversal completion signal, query again whether there is a 3D tile set entry file cache entry in the specified cache storage space of CacheAPI, and generate secondary query result data; S32. Determine the results of the second query. If the query result is missing, generate an error message and terminate the current process, releasing the cached resources that have been occupied. S33. If the query result is found to exist, verify the format integrity of the 3D tile set entry file, check whether it contains a valid tile index structure, and generate a format integrity verification pass signal. S34. Mark the format integrity verification pass signal to generate a data validity verification pass signal.

6. The method for loading local 3D tile data via browser based on ServiceWorker interception according to claim 1, characterized in that, The S4 includes: S41. In response to the data validity verification pass signal, call the Cesium3DTileset.fromUrl interface of the 3D rendering engine, pass in the preset virtual URL prefix and the 3D tile set entry file path, and generate a tile loading request sequence; S42. Configure the parameters of the tile loading request sequence, set the maximumScreenSpaceError parameter to a high-precision value in the range of 2 to 4, set the maximumMemoryUsage parameter to a memory limit value in the range of 512 to 1024, and generate the configured tile loading request sequence. S43. Preprocess the configured tile loading request sequence, parse the tile hierarchy structure in the entry file, and generate a list of HTTP request paths for each level of tile; S44. Concatenate the list of HTTP request paths for each level of tile with the virtual URL prefix to generate a complete tile loading request sequence.

7. The method for loading local 3D tile data based on ServiceWorker interception according to claim 6, characterized in that, S44 includes: Obtain the list of HTTP request paths for each layer of tiles generated by preprocessing, where each path corresponds to the storage location of the tile file in the local folder, and generate a set of layer tile paths; Read the preset virtual URL prefix string, verify whether the prefix format conforms to the absolute path specification that starts with a forward slash, and generate a standardized virtual URL prefix; Each relative path in the hierarchical tile path set is concatenated with a standardized virtual URL prefix, and a prefix string is added before each relative path to generate a list of tile request paths with prefixes. Bind the list of tile request paths at each level with the metadata information of the tile loading request to generate a complete sequence of tile loading requests containing the path and request method.

8. The method for loading local 3D tile data based on ServiceWorker interception according to claim 1, characterized in that, The S5 includes: S51. Intercept each HTTP request in the tile loading request sequence, detect whether the request path starts with a preset virtual URL prefix, and generate a request path prefix matching result. S52. For requests with a positive result for matching the request path prefix, extract the relative path portion after the virtual URL prefix in the request path and generate a relative path lookup key. S53. Using the relative path query key as an index, perform a matching search in the specified cache storage space of CacheAPI to generate search result data; S54. Determine the search results data. If the corresponding response object is found, return a response containing the file content and the Content-Type header. If not found, return a 404 error response.

9. The method for loading local 3D tile data based on ServiceWorker interception according to claim 1, characterized in that, The S6 includes: S61: The 3D rendering engine receives the returned tile file content, parses it, constructs a 3D scene model, and generates a scene model construction completion signal. S62. Control the camera viewpoint to automatically locate the center area of ​​the 3D scene model, adjust the camera parameters to the best viewing angle, and generate a camera positioning completion signal. S63. Count the number of cached files in CacheAPI, calculate the storage space occupied by the cache, and generate statistics on the number of cached files; S64. Display the scene rendering completion status and cached file count statistics on the page interface, and generate final loading completion feedback.

10. The method for loading local 3D tile data based on ServiceWorker interception according to claim 1, characterized in that, It also includes a cross-session cache reconstruction step: after the initial file traversal cache is completed, the folder handle selected by the user is persistently stored in the IndexedDB database; when the page is loaded again, the folder handle is read from IndexedDB, and the folder is traversed again based on the handle and the cache entries in CacheAPI are reconstructed to achieve cross-session cache data recovery.

11. The method for loading local 3D tile data based on ServiceWorker interception according to claim 1, characterized in that, It also includes a data type detection step: identifying the data type of the 3D tile in the user-selected folder, including point cloud tiles and tilted model tiles; setting the corresponding Content-Type response header according to the identified data type, with 3D tiles corresponding to application / octet-stream; Call the Cesium3DTileset interface to load 3D tile data.

Images