Class: ShipxyAPI

ShipxyAPI

船讯网地图API

船讯网地图API

new ShipxyAPI()
船讯网地图API
See:
  • ElaneMap.min.js
  • ElaneMap.min.css
Example
//依赖:jquery.min.js

//简略示例:
var map = new ShipxyAPI.Map(...);//...省略

Classes

船位展示服务实现类
CanvasShipService
轨迹管理实现类
TrackServiceImpl

Methods


1、 地图插件

<static> Map(map, options)
地图插件,提供地图基本功能。
地图初始化,图源切换、缩放、拖动、测距、鹰眼等功能。
Parameters:
Name Type Description
map Object HTML容器对象
options Object 配置信息
Returns:
Type
L.Map
Example
//html:
//<div id="map"></div>

//javascript:
// 实例化地图
var options = {
     attribution: {isShow: true, emptyString: '&copy;2018 <a class="shipxy_small"></a>&nbsp;<a>Elane Inc.</a>'},// 公司版权信息( 支持html ),默认Elane Inc.
     mapTypes: ['MT_SEA', 'MT_GOOGLE', 'MT_SATELLITE'],// 显示地图类型,'MT_SEA',MT_GOOGLE,MT_SATELLITE,
     ak: "",// 授权码
     defaultMapType: 'MT_SEA',// 默认展示地图类型
     gratings: {isShow: false, maxZoom: 9, type: "RASTER_WORLD"}, // 光栅图,是否显示,最大显示级别,默认:false
     centerPoint: [32.1, 122.11],// 初始中心点坐标
     zoom: 4,// 初始缩放级别
     minZoom: 2,// 最小缩放级别
     maxZoom: 18,// 最大缩放级别
     measureCtrl: {isShow: true, position: 'topleft'},// 测量控件的显示隐藏
     mousePostionCtrl: {isShow: true, position: 'bottomright'},// 鼠标移动悬浮经纬度控件
     zoomControlElane: {isShow: true, position: 'topright'},// 缩放控件的显示隐藏
     zoomviewControl: {isShow: true, position: 'topleft'},// 缩放级别显示控件
     basemapsControl: {isShow: true, position: 'topright'},// 地图切换控件的位置
     mapReadyCallBack: function (map) {},// 地图初始化完成,回调方法
     scaleCtrl: {isShow: true, position: "bottomleft"},// 比例尺,控件
     addTileLayer: [],// 自定义图源
     cjhdTileLayer: {isShow: false},// 是否显示长江航道,默认:false,
     miniMapControl: {isShow: false, options: {}},// 鹰眼控件
     // 默认图源设置(url,errorTileUrl),默认图源类型有:sea、google、satellite
     tileLayer: {
         "sea": {
             url: '//m12.shipxy.com/tile.c?l=Na&m=o&x={x}&y={y}&z={z}',
             errorTileUrl: '//m.shipxy.com/img/erroshipxy.png'
         },
         "google": {
             url: '//mt2.google.cn/vt/lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Gal',
             errorTileUrl: '//m.shipxy.com/img/erroshipxy.png'
         },
         "satellite": {
             url: {
                 12: {
                     // 船讯网瓦片
                     url: '//g1.shipxy.com/tile.g?m=1&x={x}&y={y}&z={z}'
                 },
                 18: {
                     // 谷歌卫星
                     url: '//mt1.google.cn/vt?lyrs=y&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gal'
                 }
             }, errorTileUrl: '//m.shipxy.com/img/erroshipxy.png'
         }
     },
 };
 // 添加自定义图源
  var url = '//mt2.google.cn/vt/lyrs=m@180000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Gal';
  var errorTileUrl = '//m.shipxy.com/img/erroshipxy.png';
  var tileLayer = L.tileLayer(url, {
         attribution: 'Elane Inc.',
         crs: L.CRS.EPSG3857,
         maxZoom: 18,
         minZoom: 2,
         label: '自定义地图',
         id: 'diy_tileLayer_001',
         _name: 'diy_tileLayer_001',
         errorTileUrl: errorTileUrl
     });
  options.addTileLayer.push(tileLayer);

