KR102709406B1 - How to visualize image tile data from a web map tile service by clipping it to a custom region - Google Patents

Abstract

The present invention relates to a method for visualizing image tile data of a web map tile service by clipping it into a user-defined area, and more particularly, to a technology for efficiently managing and rendering tile-based map data by utilizing a quadtree indexing system and an HTML Canvas element.
According to the present invention, an algorithm capable of effectively clipping and visualizing a data layer in a tile image format in a spatial information system (GIS) is provided.

Description

{How to visualize image tile data from a web map tile service by clipping it to a custom region}

The present invention relates to a method for visualizing image tile data of a web map tile service by clipping it into a user-defined area, and more particularly, to a technology for efficiently managing and rendering tile-based map data by utilizing a quadtree indexing system and an HTML Canvas element.

The above HTML Canvas is an HTML element for drawing graphics on web pages, and Canvas is a tool that can dynamically render various visual elements such as graphics, animations, and games using JavaScript.

A Geographic Information System (GIS) is a system that analyzes and processes geographic spatial data and can be used in geography-related fields (e.g., construction, transportation, communications, etc.).

In other words, a geographic information system is a complex system that collects related information, such as underground facilities, along with topographic information, such as general maps, and provides it to users so that they can search and analyze the related information.

These geographic information systems typically consist of a client and server architecture.

The client accesses the GIS server, receives geographic information for a specific service from the GIS server, and displays the relevant map on the web.

Previously, images of related information provided by GIS servers were simply 2D images, making it difficult for users to understand and identify on-site structures by looking at the images.

Therefore, the need to build 3D spatial information similar to real space is emerging to overcome the limitations of 3D spatial information.

However, spatial information currently provided through the web has limitations in actually displaying terrain features.

In particular, in the case of constructing 3D spatial information, it was not possible to satisfy users due to limitations in implementation and processing speed due to software and hardware constraints.

That is, 3D model files collected through various routes to build spatial information and provide geographic information systems via the web range from hundreds of MBytes to several GBytes.

Therefore, simply reading a 3D model file from the web takes a considerable amount of time.

Specifically, a web map service is a service that provides map data via the Internet, allowing users to view and explore maps via a web browser.

Web map services use tile-based data structures to effectively manage and transmit large amounts of map data.

Map tiles are map images divided into grids of a certain size, and are selectively transmitted to form a map according to the user's request.

However, existing web map tile services have limitations in selectively utilizing data only for specific areas of interest to users.

Since tiles are generated and transmitted for the entire map area, problems such as resource waste and performance degradation due to unnecessary data processing may occur.

In addition, due to the nature of the tile-based data structure, it was difficult to extract and visualize partial data targeting an arbitrary area.

Accordingly, the present invention proposes an effective clipping and visualization method of an image tile data layer for a user-defined area in a web map tile service.

(Prior Document 1) Republic of Korea Patent Publication No. 10-2022-0151573

Therefore, the present invention has been devised to solve the above-mentioned conventional problems.

An object of the present invention is to provide a method for efficiently clipping and visualizing an image tile data layer for a user-defined area in a web map tile service.

To this end, the present invention effectively manages map tile data by performing quadtree-based tile indexing, and applies a clipping technique that selectively renders only tiles within a user-defined area by utilizing an HTML Canvas element.

In order to achieve the problem that the present invention seeks to solve,

A method for visualizing image tile data of a web map tile service according to one embodiment of the present invention by clipping it to a user-defined area is provided.

A calculation step (S100) for calculating tile indexing information and coordinate transformation parameters based on a quadtree; and

An input step (S200) for receiving spatial object information of a geographic area to be clipped from a user; and

A clipping area setting step (S300) for creating an HTML Canvas element and setting a clipping area based on the input spatial object information; and

The present invention solves the problem by including a rendering step (S400) of selecting a tile image overlapping the user-defined area and rendering it on an HTML Canvas using the above quadtree-based tile indexing information and coordinate transformation parameters.

