船讯网API典型应用场景介绍

船讯网 API 典型应用场景介绍 V1.3.
亿海蓝（北京）股份技术公司
2015 年 10 月
目录
1 船讯网 API 概述 .............................................................................................................. 1
1.1 API 分类 ........................................................................................................... 1
1.2 API 使用 ........................................................................................................... 2
1.2.1 KEY 的申请与使用 ................................................................................... 2
1.2.2 API 运行环境 ........................................................................................... 2
1.2.3 开发演示 ................................................................................................... 2
1.2.4 文档下载 ................................................................................................... 2
2 地图操作........................................................................................................................... 3
2.1 地图基本操作 ................................................................................................... 3
2.2 监听地图事件 ................................................................................................... 4
3 船舶查询及展示 ............................................................................................................... 5
3.1 查询船舶 ........................................................................................................... 5
3.1.1 模糊查询船舶 ........................................................................................... 6
3.1.2 查询指定 ID 的船舶................................................................................. 7
3.1.3 查询指定区域的船舶 ............................................................................... 8
3.1.4 查询指定船队的船舶 ............................................................................... 9
3.2 船舶显示 ......................................................................................................... 12
3.3 船舶定位 ......................................................................................................... 13
3.4 船舶样式更改 ................................................................................................. 13
3.5 船舶监听事件及信息框显示 ......................................................................... 16
4 轨迹查询及展示 ............................................................................................................. 18
4.1 轨迹查询 ......................................................................................................... 19
4.2 轨迹显示与定位 ............................................................................................. 20
4.3 轨迹样式更改 ................................................................................................. 21
5 叠加覆盖物..................................................................................................................... 24
5.1 叠加点 ............................................................................................................. 24
5.1.1 叠加点 ..................................................................................................... 24
5.1.2 点样式更改 ............................................................................................. 25
5.2 叠加线 ............................................................................................................. 27
5.2.1 叠加线 ..................................................................................................... 27
5.2.2 线样式更改 ............................................................................................. 28
5.3 叠加面 ............................................................................................................. 30
5.3.1 叠加面 ..................................................................................................... 30
5.3.2 面样式更改 ............................................................................................. 31
5.4 监听覆盖物事件 ............................................................................................. 33
6 船队管理......................................................................................................................... 34
6.1 添加分组 ......................................................................................................... 34
6.2 添加船舶 ......................................................................................................... 35
6.3 修改分组及船舶 ............................................................................................. 36
6.4 删除分组及船舶 ............................................................................................. 37
7 气象服务显示 ................................................................................................................. 38
8 典型应用场景 ................................................................................................................. 39
8.1 港口业务信息显示 ......................................................................................... 39

8.1.1 船舶信息框显示业务信息 ..................................................................... 39
8.1.2 实现方式 ................................................................................................. 40
8.2 港口码头可视化展示 ..................................................................................... 41
8.2.1 码头数据展示 ......................................................................................... 41
8.2.2 视频展示及调用 ..................................................................................... 46
8.2.3 实现方式 ................................................................................................. 47
8.3 提醒服务 ......................................................................................................... 48
9 常见问题......................................................................................................................... 49
1 船讯网 API 概述
1.1 API 分类
为了方便用户使用船舶数据开展更加个性化的应用，满足更多用户的定制需求，船讯网
提供了 JavaScript 版本的 API，用户可基于 JavaScript API，开发定制化应用。目前船讯网
提供的 API 主要分为两大类：
 数据 API：命名空间为 shipxyAPI，主要提供船舶及船舶轨迹数据获取的接口；
提示：除了调用 JS 接口可以获取船舶数据，通过 http 接口也可以获取到船舶数据，具
体可参考《船讯网基于 http 请求的原始数据提供.pdf》
 地图 API：命名空间为 shipxyMap，主要提供与地图操作相关的接口。
在实际应用中，首先可基于数据 API 获取船舶及轨迹数据，然后利用地图 API 将船舶
及轨迹数据展示在地图上，在地图上展开更丰富的应用；其次也可结合用户自身的业务信息，
在地图上开展可视化应用。
数据API-shipxyAPI 地图API-shipxyMap
模糊查询船舶地图显示及相关操作
根据ID获取船舶数据叠加点\线\面
根据区域获取船舶数据船舶叠加及样式更改
根据船队获取船舶数据轨迹叠加及样式更改
获取船舶航行轨迹数据添加地图操作相关事件
气象服务显示
亿海蓝（北京）数据技术股份公司
电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第1页

1.2 API 使用
1.2.1 KEY 的申请与使用
1、船讯网 API 提供 JavaScript 接口，在开展实际应用中，您需要首先申请密钥（key）

，
才可成功加载 API JS 文件。申请 key 的方式请具体参考 http://www.shipxy.com/API
中的申请使用项。注意：申请 key 时需要绑定服务部署的 IP 或者域名。
2、 key 的使用方法如下，必须将 key 值替换成用户自己申请的 key，才能正常使用。
//引用地图API
<script src="http://api.shipxy.com/apdll/ap.dll?api=map&key=用户申请的key&ver=1.3"
type="text/javascript"></script>
//引用数据API
<script src="http://api.shipxy.com/apdll/ap.dll?api=data&key=用户申请的key &ver=1.3"
1.2.2 API 运行环境
请在 Tomcat 或 IIS 搭建的 Web 应用环境下运行。
1.2.3 开发演示
为了方便用户理解与使用 API，船讯网提供了主要的开发示例演示 demo，地址为：
http://api.shipxy.com/APIHTML/demo.htm，请参见示例中的代码，查看具体实现过程。
1.2.4 文档下载
相关的 API 使用文档下载地址为：http://www.shipxy.com/API 中的申请使用。

2 地图操作
2.1 地图基本操作
船讯网提供地图 API，方便用户加载地图/海图/卫星图，同时提供地图放大、缩小、平
移、设置中心点，设置缩放级别等功能，以方便用户在加载地图的基础上，开展更加丰富的
应用。具体实现方式如下：
1. 创建 shipxyMap.Map(container,mapOptions)地图实例对象，初始化地图。
 container：地图放置的容器（通常是 DIV）
。可以是容器的 id，也可以是容
器元素本身；
 mapOptions：MapOptions 实例，地图初始化选项，可设置地图的中心点
经纬度、缩放级别、地图类型（海图/地图/卫星图）
。
2. 地图初始化完毕后，需要调用 shipxyMap.mapReady()函数，以确保地图的正常
使用。
3. 地图初始化及加载示例代码如下：
<script src="http://api.shipxy.com/apdll/ap.dll?api=map&key=用户申请的key &ver=1.1"

<script src="http://api.shipxy.com/apdll/ap.dll?api=data&key=用户申请的key &ver=1.1"
<script type="text/javascript">
var map;
window.onload = function () {
var mapOptions = new shipxyMap.MapOptions();//创建地图选项对象
mapOptions.center = new shipxyMap.LatLng(32, 122);
mapOptions.zoom = 5;
mapOptions.mapType = shipxyMap.MapType.CMAP;
//mapDiv是一个DIV容器的id，用于放置flash地图组件
map = new shipxyMap.Map('mapDiv', mapOptions); //创建地图初始化实例
//地图初始化完毕
shipxyMap.mapReady = function () {

//地图初始化完毕才能操作地图其他的接口
}
}
</script>
</head>
<body>
<div id="mapDiv"></div>
4. 实现效果如下：
2.2 监听地图事件
船讯网提供监听地图事件，当事件被出发时，执行监听函数注册事件实现方式如下：
1. 通过 shipxyMap. addEventListener(target,type,listener)方法注册地图事件。需
要在在 shipxyMap.mapReady 添加
 target：监听的对象
 type：事件类型。监听的事件有地图视图发生变化、地图缩放级别改变、点
