# new Ships66.layers.TyphoonLayer

new Ships66.layers.TyphoonLayer(vectorOption, option);

TyphoonLayer继承RenderLayer

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

option 配置项属性说明

属性 说明 类型 默认值
hoverEnterCallback 鼠标放入台风点后触发的回调函数 Function (e//元素实例)=>{//要进行的操作}
hoverLeaveCallback 鼠标离开台风点后触发的回调函数 Function (e//元素实例)=>{//要进行的操作}
playEndCallback 台风播放结束后触发的回调函数 Function ()=> {//要进行的操作}
tfGif 台风图标图片 Image tf.gif
playSpd 台风播放间隔 Number(ms) 100
labelLineStyle 标签边框颜色 String 'blue'
labelFillStyle 标签填充颜色 String 'rgba(255,255,255,.5)'
labelTextColor 标签文字颜色 String '#000'
forecast 预测线样式 Object {weight: 2,lineDash: [5, 5],color: '#FF4050'}
colors 各等级台风点、线颜色 Object {TC: '#F6F200',TD: '#F6F200'...}
line24 24 小时警戒线样式 Object {text: '24 小 时 警 戒 线',color: '#DC8B07',weight: 2,fontColor: '#DC8B07',font: '600 14px Arial',line: //坐标点二维数组}
line48 28 小时警戒线样式 Object {lineDash: [5, 5]//其余同 24}
r7q\r10q\r12q 7/10/12 级风圈样式 Object { color: '#F4D000', weight: 2, fillColor: 'RGBA(244,208,0,0.3)' }

# 实例方法

# populate(res, nameObj,toCenter)

添加一个或多个台风到地图

参数 说明 类型
res 渲染的数据 Object
nameObj 台风名数据 Object
toCenter 台风是否定位到地图中心 Boolean

res 格式如下：

{
  "data": {
    "202211": [
      {
        "tid": 100713,
        "tfbh": "202211",
        "dt": 1661666400000,
        "geo": "POINT(149.3 25.9)",
        "mdir": "WNW",
        "mspd": 25,
        "po": 8,
        "pre": 998,
        "r7": 250,
        "r7q": "{\"ne\":230,\"se\":250,\"sw\": 140,\"nw\": 180}",
        "r10": null,
        "r10q": "",
        "r12": null,
        "r12q": "",
        "spd": 18,
        "str": "TS",
        "forecasts": [
          [
            "202211",
            100713,
            81397,
            "中国",
            1661752800000,
            "POINT(143.3 28)",
            "",
            null,
            12,
            975,
            33,
            "TY"
          ]
        ],
        "center": [149.3, 25.9],
        "centerPoint": [16619999.975435747, 2986700.777624982],
        "time": "2022-08-28 14:00:00"
      }
    ],
    "fmap": [
      "tfbh",
      "tid",
      "fid",
      "sets",
      "dt",
      "geo",
      "mdir",
      "mspd",
      "po",
      "pres",
      "spd",
      "str"
    ]
  }
}

nameObj 格式如下：

{
  "202211": "梅花"
}

# renderTyphoon(tfData, tfbh, toCenter, isComplete)

绘制单条台风，可绘制部分路径

参数 说明 类型 示例
tfData 台风数据 Array -
tfbh 台风编号 String '202211'
toCenter 是否要定位到地图中心 Boolean false
isComplete 是否是完整台风路径 Boolean false

tfData格式如下

{
  [
      {
        "tid": 100713,
        "tfbh": "202211",
        "dt": 1661666400000,
        "geo": "POINT(149.3 25.9)",
        "mdir": "WNW",
        "mspd": 25,
        "po": 8,
        "pre": 998,
        "r7": 250,
        "r7q": "{\"ne\":230,\"se\":250,\"sw\": 140,\"nw\": 180}",
        "r10": null,
        "r10q": "",
        "r12": null,
        "r12q": "",
        "spd": 18,
        "str": "TS",
        "forecasts": [
          [
            "202211",
            100713,
            81397,
            "中国",
            1661752800000,
            "POINT(143.3 28)",
            "",
            null,
            12,
            975,
            33,
            "TY"
          ]
        ],
        "center": [149.3, 25.9],
        "centerPoint": [16619999.975435747, 2986700.777624982],
        "time": "2022-08-28 14:00:00"
      }
    ]
}

# removeOneTf(key)

根据台风编号移除台风

参数 说明 类型 示例
key 台风编号 String "202211"

# closeAll()

隐藏台风图层（隐藏警戒线和所有台风）

# playTf(tfbh, status)

播放一个台风的轨迹

参数 说明 类型 示例 可选值
tfbh 台风编号 String "202211" -
status 播放状态 String - 'stop'//中止,'play'//播放,'suspend'//暂停,'continue'//继续

← 图标（IconfontLayer） →