Global

Methods

changeMap(options)

切换地图语言 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
key String

地图 默认值为global 卫星图为satellite 海图为nauticalmap

lang String

地图语言 默认值为cn 英文为en

Example
app.changeMap({lang:'cn',key:'satellite'})

clearSelectedItem()

取消选中状态 示例

Example
app.clearSelectedItem()

closeCurrent()

关闭洋流 示例

Example
app.closeCurrent();

closeCurrentEarthquake()

关闭地震绘制 示例

Example
app.closeCurrentEarthquake()

closeIsoline()

关闭等压线 示例

Example
app.closeIsoline();

closeMap()

关闭底图 示例

Example
app.closeMap()

closePorts(options)

关闭港口 示例

Parameters:
Name Type Description
options Object
Example
app.closePorts();

closeWaveLayer()

关闭气象海浪 示例

Example
app.closeWaveLayer();

closeWeatherMode()

关闭气象模式 示例

Example
app.closeWeatherMode();

closeWind()

关闭风场 示例

Example
app.closeWind();

create(options)

创建sdk实例

Parameters:
Name Type Description
options Object

初始化参数

Properties
Name Type Description
el string

Dom ID 名称

Example
let app = hifleet.create({ el: "map" })
app.destory()//销毁当前地图对象

drawAreaMarker(options)

绘制面标注 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
latlngs- Array.<Array>

经纬度 数组 格式[ [lat,lon],...]

text String

标签文字 必填

popup String

popup显示文案 默认 点击删除

showPopup boolean

显示popup 默认true

style Object

多边形绘制参数

Properties
Name Type Description
strokeStyle- String

边框颜色 默认#2B86C0

fillStyle- String

填充颜色 默认white

globalAlpha- String

填充透明度 默认0.3

Example
let list = [{"text":"quyu","zoneId":40583,
 "popup":"popup content",
 "showPopup":true,
 "style": {
        strokeStyle: 'red',
        fillStyle: 'yellow',
        globalAlpha: '0.8'
      },
"latlngs":[[40.317,120.138],[41.083,121.225],[40.709,122.783],[39.896,124.343],[30.042,124.028],[26.721,122.002],[24.987,120.584],[22.362,118.375],[20.19,112.772],[17.235,112.08],[17.588,107.53],[20.745,107.597],[21.826,107.667],[22.119,110.971],[23.093,115.33],[25.137,118.473],[27.324,119.721],[29.707,121.292],[29.993,120.457],[30.486,119.809],[32.707,120.604],[34.238,120.11],[34.953,118.458],[37.221,121.934],[37.613,120.803],[37.046,119.758],[37,119.289],[37.843,117.582],[39.136,116.738],[39.814,118.461],[40.317,120.138]]},{"text":"1公里报警","zoneId":42247,"latlngs":[[30.969,122.151],[30.97,122.151],[30.972,122.152],[30.974,122.153],[30.975,122.154],[30.976,122.155],[30.977,122.156],[30.977,122.158],[30.978,122.159],[30.978,122.16],[30.978,122.161],[30.978,122.162],[30.978,122.163],[30.978,122.165],[30.977,122.166],[30.977,122.168],[30.976,122.169],[30.975,122.169],[30.974,122.17],[30.973,122.171],[30.972,122.171],[30.97,122.172],[30.969,122.172],[30.968,122.172],[30.967,122.172],[30.965,122.171],[30.964,122.171],[30.963,122.169],[30.962,122.168],[30.961,122.166],[30.96,122.164],[30.96,122.162],[30.96,122.16],[30.961,122.158],[30.961,122.156],[30.962,122.155],[30.963,122.154],[30.965,122.153],[30.966,122.152],[30.968,122.152],[30.968,122.151],[30.969,122.151]]},{"text":"3","zoneId":46250,"latlngs":[[32.102,124.095],[30.039,124.028],[26.739,122.023],[27.33,119.723],[29.709,121.283],[29.986,120.47],[30.474,119.8],[32.179,120.41],[32.102,124.095]]},{"text":"区域标注2","zoneId":46406,"latlngs":[[33.652,127.848],[33.405,128.529],[33.331,128.024],[33.377,127.694],[33.652,127.848]]}]
 app.drawAreaMarker({ list })

drawCurrentEarthquake(options)

绘制最近地震 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
success String

success 成功回调方法

fail String

fail 失败回调方法

Example
app.drawCurrentEarthquake(
 {
   success:(resp)=>{console.log(resp)} ,
   fail:(resp)=>{console.log(resp)} ,
    })

drawIconMarker(options)

绘制点标注带自定义图标 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
labelText string

点标注文字

lat number

纬度 必填

lon number

经度 必填

iconUrl string

标签图标点的url

iconWidth string

标签图标宽度值

iconHeight string