var map = new ShipxyAPI.Map("map", options);

// 手动显示/隐藏光栅
map.setRasterShow(false);// 隐藏光栅
map.setRasterShow(true);// 显示光栅

2、船位展示服务

<static> ShipService(map, options)
船位展示服务,提供船舶显示、添加船舶、选中船舶、定位船舶等功能。
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息
Properties:
Name Type Description
options Object
Properties
Name Type Description
isAutoUpdateSrvtime Object 是否自动更新srvtime,默认:true
enableAreaShip Object 是否自动刷新区域船,默认:true
enableFleetShip Object 是否自动刷新船队船,默认:true
enableDShip Object 是否自动刷新D+船,默认:false
dShipColor Object D+船颜色,默认:#ff6347
enableTracks Object 是否显示近期轨迹,默认:true
topLabelZoom Object 顶层船从第几级开始显示标签,默认:1
generalLabelZoom Object 普通船,从第几级开始显示标签,默认:13
weixingLabelZoom Object 卫星船,从第几级开始显示标签,默认:1
delayTime Object 刷新间隔时间,单位:毫秒
bounds Object 指定区域船,显示区域,默认是地图可视范围
zoomLevel_data Object // 默认值:9,zoom小于等于该值,不检索数据
zoomLevel_base Object // 默认值:9,zoom大于该值,用于船舶分组:baseShips
lableRotate Object // lable旋转角度,默认值:undefined
lableTxtColor Object // 船舶名称,文字颜色,默认值:["#000","#fff"]
lableFont Object // 船舶名称,文字字体,默认值:["'600 12px Arial'", "'500 12px Arial'"]
lableLineColor Object // 船舶名称,文字线框颜色,默认值:["#000","#000"]
getAreaShipsCallBack Object // 区域船外部数据回调,返回CanvasShip对象数组,默认值:undefined
drawShipsEndCallBack Object // 默认值:undefined,绘制区域船后回调,返回对象:{count:number},
shipSizeZoom Object // 船舶缩放比例,默认值:1
shipOptions Object // 船舶模型设置
tooltip_fields Object // tooltip 显示字段设置
Returns:
Type
ShipxyAPI.CanvasShipService | *
Example
// 初始化,区域船服务
// map.shipsService 也会被实例化
var canvasShips = ShipxyAPI.ShipService(map, {
    enableAreaShip: true,
    enableFleetShip: true,
    enableTracks: true,
    delayTime: 5000,
    getAreaShipsCallBack:function(){
        // 区域船外部数据源
        console.log("=====getAreaShipsCallBack===========");
    }
});
// 添加,选中船事件监听
canvasShips.addSelectedListener(function (shipid) {
     alert("shipid:" + shipid);
});

// 也可以这样使用
map.shipsService.addSelectedListener(function (shipid) {
     alert("shipid:" + shipid);
});

3、气象服务

<static> WeatherService(map)
气象服务
1、气温
2、气压
3、风
4、台风
5、潮汐
Parameters:
Name Type Description
map L.Map 地图对象
Returns:
Type
Weather
Example
// 全局参数覆盖
ShipxyOptions.weather.icon_base_url = "//api.shipxy.com/h5/elanemap/images/";// 气象图标存放URL

// 实例化气象服务
var weather = ShipxyAPI.WeatherService(map); // map.weatherService 也会被实例化
// 显示气温面
weather.showTempTile();

// 也可以这样使用
map.weatherService.showTempTile();


// 更多,气象设置
map.weatherService.showTempTile("2018-05-15 20:00:00");  // 显示气温面
map.weatherService.hideTempTile();  // 隐藏气温面