The method of visualizing image tile data of the web map tile service of the present invention by clipping it to a user-defined area provides the following salience of effects.

That is, it provides an algorithm that can effectively clip and visualize data layers in tile image format in a spatial information system (GIS).

This can improve the performance and usability of GIS.

Specifically, the present invention supports users to selectively check and analyze only data for a specific area or range of interest.

This helps overcome the performance limitations of vector methods when processing large amounts of data and improves the efficiency of users' data analysis.

In addition, the present invention expands the scope of utilization of GIS and opens up application possibilities in various fields by implementing a clipping function in a tile image manner.

It is expected that this will contribute to the development of GIS technology and increased user convenience.

FIG. 1 is a block diagram of a device for performing a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.
FIG. 2 is a flowchart illustrating a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.
FIG. 3 is a graph visually representing changes in the number of tiles and resolution according to the tile level in a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to an embodiment of the present invention.
FIG. 4 is an exemplary diagram showing the operation of a web map tile service (WMTS) using a quadtree system for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.
FIG. 5 is an exemplary diagram showing the Google Mercator Projection used in the Web Map Tile Service (WMTS) of a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.
FIG. 6 is an example of the result of a clip method of a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.
FIG. 7 is an example diagram of tile indexing for a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to an embodiment of the present invention, and FIG. 8 is an example diagram showing the size and position of a tile on a UTM.
FIGS. 9 to 11 are examples of results output when applying a clipping technique of a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to an embodiment of the present invention.
FIG. 12 is an example of an algorithm pseudocode of a clipping technique for visualizing image tile data of a web map tile service according to an embodiment of the present invention by clipping it to a user-defined area.

The following merely illustrates the principles of the present invention. Therefore, those skilled in the art will be able to invent various devices that implement the principles of the present invention and are included within the concept and scope of the present invention, even though they are not explicitly described or illustrated in the specification.

Furthermore, it should be understood that all conditional terms and embodiments listed in this specification are, in principle, expressly intended only for the purpose of making the concept of the present invention understood, and are not limited to the embodiments and conditions specifically listed as such.

A method for visualizing image tile data of a web map tile service according to one embodiment of the present invention by clipping it to a user-defined area is provided.

A calculation step (S100) in which a calculation unit (100) calculates tile indexing information and coordinate transformation parameters based on a quadtree; and

An input step (S200) in which the input unit (200) receives spatial object information of a geographic area to be clipped from the user; and

A clipping area setting step (S300) in which a clipping area setting unit (300) creates an HTML Canvas element and sets a clipping area based on the input spatial object information; and

It is characterized in that it includes a rendering step (S400) in which the rendering unit (400) selects a tile image overlapping the user-defined area using the quadtree-based tile indexing information and coordinate transformation parameters and renders it on an HTML Canvas.

At this time, the above calculation step (S100) is

A boundary coordinate calculation step (S110) in which a calculation unit (100) calculates a unique identifier and boundary coordinate information of a tile according to the spatial coordinate system of map data and the tile level;

It is characterized in that the calculation unit (100) includes a tile level calculation step (S120) in which coordinate transformation parameters required for clipping, such as tile size and resolution, are calculated according to the tile level.

At this time, the input step (S200)

A spatial object input step (S210) in which the input unit (200) receives a geographic area to be clipped as a spatial object such as a polygon, circle, or square;

It is characterized in that the input unit (200) includes a map coordinate system conversion step (S220) that converts the coordinate information of the input spatial object into a map coordinate system.

At this time, the rendering step (S400)

A tile selection step (S410) in which the rendering unit (400) selects tiles overlapping with the user-defined area using the quadtree-based tile indexing information calculated in the calculation step (S100);

A canvas coordinate system conversion step (S420) in which the rendering unit (400) loads the selected tile image and converts the tile coordinates into the canvas coordinate system;

