# 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,还是会触发定时请求
← 经纬度转换 轨迹(TrackLayer) →