# new Ships66.layers.TrackLayer
new Ships66.layers.TrackLayer()
实例属性说明
属性名 | 说明 |
---|---|
layers | 存放轨迹 Collection (opens new window) |
事件说明
事件通过实例对象.layers.on('事件名','回调函数')触发,详情查阅openlayers (opens new window)
事件名 | 说明 | 回调参数 |
---|---|---|
enter | 鼠标悬停在轨迹点(feature (opens new window))上一秒后触发 | function(e){} |
leave | 鼠标离开轨迹点触发(在成片的要素中该函数可能不会触发) | function(e){} |
//示例
const tarckLayer = new Ships66.layers.TrackLayer()
tarckLayer.layers.on('enter',e=>{
console.log(e)
})
# 实例方法
# pushLayer(res,mmsi,option,renderOption) => {Vector}
添加单条轨迹到地图
返回值继承layer/Vector (opens new window)
参数 | 说明 | 类型 |
---|---|---|
res | 渲染的数据 | Object |
mmsi | 轨迹的mmsi | String |
option | layer/Vector (opens new window)配置项参数 | Object |
renderOption | 配置项,见下方说明 | Object |
res格式如下:
WARNING
mmsi数组需要按照降序排列;如果是用船顺提供的轨迹接口(时间生序),需要自行reverse()一下
{
"mmsi": [
{
"lon":"经度",
"lat":"纬度",
"speed": "航速",
"cog": "航向",
"createdAt": "时间戳",
"sailStatus": "航行状态"
},
{
"lon":"经度",
"lat":"纬度",
"speed": "航速",
"cog": "航向",
"createdAt": "时间戳",
"sailStatus": "航行状态",
"state": "停/慢"
}
]
}
TIP
停/慢标识通过res数组对象中state字段来判断,state字段为0时为停止状态,为1时为缓慢状态 不传则没有状态标识
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
startEndIcon | 始末点图标 | String(Unicode) | - |
startColor | 起始点图标颜色 | String | #fcdc3f |
endColor | 结束点图标颜色 | String | #ff0000 |
dropletsIcon | 航行状态背景图标 | String (Unicode) | |
stopIcon | 停止状态图标 | String (Unicode) | |
slowIcon | 缓慢状态图标 | String (Unicode) | |
stopColor | 停止状态图标颜色 | String | #E31818 |
slowColor | 缓慢状态图标颜色 | String | #1890FF |
arrowIcon | 箭头图标 | String (Unicode) | - |
trackColor | 轨迹颜色 | String | #00ff00 |
realColor | 轨迹播放过的颜色 | String | #999 |
labelLineStyle | 标签线颜色 | String | #000 |
labelLineStyle | 标签线颜色 | String | #000 |
labelTextColor | 标签字体颜色 | String | #000 |
# setAtLayer(i, result, mmsi, option, renderOption)
更新单条轨迹
i : 要更新的轨迹数组中的索引,其他参数同pushLayer
# getTrackLayer(i) => {layer}
根据索引获取轨迹
返回:轨迹实例 | null
# removerLayer(i)
根据索引删除轨迹
# removeAllLayer()
删除所有轨迹
# setAllTrackVisible(visible)
设置所有轨迹显示状态
visible : true|false
# setLayerInactive(i)
设置索引轨迹处于激活状态
# 轨迹的播放
❗️ 以下的方法都需要先获取单个轨迹的实例 getTrackLayer(i)
# handlePlay
播放轨迹
# handlePause(isEnd)
暂停或结束轨迹
isEnd : 是否结束播放 true|false
# setSpeed(num)
设置轨迹播放速度