It is characterized in that the rendering unit (400) includes a clipping area rendering step (S430) for rendering a coordinate-converted tile image on an HTML Canvas to fit the clipping area.

Hereinafter, a method for visualizing image tile data of a web map tile service according to the present invention by clipping it to a user-defined area will be described in detail through an embodiment.

FIG. 1 is a block diagram of a device for performing a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.

FIG. 2 is a flowchart illustrating a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.

FIG. 3 is a graph visually representing changes in the number of tiles and resolution according to the tile level in a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to an embodiment of the present invention.

FIG. 4 is an exemplary diagram showing the operation of a web map tile service (WMTS) using a quadtree system for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.

FIG. 5 is an exemplary diagram showing the Google Mercator Projection used in the Web Map Tile Service (WMTS) of a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.

FIG. 6 is an example of the result of a clip method of a method for visualizing image tile data of a web map tile service by clipping it to a user-defined area according to one embodiment of the present invention.

FIG. 7 is an example diagram of tile indexing for a method of visualizing image tile data of a web map tile service by clipping it to a user-defined area according to an embodiment of the present invention, and FIG. 8 is an example diagram showing the size and position of a tile on a UTM.

FIGS. 9 to 11 are examples of results output when applying a clipping technique for visualizing image tile data of a web map tile service according to an embodiment of the present invention by clipping it to a user-defined area.

FIG. 12 is an example of an algorithm pseudocode of a clipping technique for visualizing image tile data of a web map tile service according to an embodiment of the present invention by clipping it to a user-defined area.

As illustrated in Fig. 2, a method of visualizing image tile data of a web map tile service of the present invention by clipping it to a user-defined area is provided.

A calculation step (S100) in which a calculation unit (100) calculates tile indexing information and coordinate transformation parameters based on a quadtree; and

An input step (S200) in which the input unit (200) receives spatial object information of a geographic area to be clipped from the user; and

A clipping area setting step (S300) in which a clipping area setting unit (300) creates an HTML Canvas element and sets a clipping area based on the input spatial object information; and

It is characterized in that it includes a rendering step (S400) in which the rendering unit (400) selects a tile image overlapping the user-defined area using the quadtree-based tile indexing information and coordinate transformation parameters and renders it on an HTML Canvas.

To explain specifically, the above calculation step (S100) is a process in which the calculation unit (100) calculates quadtree-based tile indexing information and coordinate transformation parameters.

In order to go through the above process, the calculation step (S100) is

A boundary coordinate calculation step (S110) for calculating a unique identifier and boundary coordinate information of a tile according to the spatial coordinate system of map data and the tile level;

It is characterized by including a tile level calculation step (S120) for calculating coordinate transformation parameters required for clipping, such as tile size and resolution, according to the tile level.

That is, it performs quadtree-based tile indexing according to the spatial coordinate system (e.g., WGS84, Web Mercator) and tile level (Zoom Level) of the given map data.

Through this, the unique identifier (Tile ID) and boundary coordinates (Bounding Box) information of each tile are calculated. (S110)

In addition, coordinate transformation parameters required for clipping, such as tile size and resolution, are calculated according to the tile level. (S120)

In general, the method of representing the Earth as a flat surface is called a coordinate reference system.

Projected CRS is a coordinate system that expresses the distance as the origin for a certain coordinate as X, Y, Z coordinates, and the UTM (Universal Transverse Mercator) coordinate system is a type of projected coordinate system that uses a specific point on the equator as the zero point.

For example, Google Maps uses Google Mercator Projection (EPSG:3857 or EPSG:900913), Naver Maps uses UTM-K (EPSG:5179), and Kakao Maps uses GRS80 (EPSG:42310).

Figure 5 shows the Earth projected in EPSG:3857.

The BOUND of EPSG:3857 is maxX(20037508.34278924m), maxY(20037508.34278924m) at the upper right (East, North), and minX(-20037508.34278924m), minY(-20037508.34278924m) at the lower left (West, South).