标签图标高度值

html string

鼠标悬停时候显示的内容

Example
app.drawIconMarker({ 
 list:[
{
        labelText: "labelText",
        html: "<div><div style='text-align:right;display:inline-b…px'>2005/08-05 6.5级地震,深度180.0Km</div></div></div>",
        iconUrl: "https://www.hifleet.com/img/images/warningforPC.png",
        lat: -16.2,
        lon: 168.1,
      },
       {
        labelText: "labelText",
        html: "<div><div style='text-align:right;display:inline-b…px'>2005/08-05 6.5级地震,深度180.0Km</div></div></div>",
        iconUrl: "https://www.hifleet.com/img/images/warningforPC.png",
        iconHeight:30,
        iconWidth:30,
        lat: -15,
        lon: 167
      }
    ]// end list
})

drawLineMarker(options)

绘制线标注 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
latlngs Array.<Array>

经纬度数组 数组 格式[ [lat,lon],...]

text number

标签文字 必填

Example
let list = [{ "text": "ftgvbhn", "latlngs": [[16.79906, 124.2469], [15.78674, 129.52034], [14.42914, 133.2469]] }, { "text": "12312", "latlngs": [[18.47418, 153.6551], [16.3273, 164.97542], [17.26966, 171.09261]] }, { "text": "testt5", "latlngs": [[35.99403, 145.02885], [36.14117, 145.78941], [36.36585, 144.46385], [36.14922, 144.0584]] }, { "text": "tes6 ", "latlngs": [[38.01173, 145.37452], [37.34622, 142.7419], [36.98202, 142.92216], [36.8919, 143.8409]] }, { "text": "a", "latlngs": [[37.92878, 146.60913], [37.45856, 144.96127], [36.88135, 144.97569], [36.71722, 145.93459]] }, { "text": "a", "latlngs": [[28.14950321154457, -89.82421875], [18.812717856407776, -84.55078125], [12.382928338487396, -78.22265625], [6.664607562172573, -81.03515625], [3.5134210456400448, -92.28515625], [2.8113711933311403, -103.0078125]] }]
app.drawLineMarker({ list })

drawPointMarker(options)

绘制点标注 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
lat number

纬度 必填

lon number

经度 必填

text number

标签文字 必填

type number

类型 取值 目前4个图标类型 PointMarker-red,PointMarker-H, PointMarker-P,PointMarker-Port

Example
let list = [{
            "lat": 31.943389237366116,
            "lon": 120.1951403049553,
            "text": "停:15h39m",
            "type": "PointMarker-P"
        }, {
            "lat": 29.9854779947243,
            "lon": 122.00241473388456,
            "text": "停:24h41m",
            "type": "PointMarker-P"
        }, {
            "lat": 30.038583867552834,
            "lon": 121.98628659607266,
            "text": "停:13h28m",
            "type": "PointMarker-P"
        }, {
            "lat": 30.981524854211635,
            "lon": 122.34380988284998,
            "text": "停:2h46m",
            "type": "PointMarker-P"
        }, {
            "lat": 32.22575180396365,
            "lon": 119.89905280308784,
            "text": "停:18h30m",
            "type": "PointMarker-P"
        }]
       app.drawPointMarker({ list })

drawPorts()

绘制港口 示例

Example
app.drawPorts();

drawShip(options)

绘制船舶 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
mmsi string

mmsi 必填

lat number

纬度 必填

lon number

经度 必填

course string

航迹向 必填

heading string

船首向 必填

label string

船舶标签内容(注label字段设为空字符串,不绘制label)

html string

鼠标悬停时候显示的内容(注html字段设为空字符串,没有鼠标悬浮内容)

length string

船长

width string

船宽

speed string

航速

color string

绘制的颜色 默认#FFFF66

elToTooltip function

悬浮弹出回调函数 具体参数见一下示例说明

strokeStyle string

船舶边框绘制颜色 设置默认为#000000

iconUrl string

绘制船舶icon

iconHeight string

绘制船舶Height

iconWidth string

绘制船舶Width

nameBackgroundColor string

显示名字背景色

nameColor string

显示名字颜色

nameBackgroundGlobalAlpha string

显示背景透明度

Example
app.drawShip({ 
 list:[{
      mmsi: '235335000',
      name: 'EVER EAGLE',
      lat: 31.377683333333334,
      lon: 121.57395333333334,
      length: '300',
      width: '42',
      course: '180.3',
      heading: '116',
      label: 'text',
      speed: '0',
      color: "#FF13F3",
      html: "html popup"
      elToTooltip:function(opt,next){
        const {
      el,//船舶元素
      map,//船舶所在地图
      latlng,//标签定位
    } = opt || {}
        console.log(opt)
        //定义leaflet marker
        let marker = L.marker([latlng.lat, latlng.lng])
    //按需添加Tooltip
    .bindTooltip('helloworld').openTooltip()
    //添加到地图上
    .addTo(map);
    //回传已自定义marker到sdk地图层
        next(marker)
      }
    },
    {
      mmsi: '305131000',
      name: 'MARCARRIER',
      lat: 31.328033333333334,
      lon: 121.6723,
      length: '142',
      width: '23',
      course: '309',
      heading: '307',
      label: 'text',
      speed: '0',
      html: "html popup",
       elToTooltip:function(opt){
        console.log(opt)
      }
    }]// end list
})

