随着互联网技术的发展和电脑的普及，通过电子海图查看实时船舶运动状态和港口动态信息已经成为港口信息化建设不可或缺的重要组成部分。传统Ｃ／Ｓ（Ｃｌｉｅｎｔ／Ｓｅｒｖｅｒ）模式电子海图虽然在显示速度和功能开发便捷度方面都有较高的优势，但由于海图是一种需要经常改正的航用资料，Ｃ／Ｓ模式电子海图改正通常是通过电子邮件、光盘或软盘将改正资料拷贝给用户来完成，这使得Ｃ／Ｓ模式电子海图的改正既不方便也不及时，所以Ｃ／Ｓ模式海图显示和监控平台已经日渐满足不了用户的需求。而开发基于Ｗｅｂ浏览器的Ｂ／Ｓ（Ｂｒｏｗｓｅｒ／Ｓｅｒｖｅｒ）模式电子海图就能很好的解决这一问题，海图改正和软件升级只需在服务器端完成，用户只需打开浏览器，就能看见最新的海图资料和享受最新的海图操作功能。
当前大部分Ｗｅｂ海图是开发相应的ＡｃｔｉｖｅＸ控件，当用户首次访问该页面时，控件和海图图片就会一起被下载到本地电脑，然后该控件根据设定好的程序进行图形的绘制、放大、缩小和平移等操作。该方式不仅需要开发服务器端程序，还要开发客户端控件，并且开发这些ＡｃｔｉｖｅＸ控件还需要考虑其对不同浏览器的兼容性，运行这些控件无疑会影响浏览器速度。浏览器模式电子海图的显示是利用海图分层存储技术将用户所需求的大量信息，在服务器端完成处理，用户只需要简单地向服务器发出调令，然后通过Ａｊａｘ引擎直接将结果反馈给用户，在此设计结构下用户无需下载任何控件，而且图像处理由服务器完成，减少了客户端的负担。
１海图图片处理
１．１基本请求原理
这里所述的海图均是指按照Ｓ－５７标准制作，按Ｓ－５２标准显示的光栅海图。Ｓ－５７标准提出“不同的应用必须提供自己特定的显示模式，通过一组显示规则，将真实世界按特殊应用的目的显示出来”。因此，方案根据不同的用途，提供三种显示模式：基本显示、标准显示和全部显示。每种显示模式又根据不同的视觉环境分为：白天、夜间、蒙影。
将每个地区的海图均按照这几种模式提前做好海图图片，分别存储在不同的文件夹下，用户在客户端操作时，根据不同的需求和环境向服务器发送请求，服务器将对应的海图传送给用户，具体的过程见图１，从图１可知，这种模式也说明用户只是被动接受，所有的操作都在服务器端进行。
这些事先用图片处理软件绘制而成的栅格图片全部被切割成相同像素的图片，称之为底图（ｂａｓｉｃｍａｐ），大的底图又被切割成相同大小的基准海图图片（Ｂｅｎｃｈｍａｒｋｃｈａｒｔ），预先存储在服务器空间里面，当用户首次访问时，这些海图图片就会被下载到本地电脑，加以缓存。用户所实现的一些高级功能（如测量尺寸等）是通过运行在浏览器里面的Ｊａｖａｓ－ｃｒｉｐｔ程序实现。因为这些图片很小，所以很容易被下载，Ｊａｖａｓｃｒｉｐｔ代码很容易加载，当下一次访问或者刷新页面时，就不需要再次下载这些底图，而是只传输一些船舶的动态信息和航行安全信息等，从而减少数据量，既提高了访问速度也减轻了服务器负荷，因此可以同时支持更多的用户进行操作。
必须澄清的是，并不是在首次访问就把所有海图都下载了，而是只下载当前屏幕显示范围内的海图。
为了便于计算，规定每一张基准海图图片的大小为２５６×２５６像素，海图处于第ｎ级，该级所拥有的海图图片行数为：ｘ１＝２ｎ－１／行，所对应的列数为：ｘ２＝２ｎ－１／列，这样，每一级别所拥有的海图瓦片数量Ｎ＝ｘ１×ｘ２。
１．２海图图片的切割
图片在被切割成一片一片前采用常用的绘图软件制作。绘制海图前首先需要先定义其图幅范围，先找一个坐标中心点，我们将这个中心点取在该张海图的中心处，坐标值为（０，０）。图２中左边较小的表示第二级海图，其所包围的像素范围为（－２５６，２５６，２５６，－２５６），整幅图由四张基准图片构成。当将其放大一级之后，它由１６张基准图片组成，像素范围为（－５１２，５１２，５１２，－５１２），其图片数量为上一级的４倍。
这样在制作不同区域、不同环境、不同条件下的底图时就需要完美的接合，然后使得边缘处既不重叠，也不存在缺口。
１．３海图的分层存储
一般情况下，海图比例尺越大，显示的信息越多、越详细。航海者通常根据自己不同的需求使用不同比例尺的海图。电子海图也应该提供不同比例尺的选择，因此在制作底图时，就需对不同比例尺的海图分别制作。比例尺每放大一次，海图的放大级增加一级。将每个地区，每个级别的海图独立存储。
第一级海图的比例尺最小，相当于当前海区的总图，底图图幅大小为２５６×２５６像素，共由一张图片组成。第二级是将第一级放大，分成四片，每一小片的大小仍然为２５６×２５６像素，这样相当于第二级的海图共有（２５６＋２５６）×（２５６＋２５６）像素，第三级将在第二级的基础上再次将每一片分成４个小片，仍然是将比例尺放大，以此类推。当第四级时将会由６４张２５６×２５６像素的图片组成，其总共的大小为２０４８×２０４８像素。级别越高，海图的比例尺越大，所包含的航海信息越详细。当用户放大当前地图时，浏览器里的Ｊａｖａｓｃｒｉｐｔ程序就会自动判断当前的请求级别，发送给服务器端，Ｏｐｅｎｌａｙｅｒｓ服务器端会根据请求发送相应的海图。而在存储海图图片时，我们将不同级别的海图放在不同的文件夹（见图３），当用户选择不同比例尺的海图时，服务器就会调用不同路径的海图供显示
这些存放在服务器硬盘的海图，分别放在以海图级别命名的文件夹。图３共有５个文件夹，当前具有５个放大级别可以选择。每一级里面所拥有的基准海图行数和列数分别为２ｎ－１，我们将每一级的海图图片存放在以ｎ－１命名的文件夹。
因为每一级海图里将有很多海图瓦片，如果没有合理的存放方式，首先会给调用海图带来困难，其次将使海图的正确显示出现难以预料的结果。因此，我们的思路是：将每一级海图存放在独立的文件夹，然后在这个文件夹下再建立新的文件夹，这个文件夹命名时以海图所在的列命名，然后再将该列里所有图片存放于该文件夹，该列里的图片以该图片所在的行命名。都从“０”开始编号，以此类推，该数字表示在这些海图瓦片所在的级别、行和列。这样服务器就可以通过“图层级别／列号／行号”的索引顺序找到对应的瓦片。如图３所示，如果客户端需要请求第４级图层第１列的第４张瓦片，就可以按照“ｈｔｔｐ：／／……３／０／３．ｐｎｇ”的链接方式找到此瓦片。
２海图的显示
想实现海图的快速而正确的显示，需要解决两个问题即海图的定位和海图的快速调出。
２．１海图的定位
根据海图切割软件输出图片的模式可知，在一张底图的最左下角的图片定为第０列第０行，列号往右递增，行号往上递增。我们这里也这样定义，相当于最左下角的基准图片所在的坐标为（０，０）。
当用户拖动或放大海图时，浏览器会判断当前窗口内的空白区域，根据空白区域的位置调出相应的海图瓦片，然后将其拼接在当前的空白区域，这就实现了海图的平滑拖动和逐级放大。但是如果用户放大的速度过快，那么，当网速不够快时就会出现下载延迟。当用户缩小海图时，就可以完全实现连续的效果，因为以前的海图图片已经缓存在本地电脑。
浏览器的判断过程如下：因为海图的放大都是逐级操作的，因此我们定义每一级所有海图的中心为坐标原点。如图４所示，当用户请求第四级的海图数据时，共有６４张瓦片，总像素为２０４８×２０４８，那么右下角的坐标值为（－１０２４，１０２４）。
显然，该海图不能全部显示，就需要拖动来显示隐藏的区域。当窗口刚放大时，窗口上任一点坐标为（Ｘ，Ｙ），请求的这张海图瓦片所在的放大级别用Ａ表示，其所在的列用Ｂ表示，行用Ｃ表示。那么当级别放大时，这个点位空白，浏览器会根据空白位置向服务器调出海图并下载，填充空白位置。以此类推，浏览器判断出当前窗口上所有的空白地方，然后调出海图。如果平行拖动海图，就不需获取等级，只需判断Ｂ和Ｃ的值即可。
２．２海图的快速调出
海图的快速传输与显示需要借助于Ａｊａｘ的异步传输机制。Ａｊａｘ的异步传输技术能有效地解决同步通信中所存在的阻塞问题，即使海图数据没有完全传输完成，用户也可以进行操作，只是没有下载的海图将以空白显示，不需要等待，一旦相应的海图下载完成，页面也不会整体刷新，只是将海图填充上去，也就是“无刷新更新页面”。
这就需要在用户端和服务器之间多加一层Ａｊａｘ引擎，它以后台运行的方式，不断地将用户的调用信息处理并转发给服务器［１０］，随后不断地将服务器的处理结果传输并显示到客户端，它完全是“按需调用数据”，避免不必要的数据来往。
３效果评价
Ｗｅｂ海图效果见图５，图５中显示的是宁波北仑港区电子海图，使用的浏览器是ｆｉｒｅｆｏｘ，该方法设计的电子海图同样可以在ＩＥ、Ｇｏｏｇｌｅ等浏览器上显示，对浏览器的依赖性很小。经过测试，网速为１Ｍ，用ｆｉｒｅｆｏｘ浏览器通过Ｉｎｔｅｒｎｅｔ初次浏览Ｗｅｂ海图３～４ｓ就可完成，以后显示所需时间约１ｓ。
4结语
针对传统的Ｃ／Ｓ模式电子海图的一些已知的问题，设计构架了Ｂ／Ｓ模式的电子海图。在电子海图的切割、存储和传输方面提出了一些新的方法，设计了其具体的实现步骤。
要想让Ｂ／Ｓ模式的电子海图拥有和Ｃ／Ｓ模式一样的功能，还需要进行更多的投入。