Additionally, the unique identifier of a tile (Tile ID) can be calculated using the level and X, Y coordinates of the tile as follows.

Tile ID = (Level, X, Y)

Here, the X, Y coordinates of the tile at a specific level L are calculated using the following formula.

X = floor((lon + 180) / 360 * 2^L)

Y = floor((1 - log(tan(lat * pi/180) + 1 / cos(lat * pi/180)) / pi) / 2 * 2^L)

Here, lon and lat represent the longitude and latitude of the center point of the tile, respectively, and L represents the level of the tile.

For example, at level 14, the Tile ID for the tile at longitude 127.0 and latitude 37.5 can be calculated as follows:

X = floor((127.0 + 180) / 360 * 2^14) = 13971

Y = floor((1 - log(tan(37.5 * pi/180) + 1 / cos(37.5 * pi/180)) / pi) / 2 * 2^14) = 6348

Tile ID = (14, 13971, 6348)

And, the above input step (S200) is a process in which the input unit (200) receives spatial object information of a geographic area to be clipped from the user.

In order to go through the above process, the input step (S200) is

A spatial object input step (S210) in which the input unit (200) receives a geographic area to be clipped as a spatial object such as a polygon, circle, or square;

It is characterized in that the input unit (200) includes a map coordinate system conversion step (S220) that converts the coordinate information of the input spatial object into a map coordinate system.

And, the clipping area setting step (S300) is a process in which the clipping area setting unit (300) creates an HTML Canvas element and sets a clipping area based on the input spatial object information.

And, the above rendering step (S400) is

A tile selection step (S410) in which the rendering unit (400) selects tiles overlapping with the user-defined area using the quadtree-based tile indexing information calculated in the calculation step (S100);

A canvas coordinate system conversion step (S420) in which the rendering unit (400) loads the selected tile image and converts the tile coordinates into the canvas coordinate system;

It is characterized in that the rendering unit (400) includes a clipping area rendering step (S430) for rendering a coordinate-converted tile image on an HTML Canvas to fit the clipping area.

At this time, the coordinates of the tile image on the canvas can be calculated using the following formula.

canvas_x = (tile_x - tile_min_x) * tile_width

canvas_y = (tile_y - tile_min_y) * tile_height

Here, tile_x and tile_y are the X, Y coordinates of the tile to be rendered, and tile_min_x and tile_min_y are the minimum X, Y coordinates of the tiles that contain the user-defined area.

Additionally, tile_width and tile_height represent the width and height of the tile, respectively.

For example, assuming that the custom region contains the tile range from (14, 13968, 6346) to (14, 13973, 6550), the canvas coordinates of the tile (14, 13971, 6348) can be computed as follows.

tile_min_x = 13968

tile_min_y = 6346

tile_width = 256

tile_height = 256

canvas_x = (13971 - 13968) * 256 = 768

canvas_y = (6348 - 6346) * 256 = 512

Therefore, the (14, 13971, 6348) tile image should be rendered at position (768, 512) on the canvas.

As described above, the present invention more clearly explains the tile indexing and coordinate transformation process through formulas and examples.

Through this, those skilled in the art will be able to easily understand and reproduce the technical idea of the present invention.

As shown in Figure 3, the X-axis of the graph represents the tile level, and the Y-axis represents the number of tiles and the resolution, respectively.

Additionally, the Y-axis is expressed in a logarithmic scale to allow for a clearer view of the rate of change.

The above graphs can help users select an appropriate tile level by visually representing the change in the number of tiles and resolution according to the tile level in a web map tile service.

Additionally, this can be a useful reference for understanding the tile indexing and coordinate transformation processes in the clipping method of the present invention.

In the case of Fig. 4, the operation of the Web Map Tile Service (WMTS) using the quadtree system is shown, and the main components of the image are as follows.