map.weatherService.showPressureTile("2018-05-15 20:00:00");  // 显示气压面
map.weatherService.hidePressureTile();  // 隐藏气压面

map.weatherService.showSeaBreezes("2018-05-15 20:00:00");  //  显示海风符号
map.weatherService.hideSeaBreezes();  //  隐藏海风符号

map.weatherService.showSeaWaves("2018-05-15 20:00:00");  // 显示海浪符号
map.weatherService.hideSeaWaves();  // 隐藏海浪符号

map.weatherService.showSeaWater("2018-05-15 20:00:00");  // 显示海流符号  未实现
map.weatherService.hideSeaWater();  // 隐藏海流符号

map.weatherService.showRainFall("2018-05-15 20:00:00");  // 显示降水符号
map.weatherService.hideRainFall();  // 隐藏降水符号

map.weatherService.showSeaAreaForecasts();  // 显示海区预报
map.weatherService.hideSeaAreaForecasts();  // 隐藏海区预报

map.weatherService.showTyphoonInfoList();  // 显示台风列表控件
map.weatherService.hideTyphoonInfoList();  // 隐藏台风列表控件

map.weatherService.showTides();  // 显示潮汐预报
map.weatherService.hideTides();  // 隐藏潮汐预报

map.weatherService.showWindFiel("2018-05-15 20:00:00");  // 显示风场
map.weatherService.hideWindFiel();  // 隐藏风场

map.weatherService.hideAll();  // 隐藏所有显示


// 获取鼠标位置,经纬度对应的气象数据
var data = map.weatherService.getLatLngWeather("12",latlng,"2018-05-15 20:00:00");

4、轨迹服务

<static> TrackService(map, options)
轨迹服务,船舶轨迹查询、轨迹的显示等功能
Parameters:
Name Type Description
map L.Map 地图对象
options Object 设置信息
Example
// 开启轨迹服务
var trackS = ShipxyAPI.TrackService(map);
......
// lableFields
// "name": "船名:{1}<br/>",
// "mmsi": "MMSI:{1}<br/>",
// "sog": "速度:{1}节<br/>",
// "cog": "航迹向:{1}度<br/>",
// "utc": "时间:{1}<br/>",
// "kn": "距起点距离:{1}海里<br/>",
// "ed": "距终点距离:{1}海里<br/>",
// "md": "下一段航程:{1}海里<br/>"
......

// 单条轨迹的设置信息
var options = {
               lineColor: 'blue',// 轨迹线颜色
               circleOverColor: 'yellow',// 拐点,鼠标滑过时的颜色
               dash: false,// 是否为实线,true:实线,false:虚线,默认:实线
               startShow: false,// 是否显示“起点”图标,默认值:true
               endShow: false,// 是否显示“终点”图标,默认值:true
               directionShow: true,// 轨迹方向三角是否展示,默认值:false
               isDilute: true,//是否抽稀,默认值:true
               isEnablePlayer: true,//是否需要播放轨迹,默认值:false
               isShowLable: false,//是否显示lable,默认值:true
               lableFields : ["name", "mmsi", "sog", "cog", "utc", "kn", "md"],// lable显示的字段
               tipHideTimeOut : 5000,// 轨迹/航线,tip 超时关闭时间设置,默认:8000
               startCircleType : 2,// 起始圆圈样式类型,0:不显示,1:同心圆,2:普通圆圈,与拐点相同,默认:1
               endCircleType : 2,// 结束圆圈样式类型,0:不显示,1:同心圆,2:普通圆圈,与拐点相同,默认:1
               startCircleColor : "#fff",// 起始圆圈填充色,默认:'#06c84a'
               endCircleColor : "#fff",// 结束圆圈填充色,默认:'#f70006'
              };
// 添加轨迹并显示,如果,设置了需要播放,会显示播放器
var ship = {
          name: mmsi,
          mmsi: mmsi,
          length: 450,
          width: 100
      };
