International Journal
on Marine Navigation
and Safety of Sea Transportation
Volume 1
Number 2
June 2007
171
A Method to Build Web Raster Chart System
Qinyou Hu & Lili Yu
Merchant Marine College, Shanghai Maritime University, Shanghai, China
Jinhai Chen
Merchant Marine College, Shanghai Maritime University, Shanghai, China
Navigation College, Jimei University, Xiamen, Fujian, China
ABSTRACT: Great attentions have been paying by many shipping countries to the digital chart application in
the field of maritime traffic. To resolve “Information Isolation”, numerous Web chart systems have been
developed over the world. Most of them, however, are vector chart based. This paper advances a method to
build web chart system with raster data. System architecture, coordinate transformation as well as the splitting
and rendering of raster charts are introduced in this paper. By using the pre-rendered chart tiles, the web raster
chart system can be accessed with higher speed than most vector chart based web rendering system in wide
bandwidth network. The experiment also shows the rendering error of this method is small enough for many
kinds of application.
1 GENERAL INSTRUCTIONS
Great attentions have been paying by many shipping
countries to the digital application in the field of
maritime traffic. Recent pushes in these areas have
opened up interesting new opportunities for
maritime professionals. They have put forward the
industry’s digital application strategy such as the
“Digital Maritime Traffic”, which is based on
information gathering and their utmost sharing.
Unfortunately, due to “Information Isolation”
(Guojun, P. & Tianhe, C. 2005a.) between different
marine departments, it seems a bleak prospect in
construction of “Digital Maritime Traffic” currently,
so it is important to ameliorate the existing imperfect
network releasing and sharing of information from
digital chart on sea traffic space.
To overcome this barrel, many web chart systems
have been developed. Due to their wider visit scope,
browser interface, lower cost, easier to operate and
faster release of safety message, web chart systems
have been widely used in maritime traffic
applications. Most of them (Guojun, P. & Tianhe, C.
2005b.), however, are vector chart based. They are
not suitable for many applications where vector
charts are unavailable or not necessary. This paper
tries to establish a B/S (Browser/Server) based three-
layer raster chart system, working in the
environment of Internet or Intranet, is virtually an
industrial WEBGIS system designed for maritime
traffic application, which stores, processes, analyzes,
displays and applies sea digital geographical map
information. Through popular Internet Browser, user
can browse, inquire and obtain services based on
spatial data in digital chart and related operational
attribute data. With the development of technologies
such as marine Navigation-Aids, AIS (Automatic
Identification System), marine navigation and
marine digital communications, the application of
Web Raster Chart System, together with the above
technologies, will help improve the safety level,
traffic capacity and transport efficiency of marine
traffic in particular area. This paper makes a detailed
introduction to the research and realization of the
Web Raster Chart system, and from the viewpoint of
technology, it gives an example of its application.
172
2 SYSTEM ARCHITECTURE
The architecture of web raster chart system (see
Figure 1) comprises of chart tiles database, the raster
chart application server, web server and Internet
explorer. The database, as its name shows, is used to
store the chart tiles at the server side. All chart tiles
in the database are well organized to accelerate the
access speed. The function of raster chart application
server is to accept certain chart operation request
from the web server, select certain chart tiles from
the database and send the tiles back to the web
server. The web server accepts the user’s requests
from the internet browser, balances the load and
manages the services, re-orientates the requests to
the raster chart application server and accepts the
chart tiles from the raster chart application server,
and then sends them back to the web browser at the
user’s end in the PNG format. The web browser
accepts and uploads the user’s requests to the web
server, downloads the raster chart rendering
programs (in javascript) and chart tiles, and then
displays the accepted chart tiles to the user.
??
??
Browser Browser
Web Server
Java Scripts, JSPs
Application Server
Servlets
Chart Tile
Database
HTTP
HTTP
Fig. 1. System Architecture
3 CHART TILE DATABASE CONSTRUCTION
The chart tile database construction is a process to
create pre-rendered chart tiles from paper charts or
digital charts and to index them.
Paper charts have been refined over many years
and give the mariner exactly what they need for
certain purposes. Because of this, raster charts,
scanned from the original charts, should be a good
source for chart tile database. The digital charts,
which are widely used in ECDIS or ECS, are
alternative sources as they can be displayed by ECDIS
or ECS and the rendered image could be saved as
raster charts.
Due to the huge size of the raster charts (up to
10,000px ×10,000px), they will overload the network
when users access them. In this research, raster charts
are split into numerous chart tiles, which usually have
small size and are downloaded on necessary.
This section will build a grid to split chart images
into chart tiles, and then index them.
3.1 Building Splitting Grid
We suppose that at zoom level m, the earth surface is
divided into a grid with 2
m
×2
m
cells (or tiles). The
value of m could be 0 or more. Obviously, the bigger
m is, the more tiles the globe is divided into (see
Figure 2).
In Figure 2, we suppose a tile have a size of
256px×256px and the center point has a pixel
coordinate of (0,0), then the pixel coordinate of any
point (include the intersect points) on the grid can be
easily determined.
1
2
3 4
1
2
3
4
Zoom=1,4 tiles
Zoom=3,64 tiles
Zoom=2,16 tiles
1 tile =
256 square pixels
X = the number of
horizontal tiles
divided by 2
Y = the number of vertical tiles
divided by 2
Fig. 2. Splitting grid at different zoom level
3.2 Coordinates Transformation
To facilitate the splitting of the chart images,
coordinate transformation equations between the
above grid coordinates and geographical coordinates
should be built. The coordinate transformation
depends on the projection the source chart adopted.
Since Mercator projection (Richardus. & Peter.
1972.) is widely used in nautical chart plotting, we
only consider the Mercator chart image in this
research for simplicity.
To transform a geographical coordinate, i.e. (
ϕ,
λ
)
into a plane rectangular coordinate, i.e. ( x
, y
) by
Mercator projection, Equ.(1) and Equ.(2) are usually
used.
(1)
(2)
where a denotes the semi-major axis of the
ellipsoidal globe, e stands for the eccentricity of the
ellipsoidal globe,
λ
is longitude in radians (positive
east), and φ is latitude in radians (positive north).
We assume the earth is a Krassowski-1940
ellipsoidal globe (Moritz, H. 1990), so we can let e
=0. 08181333.
xa
λ
= ×
2
1 sin
ln tan
4 2 1 sin
e
e
ya
e
πϕ ϕ
ϕ
−
= +
+
173
At a certain zoom level m, a can be calculated by
Equ.(3):
(3)
where w is the width of a tile (256 pixels in this
research).
3.3 Splitting Chart Image into Tiles
Given the splitting grid at certain level, the
coordinate transformation equations, a chart image
can be easily split into tiles. Firstly, select several
control points on the chart image, measure their
geographical coordinates and calculate their
corresponding splitting grid pixel coordinates with
Equ. (1) and Equ. (2). Then place the chart image on
the splitting grid according to the splitting grid pixel
coordinate of the control points. Since the distortion
may occur when digitizing the original paper chart,
least square algorithm is applied to calibrate the
chart image and the splitting grid (Qinyou, H. 1999).
After locating the chart image at the right position on
the splitting grid, cut the image along the vertical
and horizontal line on the splitting grid, tiles are
created. Each tile will get a name according to its tile
coordinate and zoom level.
Figure 3 give a simple illustration of chart image
splitting by the splitting grid.
Fig. 3. Splitting chart image into tiles
4 TILES RENDERING
As described in previous sections, the surface of the
earth is mapped to a grid space which comprises
2
m
×2
m
cells (or tiles) at zoom level m. In a HTML
document, we create a “div” element for the whole
grid space, and name it inner div (see Figure 4).
Also, we create a “div” element for the rendering
area and name it outer div (see Figure 4). Because
we can’t load all the tiles in the grid up front, we’ll
need to calculate which of these grid cells are visible
and load the tiles needed to fit into these cells. As
Figure 4 shows, this is accomplished by calculating
which grid cells are visible within the area created
by the size of the outer div. In the figure, we see that
nine cells are visible across three rows. Note that
those cells that are only partially visible still count as
being visible.
The next step requires us to populate our inner
div with the map tiles. Our approach to this will be
fairly simple. Initially, nine titles the outer div
covered are added to the inner div. The scrolling
map effect is achieved by moving the inner div
inside of the outer div; therefore, the tiles we need to
display are calculated by determining the current
position of the inner div relative to the outer div and
then working out which tiles are visible in the
portion of the inner div that is visible. We’ll then
add those tiles to the inner div.
Fig. 4. Tile rendering
5 EXPERIMENTAL ANALYSIS
According to the technologies introduced in the
previous sections, we developed an experimental
system (see Figure 5). Common functions, such as
moving, zooming in, zooming out, bird’s eye,
relative bearing and distance measuring, etc., have
been implemented. To experience the experimental
system and the above functions, please visit our
website (http://www.voffer.org /webchart/).
Rendering error is one of the most important
evaluation parameters for chart displaying system.
As a test, we measured, at a zoom level of 13 and
with a sampling interval of 0.5′, the rendering error
on 121°40′E longitude line and 31°40′N latitude line
of nautical chart No. 13170 (Chang Jiang Kou,
China). Figure 6 and Figure 7 shows the error curves
respectively.
Fig. 5. Interface of the Web raster chart system
(from http://www.voffer.org/webchart/
)
2
2
m
w
a
π
×
=
174
-0.03
-0.02
-0.01
0
0.01
0.02
0.03
1 3 5 7 9 11 13 15 17 19 21 23 25
ERROR(')
Fig. 6. The error curve in longitudinal direction
The maximum rendering error (not include the
source chart error) shown in Figure 6 and Figure 7 is
0.02′(about 37m), which is acceptable for many
kinds of maritime traffic application, such as vessel
monitoring, tracking etc.
-0,02
-0,01
0
0,01
0,02
1 3 5 7 9 11 13 15 17 19 21 23 25
ERROR(')
Fig. 7. The error curve in latitudinal direction
6 RELEVANT WORK
Generally, Web vector chart system, such as Sea
Digital Map based on WEBGIS (Guojun, P. &
Tianhe, C. 2005a), need an additional database to
store the vector data as well as a GIS engine
(ArcGIS, GeoBeans, etc.) to support the
geographical queries. On the contrary, in our
research, all chart tiles are managed by a file
manager, which is available from most computer
operation systems. Moreover, The GIS engine is not
necessary in our research. Therefore, our work
provides a more economic solution for Web chart
system than the vector systems. Besides that, due to
the pre-rendered chart tiles, the Web raster chart
systems can be accessed with higher speed than the
vector systems, especially in a wide bandwidth
network.
We borrow some ideas from several popular map
sites (Google maps,Yahoo maps etc.), such as tile
technology, tile rendering, etc. The major difference
between our work and the popular technologies is
the coordination transformation. In the coordination
transformation, we suppose the earth to be ellipsoid
while in other work the earth is assumed to be a
sphere.
7 CONCLUSION
This paper makes a detail introduction of the method
to realize a Web raster chart system. According to
this method, we developed a Web raster chart system
successfully.
By using the pre-rendered chart tiles, the web
raster chart system can be accessed with higher
speed than most vector chart based web rendering
system in wide bandwidth network. The experiment
also shows the rendering error of this method is
small enough for many kinds of application.
With the development of technologies such as
AIS and marine digital communications, the Web
Raster Chart System, together with the above
technologies, could be used to improve the
information sharing in marine traffic field.
ACKNOWLEDGEMENTS
This work was supported by Shanghai Leading
Academic Discipline under Grant No.T0603.
REFERENCES
Guojun, P. & Tianhe, C. 2005a. Research on Sea Digital Map
based on WEBGIS. IGARSS'05. Proceedings. 2005 IEEE
International Volume 2, Issue , 25-29 July
Guojun, P. & Tianhe, C. 2005b. Research on WEBGIS real-
time distribution system of port navigation-supporting
information. IGARSS'05. Proceedings. 2005 IEEE
International Volume 2, 25-29 July.
Moritz, H. 1990. The Figure of the Earth – Theoretical
Geodesy and the Earth’s Interior. Herbert Wichmann
Verlag Karlsruhe..
Yixing, X. & Li, H. 2003. Research on arithmetic of
coordinates transformation in ECDIS ,Journal of
Engineering Design, Vol. 10 No. 5 Oct.
Richardus. & Peter. 1972. Map Projections, for Geodesists,
Cartographers and Geographers. North Holland Publishing
Company, Amsterdam.
Qinyou, H. 1999. Application of Least Square Algorithm in
Process of Digitizing Nautical Chart. JOURNAL OF
SSSRI
, Vol. 22 No. 2 Dec.
ERROR(‘)