击地图等，具体的事件类型可参见《船讯网地图 API 开发文档 V1.3.pdf》。

 listener：注册的回调处理函数，当地图事件被触发时，自动执行此函数。
2. 示例代码如下：
shipxyMap.mapReady = function(){
//对地图注册一个地图缩放级别改变后的事件
map.addEventListener(map,shipxyMap.Event.ZOOM_CHANGED,function(event){
//这里写具体响应方法
})
//对地图注册一个地图视图发生变化后的事件
map.addEventListener(map,shipxyMap.Event.MOVE_END,function(event){
//这里写具体响应方法
})
3 船舶查询及展示
基于数据 API 与地图 API 实现船舶数据查询与在地图展示船舶的基本流程如下：
创建船舶查询实例获取船舶数据在地图上叠加船舶
1) 基于 shipxyAPI 创建船舶查询实例。
2) 调用 shipxyAPI 提供的查询方法，获取船舶数据。
3) 结合 shipxyMap 提供的地图显示及叠加覆盖物 API，将获取的船舶数据叠加在地图上。
3.1 查询船舶
船讯网提供多种船舶查询 API，
用于获取船舶数据，所用的 API 为数据 API-shipxyAPI，
可获取船舶 shipID、MMSI、IMO、船名、呼号、船舶类型等信息。

3.1.1 模糊查询船舶
可以根据船名/呼号/IMO/MMSI，进行模糊搜索，返回包含搜索关键词的一系列船舶
数据。具体实现方式如下：
1. 基于数据 API，新建 shipxyAPI.Search()类，构建船舶模糊查询工具实例对象。
2. 利用 shipxyAPI.Search. searchShip(option,callback) 方法，查询符合条件的
船舶数据。返回的数据存储在 shipxyAPI.Search.data 属性中。
 option 包含 keyword、max 参数。通过 keyword 可传入查询关键词；
max 表示可返回的船舶数据的数量，最大可返回 200。
 callback 为回调函数，返回请求是否成功的状态值。如果成功，可获取到
船舶数据数组。
 返回的数据格式如下：
[{shipId: ‘’,MMSI: ‘’,IMO: ‘’,name: ‘’, callsign: ‘’,},

{shipId: ‘’,MMSI: ‘’,IMO: ‘’,name: ‘’, callsign: ‘’,},
…
]
3. 模糊查询示例代码如下：
var searchOj = new shipxyAPI.Search(); //构建船舶查询工具对象

