# new Ships66.layers.ShipLayer

new Ships66.layers.ShipLayer(vectorOption,option)

ShipLayer继承RenderLayer

参数 说明 类型 可选值 默认值
vectorOption layer/Vector (opens new window)配置项参数 Object - -
option 图层配置项 Object - -

option配置项属性说明

属性 说明 类型 可选值 默认值
updateWhenIdle 定时多久触发请求事件 Number(单位秒) - 15
maxKeepTime 默认保留存活为4小时 Number(单位毫秒) - 7200000
labelMinZoom 在最小层级显示船名 Number - 13
minZoom 显示船舶的最小层级(开区间) Number - 10
trackImg 船舶航迹图片 Image - -

事件说明
事件通过on('事件名','回调函数')触发,详情查阅openlayers (opens new window)

事件名 说明 回调参数
getData 地图移动和updateWhenIdle都会触发该函数 function(e){}
getRenderCount 获取当前视野船舶数量 function(e){}
enter 鼠标悬停在船舶(feature (opens new window))上一秒后触发 function(e){}
leave 鼠标离开船舶触发(在成片的要素中该函数可能不会触发) function(e){}
click 点击船舶触发 function(e){}

# 实例方法


# populate(res){}

渲染船舶入口函数
res格式如下:

{
  "data": [
    {
      "lon":"经度",
      "lat":"纬度",
      "center":["经度","纬度"],
      "mmsi":"",
      "length":"长度",
      "breadth":"宽度",
      "angle":"航向角度",
      "name":"船名",
      "createdAt":"时间戳"
    }
  ]
}

注意

数据入参后船舶不显示一般有如下几点
1:createdAt-new Date().getTime() > maxKeepTime。 船舶的存活时间大于配置项
2:船舶数据无lon、lat或者center中心的数据
3:当前层级小于配置的minZoom


# clearSelectFeature(){}

清除选中效果


# findShip(data,fly=true){}

定位船舶并绘制
data格式为Object类型,对应属性同populate中data属性
fly:地图是否定位到船舶位置,默认为true


  • 船队功能

# populateShipTeam(res)

渲染船队入口 res格式如下:

{
  "data": [
    {
      "lon":"经度",
      "lat":"纬度",
      "center":["经度","纬度"],
      "isTeam":"是否是关注船舶 true/false",
      "fill": "船舶颜色 #ff0000",
      "isShow": "是否显示 0:false; 1:true",
      "mmsi":"",
      "length":"长度",
      "breadth":"宽度",
      "angle":"航向角度",
      "name":"船名",
      "createdAt":"时间戳"
    }
  ]
}


# addShipToTeam(data)

添加船舶到船队中
data : Object,格式为同上res.data中的对象格式


# removeShipFromTeam(mmsi)

从船队中移除船舶
mmsi : 9位码mmsi


# removeShipTeam()

移除整个船队


# setShipFilter(option)

船舶过滤
传入的参数为过滤掉的数据 目前支持的过滤类型:船长度,船类型,船状态,数据来源

长度(length)说明:对应船舶数据中length属性

//要过滤的船长度范围,二维数组包裹
[
  [0,40],//【起始长度,结束长度】
  [41,80],
  //...
]

船类型(shipType)说明:对应船舶数据中shipType属性

{
  "7": "货船",
  "-10":"集装箱船",
  "8":"油轮",
  "5":"拖轮/引航船",
  "3":"渔船",
  "6":"客船",
  "other":"其他"
}

船状态(sailStatus)说明:对应船舶数据中sailStatus属性

{
  "stop":"静止",
  "sail":"航行",
  "work":"作业",
  "danger":"危险",
  "other":"其他"
}

数据来源(from)说明:对应船舶数据中from属性

{
  "S":"卫星",
  "D":"移动基站",
  "B":"基站",
  "O":"其他"
}

option说明

//数据格式如下:
//1:----过滤如下
option = {
  length:[ //过滤船长度,格式为二维数组
    [0,40],
    [41,80]
  ],
  sailStatus:['stop','sail'],//航行状态
  shipType:['7']//船舶类型
}
//2:----如果某个参数不过滤,则不传入该参数 :length和sailStatus不参与过滤
option = {
   shipType:['7']
}
//3:----如果全部参数不过滤,则将filerShip赋值为空对象
option = {}
//4:---只显示我的船队
option = {
   showOnlyTeam:true
}
//5:---自定义船舶长度筛选
option = {
  customLength:[0,25],//显示0到25长度的船  与其他的相反
}

# 使用示例

const shipLayer = new Ships66.layers.ShipLayer({zIndex:100})
const res = {
  data:[
    {
      
    }
  ]
}
shipLayer.populate(res)


# internalData()

定时触发getData回调事件

定时间隔为updateWhenIdle



# stopInternalData()

停止触发getData回调事件


注意

地图交互后如果当前zoom层级大于配置的minZoom,还是会触发定时请求