drawShipByMmsi(options)

绘制给定mmsi的当前船位 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
mmsis String

mmsis,字符串,以英文逗号分隔的的船舶mmsi号码,比如 : 123,456,789

labelType String

labelType,字符串,不设置默认为显示船名 设置成mmsi显示mmsi

i18n String

i18n 默认中文 设置cn en

Example
app.drawShipByMmsi(
 {
      mmsis:"412048765,671008100,356581000"
    })

drawTrajectory(options)

绘制轨迹 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
showLabel Boolean

显示轨迹标签

showArrow Boolean

显示轨迹朝向箭头

showPoint Boolean

显示轨迹点

showLine Boolean

显示轨迹线

style Object

轨迹线样式配置

Properties
Name Type Description
trajectoryLineColor String

轨迹线颜色

anchorLineColor String

箭头颜色

list Array.<Object>

列表

Properties
Name Type Description
latlngs Object

列表

Properties
Name Type Description
lat number

纬度 必填

lon number

经度 必填

html string

鼠标悬停时候显示的内容

label string

轨迹标签内容, 不设置该属性或者空字符串 将不显示标签

speed string

轨迹点的速度 当速度小于5节是轨迹线为绿色

lineColor string

轨迹段颜色

anchorLineColor string

箭头颜色

Example
app.drawTrajectory(
 {
    showLabel: true,
    showArrow: true,
    showPoint: true,
    showLine: true,
    "list":[{
        "latlngs": [{
            "lon": "32.550105",
            "lat": "29.75784",
            "speed": "10.5",
            "lineColor":"#9b59b6",
            "anchorLineColor":"#e74c3c",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56949",
            "lat": "29.84906",
            "speed": "0.1",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56884",
            "lat": "29.84868",
            "speed": "0.0",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.56877",
            "lat": "29.848615",
            "speed": "0.0",
            "html": "test",
            "label": "label"
        },
        {
            "lon": "32.561445",
            "lat": "29.86187",
            "speed": "7.8",
            "html": "test",
            "label": "label"
        }]// end latlngs
      }]//end list
    })

drawTrajectoryBy(options)

绘制给定mmsi及时间段内的轨迹 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
mmsi String

mmsi,字符串

starttime String

starttime,北京时间,格式举例:2019-01-02 00:00:00

endtime String

endtime,北京时间,格式举例:2019-01-02 00:00:00

Example
app.drawTrajectoryBy(
 {
      mmsi:"356581000",
      starttime:"2020-07-01 00:00:00",
      endtime:"2020-07-05 00:00:00"
    })

drawTyphoonBy(options)

绘制 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
ids Array

台风序号列表 字符串列表 (注:ids空数组时候清空台风绘制)

Example
app.drawTyphoonBy(
 {
      ids:['202001']
    })

getAreaMarkerTool() → {Object}

开启区域标注 示例

Parameters:
Name Type Description
options.completeCallback function

用户点击地图添加标注回调
({latlngs=[]})=>{}
数组内对象格式为 {lat,lon,lng}

Returns:
Object -

tool 返回tool对象 结束工具调用complete();

Example
const completeCallback = result => {
    const { latlngs } = result || {} //获取绘制多边形经纬度列表
    const arr = latlngs.map(el => [el.lat, el.lng])// {lat,lng,lon}
    const newEl = {
      latlngs: arr,
      text: 'New Line Marker' + parseInt(Math.random() * 100)
    }
  }
  
  let toolApp =   app.getAreaMarkerTool({ completeCallback });
 //编辑多边形
 // 参数格式 
 // { latlngs:[ [{lat},{lng}]]}
    toolApp.setEdit(newEl)

getCurrentTyphoonList(options)

success 回调方法 包含当前活跃台风数组 属性名list

Parameters:
Name Type Description
options Object
Properties
Name Type Description
success String

success 成功回调方法

fail String

fail 失败回调方法

Example
app.getCurrentTyphoonList(
 {
   success:(resp)=>{console.log(resp)} ,
   fail:(resp)=>{console.log(resp)} ,
    })

getLineMarkerTool(options) → {Object}

开启线标注 标注工具加入大圆特性 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
completeCallback function

