基于Web的三维集装箱船图可视化研究

使用集装箱船图可以有效组织港口集装箱装卸作业，保证船舶及货物的安全使用，合理利用港口资源并

对于现阶段的海上货轮运输业来说，传统的集装箱港口管理已经不能满足各个码头现代化管理的需求，港口业务的数据管理与三维可视化场景相结合能够成为提高核心竞争力的有效途径，直观的三维可视化展示可以使整个业务流程更加核心化、规范化、标准化，进一步提高码头生产的专业深度，有效加快港口业务速度，提高船舶与集装箱业务操作能力，使船舶运营、码头装卸和堆场管理更加协调、科学和高效。

而如今有许多的成熟的技术可以为我们提供实现数据可视化的平台开发基础。

HTML5 标准及其所包含或所关联的Canvas、SVG、WebGL 等相关技术的出现将数据可视化带到了Web 平台上。因此， 在Web 端完成三维场景的展示甚至通过移动端来查看三维场景可以成为一种新的手段。

假如港口集装箱的三维场景可以直观的在浏览器上展示，甚至这种三维场景可以与码头集装箱管理系统相结合，完成港口集装箱数据的关联和集成，快速更新集装箱的相关信息，实现港口资源的有效利用和共享，那么对于集装箱装卸流程和整个港口的业务管理来说都是十分有价值的事情。

2. 系统设计原理 本文的设计原理是通过JavaScript 来创建和管理数据并借助HTML5 的技术实现三维可视化的目的， 这种技术在多年的完善和发展后是可以得到充分的验证和实现的。在HTML5 中增加了canvas 这个基于JavaScript 绘图的API。为实现Web 平台的数据三维动态可视化提供了这样一个思路，可以利用HTML5的canvas 将一张画布放置于Web 前端， 使用WebGL 提供的JavaScript 编程接口在画布上进行3D 绘图， 通过canvas 来获取WebGL 特定的绘制上下文，这里使用WebGL 框架中的Three.js 来进行绘制，这样就可以在Web 平台上显示三维数据模型。当然还要实现数据的动态交互，这里用JSON (JavaScript Object Notation)作为平台间交互的数据传输格式，在J2EE 架构的基础上利用JQuery 结合Ajax 技术，实现用HTTP Get 和HTTP Post 方法从远程服务器上发送或请求JSON， 到了后台Servlet 里实现与数据库的交互[1]。

最终呈现的结果是Web 上的三维对象可以与数据库实现动态交互。

不论是绘制三维数据模型还是与数据进行动态交互，在框架的整体构建上都共同用到了JavaScript (本文所用的JQuery 是JavaScript 的简化版本)来开发，JavaScript 成为了联系两个平台之间的纽带，这使数据的动态三维可视化成为可能。