//调用API查询船舶接口
searchOj.searchShip({ keyword: ‘shanghai’, max: 10 }, function (status) {
var data = this.data; //返回船舶数据
if (status == 0 && data && data.length > 0) {//回调成功
}

模糊查询查询结果
3.1.2 查询指定 ID 的船舶
如果已知船舶的 ID，可通过船舶 ID 获取某条/多条船舶数据，具体实现方式如下：
1. 基于数据 API，新建 shipxyAPI.Ships(condition,type) 实例，创建船舶数据查询
对象。
 condition：指定船舶的唯一识别码，或一组唯一识别码，通过单个或多个船
舶 ID 查询船舶数据；
 type：查询类型，船舶 ID 查询， type 为 shipxyAPI.Ships.INIT_SHIPID。
 创建指定船舶查询对象示例代码如下：
//方式一：创建单个船舶数据查询对象
var myShips1=new shipxyAPI.Ships(‘215563000’, shipxyAPI.Ships.INIT_SHIPID)
//方式二：创建多个船舶数据查询对象
var myShips2=new shipxyAPI.Ships([‘215563000’,’234514’], shipxyAPI.Ships.
INIT_SHIPID)
2. 通过 Ships.getShips(callback)方法请求船舶数据，请求完毕后，将自动调用
callback 函数，返回请求是否成功的状态值，如果返回成功，获取的船舶数据存储在
Ships.data 属性中。
3. 查询指定 ID 的船舶示例代码如下：
var myShips = new shipxyAPI.Ships(‘215563000’, shipxyAPI.Ships.INIT_SHIPID) //创

建船舶数据查询对象
myShips. getShips( //调用getShips方法获取船舶数据
function(status){
if(status ==0){
//获取数据成功
var myShipData=myShips.data; //返回的数据存储在data属性中
}
else{
//获取数据失败
}
3.1.3 查询指定区域的船舶
对于港口、码头、口岸、拖轮、海事、引航等港口企事业单位，可通过指定区域范围，
只查询并监控一定范围内的船舶数据。具体实现方式如下：
1. 基于数据 API，新建 shipxyAPI.Ships(condition,type) 实例，创建船舶数据查询
对象。
 condition：指定的地理区域范围，区域范围通过新建 shipxyAPI. Region 实
例创建；
 type：查询类型，如果按照区域范围查询，则此处的 type 为 shipxyAPI.Ships.
INIT_REGION。
 创建指定区域的船舶查询示例代码如下：
var myRegion=new shipxyAPI. Region()//创建区域对象

myRegion.data=[{lat:21.3,112.4},….]
var myShips3=new shipxyAPI.Ships(myRegion, shipxyAPI.Ships. INIT_REGION)//创建船
舶区域查询对象
2. 通过 Ships.getShips(callback)方法，请求船舶数据，请求完毕后，将自动调用
callback 函数，返回请求是否成功的状态值，如果返回成功，获取的船舶数据存储在
Ships.data 属性中。具体实现方式同查询指定 ID 的船舶。

3.1.4 查询指定船队的船舶
船队监控的应用主要适合船东、船舶管理、货运代理、物流服务等用户，需要监控某些
特定的船。
船队的组织结构如下：
船舶1
分组1
船舶2
船队
分组2 船舶3
分组n 船舶4
具体实现方式如下：
1. 通过船队管理后台，对船队的船舶进行管理
 登录 http://api.shipxy.com/manager/login.htm 船队后台管理工具；

 向船讯网申请 key 及密码后，登录后台管理工具；
 管理船队船舶分组，并将需要管理的船舶添加在各个分组中；
 分组完成后，可基于船讯网提供的 API，实现船队中的船舶在前端地图中的展
示。
2. 基于数据 API，新建 shipxyAPI.Fleet(initCallback)船队对象实例。
 initCallback：回调函数。构造函数会根据当前使用的 key 向服务器请求船队
列表以完成船队数据的初始化，可通过函数中的回调函数监测成功与否。
3. 船队创建成功后，可通过两种方式获取船舶数据
1) 直接查询船队中的所有船舶数据
A. 基于数据 API，新建 shipxyAPI.Ships(condition,type) 实例，创建船舶数据
查询对象。
 condition：指定的船队名称；
电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第 10 页

 type：查询类型，
按照船队查询，
此处的 type 为 shipxyAPI.Ships.INIT_FLEET。
 创建指定船队的船舶查询示例代码如下：
var fleet = new shipxyAPI.Fleet(function (status) { });//创建船队实例

var fleetShipObj = new shipxyAPI.Ships(fleet, shipxyAPI.Ships.INIT_FLEET);//创建船舶查
询实例
B. 通过 Ships.getShips(callback)方法，请求船舶数据，请求完毕后，将自动调
用 callback 函数，返回请求是否成功的状态值，如果返回成功，获取的船舶
数据存储在 Ships.data 属性中。具体实现方式同查询指定 ID 的船舶
2) 通过查询船队分组获取船舶数据：船队中包含多个分组，可通过 API 首先
获取各个分组，然后在获取分组下的船舶数据。
A. 新建 shipxyAPI.Fleet(initCallback)后，如果回调函数返回成功，则返回
的船队分组的数据存放在 Fleet.data 属性中，其数据结构为 Array
（[group1,group2,group3,...]），数组中每一条数据代表一个船舶分组；
B. 基于 shipxyAPI.Group.data 获取每一个分组下的船舶数据，数据结构如
下：
[{
shipId:’122345’, //船舶 Id
customName:’yulin’, //自定义船名
remarks:’ddddddd’ //备注
},...]
C. 查询船队分组数据示例代码如下：
var myFleet = new shipxyAPI.Fleet(function (status) {
if (status == 0) {//初始化船队列表成功
//船队分组数据
var fleetData = this.data;

} else {//失败
});
3.2 船舶显示
获取船舶数据后，为了实现船舶在地图上的叠加显示，需要使用地图 API-shipxyMap，
1. 利用 shipxyMap.Ship(id,data,options)方法创建船舶覆盖物实例对象。
 id：通常传入船舶数据中的 shipId 属性即可，不必更改或维护；
 data：船舶数据，可通过数据 API-shipxyAPI 请求获得，具体可参见查询船
舶；
 options：ShipOptions 实例，船舶的属性信息，可设置船舶的样式等。具体
请参见船舶样式更改。
2. 利用 shipxyMap.Map.addOverlay(overlay,isTop)将船舶叠加在地图上。

 overlay：创建的 Ship 实例对象；
 isTop：叠加物是否优先显示在最上面。
var ships = new shipxyAPI.Ships(shipId, shipxyAPI.Ships.INIT_SHIPID);//通过船舶ID创建

船舶查询对象
ships.getShips(function (status) {//调用船舶查询方法
var data = this.data;//获取船舶数据
if (status == 0 && data && data.length > 0) {
var d = data[0];
var ship = new shipxyMap.Ship(d.shipId, d);//创建船舶覆盖物对象
map.addOverlay(ship);//叠加船舶，map对已创建的地图对象
3.3 船舶定位
船讯网提供船舶定位功能，可将当前选中的船舶定位在地图中心，便于快速查看船舶位
置。具体实现方式如下：
1. 利用 shipxyMap.Map.locateOverlay (overlay,zoom)方法使对应船舶按照指定
的显示级别定位在地图中心。
 overlay：当前需要定位到地图上的船舶覆盖物；
 zoom：代表定位后船舶显示的缩放级别。
map.locateOverlay(ship);//map为已创建的地图对象；ship为已创建的船舶覆盖物对象
3.4 船舶样式更改
根据用户的自身需求，可更改船舶覆盖的样式，包括船舶显示的颜色、透明度、船舶边
线样式、船舶标签内容及样式等，具体实现方式如下：
1. 在创建船舶覆盖物时，可通过 shipxyMap.ShipOptions 自定义船舶属性信息。

 zoomlevels：控制船舶在地图显示的级别范围，默认[1,18]，表示 1-18 级下
都可以在地图上显示船舶；
 isShowlabel：控制是否显示船舶的船名标签；
 isShowMiniTrack：是否显示船舶的三分钟轨迹；
 strokeStyle：StrokeStyle 实例，控制船舶边线样式。默认是黑色、1 像素粗
细、完全不透明的边线。通过修改 StrokeStyle 的属性可以更改边线颜色、粗
细等；
 fillStyle：FillStyle 实例，控制船舶的填充样式。默认为黄色，完全不透明的
背景填充。通过修改 FillStyle 属性可以更改填充颜色、透明度等；
 labelOptions：LabelOptions 实例，控制船舶的标签风格。默认是 11 号黑
色 Verdana 字体，有黑色的 1 像素粗细并完全不透明的边框，标签内容为
船名。如需要修改标签内容，可更改 LabelOptions 的 htmlText 属性。
//船舶显示样式
var option = new shipxyMap.ShipOptions();//创建船舶属性实例对象
/*边框样式*/
option.strokeStyle.color = 0xff0000;
option.strokeStyle.alpha = 1;
option.strokeStyle.thickness = 2;
/*填充样式*/
option.fillStyle.color = 0x00ff00;
option.fillStyle.alpha = 1;
/*标签样式*/
//标签线条
option.labelOptions.border = true; //有边框
option.labelOptions.borderStyle.color = 0x000000;
option.labelOptions.borderStyle.alpha = 1;
//标签文字
option.labelOptions.fontStyle.name = "Verdana";
option.labelOptions.fontStyle.size = "12";

option.labelOptions.fontStyle.color = 0x000000;
option.labelOptions.fontStyle.bold = true; //粗体
option.labelOptions.fontStyle.bold = true; //斜体
option.labelOptions.fontStyle.underline = true; //下划线
//标签填充
option.labelOptions.background = true; //有背景
option.labelOptions.backgroundStyle.color = 0xffff66; //边框样式
option.labelOptions.backgroundStyle.alpha = 1;
option.isShowLabel = true; //是否显示label
option.isShowMiniTrack = true//船舶自带三分钟轨迹
option.isSelected = true; //船舶框选
option.zoomLevels = [1, 18]; //显示级别
var data = new shipxyAPI.Ship();
data.shipId = "1"
data.name = 'shipName1';
data.callsign = 'BIPE';
data.imo = '0';
data.shipType = '货船';
data.navStatus = '在航（主机推动）';
data.length = 135;
data.beam = 21;
data.draught = 7.3;
data.lat = 32.5;
data.lng = 121.6;
data.heading = 60;
data.course = 80;
data.speed = 13;
data.dest = 'BEH LUN';
data.eta = '6.26 21:00';
data.lastTime = 1340674688;
addshipOverlay = new shipxyMap.Ship("1", data, option);//创建船舶覆盖物
对象
map.addOverlay(addshipOverlay, true);//叠加船舶覆盖物
}

3.5 船舶监听事件及信息框显示
为了在地图上实现船舶的位置信息与属性信息的交互查看功能，提供信息框，实现信息
框的显示与隐藏，将船舶的相关属性信息显示在信息框中；同时用户自身的业务信息也可以
在信息框中进行扩展，实现不同信息的分类管理与查看。具体实现方式如下：
1. 用户可直接利用船讯网提供的信息框样式文件（xwin.css 与 xwin.js 文件）新建
XWin 信息框或者利用 JavaScript 提供的 API 自定义信息框，实现添加信息框的
功能，信息框属性主要包括以下内容：
 modal: 布尔值，代表信息框是否是模态窗口；
 dragbody: 布尔值，代表信息框是否可拖拽；
 width：信息框宽度；
 position：信息框位置；
 title：信息框标题；

 content：信息框内容。
2. 利用船讯网提供的 shipxyMap.Map. addShipEventListener(type,listener)方法，
添加船舶点击注册时间，实现点击船舶查看船舶信息的功能。
//显示船舶信息框
showShipWin: function (data) {
if (!data) { return; }
service.abortSearchTrack(); //取消轨迹查询，若有正在查询的轨迹
if (!shipWin) {
shipWin = new myApp.XWin({//创建信息框
modal: false,
dragbody: true,
width: shipWinWidth - 20,
position: [document.body.clientWidth - shipWinWidth - 10, 100],
//[left,top]
title: '船舶信息',
content: createShipWinContent(), //信息框内容
onhide: function () {
service.abortSearchTrack(); //取消轨迹查询，若有正在查询的轨
迹
service.unselectShip(shipInfo.shipId); //关闭船舶信息框之后，反
选船舶
shipInfo = null;
}
});
//船舶点击事件处理函数
var addShipClickEvent = function () {
var EventObj = shipxyMap.Event;//创建事件实例对象
//调用API的注册船舶事件接口
map.addShipEventListener(EventObj.CLICK, function (event) {
//从缓存中来获取数据
var shipId = event.overlayId;
var ship = map.getOverlayById(shipId);
if (ship) {
service.selectShip(shipId); //框选
view.showShipWin(ship.data); //显示船舶信息框
}
//请求最新数据来展示

var that = this;
var ships = new shipxyAPI.Ships(shipId, shipxyAPI.Ships.INIT_SHIPID);
ships.getShips(function (status) {
if (status == 0) {
var data = this.data[0];
if (data) {
if (ship) ship.data = data;
else ship = new shipxyMap.Ship(data.shipId, data);
service.selectShip(shipId); //框选
view.showShipWin(ship.data); //显示船舶信息框
}
}
});
});
4 轨迹查询及展示
船舶在航行过程中，不断更新船舶动态及航程数据，基于船讯网提供的 API，可以查询
指定船舶指定时间段内的航行轨迹，同时能将轨迹叠加显示在地图上，并能够根据个性化需
求更改轨迹的显示样式及标签等，以更加直观的查看船舶实际的航行状况。
基于数据 API 与地图 API 实现船舶轨迹查询与地图展示的基本流程如下：

创建船舶轨迹查询获取船舶航行轨迹在地图上叠加船舶
实例数据航行轨迹
1) 基于 shipxyAPI 创建船舶轨迹查询实例。
2) 调用 shipxyAPI 提供的查询方法，获取船舶轨迹数据。
3) 结合 shipxyMap 提供的地图显示及叠加覆盖物 API，将获取的船舶轨迹数据叠加在地
图上。
4.1 轨迹查询
船讯网提供船舶轨迹查询 API，可根据船舶 ID、起始时间、结束时间，查询某条船舶
固定时间段内的航行轨迹点数据。具体实现方式如下：
1. 通过 shipxyAPI.Tracks()创建轨迹查询工具实例对象。
2. 通过 shipxyAPI.Tracks. getTrack (shipId, startTime , endTime ,callback)方法查
询并获取某条船舶在某段时间内的航行轨迹数据。
 shipId：船舶的唯一识别码；
 startTime：船舶轨迹数据的起始时间，数据格式为标准的 UTC 时间，细化到
秒；
 endTime：船舶轨迹数据的结束时间，数据格式为标准的 UTC 时间，细化到
秒；
 callback：请求的回调函数，返回请求是否成功的状态值。如果返回成功，获
取的船舶轨迹数据存储在 Tracks.data 属性中。

//月份值表示范围是0‐11
var srtdate = new Date(2012,8,1,0,0)
var enddate = new Date(2012,9,1,0,0)
srtdate = srtdate.getTime() / 1000; //起始时间，秒数
enddate = enddate.getTime() / 1000; //结束时间，秒数
var tracks = new shipxyAPI.Tracks();//创建船舶轨迹查询工具对象
//获取轨迹数据
tracks.getTrack(‘215563000’ ,srtdate, enddate, function (status) {
if (status == 0) {//成功
var data = this.data;//获取数据存储在data中
} else {//失败
}
});
4.2 轨迹显示与定位
获取船舶轨迹数据后，为了实现船舶轨迹在地图上的叠加显示，需要使用地图
API-shipxyMap，具体实现方式如下：
1. 通过 shipxyMap.Track(id, data, options)创建轨迹叠加物对象。
 id：轨迹 id，通常传入轨迹数据中的 trackId 属性即可，不必更改或维护；
 data：shipxyAPI.Track 实例，轨迹数据，包含了轨迹点数据等内容。可通过
轨迹查询获取轨迹数据，具体请参见轨迹查询；
 options： TrackOptions 实例，轨迹的参数选型，可用来定义船舶轨迹的样
式。具体请参见轨迹样式更改。
2. 通过 shipxyMap.Map.addOverlay(overlay,isTop)方法叠加轨迹。
 overlay：创建的 Track 实例对象；
3. 通过 shipxyMap.Map.locateOverlay(overlay,zoom)方法，将指定的轨迹根据轨

迹线的外接矩形范围，以合适的级别自动定位在地图中心。
var tracks = new shipxyAPI.Tracks();//创建船舶轨迹查询工具对象

setTrackMsg('正在查询轨迹，请稍候...');
tracks.getTrack(document.getElementById('shipId').value, srtdate, enddate, function
(status) {//调用getTrack方法获取船舶轨迹点数据
if (status == 0) {
setTrackMsg('');
var data = this.data;//获取的数据存储在Track.data属性中
if (data && data.data.length > 0) {
var opts = new shipxyMap.TrackOptions();
opts.strokeStyle.color = 0x0000ff;
opts.pointStyle.strokeStyle.color = 0x0000ff;
opts.labelOptions.borderStyle.color = 0x0000ff;
var track = new shipxyMap.Track(data.trackId, data, opts);//创建船舶轨迹叠加物对象
map.addOverlay(track);//在地图上叠加船舶轨迹叠加物对象
map.locateOverlay(track);
4.3 轨迹样式更改
用户可根据个性化需求可更改轨迹线的样式、轨迹点的样式、标签样式等。具体实现方
式如下：

1. 在创建船舶轨迹覆盖物时，可通过 shipxyMap.TrackOptions 定义船舶轨迹样式。
 zoomlevels：控制轨迹在地图上所需要显示的级别，默认【1,18】
；
 isShowLabel：控制是否显示时间标签，布尔值 true/false，true 显示，false
不显示。默认为显示；
 isVacuate：在轨迹点数量很大时，为了使轨迹更好的显示在地图上，提供了
对轨迹点进行抽稀处理的接口。isVacuate 为布尔值 true/false，true 需求抽
稀处理，false 不需要抽稀。默认为需要抽稀；
 distance：抽稀间距（像素）
，整数值，当 isVacuate=true 时，此参数才有
效。默认为 50 像素；
 pointStyle：PointStyle 实例，控制轨迹点样式。包括轨迹点半径大小、圆点
填充色等。默认为 4 像素半径大小的白色填充圆点，圆点边线是 1 像素粗细、
黑色；
 strokeStyle：StrokeStyle 实例，控制轨迹线样式，比如线条颜色、粗细等，
默认为 2 像素粗细的黑色完全不透明线条；
 labelOptions：LabelOptions 实例，控制轨迹标签样式，比如字体样式等。
默认是 11 号黑色 Verdana 字体，

有黑色的 1 像素粗细并完全不透明的边框，
标签内容为轨迹点时间，如需要修改标签内容，可更改 LabelOptions 的
htmlText 属性。
var trackData = new shipxyAPI.Track('413695000', 1340701800, 1340702640);

trackData.data = [{ lastTime: 1340701937, from: 0, course: 217, speed: 9.908560311284047,
lat: 30.5595, lng: 122.166833 },
{ lastTime: 1340702077, from: 0, course: 217, speed: 10.007782101167315, lat:
30.554333, lng: 122.162333 },

{ lastTime: 1340702217, from: 0, course: 226, speed: 9.408560311284047, lat:
30.549833, lng: 122.157333}];
var opts = new shipxyMap.TrackOptions();
opts.zoomlevels = [4, 16]; //轨迹显示级别
opts.isShowLabel = true; //显示标签
opts.isVacuate = true; //抽稀
opts.distance = 100; //抽稀间距：100像素
/*****轨迹点样式*****/
opts.pointStyle.radius = 8;
opts.pointStyle.strokeStyle.thickness = 2;
opts.pointStyle.strokeStyle.color = 0xff0000;
opts.pointStyle.strokeStyle.alpha = 0.7;
opts.pointStyle.fillStyle.color = 0x6666ff;
opts.pointStyle.fillStyle.alpha = 0.6;
/*****线条样式*****/
opts.strokeStyle.thickness = 3;
opts.strokeStyle.color = 0x0000ff;
opts.strokeStyle.alpha = 0.8;
/*****标签风格*****/
opts.labelOptions.zoomlevels = [4, 16];
/*****标签字体风格*****/
opts.labelOptions.fontStyle.name = 'Arial';
opts.labelOptions.fontStyle.size = 14;
opts.labelOptions.fontStyle.color = 0x0066A7;
opts.labelOptions.fontStyle.bold = true;
opts.labelOptions.fontStyle.italic = true;
opts.labelOptions.fontStyle.underline = true;
/*****标签边线样式*****/
opts.labelOptions.border = true;
opts.labelOptions.borderStyle.thickness = 2;
opts.labelOptions.borderStyle.color = 0x0066A7;
opts.labelOptions.borderStyle.alpha = 1;
/*****标签背景样式*****/
opts.labelOptions.background = true;
opts.labelOptions.backgroundStyle.color = 0xbbbbbb;
opts.labelOptions.backgroundStyle.alpha = 0.8;
track = new shipxyMap.Track(trackData.trackId, trackData, opts);
}
map.addOverlay(track);
}

5 叠加覆盖物
在实际应用中，结合用户自身的业务，除了船舶数据、轨迹数据等需要监控与查看，有
可能还需要查看港口范围、码头范围等信息，船讯网基于此类需求，提供在地图上叠加点、
线、面等覆盖物的 API 接口，可满足用户自定义叠加覆盖物及显示的需要。
5.1 叠加点
5.1.1 叠加点
当用户需要在地图上添加一个/多个标注或添加港口所在地时，需要利用船讯网提供的
API，根据标注所在的位置，将其叠加显示在地图上。具体实现方式如下：
1. 通过 shipxyMap.Marker(id,data,options)创建点覆盖物对象。
 id：叠加物的唯一识别，如果指定 id，请确保和其他叠加物 id 不同。传入 null
时会自动生成一个唯一识别 id；
 data：点经纬度数据，描述 Marker 显示的位置，其数据结构为 LatLng；
 options：MarkerOptions 实例，为点属性选项信息，可以用来修改点的样式。
未设置时采用默认图标，不显示文本。具体请参见点样式更改。
2. 通过 shipxyMap.Map.addoverlay(overlay,isTop)添加点。
 overlay：创建的 Marke 实例对象；
var data = [];

//DATASTART
data[0] = new shipxyMap.LatLng(37.2, 122);//Marker经纬度

//DATAEND
data = new shipxyMap.LatLng(data[0].lat, data[0].lng);
marker = new shipxyMap.Marker('MyMarker1', data, opts);//创建Marker对象
//添加到地图上显示
map.addOverlay(marker, true); //将Marker叠加在地图上
map.locateOverlay(marker, marker.options.zoomlevels[0])//定位Marker
5.1.2 点样式更改
除了使用船讯网提供的默认 Marker 样式，用户可通过 MarkerOptions 更改 Marker
的样式，具体实现方式如下：
1、新建 MarkerOptions()实例对象，可通过 MarkerOptions 定义点的样式信息。
 zoomlevels：控制点在地图上的显示级别，默认为[1,18]；
 zIndex：控制点在地图上的显示层级。Marker 默认为 3；
 imageUrl：Marker 的图片 URL，不设置此属性时，系统指定默认值。通过更改
URL，可使用用户自己的图片作为标注图显示在地图上，注意 crossdomain.xml
文件。
 imagePos：数据类型为 Point。控制图片中心点相对于标注位置的偏移位置，默
认为(0,0)。向左向上偏移为负，向下向右偏移为正；
 isEditable：控制点是否可以编辑，布尔值 true/false，true 可编辑移动点的位置，
false 不可编辑；
 isShowLabel：控制是否显示标签，布尔值 true/false，true 显示，false 不显示；
 labeloptions：LabelOptions 实例，设置标签文本以及控制标签风格。
2、示例代码如下：
var opts = new shipxyMap.MarkerOptions()//创建Marker样式实例对象

opts.zoomlevels = [5, 12]; //显示级别
opts.zIndex = 4; //显示层级

opts.isShowLabel = true; //是否显示label
opts.isEditable = true; //是否可编辑
opts.imageUrl = '../js/img/mark.png'; //图片URL
opts.imagePos = new shipxyMap.Point(0, 0); //图片偏移量
/*标签样式*/
//标签线条
opts.labelOptions.border = true; //有边框
opts.labelOptions.borderStyle.color = 0xff0000;
opts.labelOptions.borderStyle.alpha = 0.8;
//标签文字
opts.labelOptions.fontStyle.name = 'Verdana';
opts.labelOptions.fontStyle.color = 0xff33cc;
opts.labelOptions.fontStyle.bold = true; //粗体
opts.labelOptions.fontStyle.italic = true; //斜体
opts.labelOptions.fontStyle.underline = true; //下划线
//标签填充
opts.labelOptions.background = true; //有背景
opts.labelOptions.backgroundStyle.color = 0xffccff; //边框样式
opts.labelOptions.zoomlevels = [5, 12]; //显示级别
opts.labelOptions.text = '自定义点';
opts.labelOptions.labelPosition = new shipxyMap.Point(0, 0);
3、实现效果如下：
不可编辑的点可编辑拖动的点

5.2 叠加线
5.2.1 叠加线
当用户需要在地图上添加线条时，需要利用船讯网提供的 API，根据需要显示线条的经
纬度数组，将其叠加显示在地图上。具体实现方式如下：
1. 通过 shipxyMap.PolyLine(id,data,options)创建线覆盖物对象。
 id：叠加物的唯一识别，如果指定 id，请确保和其他叠加物 id 不同，传入 null
时会自动生成一个唯一识别 id；
 data：线叠加层经纬度数据，描述 PolyLine 显示的位置，其数据结构为 Array
经纬度数组。当其内容形如[{lat:0,lng0},{ lat:0,lng0},{ lat:0,lng0}…]时，系统
将会自动转换为 LatLng 数据类型；
 options：PolyLineOptions 实例，可定义并修改线覆盖物的样式。具体请参
见线样式更改。
2. 通过 shipxyMap.Map.addoverlay(overlay,isTop)方法在地图上添加线覆盖物。
 overlay：创建的 PolyLine 实例对象；
 isTop：线叠加物是否优先显示在最上面。
var data = [];

//DATASTART
data[0] = new shipxyMap.LatLng(37.2, 123.2);
data[1] = new shipxyMap.LatLng(36.4, 123);
data[2] = new shipxyMap.LatLng(36, 122);
//DATAEND

polyline = new shipxyMap.Polyline('MyPolyline1', data, opts);//创建线覆盖物实例对象
map.addOverlay(polyline);
map.locateOverlay(polyline, polyline.options.zoomlevels[0]);//定位线覆盖物
}
5.2.2 线样式更改
除了使用船讯网提供的默认线样式，用户可通过 PolyLineOptions 更改线的样式，具
体实现方式如下：
1、新建 shipxyMap.PolyLineOptions 实例，定义线的样式信息。
 zoomlevels：控制线叠加层在地图上所需要显示的级别，默认为[1,18]
 zIndex：控制线在地图上的显示层级。PolyLine 默认为 3；
 strokeStyle： StrokeStyle 实例，控制线的样式，比如线条大小、线条
颜色等。默认为 2 像素粗细的黑色完全不透明线条；
 isEditable：控制线是否可以编辑，布尔值 true/false，true 可编辑移动
线节点的位置，false 不可编辑；
 isShowLabel：控制是否显示标签，布尔值 true/false，ture 显示，false
不显示。默认不显示；
 labelOptions：LabelOptions 实例，设置标签文本以及控制标签风格。
var opts = new shipxyMap.PolylineOptions()//创建线覆盖物样式实例

opts.zIndex = 4; //是否显示label
opts.isShowLabel = true; //是否显示label
/*线样式*/
opts.strokeStyle.color = 0xff3399;

/*标签样式*/
//标签线条
//标签文字
//标签填充
opts.labelOptions.backgroundStyle.alpha = 06;
opts.labelOptions.text = '自定义线';
3、实现效果如下：
不可编辑的线可编辑的线

5.3 叠加面
5.3.1 叠加面
当用户需要在地图上添加港口范围，码头范围时，需要创建面覆盖物，利用船讯网提供
的 API，根据面状覆盖物的覆盖范围，将其叠加显示在地图上。具体实现方式如下：
1. 通过 shipxyMap.Polygon(id,data,options)创建面对象。
 id：叠加物的唯一识别，如果指定 id，请确保和其他叠加物 id 识别不同，传
入 null 时会自动生成一个唯一识别 id；
 data：面覆盖物经纬度数据，描述 Polygon 显示的位置，其数据结构为 Array
经纬度数组。当其内容形如[{lat:0,lng0},{ lat:0,lng0},{ lat:0,lng0}…]时，系统
将会自动转换为 LatLng 数据类型；
 options：PolygonOptions 实例，可定义并修改面覆盖物的样式。具体请参
见面样式更改。
2. 通过 shipxyMap.Map.addoverlay(overlay,isTop)方法在地图上添加面覆盖物。
 overlay：创建的 Polygon 实例对象；
var data = [];

//DATASTART
//DATAEND
polygon = new shipxyMap.Polygon('MyPolygon1', data, opts);//创建面覆盖物实例对象

map.addOverlay(polygon);//在地图上添加面覆盖物
map.locateOverlay(polygon, polygon.options.zoomlevels[0]);//定位面覆盖物
}
5.3.2 面样式更改
除了使用船讯网提供的默认线样式，用户可通过 PolygonOptions 更改面的样式，具
体实现方式如下：
1、新建 shipxyMap.PolygonOptions 对象，可定义面覆盖物样式信息。
 zoomlevels：控制面叠加层在地图上所需要显示的级别，默认为[1,18]；
 zIndex：控制点在地图上的显示层级,默认为 3 级；
 strokeStyle：StrokeStyle 实例，控制面覆盖物线条样式。比如线条大小、线条颜
色等；
 fillStyle：FillStyle 实例，控制面的填充样式，如填充颜色，透明度等；
 isEditable：控制面是否可以编辑，布尔值 true/false，true 可编辑移动面节点的
位置，false 不可编辑；
 isShowLabe：控制是否显示标签，布尔值 true/false，ture 显示，false 不显示。
默认不显示；
 labelOptions：LabelOptions 实例，设置标签文本以及控制标签风格。
/*****面显示样式*****/
var opts = new shipxyMap.PolygonOptions();
opts.zIndex = 4; //是否显示 label
opts.isShowLabel = true; //是否显示 label

/*边框样式*/
opts.strokeStyle.color = 0x000000;
/*填充样式*/
opts.fillStyle.color = 0x0000ff;
opts.fillStyle.alpha = 0.6;
/*标签样式*/
//标签线条
//标签文字
//标签填充
opts.labelOptions.text = '自定义面';

不可编辑的面可编辑的面
5.4 监听覆盖物事件
船讯网提供监听覆盖物的事件，当事件被出发时，执行监听函数注册事件实现方式如下：
1. 通过 shipxyMap. addGraphEventListener (type,listener)方法注册覆盖物事件。
需要在 shipxyMap.mapReady 添加
 type：事件类型。比如监听的事件有点击覆盖物等，具体的事件类型可参见
《船讯网地图 API 开发文档 V1.3.pdf》。
 listener：注册的回调处理函数，当事件被触发时，自动执行此函数。
shipxyMap.mapReady = function () {
//调用API的注册点线面事件接口
map.addGraphEventListener(shipxyMap.Event.CLICK, function (event) {
//从缓存中来获取数据
var graphId = event.overlayId;
});

6 船队管理
除了通过 http://api.shipxy.com/manager/login.htm 船队后台管理工具，实现船队
添加/删除/编辑分组、添加/删除/编辑船舶功能以外，也可以通过 API 实现以上功能。
6.1 添加分组
1. 基于数据 API，新建 shipxyAPI.Fleet(initCallback)船队对象实例。
 initCallback：回调函数。初始化船队列表的回调函数，返回请求是否成功的
状态值。
2. 新建 Group 分组，分别通过 Group.name、Group.color、Group.data 定义分组
的名称与颜色。
 Group.data 数据类型为 Array，默认值为[]，代表每个分组下的船舶数据。需
要定义 shipId 船舶 ID、customName 自定义船名、remarks 备注信息。
3. 在定义分组及分组船舶后，通过 Fleet.addGroup(group,callback)方法添加分组
及相应的船舶数据。
4. 添加分组及船舶示例代码如下：
var newGroup = new Group();
newGroup.name = '集箱船队';
newGroup.color = '#FF6437';
newGroup.data = [{
shipId: '412167000',
customName: '香河',
remarks: 'a1'
}, {

shipId: '412719000',
customName: '向欢',
remarks: 'a2'
}];
//myFleet 代表我的船队列表，一个已知的 Fleet 实例
myFleet.addGroup(newGroup, function
if (status == 0) {//添加新组成功
} else {//失败
})
6.2 添加船舶
如果需要向已有分组添加船舶，可通过以下方式实现：
1. 通过 Fleet.addShip(group,shipObj,callback)方法向已知的分组添加船舶
 group：指定分分组
 shipObj：需要添加到组内的新船舶，数据结构如下：
{shipId:’123’,customName:’aaa’,remarks:’tttttt’}
 callback：添加一条新船之后的回调函数，返回表示是否成功的状态值
//myFleet 代表春对列表
//把船舶'412467550'加入集箱船队的分组
myFleet.addShip(myFleet.getGroup('集箱船队),{
shipId: '412467550',
customName: '丰盛油',
remarks: '丰盛油丰盛油'

}, function (status) {
if (status == 0) {//添加船舶成功
} else {//失败
});
6.3 修改分组及船舶
1. 通过 Fleet.modifyGroup(group,groupObj,callback)方法修改船队的分组信息。
 group：需要修改的组名；groupObj：一个 Object 对象，包含 name 与 color
两个属性；callback：表示修改后的回调函数，返回表示是否成功的状态值
 示例代码如下：
//myFleet 代表我的船队列表，一个已知的 Fleet 实例//把集箱船队修改为货物船队和新颜色
myFleet.modifyGroup(myFleet.get
name: '货物船队',//修改为新组名
color: '#66CDAA'//修改为新组颜色
}, function (status) {
if (status == 0) {//
} else {//失败
});
2. 通过 Fleet.modifyShip(shipObj,group,callback)方法修改分组中的船舶信息。
 shipObj：一个 Object 对象，包含 shipId、customName、remarks 三个属
性；group：指定船的分组；callback：表示修改后的回调函数，返回表示是
否成功的状态值

//myFleet 代表我的船队列表，一个已知的 Fleet 实例
myFleet.modifyShip({ shipId: '412467550’，
customName: '香河',
remarks: 'a1'
},
myFleet.getGroup('油轮船队'),
function (status) {
if (status == 0){
} else {//失败
});
6.4 删除分组及船舶
1. 通过 Fleet.delGroup(group, callback)方法删除船队的分组信息，同时将删除此分组
下的全部船舶。
 group：需要修改的组名； callback：表示删除后的回调函数，返回表示是
否成功的状态值
myFleet.delGroup(myFleet.getGroup(‘集装箱船队’),function(status){
if (status == 0) {//删除组成功
} else {//失败
});
2. 通过 Fleet.delShip(shipId,group,callback)方法从组内删除制定的船舶。
 shipId：船舶 ID；group：指定船的分组；callback：表示删除后的回调函数，

返回表示是否成功的状态值
myFleet.delShip(‘412467550’,myFleet.getGroup(‘集箱船队’),
function (status) {
if (status == 0){
} else {//失败
});
7 气象服务显示
用户申请的 key 需要具有气象服务的权限，才能使用气象服务。当具有气象服务权限
时，在地图上将显示气象/台风/潮汐等天气服务的开启与关闭按钮，点击即可开启气象，再
一次点击则关闭气象。不需要写任何脚本代码。

8 典型应用场景
8.1 港口业务信息显示
8.1.1 船舶信息框显示业务信息
在实际应用中，用户除了关注船舶船位数据外，还关注自己的业务信息。为了实现
船舶信息与业务信息的集中查看，用户可以自己扩展船舶的信息框中的内容及 tab 页
面，增加调度管理等业务信息内容。
根据用户需求，可添加的业务信息如下：
1. 靠离泊计划
船舶信息框中，可显示船舶靠离泊计划内容，包括中文船名、国籍、上一港、下一
港、进口航次、出口航次、预计抵港、实际抵港、预计离港、实际离港、计划靠泊时间、
计划移泊时间、泊位、代理公司、备注、更新时间。
2. 引航作业
港口的调度与引航是密不可分的，在每一个船舶信息框中，可显示引航作业信息，
包括：中文船名、载重吨、船舶类型、首吃水、尾吃水、计划靠泊时间、计划离泊时间、
引航员、上船时间、下船时间、拖轮、泊位、移泊时间、移泊泊位、备注、更新时间。
3. 拖轮作业
船舶信息框中，可显示拖轮作业内容，包括：中文船名、拖轮 1、拖轮 2、拖轮 3、
计划拖带时间、拖带地点、引航员登乘点、引航员下船点、备注、更新时间。
4. 船舶作业计划
船舶信息框中，可显示船舶的作业计划内容，包括：中文船名、装/卸货、货名、

开工时间、总吨、已作业吨位、班次作业吨位、剩余吨位、计划完货时间、实际完货
时间、备注、更新时间。
8.1.2 实现方式
用户可根据实际需要扩展船舶信息框中显示的内容，具体实现方式如下：

1. 在地图上点击船舶图标时，调用 Map.addShipEventListener 方法，获取当前点
击的船舶的 id。
2. 通过当前选中的船舶 id，实现点击船舶后显示相应信息框的功能；同时通过船舶
id 可以获取对应船舶的基本信息及业务信息。
3. 可根据用户自身需要扩展 tab 页面，不同的页面中显示不同信息，如船名、船长、
船宽等基本资料可通过船讯网提供 AIS 信息获取；靠离泊计划、引航作业计划、拖轮
作业计划、船舶作业计划等业务数据，可通过用户自身的业务数据库传入，或者可以允
许有权限的用户直接修改信息框中的业务数据。
8.2 港口码头可视化展示
对于港口相关单位，在多年的生产与管理中积累了大量与位置相关的数据，比如港口码
头堆场等信息的位置，船讯网提供了相应接口，可将用户关注的这些数据以点、线、面的形
式叠加在船讯网海图/地图上，实现可视化展示；同时还可以关联各自的生产作业信息，方
便用户在地图上交互查看位置信息与生产作业信息，直观查看当前码头、堆场、仓库等数据
的地理分布及业务信息等需求。
8.2.1 码头数据展示
在地图上可叠加显示码头各种资源信息，具体叠加的信息如下：
 港口：可查看港口地理位置、气象、水文，规模、能力等信息；

 码头&泊位：可查看码头及泊位的位置分布、码头&泊位名称、泊位长度、泊位等
级、生产信息以及现场动态信息等业务信息；

 锚地：可查看泊位位置、名称、面积、功能等；
 堆场：可查看堆场位置、堆场面积、堆存能力、堆场类别等信息；

 仓库：可查看仓库所属公司、面积、功能、最大承重等；
 储罐：查看储罐所属公司、容量、功能、最大承重等；

 闸口：查看闸口名称、功能、车道数量、地磅数量、配套设施、建成年份、占地面
积、备注等；
 航道：可查看航道位置、航道名称、航段名称、航段编号、航道描述、航段起点、
航段终点、航段水深、最浅水深、航段长度等；

 其他数据：包括桥吊信息、龙门吊、流机、办公楼宇等。
8.2.2 视频展示及调用
为了便于监控港口码头的现实情况，通常在港口码头部署摄像头，可实时监控港口码头
的实际情况。船讯网提供接口，可以在地图上显示摄像头，查看摄像头分布，同时点击摄像
头可直接调取现场的视频。

8.2.3 实现方式
需要在地图上叠加的港口码头摄像头等，可统称为覆盖物，按照船讯网提供叠加物类型，
以上的信息可归属下列分类：
 点状物：摄像头、桥吊信息、龙门吊、流机、办公楼宇、闸口等，对应船讯网的
Marker 类；
 线状物：轨迹线等，对应船讯网的 PolyLine 类；
 面状物：港口、码头、泊位、锚地、堆场、仓库、航道、储罐等，对应船讯网的 Polygon
类。
提示：用户可以根据实际的需求定义覆盖物类型。比如当用户只需要显示港口大概位置，
不需要显示港口覆盖区域时，或者当用户只有港口的位置点信息，而没有港区范围信息
时，可以把港口作为一个 Marker 标注叠加在地图上。
利用船讯网提供的 API，将以上港口码头信息叠加在地图上的基本步骤如下：
1. 用户需要具备港口码头的经纬度坐标数据，经纬度对应船讯网的 LatLng(lat,lng)

类。
 点状物：只需要具备一个点的经纬度即可。比如摄像头、闸口的经纬度信息；
 线状物与面状物：需要具备一组或几组经纬度坐标串。比如港口的地理区域范
围坐标。
2. 用户准备港口、码头、摄像头在地图上的显示图标，显示样式等。
 点状物：比如摄像头在地图上显示的图标。
 线状物与面状物：比如港口显示范围的填充颜色、透明度等。
3. 根据船讯网提供的方法，可创建点、线、面对应的实例对象，即实例化 Marker 、
PolyLine、Polygon，比如需要叠加一个摄像头时，可新建一个 Marker。
4. 通过 Map.addoverlay(overlay,isTop)方法，即可将用户自己的港口、码头、摄像
头等信息以定制的样式叠加显示在地图对应位置上。
5. 如果需要显示港口、码头、摄像头对应的业务信息，比如需要调取摄像头的视频信
息时，需要使用船讯网提供的 Map. addEventListener 方法，表示在点击摄像头
图标时，可根据摄像头 id 获取视频信息，视频信息由用户提供。
8.3 提醒服务
在实际应用中，用户希望能够及时获取船舶的动态，比如当用户指定的船舶进入警戒线
/警戒区域/港口时，或者船舶驶离用户划定的安全区域/港口时，希望能够及时发出提醒，
掌握船舶的信息。船讯网目前暂未提供接口直接实现提醒服务，需要通过数据 API 获取船
舶位置数据，同时与区域坐标进行分析，以此实现此类提醒服务，帮助用户实时监控到动态
事件。

提醒的信息可以以短信或邮件的方式发送到用户对应的手机号或邮箱中。
提醒服务的实现方式如下：
1. 指定需要提醒的船舶：通过船讯网 API，可实时获取指定船舶的位置信息。获取船
舶位置信息的方法可具体查看 3.1 查询船舶
2. 用户自定义提醒区域：用户根据实际需求，自定义警戒区域、警戒线、港口等提醒
区域的坐标范围。区域范围需要用户提供。
可利用船讯网提供 Map.addoverlay(overlay,isTop)方法在地图上叠加显示警戒
区域、警戒线或港口范围。
3. 几何运算：将船舶的实时位置信息与警戒区域、警戒线或港口地理位置进行几何分
析，当船舶的位置在警戒区域、警戒线或港口区域范围内时，及时捕捉到船舶信息。几
何运算部分需要用户代码实现。
4. 用户定义提醒方式：通过代码实现将捕捉到的船舶信息，发送到邮箱或手机中。
提示：到港提醒暂无接口，需要用户对比船舶位置与区域的范围才能实现。
9 常见问题
1. 船讯网提供的 FleetMonitor 船队管理与 RegionMonitor 区域管理示例如何在本
地部署？
a) 替换 key：
编辑 FleetMonitor 与 RegionMonitor 目录下的 index.htm 文件，
将 key 值替换为用户申请的 key
b) 部署在应用服务器：支持 IIS 部署或 Tomcat 部署

 IIS 部署
参考 http://jingyan.baidu.com/article/3065b3b6e5becdbecff8a4d5.html 部署；
部署完毕访问：http://127.0.0.1/index.htm ，或者通过域名/IP 访问
 Tomcat 部署：
直接将 FleetMonitor 与 RegionMonitor 文件夹拷贝到 Tomcat 的
webapps 目录下；
部署完毕访问：http://localhost:8080/FleetMonitor/index.htm ，或
者通过域名/IP 访问
2. 用户自有数据（北斗、海事等）能否调用接口显示在地图上？
a) 用户自有的数据可以通过构造 Ship 或 Track 对象显示在地图上；
b) 自有数据需要模拟成船讯网的 AIS 数据，数据存储需要自行处理。
3. 船舶信息面板可以支持定制吗？
船讯网完全开放船舶信息面板，用户可以根据需求，任意增加信息面板中的 tab
页。
4. 网站服务端需要集群部署，应如何使用船讯网 API？
将集群部署的每台服务器的地址发送船讯网，
由船讯网将 key 与服务器进行绑定。

船讯网API典型应用场景介绍

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

船讯网API典型应用场景介绍

Uploaded by

Copyright:

Available Formats

船讯网 API 典型应用场景介绍 V1.3.

1 船讯网 API 概述 .............................................................................................................. 1

1.1 API 分类 ........................................................................................................... 1

1.2 API 使用 ........................................................................................................... 2

1.2.1 KEY 的申请与使用 ................................................................................... 2

1.2.2 API 运行环境 ........................................................................................... 2

1.2.3 开发演示 ................................................................................................... 2

1.2.4 文档下载 ................................................................................................... 2

2.1 地图基本操作 ................................................................................................... 3

2.2 监听地图事件 ................................................................................................... 4

3.1 查询船舶 ........................................................................................................... 5

3.1.1 模糊查询船舶 ........................................................................................... 6

3.1.2 查询指定 ID 的船舶................................................................................. 7

3.1.3 查询指定区域的船舶 ............................................................................... 8

3.1.4 查询指定船队的船舶 ............................................................................... 9

3.2 船舶显示 ......................................................................................................... 12

3.3 船舶定位 ......................................................................................................... 13

3.4 船舶样式更改 ................................................................................................. 13

3.5 船舶监听事件及信息框显示 ......................................................................... 16

4.2 轨迹显示与定位 ............................................................................................. 20

4.3 轨迹样式更改 ................................................................................................. 21

5.1 叠加点 ............................................................................................................. 24

5.1.1 叠加点 ..................................................................................................... 24

5.1.2 点样式更改 ............................................................................................. 25

5.2 叠加线 ............................................................................................................. 27

5.2.1 叠加线 ..................................................................................................... 27

5.2.2 线样式更改 ............................................................................................. 28

5.3 叠加面 ............................................................................................................. 30

5.3.1 叠加面 ..................................................................................................... 30

5.3.2 面样式更改 ............................................................................................. 31

5.4 监听覆盖物事件 ............................................................................................. 33

6.1 添加分组 ......................................................................................................... 34

6.2 添加船舶 ......................................................................................................... 35

6.3 修改分组及船舶 ............................................................................................. 36

6.4 删除分组及船舶 ............................................................................................. 37

8.1 港口业务信息显示 ......................................................................................... 39

8.1.2 实现方式 ................................................................................................. 40

8.2 港口码头可视化展示 ..................................................................................... 41

8.2.1 码头数据展示 ......................................................................................... 41

8.2.2 视频展示及调用 ..................................................................................... 46

8.2.3 实现方式 ................................................................................................. 47

8.3 提醒服务 ......................................................................................................... 48

提供了 JavaScript 版本的 API，用户可基于 JavaScript API，开发定制化应用。目前船讯网

提供的 API 主要分为两大类：

提示：除了调用 JS 接口可以获取船舶数据，通过 http 接口也可以获取到船舶数据，具

体可参考《船讯网基于 http 请求的原始数据提供.pdf》

在实际应用中，首先可基于数据 API 获取船舶及轨迹数据，然后利用地图 API 将船舶

电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第1页

1.2.1 KEY 的申请与使用

1、 船讯网 API 提供 JavaScript 接口，在开展实际应用中，您需要首先申请密钥（key）

才可成功加载 API JS 文件。申请 key 的方式请具体参考 http://www.shipxy.com/API

中的申请使用项。注意：申请 key 时需要绑定服务部署的 IP 或者域名。

2、 key 的使用方法如下，必须将 key 值替换成用户自己申请的 key，才能正常使用。

1.2.2 API 运行环境

请在 Tomcat 或 IIS 搭建的 Web 应用环境下运行。

为了方便用户理解与使用 API，船讯网提供了主要的开发示例演示 demo，地址为：

相关的 API 使用文档下载地址为：http://www.shipxy.com/API 中的申请使用。

电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第2页

<script src="http://api.shipxy.com/apdll/ap.dll?api=map&key=用户申请的key &ver=1.1"

电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第3页

击地图等，具体的事件类型可参见《船讯网地图 API 开发文档 V1.3.pdf》。

电话:010-82868268 传真：010-82868268-2000 www.shipxy.com 第4页

基于数据 API 与地图 API 实现船舶数据查询与在地图展示船舶的基本流程如下：

创建船舶查询实例 获取船舶数据 在地图上叠加船舶

1、船讯网 API 提供 JavaScript 接口，在开展实际应用中，您需要首先申请密钥（key）

创建船舶查询实例获取船舶数据在地图上叠加船舶