A method for quickly displaying 3D panoramic photos on the web side and a processing terminal
By slicing the three-dimensional panoramic photos into map tiles and filtering and splicing using ArcGis and threejs technologies, the loading difficulties and memory overflow problems caused by displaying super-large photo files on the web are solved, and a fast and stable three-dimensional panoramic display is achieved.
Patent Information
- Application Number
- CN202211560399.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-12-05
- Publication Date
- 2025-07-11
- Estimated Expiration
- 2042-12-05
AI Technical Summary
When the prior art displays three-dimensional panoramic photos on the web side, the super large photo file causes difficulty in loading, long waiting time and easy memory overflow, resulting in page crashes.
Slice the three-dimensional panoramic photo into map tiles served by ArcGis map, and use ArcGis map service and threejs technology to filter and stitch map tiles based on camera visuals to form a two-dimensional display picture.
By reducing the number of loaded tiles and file size, a fast and stable three-dimensional panoramic photo display is achieved, reducing the resource burden and avoiding memory overflow.
Smart Images

Figure CN115840792B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of three-dimensional picture processing, and particularly relates to a method for quickly displaying three-dimensional panoramic photos on the web side and a processing terminal. Background Art
[0002] Three-dimensional panoramic photos, also known as 360° panoramic photos, are panoramic photos taken by a 360° panoramic camera. For example, Figure 1 Shown is a real-scene picture of a three-dimensional panoramic photo taken at a certain location. In this real-scene picture, the scenes within the corresponding visual range can be seen from different angles. For example, the "Panorama" function commonly seen in map services such as Baidu Map. In this function, by dragging the mouse in the three-dimensional panoramic picture, the corresponding pictures can be seen from different views, and the entire picture is a three-dimensional panoramic photo.
[0003] Such three-dimensional panoramic photos need to be processed by specialized software before they can be normally displayed in a planar (two-dimensional) manner. In the existing technical solutions, in order to enable three-dimensional panoramic photos to be normally displayed, especially on the web side, it is often prone to loading crashes and display failures due to excessive data volume and calculation volume. Generally, photos taken by ultra-high-definition panoramic cameras have a resolution of 20000x10000 or even 40000x20000, which means that the file size of a three-dimensional panoramic photo is also several hundred megabytes (M) or even over 1 G. It is extremely difficult to load such a large photo file into memory at one time on the web side. The loading waiting time is very long and it is easy to cause the web page to crash due to memory overflow. Therefore, a method is needed that can well load even a super-large photo file into memory at one time without waiting for a long time and is not prone to memory overflow problems. Summary of the Invention
[0004] Aiming at the deficiencies of the prior art, one of the purposes of the present invention is to provide a method for quickly displaying three-dimensional panoramic photos on the web side, which can solve the problems mentioned in the background art;
[0005] Another purpose of the present invention is to provide a processing terminal, which can solve the problems mentioned in the background art.
[0006] The technical solution for achieving one of the purposes of the present invention is: A method for quickly displaying three-dimensional panoramic photos on the web side, including the following steps:
[0007] Step 1: Slice the target three-dimensional panoramic photo and publish it as an ArcGis map service. The ArcGis map service is applied on the web side to obtain an ArcGis map service including several map tiles;
[0008] Step 2: Parse the ArcGis map service, filter out the corresponding map tiles according to the camera vision of the current camera in the ArcGis map service, splice the filtered map tiles to form a two-dimensional display picture, and use the two-dimensional display picture as the currently displayed picture.
[0009] Further, in the ArcGis map service, the CGCS2000 coordinate system is used to represent the positions of the respective map tiles in the ArcGis map service.
[0010] Further, the specific implementation of Step 2 includes the following steps:
[0011] Step 21: Obtain map tile information, where the map tile information includes the tile pixel size, the tile level of detail lod, and the level resolution resolut ion of the tile level;
[0012] Step 22: Obtain the resolution cameraResolut io of the covered picture under the current vision of the camera;
[0013] Step 23: Compare the resolution cameraResolut io of the covered picture under the current vision of the camera with the level resolutions resolut ion of the respective map tiles in turn, and determine the tile level where the map tiles to be filtered for splicing to form the two-dimensional display picture are located according to the comparison results. The filtered tile level is recorded as the initial tile level;
[0014] Step 24: Calculate the visible range of the current camera in the ArcGis map service according to the coordinates and the ray Ray used to represent the current vision range of the camera;
[0015] Step 25: Find the corresponding map tiles within the visible range in the initial tile level. The found map tiles are recorded as the initial map tiles;
[0016] Step 26: Splice the respective map tiles in the obtained initial map tiles in threejs to form the target two-dimensional display picture and display it.
[0017] Further, obtaining the map tile information in Step 21 includes the following steps:
[0018] Load the json description file of the ArcGis map service and obtain the map tile information from the json description file.
[0019] Further, in Step 22, obtaining the resolution cameraResolutio of the covered picture under the current vision of the camera includes the following steps:
[0020] Calculate the resolution cameraResolutio of the covered picture under the current vision of the camera according to the vertical field of view vFov of the camera in the ArcGis map service. cameraResolutio = vertical field of view vFov of the camera / pixel height of the covered picture.
[0021] Further, in step 23, the resolution cameraResolutio of the covered picture under the current vision of the camera is compared with the hierarchical resolutions resolution of each map tile in turn, and the tile level where the map tiles required for splicing to form a two-dimensional display picture are located is determined according to the comparison results. The selected tile level is recorded as the initial tile level. Its specific implementation includes:
[0022] If cameraResolutio is less than the hierarchical resolution resolution of the nth-level tile lod and ≥ the hierarchical resolution of the (n + 1)th-level tile, then the map tile corresponding to the (n + 1)th-level tile is used as the tile level to be displayed under the current view of the camera, and this tile level is used as the initial tile level.
[0023] Further, the specific implementation of step 24 includes:
[0024] Use the Raycaster interface provided by threejs and adopt corresponding instructions to directly obtain four rays representing the visible range of the camera in the ArcGis map service. The four rays are the rays formed by the four boundaries of up, down, left, and right. The area enclosed by the four boundaries of up, down, left, and right is the visible range of the camera.
[0025] The left boundary ray is the ray emitted from the vertical midpoint of the leftmost side of the interface, the right boundary ray is the ray emitted from the vertical center of the rightmost side of the interface, the upper boundary ray is the ray emitted from the horizontal midpoint of the uppermost side of the interface, and the lower boundary ray is the ray emitted from the horizontal midpoint of the lowermost side of the interface.
[0026] Then, convert the four obtained rays into spherical coordinates, that is, convert the left boundary ray into left boundary spherical coordinates, the right boundary ray into right boundary spherical coordinates, the upper boundary ray into upper boundary spherical coordinates, and the lower boundary ray into lower right boundary spherical coordinates.
[0027] Next, determine the visible angle ranges of left, right, up, and down from the four obtained boundary spherical coordinates, that is, obtain the left boundary angle, right boundary angle, upper boundary angle, and lower boundary angle, and the visible angle range is enclosed by these four boundary angles.
[0028] Further, the specific implementation of step 25 includes the following steps:
[0029] Step 251: Calculate the horizontal angle range tileDegreesWidth and vertical angle range tileDegreesHeight corresponding to the initial tile level. The horizontal angle range tileDegreesWidth = the width of the tile in pixels × the level resolution of the current level lod, and the vertical angle range = the height of the tile in pixels × the level resolution of the current level lod.
[0030] Step 252: Use the range composed of the horizontal angle range and the vertical angle range as the camera visible range. Find the starting map tile number to the ending map tile number corresponding to the initial tile level within the camera visible range. These map tiles form the initial map tiles. The starting map tile number to the ending map tile number is determined using the x - coordinate direction and y - coordinate direction.
[0031] Further, after step 26, it further includes:
[0032] Step 27: In the target 3D panoramic photo, obtain a new current camera vision, and obtain a new target 2D display picture under the new current camera vision, so as to dynamically display the corresponding target 2D pictures at different angles and ranges in the 3D panoramic photo.
[0033] The technical solution for achieving the second objective of the present invention is: A processing terminal, which includes:
[0034] A memory, used for storing program instructions;
[0035] A processor, used for running the program instructions to execute the steps of the method for quickly displaying a 3D panoramic photo on the web side.
[0036] The beneficial effect of the present invention is: Compared with the traditional method of loading the panoramic photo into the memory at one time, which easily causes memory overflow, the present invention uses the ArcGis map service to first slice the 3D panoramic photo into map tiles, and then calculates the map tiles that need to be loaded according to the camera visible range, that is, only the initial map tiles need to be loaded. Thus, only dozens of map tiles need to be found from the 3D panoramic photo including all terminal map tiles. Moreover, the file size of a single map tile is very small, and the loading and processing speed of dozens of map tiles will be very fast, greatly reducing the number of map tiles loaded into the memory, thereby greatly reducing the burden of resource loading, and thus achieving fast and stable loading and display of 3D panoramic photos including ultra - high definition on the web side. BRIEF DESCRIPTION OF THE DRAWINGS
[0037] Figure 1 A real - scene picture of a 3D panoramic photo taken at a certain location;
[0038] Figure 2 It is a schematic flowchart of the first embodiment;
[0039] Figure 3 It is a schematic flowchart of step 2;
[0040] Figure 4 It is a schematic diagram of the visible range under the current vision of the camera;
[0041] Figure 5 It is from Figure 1 A schematic diagram of the target two-dimensional display picture formed by the initial map tiles within the range obtained under the current vision of the camera;
[0042] Figure 6 It is from Figure 1 A schematic diagram of another target two-dimensional display picture formed by the initial map tiles within the range obtained under the vision of another camera;
[0043] Figure 7 It is a schematic diagram of the processing terminal of the second embodiment. Specific embodiments
[0044] In order to make the objectives, technical solutions and advantages of the present application clearer, the following further describes the specific embodiments of the present application in detail with reference to the accompanying drawings. It can be understood that the specific embodiments described herein are only used to explain the present application, rather than limiting the present application. Additionally, it should be noted that for the sake of convenience of description, only the parts related to the present application are shown in the drawings, rather than all the content. Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe the operations (or steps) as sequential processes, many of the operations can be implemented in parallel, concurrently or simultaneously. In addition, the order of the operations can be rearranged. When the operations are completed, the process can be terminated, but there may also be additional steps not included in the drawings. The process can correspond to a method, function, procedure, subroutine, subprogram, etc.
[0045] The first embodiment
[0046] As Figures 2 - 6 shown, a method for quickly displaying three-dimensional panoramic photos on the web side includes the following steps:
[0047] Step 1: Use the ArcGisCatalog tool that can be installed on the web side (i.e., browser) to slice the target three-dimensional panoramic photo and publish it as an ArcGis map service that meets the requirements of the ArcGis map specification. The ArcGis map service is applied on the web side to obtain an ArcGis map service including several map tiles, that is, several map tiles can be formed after slicing the target three-dimensional panoramic photo.
[0048] In an optional implementation, the CGCS2000 coordinate system (standard longitude and latitude coordinate system) can be used in the ArcGis map service to represent the positions of each map tile in the ArcGis map service, and the coordinate origin can be set to [-180, 90]. Of course, in actual use, other coordinate systems and coordinate origins can also be adopted according to the actual situation.
[0049] Among them, ArcGisCatalog is a map slicing and publishing tool based on the ArcGis map specification and can be applied on the web side.
[0050] Step 2: Use threejs that can be installed on the web side to parse the ArcGis map service, and screen out the corresponding map tiles according to the camera vision of the current camera in the ArcGis map service, splice the screened-out map tiles to form a two-dimensional display picture, and use the two-dimensional display picture as the currently displayed picture.
[0051] Among them, threejs is an open-source 3D rendering engine developed based on WebGL technology and can be used for the loading and display of 360° panoramic photos.
[0052] The specific implementation of this step includes the following steps:
[0053] Step 21: Load the json description file of the ArcGis map service, obtain the map tile information from the json description file. The map tile information includes tile pixel size, tile level of detail lod, level resolution resolution of the tile level, etc., that is, obtain the tile pixel size of each tile, the tile level where it is located, and the level resolution of each tile level. The tile pixel size is represented by width and height, that is, represented by the width tilePixelWidth and height tilePixelHeight of the map tile.
[0054] The hierarchical resolution refers to the angular (latitude and longitude) value (degrees / pixel) corresponding to each pixel value. Specifically, it is the ratio of the maximum range of latitude and longitude to the original pixel size of the map tiles at that hierarchy. For example, the longitude range is 360° / the width of the map in pixels. This value can be automatically calculated by the ArcGisCatalog tool when slicing the map (i.e., the target 3D panoramic photo). Since the ratio of the longitude to latitude range is 2:1 and the aspect ratio of the picture is also 2:1, only the ratio in one direction needs to be calculated.
[0055] Step 22: Calculate the resolution cameraResolutio of the covered image under the current vision of the camera in the ArcGis map service according to the vertical field of view angle vFov of the camera in threejs. cameraResolutio = the vertical field of view angle vFov of the camera / the height of the covered image in pixels.
[0056] The concept of the resolution cameraResolutio is the same as that of the hierarchical resolution. Both refer to the angular value corresponding to each pixel, but they represent different objects.
[0057] Step 23: Compare the resolution cameraResolutio of the covered image under the current vision of the camera with the hierarchical resolutions of each map tile in turn. If cameraResolutio is less than the hierarchical resolution resolutio of the nth-level tile lod and ≥ the hierarchical resolution resolutio of the (n + 1)th-level tile, then use the map tile corresponding to the (n + 1)th-level tile as the tile level to be displayed under the current view of the camera, and record this tile level as the initial tile level. Here, n ≥ 1.
[0058] In this step, compare the resolution cameraResolutio calculated in Step 22 with the hierarchical resolutions of each level of tiles in turn. If it is less than the hierarchical resolution of a certain level of tile and greater than or equal to the hierarchical resolution of the next level of tile, then the map tile corresponding to the next level of tile can be used as the map tile to be displayed, that is, it is necessary to screen out the map tiles to be displayed from these map tiles.
[0059] Step 24: Calculate the visible range of the camera in the ArcGis map service using NDC and the ray Ray. Among them, the Raycaster interface provided by threejs can directly obtain four rays used to represent the visible range of the camera in the ArcGis map service through corresponding instructions, that is, obtain the four rays that form the upper, lower, left, and right boundaries. The area enclosed by the four boundaries of the upper, lower, left, and right is the visible range of the camera.
[0060] Reference Figure 4 , Figure 4 In the figure, point a represents the current position of the camera, and the four lines (b, c, d, e) represent the rays of the upper, lower, left, and right boundaries. The rectangular area formed by these four lines is the visible range of the camera, that is, the visible range under the current vision of the camera.
[0061] NDC is the English abbreviation of Normalized Device Coordinates, which represents normalized device coordinates. It is a vector coordinate system where the screen x and y values are between -1 and 1. The x value ranges from -1 to 1 from left to right, and the y value ranges from 1 to -1 from top to bottom.
[0062] For example, the left boundary ray leftRay can use the Raycaster.setFromCamera({x: -1, y: 0}, camera) instruction. Here, camera represents the camera. The left boundary ray is a ray emitted from the vertical midpoint on the leftmost side of the interface, so its coordinates are: the x coordinate is -1, and the y coordinate is 0, that is, it is represented by {x: -1, y: 0}. Similarly, there are also:
[0063] Right boundary ray: A ray is emitted from the vertical center on the rightmost side of the interface, so the x coordinate is 1 and the y coordinate is 0.
[0064] rightRay = Raycaster.setFromCamera({x: 1, y: 0}, camera);
[0065] Upper boundary ray: A ray is emitted from the horizontal midpoint on the uppermost side of the interface, so the x coordinate is 0 and the y coordinate is 1.
[0066] topRay = Raycaster.setFromCamera({x: 0, y: 1}, camera);
[0067] Lower boundary ray: A ray is emitted from the horizontal midpoint on the lowermost side of the interface, so the x coordinate is 0 and the y coordinate is -1.
[0068] bottomRay = Raycaster.setFromCamera({x: 0, y: -1}, camera).
[0069] Then, the four obtained rays are converted to spherical coordinates, that is, the left boundary ray is converted to left boundary spherical coordinates, the right boundary ray is converted to right boundary spherical coordinates, the upper boundary ray is converted to upper boundary spherical coordinates, and the lower boundary ray is converted to lower right boundary spherical coordinates. Similarly, corresponding instructions can be used to achieve the conversion of rays to spherical coordinates. Similarly, corresponding instructions can also be used to achieve the conversion of rays to spherical coordinates.
[0070] Left boundary spherical coordinates: leftSpherical = Spherical.setFromVector3(leftRay);
[0071] Right boundary spherical coordinates: rightSpherical = Spherical.setFromVector3(rightRay);
[0072] Upper boundary spherical coordinates: topSpherical = Spherical.setFromVector3(topRay);
[0073] Lower boundary spherical coordinates: bottomSpherical = Spherical.setFromVector3(bottomRay).
[0074] Next, the four obtained boundary spherical coordinates are used to determine the visible angle ranges of left, right, up, and down, that is, the left boundary angle, right boundary angle, upper boundary angle, and lower boundary angle are obtained, and the visible angle range is enclosed by these four boundary angles. It can be obtained through the following instructions:
[0075] Left boundary angle left: azimuth angle (phi) of the left boundary spherical coordinates
[0076] left = leftSpherical.phi;
[0077] Right boundary angle right: azimuth angle (phi) of the right boundary spherical coordinates
[0078] right = rightSpherical.phi;
[0079] Upper boundary angle top: elevation angle (theta) of the upper boundary spherical coordinates
[0080] top = topSpherical.theta;
[0081] Lower boundary angle bottom: elevation angle (theta) of the lower boundary spherical coordinates
[0082] bottom = bottomSpherical.theta.
[0083] Step 25: Find the corresponding map tiles within the visible angle range (i.e., the visible range in Step 24) in the initial tile level determined in Step 23. The found map tiles are denoted as the initial map tiles.
[0084] Among them, the map tiles can be distinguished by numbers in the ArcGis map service. Each map tile corresponds to a unique number, and one number corresponds to only one map tile.
[0085] The specific implementation of Step 25 includes the following steps:
[0086] Step 251: Calculate the horizontal direction angle range tileDegreesWidth and the vertical direction angle range tileDegreesHeight corresponding to the initial tile level. The horizontal direction angle range tileDegreesWidth = tile pixel width × the level resolution of the current level lod, and the vertical direction angle range = tile pixel height × the level resolution of the current level lod. They can be obtained through the following instructions respectively:
[0087] tileDegreesWidth = tilePixelWidth * lod.resolution;
[0088] tileDegreesHeight = tilePixelHeight * lod.resolution.
[0089] Step 252: Use the range composed of the horizontal direction angle range and the vertical direction angle range as the camera visible range (or called the camera visual range). Find the start map tile number to the end map tile number corresponding to the initial tile level within the camera visible range, that is, find all the map tile numbers from the first map tile to the last map tile. These map tiles form the initial map tiles, so as to find the initial map tiles.
[0090] Finding the start map tile number to the end map tile number is determined by the x - coordinate direction and y - coordinate direction. Specifically, it can be obtained through the following instructions:
[0091] The start number in the x - direction = the left - boundary angle ÷ the horizontal direction angle range
[0092] startOfTileX = Math.floor(left / tileDegreesWidth);
[0093] The end number in the x - direction = the right - boundary angle ÷ the horizontal direction angle range
[0094] endOfTileX = Math.ceil(right / tileDegreesWidth);
[0095] The starting number in the y - direction = the upper - boundary angle ÷ the vertical - direction angle range
[0096] startOfTileY = Math.floor(top / tileDegreesHeight);
[0097] The ending number in the y - direction = the lower - boundary angle ÷ the vertical - direction angle range
[0098] endOfTileY = Math.ceil(bottom / tileDegreesHeight);
[0099] Step 26: In threejs, load the obtained initial map tiles onto the panoramic sphere Sphere pre - created in threejs in the form of textures, so as to splice each map tile in the initial map tiles to form the target two - dimensional display picture, and display it. Splicing the map tiles to form the target two - dimensional display picture means splicing them together in the order of the original map numbers of the map tiles. The map number itself represents the position of the map tile, so that the map tiles within the visible range of the camera can be displayed.
[0100] In an optional embodiment, after step 26, it further includes
[0101] Step 27: In the target three - dimensional panoramic photo, rotate the camera angle or zoom the camera focal length with the mouse, so as to change the current camera vision, that is, change the current camera vertical field - of - view vFov, and repeatedly execute steps 22 - 26, so as to obtain a new target two - dimensional display picture under the new current camera vision, so that different - angle and - range - corresponding target two - dimensional pictures can be dynamically displayed in the three - dimensional panoramic photo.
[0102] Reference Figure 5 and Figure 6 , Figure 5 is a schematic diagram of the target two - dimensional display picture formed by the initial map tiles within the range obtained under the current camera vision from Figure 1 . Figure 6 is Figure 1 a schematic diagram of another target two - dimensional display picture formed by the initial map tiles within the range obtained under another camera vision from Figure 1In the three-dimensional panoramic photo, pictures within the corresponding range are displayed from the perspective of a certain camera, similar to the "Panorama" function in the commonly used Baidu Map. By dragging the mouse, the current perspective of the camera, i.e., the vertical field of view vFov, is changed, so as to display the corresponding target two-dimensional display pictures under the current camera perspective.
[0103] Compared with the traditional method of loading the panoramic photo into the memory at one time, which easily leads to memory overflow, in this embodiment, the three-dimensional panoramic photo is first sliced into a tile map by using the ArcGis map service, and then the map tiles to be loaded are calculated according to the visible range of the camera. That is, only the initial map tiles need to be loaded. Therefore, only dozens of map tiles need to be found from the three-dimensional panoramic photo including a large number of terminal map tiles, and the file size of a single map tile is very small. The loading and processing speeds of dozens of map tiles will be very fast, greatly reducing the number of map tiles loaded into the memory, thus greatly reducing the burden of resource loading, and realizing the fast and stable loading and display of three-dimensional panoramic photos including ultra-high definition on the web side.
[0104] Embodiment 2
[0105] As Figure 7 shown, a processing terminal 100 includes:
[0106] A memory 101 for storing program instructions;
[0107] A processor 102 for running the program instructions to execute the steps of the method for quickly displaying three-dimensional panoramic photos on the web side.
[0108] The present invention is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, and the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate means for realizing the functions specified in one Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks.
[0109] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured article including instruction means, and the instruction means realizes the functions specified in one Figure 1 one process or multiple processes and / or blocks Figure 1The functions specified in one or more boxes.
[0110] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operational steps are executed on the computer or other programmable device to generate a computer-implemented process. Thus, the instructions executed on the computer or other programmable device provide for implementing the steps of the functions specified in one Figure 1 process or more processes and / or boxes Figure 1 or more boxes.
[0111] Although the preferred embodiments of the present invention have been described, additional changes and modifications can be made by those skilled in the art once they learn the basic creative concept. Therefore, the appended claims are intended to be construed to include the preferred embodiments as well as all changes and modifications that fall within the scope of the present invention.
[0112] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalent technologies, the present invention is also intended to include these modifications and variations.
Claims
1. A method for quickly displaying three-dimensional panoramic photos on the web side, characterized in that, Including the following steps: Step 1: Slice the target three-dimensional panoramic photo and publish it as an ArcGis map service. The ArcGis map service is applied on the web side to obtain an ArcGis map service including several map tiles. Step 2: Analyze the ArcGis map service, and filter out the corresponding map tiles according to the camera vision of the current camera in the ArcGis map service. Stitch the filtered map tiles to form a two-dimensional display picture, and use the two-dimensional display picture as the currently displayed picture. The specific implementation of Step 2 includes the following steps: Step 21: Obtain map tile information, where the map tile information includes tile pixel size, tile level of detail lod, and level resolution resolution of the tile level. Step 22: Obtain the resolution cameraResolutio of the covered picture under the current vision of the camera. Step 23: Compare the resolution cameraResolutio of the covered picture under the current vision of the camera with the level resolution resolution of each map tile in turn. According to the comparison results, determine the tile level where the map tiles required for stitching to form the two-dimensional display picture are located. The filtered tile level is recorded as the initial tile level. Step 24: Calculate the visible range of the current camera in the ArcGis map service according to the coordinates and the ray Ray used to represent the current vision range of the camera. Step 25: Find the corresponding map tiles within the visible range in the initial tile level. The found map tiles are recorded as the initial map tiles. Step 26: Stitch the individual map tiles in the obtained initial map tiles to form the target two-dimensional display picture in threejs and display it.
2. The method for quickly displaying 3D panoramic photos on the web side according to claim 1, wherein In the ArcGis map service, the CGCS2000 coordinate system is used to represent the positions of the individual map tiles in the ArcGis map service.
3. The method for quickly displaying a three-dimensional panoramic photo on a web side according to claim 1, characterized in that In Step 21, obtaining the map tile information includes the following steps: Load the json description file of the ArcGis map service and obtain the map tile information from the json description file.
4. The method for quickly displaying a three-dimensional panoramic photo on a web side according to claim 1, characterized in that In Step 22, obtaining the resolution cameraResolutio of the covered picture under the current vision of the camera includes the following steps: Calculate the resolution cameraResolutio of the covered picture under the current vision of the camera according to the vertical field of view vFov of the current camera in the ArcGis map service in threejs. cameraResolutio = vertical field of view vFov of the camera / pixel height of the covered picture.
5. The method for quickly displaying a three-dimensional panoramic photo on the web side according to claim 1, wherein In Step 23, the comparison of the resolution cameraResolutio of the covered picture under the current vision of the camera with the level resolution resolution of each map tile in turn, and determining the tile level where the map tiles required for stitching to form the two-dimensional display picture are located according to the comparison results. The filtered tile level is recorded as the initial tile level. Its specific implementation includes: If the camera resolution is less than the level resolution resolution of the nth-level tile lod and ≥ the level resolution resolution of the (n + 1)th-level tile, then the map tile corresponding to the (n + 1)th-level tile is used as the tile level to be displayed under the current camera view, and this tile level is used as the initial tile level.
6. The method for quickly displaying a three-dimensional panoramic photo on a web side according to claim 1, wherein The specific implementation of step 24 includes: Using the Raycaster interface provided by threejs and adopting corresponding instructions to directly obtain four rays representing the visible range of the camera in the ArcGis map service. The four rays are the rays formed by the upper, lower, left, and right boundaries respectively. The area enclosed by the upper, lower, left, and right boundaries is the visible range of the camera. The left boundary ray is a ray emitted from the vertical midpoint on the leftmost side of the interface, the right boundary ray is a ray emitted from the vertical center on the rightmost side of the interface, the upper boundary ray is a ray emitted from the horizontal midpoint on the uppermost side of the interface, and the lower boundary ray is a ray emitted from the horizontal midpoint on the lowermost side of the interface. Then, the four obtained rays are converted into spherical coordinates, that is, the left boundary ray is converted into left boundary spherical coordinates, the right boundary ray is converted into right boundary spherical coordinates, the upper boundary ray is converted into upper boundary spherical coordinates, and the lower boundary ray is converted into lower right boundary spherical coordinates. Next, the visible angle ranges of left, right, up, and down are determined from the four obtained boundary spherical coordinates, that is, the left boundary angle, right boundary angle, upper boundary angle, and lower boundary angle are obtained, and the visible angle range is enclosed by these four boundary angles.
7. The method for quickly displaying a three-dimensional panoramic photo on a web side according to claim 1, characterized in that The specific implementation of step 25 includes the following steps: Step 251: Calculate the horizontal direction angle range tileDegreesWidth and vertical direction angle range tileDegreesHeight corresponding to the initial tile level. The horizontal direction angle range tileDegreesWidth = tile pixel width × level resolution of the current level lod, and the vertical direction angle range = tile pixel height × level resolution of the current level lod. Step 252: Use the range composed of the horizontal direction angle range and the vertical direction angle range as the visible range of the camera, and find the starting map tile number to the ending map tile number corresponding in the initial tile level within the visible range of the camera. These map tiles form the initial map tiles. Finding the starting map tile number to the ending map tile number is determined using the x-coordinate direction and y-coordinate direction.
8. The method for quickly displaying a three-dimensional panoramic photo on a web side according to claim 1, wherein After step 26, it also includes Step 27: In the target 3D panoramic photo, obtain the new current camera vision and get the new target 2D display picture under the new current camera vision, so as to dynamically display the target 2D pictures corresponding to different angles and ranges in the 3D panoramic photo.
9. A processing terminal, characterized in that, It includes: A memory for storing program instructions; A processor for running the program instructions to execute the steps of the method for quickly displaying 3D panoramic photos on the web side as described in any one of claims 1 - 8.
Citation Information
Patent Citations
Unmanned aerial vehicle tile map rapid loading method, system and device and storage medium
CN109977192A
Multi-level map tile processing method and device, equipment and storage medium
CN110347769A