var trackcur = map.trackService.addAndShow(truck_id, trackDatas, options, ship);

5、航线绘制服务

<static> trackDrawSymbol(map, options, items)
航线绘制服务,提供显示航线、绘制航线、删除航线等功能。
Parameters:
Name Type Description
map L.Map 地图对象
options Object 设置信息
items array 航线节点数组(非必填),[{id:(非必填),name:(非必填),lat:(必填),lng:(必填),cog:航向(非必填)}]
Returns:
L.TrackDrawSymbol 航线绘制对象
Example
var options = {
                   callBack: function (item) {
                       console.log("====航线绘制 callBack===", item);
                   },
                   unit: "nm",
                   symbol: "ABC_",
                   lineColor: "#E000BB"
               };
// 创建航线绘制对象
var trackDraw = ShipxyAPI.trackDrawSymbol(map, options);
......
// 航线绘制,绘制
trackDraw.drawTrack();
......
// 航线绘制,编辑
trackDraw.editLine();
......
// 航线绘制,只读模态展示,
trackDraw.showTrack();
......
// 航线绘制,只读模态展示,显示已有航线数据
var item = [{id:(非必填),name:(非必填),lat:(必填),lng:(必填),cog:航向(非必填)}];
trackDraw.showTrack(items);
......
// 航线绘制,删除
trackDraw.removeTrack();

6、特殊区域展示服务

<static> areaViewSymbol(map, options)
特殊区域展示服务
1、排放控制区
2、排放控制区(中国)
3、专属经济区
4、全球时区
5、全球海区
6、临海基线
Parameters:
Name Type Description
map L.Map 地图对象
options Object 设置信息
Returns:
L.AreaViewSymbol 区域展示/隐藏对象
Example
// 全球海区:GSEA,排放控制区:TYP,排放控制区(中国):CTYP,专属经济区:EEZ,时区:TIME

var options = {
                 // 全球海区数据URL
               gsea_url: "//api.shipxy.com/h5/demo/data/globalSeaAreaSymbol_area.json",
                 // 排放控制区数据URL
               typ_url: "//api.shipxy.com/h5/demo/data/typhoon_area.json",
                 // 排放控制区(中国)数据URL
               ctyp_url: "//api.shipxy.com/h5/demo/data/chinaDischargeAreaSymbol_area.json",
                 // 专属经济区数据URL
               eez_url: "//api.shipxy.com/h5/demo/data/exclusiveEconomicZoneSymbol_area.json",
                 // 是否显示名称,默认:true
               isShowName:true
           };
// showName属性,目前仅“专属经济区”起作用
//
var areaViewSymbol = ShipxyAPI.areaViewSymbol(map, options);

// 显示,全球海区:GSEA
map.areaViewSymbol.showArea("GSEA");

// 隐藏,全球海区:GSEA
map.areaViewSymbol.hideArea("GSEA");

// 显示,排放控制区:TYP
map.areaViewSymbol.showArea("TYP");

// 隐藏,排放控制区:TYP
map.areaViewSymbol.hideArea("TYP");

// 显示,排放控制区(中国):CTYP
map.areaViewSymbol.showArea("CTYP");

// 隐藏,排放控制区(中国):CTYP
map.areaViewSymbol.hideArea("CTYP");

// 显示,专属经济区:EEZ
map.areaViewSymbol.showArea("EEZ");

// 隐藏,专属经济区:EEZ
map.areaViewSymbol.hideArea("EEZ");

// 显示,时区:TIME
map.areaViewSymbol.showArea("TIME");

// 隐藏,时区:TIME
map.areaViewSymbol.hideArea("TIME");

// 显示,临海基线:BLINE
map.areaViewSymbol.showArea("BLINE");

// 隐藏,临海基线:BLINE
map.areaViewSymbol.hideArea("BLINE");

// 隐藏所有
map.areaViewSymbol.hideArea();