In the case of the Earth, the Earth is a sphere, but in images it is represented as a flat surface.

In the case of a quadtree, a quadtree is a system that repeatedly divides the Earth into four sub-tiles.

For tiles, a tile represents each region divided in a quadtree system.

For zoom levels, the zoom level indicates the zoom level of the map, and the higher the zoom level, the more detailed the tiles will be displayed.

Polygons and mask polygons are important concepts used in computer graphics and image processing.

The above polygon is a closed shape created by connecting three or more points on a plane with straight lines, and the polygon is composed of vertices and edges.

Additionally, polygons are widely used in computer graphics to represent 2D or 3D objects, and can have various shapes such as triangles, squares, and pentagons.

Additionally, polygons are used as basic building blocks in various graphics algorithms such as rendering, collision detection, and space partitioning.

The above mask polygon is a polygon used to select or exclude a specific area in an image or graphics, and the mask polygon can be used to adjust the alpha channel (transparency) of an image or to cover up a part of an image.

Additionally, pixels inside the mask polygon are preserved, while pixels outside are removed or made transparent.

Additionally, mask polygons are used in image editing, compositing, special effects, etc. Mask polygons can be defined by points, lines, curves, etc., and can have complex shapes.

The above polygons and mask polygons are closely related, and mask polygons can be seen as a special use of polygons.

Additionally, mask polygons utilize the shape of polygons to select or exclude specific areas in images or graphics.

For example, when you want to extract a specific object or area from an image, you can define that area as a polygon and use it as a mask polygon.

Pixels inside the mask polygon are preserved, and pixels outside are removed, leaving only the desired object or area.

As such, polygons and mask polygons play an important role in various fields such as computer graphics, image processing, and computer vision. They are used for object expression, area selection, and image editing, and enable effective visual processing.

And, for tile images, the tile image is an image representing each tile.

In particular, for masking polygons, a masking polygon is a transparent film used to selectively visualize a specific area.

To explain the image, it shows the first level of a quadtree system that divides the Earth into four sub-tiles, each of which is identified by a number: 0, 1, 2, 3… n.

Also, it shows the 2nd tile at zoom level 1 divided into 4 sub-tiles, and the number of tiles increases as you go down in powers of 4.

For example, there are 4 child tiles under the top tile, and the number of tiles in n-1 is 1/4 of the number of tiles in n.

Also, as the zoom level increases, the photo accuracy of the map surface increases and the number of tiles also increases.

When requesting tiles from a server, we usually use an x, y, z schema, where x is the horizontal index, y is the vertical index, and z is the zoom level.

Additionally, the text in the image shows the number of tiles at each level of the quadtree system and the tile size according to the zoom level, and the arrows in the image indicate the tile division process according to the change in zoom level.

And, as shown in Fig. 5, the image represents the Google Mercator Projection used in the Web Map Tile Service (WMTS).

This projection is commonly used to represent the spherical surface of the Earth on a 2D map, and the image shows the map divided into a grid, which represents map tiles.

Each tile has its own x and y coordinates, which are managed using a quadtree data structure, and the grid represented by red lines represents the boundaries of the tiles, which is designed to allow efficient retrieval and access to specific parts of the map.

The coordinate values seen in the image represent the range of the entire projected coordinate system used by WMTS, which can typically cover the entire world, with minX and minY representing the minimum boundary values of the coordinate system, and maxX and maxY representing the maximum boundary values.

Therefore, when a user zooms in or moves around an area on a web map, the relevant tiles are used to quickly load and render them, and in this way, map tiles minimize the data in the map area that the user can see, thereby reducing loading times and improving overall user satisfaction.

Meanwhile, as illustrated in Fig. 6, the process of using the clip() method of the HTML Canvas element in the clipping area rendering step (S430) is illustrated.