用户点击地图添加标注回调
({latlngs=[]})=>{}
数组内对象格式为 {lat,lon,lng}

Returns:
Object -

tool 返回tool对象 结束工具调用complete();

Example
const completeCallback = result => {
    const { latlngs } = result || {}//获取线坐标序列
    const arr = latlngs.map(el => [el.lat, el.lng])
    const newEl = {
      latlngs: arr,
      text: 'New Line Marker' + parseInt(Math.random() * 100)
    }
  }
    app.getLineMarkerTool({ completeCallback });

getMap()

获取leaflet 地图对象

Example
app.getMap();

getMeasureAreaTool() → {Object}

测量面积 示例

Returns:
Object -

tool 返回tool对象 结束测距调用complete()方法

Example
let tool = app.getMeasureAreaTool();
// tool.complete();//退出

getMeasureDistanceTool(options) → {Object}

距离测量工具 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
mode Boolean

模式 值为web 和 phone 适配网页操作模式和 移动端操作模式

left Boolean

phone模式距离距离左侧 默认是5px;

top Boolean

phone模式距离距离顶端高度 默认是50px;

Returns:
Object -

tool 返回tool对象 结束测距调用complete()方法

Example
let tool = app.getMeasureDistanceTool();
// tool.complete();//退出

getPointMarkerTool(options) → {Object}

开启点标注 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
completeCallback function

用户点击地图添加标注回调
({latlng={lat,lng,lon}})=>{}

Returns:
Object -

tool 返回tool对象 结束工具调用complete();

Example
const completeCallback = result => {
    const { latlng } = result || {} //获取点击坐标
    const newEl = {
      ...latlng,
      text: 'New Point Marker' + parseInt(Math.random() * 100)
    }
  }
    app.getPointMarkerTool({ completeCallback });

getWeatherTimeList(options)

获得气象时间戳列表 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
success String

获取成功后回调函数

fail String

获取失败回调函数

Example
const success=(resp)=>{
//resp 返回结构为
//{
      //  "forcasttime": [
       //     {
       //       "starttime": "20200812"//预测起点时间
       //       "hours": "000",        // 从起点时间往后预测 几小时
       //       },
        //    {"hours": "000","starttime": "20200812"},
       // ]
     // }

}
const fail =(resp)=>{}
app.getWeatherTimeList({success,fail})

openCurrent(options)

开启洋流 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
starttime String

预报开始时间 参数从getWeatherTimeList接口获取

hours String

预报的第几个小时 参数从getWeatherTimeList接口获取时

Example
app.openCurrent(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openIsoline(options)

开启等压线 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
starttime String

预报开始时间 参数从getWeatherTimeList接口获取

hours String

预报的第几个小时 参数从getWeatherTimeList接口获取

Example
app.openIsoline(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openMap()

开启底图 示例

Example
app.openMap()

openWaveLayer(options)

开启气象海浪 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
starttime String

预报开始时间 参数从getWeatherTimeList接口获取

hours String

预报的第几个小时 参数从getWeatherTimeList接口获取

Example
app.openWaveLayer(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

openWeatherMode()

开启气象模式 示例

Example
app.openWeatherMode();

openWind(options)

开启风场 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
starttime String

预报开始时间 参数从getWeatherTimeList接口获取

hours String

预报的第几个小时 参数从getWeatherTimeList接口获取

Example
app.openWind(
 {
     starttime:"20200706" ,//
  hours:"010",//
    })

setGlobalMapMode()

设置默认地图模式 示例

Example
app.setGlobalMapMode();

setSeaMapMode()

设置海图模式 示例

Example
app.setSeaMapMode();

setSelectedItem(options)

设定选中状态 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
latlng String

latlng 格式 {lat:34,lng:120}

type String

type 类型 'rectangle'为类方形默认值 'point'类方形中间原点 'cross'为十字

Example
app.setSelectedItem({
latlng:{lat:34,lng:120},
type:"point"
})

setSelectedItems(options)

设定多个同时选中状态 示例

Parameters:
Name Type Description
options Object
Properties
Name Type Description
list Array.<Object>

列表

Properties
Name Type Description
latlng Array.<Array>

latlng 格式 {lat:34,lng:120}

type String

type 类型 'rectangle'为类方形默认值 'point'类方形中间原点 'cross'为十字

Example
app.setSelectedItems([{
latlng:{lat:34,lng:120},
type:"point"
},
latlng:{lat:35,lng:120},
type:"rectangle"
}])

Type Definitions

EVENT

EVENT 地图元素点击

Properties:
Name Type Description
HF_CLICK_ON_MAP final

地图点击元素

Example
let map = app.getMap();
 map.on(EVENT.HF_CLICK_ON_MAP, (result) => {
    const {
      item //获取用户点击的对象
    } = result ||{}

  })