7、港口展示服务

<static> portDataSymbol(map, options)
港口展示服务,全球港口展示。
Parameters:
Name Type Description
map L.gMap 地图对象
options Object 设置信息{WEB_MERCATOR_URL: "WEB墨卡托URL", WEB_MERCATOR_GCJ02_URL: "WEB墨卡托纠偏URL"}
Returns:
L.PortDataSymbol 港口图层对象
Example
// 如果没有特殊需要可以不设置
var options = {
               WEB_MERCATOR_URL: "//portsrv.shipxy.com/tiles/wm/{0}-{1}-{2}.png",
               WEB_MERCATOR_GCJ02_URL: "//portsrv.shipxy.com/tiles/wmgcj/{0}-{1}-{2}.png"
           };
var portDataSymbol = ShipxyAPI.portDataSymbol(map, options);

// 或
var portDataSymbol = ShipxyAPI.portDataSymbol(map);


// 显示
portDataSymbol.show(); // 或 map.portDataSymbol.show();

// 隐藏
portDataSymbol.hide(); // 或 map.portDataSymbol.hide();

8、船位回放服务

<static> areaPlayService(map, options)
船位回放服务,提供指定区域、指定时间段的,船位回放功能。
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息
Properties:
Name Type Description
options Object
Properties
Name Type Description
playSpeed Object 播放倍速,播放秒数=真实秒数,默认:60
beginTime Object 开始位置(毫秒),默认:0(起始位置)
playCallBack Object 播放时间后回调,默认:null
minTime Object 开始时间,秒,默认:0
maxTime Object 结束时间,秒,默认:0
getDataByURL Object 数据获取URL,默认:""
area Object 区域,整数型经纬度逗号分割字符串,默认:""
areaId Object 区域ID,默认:""
Returns:
Type
L.AreaPlayService
Example
var areaPlayService = ShipxyAPI.areaPlayService(map, {
              getDataByURL: "//192.168.1.22:8083/AreaPlay/GetData",
              areaId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx3",
              area: "121534582,31361372,121630627,31361372,121630627,31416852,121534582,31416852",
              minTime: 1532558937,
              maxTime: 1532658937
          });

9、自定义瓦片图层服务

<static> customeTileLayerService(map, options)
自定义瓦片图层服务
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息
Properties:
Name Type Description
options Object
Properties
Name Type Description
url Object 瓦片URL,必填
opacity Object 瓦片透明度,默认:0.7
tileFunction Object 自定义瓦片URL编辑方法
Returns:
Type
*
Example
// 开启自定义瓦片图层服务
ShipxyAPI.customeTileLayerService(map);
// 添加自定义自定义瓦片图层
var options = {
          attribution: '',
          maxZoom: 9,
          label: '光栅图',
          errorTileUrl: '//m.shipxy.com/img/erroshipxy.png',
          tileFunction : function (view) {
           var url = '//r-g.shipxy.com/r/sp.dll?cmd=112&scode=11111111&x={x}&y={y}&z={z}';
           var _url = url
               .replace('{x}', view.tile.column)
               .replace('{y}', view.tile.row)
               .replace('{z}', view.zoom);
           return _url;
          },
};

map.customeTileLayerService.addLayer(options);

10、船舶检索服务

<static> seachShipService(map, divid, options)
船舶检索服务,提供内置的船舶检索输入框,进行船舶检索。
Parameters:
Name Type Description
map Map 地图对象
divid string div容器ID
options Object 配置信息
Properties:
Name Type Description
options Object 配置信息
Properties
Name Type Description
itemClickCallBack Object 点击结果回调函数,返回:mmsi
Returns:
Type
*
Example
ShipxyAPI.seachShipService(map,"my_seach_ship_box",{
     itemClickCallBack:function(mmsi){
             console.log("my_seach_ship_box mmsi="+mmsi);
         }
});

11、历史航次服务