The clip() method in Canvas is used to restrict drawing to only a certain part of the Canvas. Here, the star-shaped path is set as the clipping area, and the checkered pattern is drawn only within this area, and nothing is drawn on the rest of the Canvas.

This only applies after the clip() method is called.

The stars in the above image must first be defined as a path, and then the clip() method sets this path as the current clipping path.

All subsequent drawing operations will be rendered only within the area defined by this path, and any checkered portions outside the star shape will be invisible because they are outside the clipping area.

Also, the X and Y axes are shown to indicate that this process is taking place in a 2D coordinate system, a technique that is useful for drawing complex graphics on web pages, or highlighting certain parts of an image and hiding others.

Also, in the case of FIGS. 9 to 11, as an application of a geographic information system (GIS), the three images each represent a different step.

For Fig. 9, the original satellite image before GIS analysis began is shown as a pre-processing image with administrative boundaries marked on it, showing the entire region before specific areas are highlighted.

In the case of Fig. 10, as a mask polygon image, this image is an image in which a mask polygon or clipping technique is applied to a specific area (a specific administrative district), and this area is distinguished by color from the rest of the map, and is a preprocessing step for analysis or display.

In the case of Fig. 11, as an image after processing, this image shows the appearance after the mask polygon or clipping processing is completed, and a specific area is clearly visible from the rest of the area, which can indicate the results of geographical analysis or the area to be ultimately emphasized.

The above drawings highlight the importance of data layers in GIS, which allow specific information (e.g., administrative boundaries, demographics, topography) to be overlaid on a base map to provide more context and insight.

At this point, the processing process typically involves data selection, highlighting areas, and visualizing the final results, and these types of images can be used for policy making, urban planning, resource management, and educational purposes.

Meanwhile, the HTML Canvas Element can be used to draw graphics via script.

For example, it can be used for graph drawing, photo compositing, animation creation, real-time video processing, and rendering.

Additionally, the CanvasRenderingContext2D.clip() method of the Canvas 2D API converts the current or specified path into the current clipping area.

If a previous clipping area exists, creates a new clipping area by intersecting it with the current path or the specified path.

In the case of Fig. 6, the result of clipping using the clip() method is shown. The red outline indicates a star-shaped clipping area, and only the checkerboard pattern portion within the clipping area is drawn.

Meanwhile, below we will explain in detail how to obtain variable values using the Clipping technique.

In the case of obtaining variable values, as shown in Fig. 7, the indices can be mapped to xIndex and yIndex for each tile.

For example, in the case of zoom level 13 in Fig. 7, the number of tiles on the X-axis and Y-axis is 2 to the 13th power, which is 8192 tiles, and the index of the last tile on the lower right can be found as xIndex:8191, yIndex:8191.

zoomLevel = 13

maxCntX = 2^13 = 8192

maxCntY = 2^13 = 8192

xIndex = 0~8191

yIndex = 0~8191

In Fig. 8, using zoom level 13 as an example, the width and height of the tile can be known.

tileWidth = (maxX - minX) / maxCntX = 4891.969810251279

tileHeight = (maxY - minY) / maxCntY = 4891.969810251279

Additionally, using zoom level 13 as an example, you can find out the location (up, down, left, right coordinates) of a specific tile.

NORTH(top) = maxY - yIndex * tileHeight

SOUTH(lower) = maxY - (yIndex + 1) * tileHeight

WEST (left) = minX + xIndex * tileWidth

EAST(right) = minX + (xIndex + 1) * tileWidth

At this time, most WMTS use 256*256 or 512*512 pixel size for one tile.

originTileWidth = 256

originTileHeight = 256

Additionally, the pixel values of the original tile photo and the aspect ratio of the tile in UTM are calculated.

ResolutionX = originTileWidth / tileWidth

ResolutionY = originTileHeight / tileHeight

Additionally, the X, Y ratio is multiplied by the WEST (left) and SOUTH (bottom) of each tile and used in the later algorithm.