<static> voyageService(map, options)
历史航次服务
1、查询当前航次数据
2、查询历史航次数据
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息
Returns:
Type
*
Example
ShipxyAPI.voyageService(map);

// 查询当前航次数据
map.voyageService.getCurrentByUrl(mmsi, function(result){
 // todo
});
// 查询历史航次数据
map.voyageService.getHisByUrl(mmsi, btime, etime, function(result){
 // todo
});

12、经纬度网格服务

<static> cjhdLayerServer(map, options)
长江航道图层服务
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息,非必填
Properties:
Name Type Description
options.url Object 瓦片地址,非必填
options.error_url Object 瓦片异常地址,非必填
options.dataCJ9 Object 9级瓦片网格范围,非必填
options.m_types Object 瓦片异常地址,非必填
options.minZoom Object 最小缩放级别,非必填
options.maxZoom Object 最大缩放级别,非必填
Returns:
Type
*
Example
var options = {
     url: "",
     error_url: "",
     m_types: {"MT_SEA": "m", "MT_GOOGLE": "d", "MT_SATELLITE": "w"},
     minZoom: 9,
     maxZoom: 18,
   };
ShipxyAPI.cjhdLayerServer(map);// 初始化,options可以为空,默认显示
map.cjhdLayerServer.show();// 显示
map.cjhdLayerServer.hide();// 隐藏

12、经纬度网格服务

<static> latlngGraticuleServer(map, options)
经纬度网格服务,显示经纬度网格。
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息
Returns:
Type
*
Example
var options = {
       showLabel: true,
       weight: 0.8,
       color1: "#666",// 非卫星地图,线颜色
       color2: "#bbb",// 卫星地图,线颜色
       fontColor1: "#333",// 非卫星地图,字颜色
       fontColor2: "#fff",// 卫星地图,字颜色
       dashArray: [0, 0],
       latFormatTickLabel:CanvasShipUtils.latFormatter,
       lngFormatTickLabel:CanvasShipUtils.lngFormatter,
       zoomInterval: [
           {start: 2, end: 2, interval: 60},
           {start: 3, end: 3, interval: 30},
           {start: 4, end: 4, interval: 15},
           {start: 5, end: 5, interval: 7.5},
           {start: 6, end: 6, interval: 4},
           {start: 7, end: 7, interval: 2},
           {start: 8, end: 8, interval: 1},
           {start: 9, end: 9, interval: 0.5},
           {start: 10, end: 10, interval: 0.25},
           {start: 11, end: 11, interval: 0.125},
           {start: 12, end: 12, interval: 0.0625},
           {start: 13, end: 13, interval: 0.033333333},
           {start: 14, end: 14, interval: 0.016666666666},
           {start: 15, end: 15, interval: 0.008333333},
           {start: 16, end: 16, interval: 0.004166667},
           {start: 17, end: 17, interval: 0.002083333},
           {start: 18, end: 18, interval: 0.001041667}
       ]
   };
ShipxyAPI.latlngGraticuleServer(map,options);// 初始化,options可以为空
ShipxyAPI.latlngGraticuleServer(map).show();// 显示
ShipxyAPI.latlngGraticuleServer(map).hide();// 隐藏

13、气压等值线

<static> weatherChoroplethServer(map, options)
气压等值线
Parameters:
Name Type Description
map Map 地图对象
options Object 配置信息,非必填
Returns:
Type
*
Example
var options = {};
ShipxyAPI.cjhdLayerServer(map);// 初始化,options可以为空,默认显示
map.cjhdLayerServer.show();// 显示
map.cjhdLayerServer.hide();// 隐藏

14、区域船舶轨迹回放服务

<static> AreaTrackReplayService(map, options)
区域船舶轨迹回放服务
Parameters:
Name Type Description
map L.Map 地图对象
options Object 设置信息
Returns:
Type
ShipxyAPI.AreaReplayService | *