AdjustX = WEST * ResolutionX

AdjustY = SOUTH * ResolutionY

Meanwhile, below we will explain in detail the pseudocode algorithm among the clipping techniques.

As shown in Figure 12, a CanvasRenderingContext2D object is obtained using Canvas in the first line.

After this, prepare to draw a line in the second line.

Afterwards, in the 4th line, a loop is used assuming there are multiple polygons.

After that, in the 6th line, the geometry information contained in the polygon is retrieved.

After that, in the 7th line, we iterate over all the vertices included in the geometry.

After that, in the 9th line, the vertex information of the geometry is retrieved.

After that, in the 10th line, the X-coordinate calculated from the vertex X-coordinate is obtained.

Afterwards, in the 11th line, the Y coordinate calculated from the vertex Y coordinate is obtained.

The reason Math.Floor is used in lines 10 and 11 is to improve the performance of the Canvas element.

After that, in line 13, a line is drawn using the CanvasRenderingContext2D.lineTo function.

Afterwards, in line 17, each tile is clipped using the CanvasRenderingContext2D.clip function.

Afterwards, in line 18, the CanvasRenderingContext2D.drawImage function is used to output to the Canvas element.

If the above pseudocode algorithm is processed, the results in Figs. 9 to 12 can be output.

According to the present invention, unlike the existing web map tile service that processes the entire tile data, the present invention allows the user to selectively clip and visualize tile data only for a specific area of interest, thereby increasing data processing efficiency and improving user experience.

In addition, by presenting a graph showing the change in the number of tiles and resolution according to the tile level, it has the effect of helping the user select an appropriate tile level and visually understanding the tile indexing and coordinate conversion process.

In addition, it can be usefully utilized by web map service providers, GIS application developers, etc., and is expected to enable effective visualization and analysis of web-based spatial data in various fields.

Those skilled in the art will understand that the present invention, as described above, can implement other specific forms without changing the technical idea or essential features of the present invention. Therefore, it should be understood that the embodiments described above are illustrative in all respects and are not limiting.

The scope of the present invention is indicated by the claims described below rather than the detailed description above, and all changes or modifications derived from the meaning and scope of the claims and their equivalent concepts should be interpreted as being included in the scope of the present invention.

100 : Calculator
200 : Input section
300: Clipping area setting section
400 : Rendering section

Claims (2)

A method for visualizing image tile data of a web map tile service by clipping it to a user-defined area,
A calculation step (S100) in which a calculation unit (100) calculates tile indexing information and coordinate transformation parameters based on a quadtree;
An input step (S200) in which the input unit (200) receives spatial object information of a geographic area to be clipped from the user;
A clipping area setting step (S300) in which a clipping area setting unit (300) creates an HTML Canvas element and sets a clipping area based on the input spatial object information;
The rendering unit (400) includes a rendering step (S400) in which the rendering unit (400) selects a tile image overlapping the user-defined area using the quadtree-based tile indexing information and coordinate conversion parameters and renders it on an HTML Canvas;
The above rendering step (S400) is
A tile selection step (S410) for selecting tiles overlapping with a user-defined area using the quadtree-based tile indexing information;
Canvas coordinate system conversion step (S420) that loads the selected tile image and converts the tile coordinates into the canvas coordinate system;
A method for visualizing image tile data of a web map tile service by clipping it to a user-defined area, characterized by including a clipping area rendering step (S430) for rendering a coordinate-transformed tile image to fit a clipping area on an HTML Canvas.
In paragraph 1,
The above calculation step (S100) is
A boundary coordinate calculation step (S110) for calculating a unique identifier and boundary coordinate information of a tile according to the spatial coordinate system of map data and the tile level;
A method for visualizing image tile data of a web map tile service by clipping it to a user-defined area, characterized by including a tile level calculation step (S120) for calculating coordinate transformation parameters required for clipping, such as tile size and resolution, according to the tile level.